/* Cottage gallery: lead tile, curated grid, room-grouped lightbox.
   Palette and type come from style.css. British English, no em dashes. */

/* ------------------------------------------------- the cottage page hero */
/* The lead image is a real <img> rather than a CSS background, so it can be
   preloaded and given fetchpriority. It sits where .hero__bg used to. */
.hero__photo { position: absolute; inset: 0; z-index: 0; }
.hero__photo picture { display: block; width: 100%; height: 100%; }
.hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------- the section */
.cottage-gallery {
  padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 80px);
  background: var(--warm-cream);
}
.cg__inner { max-width: 1200px; margin: 0 auto; }
.cg__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--deep-forest);
  letter-spacing: 0.01em;
  margin: 0 0 clamp(20px, 3vw, 32px);
}

/* Tiles are buttons, so strip the chrome and keep the photo the whole control. */
.cg__tile {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: var(--cotswold-stone);
  cursor: pointer;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 3 / 2;
}
.cg__tile picture { display: block; height: 100%; }
.cg__img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); transition: transform 240ms ease-out; }
.cg__tile:hover .cg__img { transform: scale(1.04); }
.cg__tile:focus-visible { outline: 3px solid var(--aged-brass); outline-offset: 3px; }

/* The break from the default uniform mat: one tile leads at full width. */
.cg__tile--lead { aspect-ratio: 2 / 1; margin-bottom: clamp(12px, 1.6vw, 18px); }

.cg__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 18px);
}
/* Give the first grid tile a second of the visual weight, so the row reads as
   composed rather than as four identical cards.
   The geometry has to close exactly: a tile spanning two columns is
   2 columns + 1 gap wide, and spanning two rows is 2 rows + 1 gap tall, so the
   square tiles make those equal and the block has no dead space in it. Leave
   the small tiles at 3:2 and the two short rows come up 190px short of the tall
   tile, which the grid pays for with a visible hole. */
.cg__grid > .cg__tile { aspect-ratio: 1 / 1; }
.cg__grid > .cg__tile:first-child { grid-column: span 2; grid-row: span 2; }

.cg__more { margin: clamp(24px, 3vw, 36px) 0 0; text-align: center; }
.cg__all {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--deep-forest);
  background: transparent;
  border: 1px solid var(--cotswold-stone);
  border-radius: 2px;
  padding: 14px 30px;
  min-height: 48px;
  cursor: pointer;
  transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}
.cg__all:hover { background: var(--deep-forest); border-color: var(--deep-forest); color: var(--warm-cream); }
.cg__all:focus-visible { outline: 3px solid var(--aged-brass); outline-offset: 3px; }

/* Two columns below 1000px. A two-by-two span would be a full-width square
   there, which is far too tall on a phone, so the first tile becomes one
   full-width landscape band instead. */
@media (max-width: 1000px) {
  .cg__grid { grid-template-columns: repeat(2, 1fr); }
  .cg__tile--lead { aspect-ratio: 3 / 2; }
  .cg__grid > .cg__tile:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2; }
}

/* ---------------------------------------------------------- the lightbox */
.cglb[hidden] { display: none; }
.cglb {
  position: fixed;
  inset: 0;
  /* Above the fixed nav, which this theme puts at 1000 and 1001. The retired
     inline lightbox used 2000 for the same reason; anything lower lets the nav
     float over an open gallery and swallow clicks on the room chips. */
  z-index: 2000;
  /* Opaque, not a tint: at 96 per cent the nav links and the floating Book Now
     button stayed legible behind the photographs and read as part of the
     gallery furniture. */
  background: #141C16;
  opacity: 0;
  transition: opacity 200ms ease-out;
}
.cglb.is-open { opacity: 1; }
.cglb__panel { position: absolute; inset: 0; display: flex; flex-direction: column; }

.cglb__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px clamp(12px, 2vw, 24px);
  border-bottom: 1px solid rgba(250, 247, 242, 0.14);
  flex: 0 0 auto;
}
.cglb__count {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--cotswold-stone);
  margin: 0;
  flex: 0 0 auto;
  min-width: 5.5em;
}
.cglb__rooms {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  flex: 1 1 auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cglb__rooms::-webkit-scrollbar { display: none; }
.cglb__room {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--warm-cream);
  background: transparent;
  border: 1px solid rgba(250, 247, 242, 0.22);
  border-radius: 999px;
  padding: 9px 15px;
  min-height: 44px;
  cursor: pointer;
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}
.cglb__room:hover { background: rgba(250, 247, 242, 0.1); }
.cglb__room[aria-current="true"] { background: var(--aged-brass); border-color: var(--aged-brass); }
.cglb__n { opacity: 0.6; margin-left: 4px; }

.cglb__close {
  flex: 0 0 auto;
  font-size: 2.2rem;
  line-height: 1;
  width: 48px;
  height: 48px;
  color: var(--warm-cream);
  background: none;
  border: none;
  cursor: pointer;
}

.cglb__stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: clamp(8px, 2vw, 24px);
}
.cglb__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-height: 100%; }
.cglb__figure picture { display: block; min-height: 0; }
.cglb__img {
  max-width: min(94vw, 1600px);
  max-height: 76vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  background: rgba(250, 247, 242, 0.06);
}
.cglb__cap {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--cotswold-stone);
  text-align: center;
  max-width: 62ch;
  padding: 0 12px;
}

.cglb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--warm-cream);
  background: rgba(20, 28, 22, 0.5);
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.cglb__prev { left: clamp(4px, 1vw, 16px); }
.cglb__next { right: clamp(4px, 1vw, 16px); }
.cglb__nav:hover { background: rgba(20, 28, 22, 0.8); }

.cglb button:focus-visible { outline: 2px solid var(--warm-cream); outline-offset: 2px; }

/* The photo the visitor clicked flies from its own box to the stage, so the
   overlay reads as that photo growing rather than appearing from nowhere. */
.cglb__img.is-flying { transform-origin: top left; will-change: transform; }

@media (max-width: 600px) {
  .cglb__img { max-height: 66vh; }
  .cglb__nav { display: none; }   /* swipe instead, and the bar keeps the count */
  .cglb__count { min-width: 4.5em; font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cg__img,
  .cg__all,
  .cglb,
  .cglb__room,
  .cglb__img { transition: none !important; }
  .cg__tile:hover .cg__img { transform: none; }
}