/* 2026-09-08 | The Retreat, Carlingford | gallery page
   ------------------------------------------------------------------
   Its own stylesheet rather than more rules in site.css: the gallery is one page
   out of two, and nothing here is wanted anywhere else. site.css and
   responsive.css load first and still supply the masthead, footer, buttons and
   type, so this file only adds the grid and the lightbox.
   ------------------------------------------------------------------ */

/* ---------- page head ---------- */

.galleryhead { padding: var(--gap) 0 1.6rem; text-align: center; }
.galleryhead h1 { margin-bottom: .5rem; }
.galleryhead .eyebrow { margin-bottom: 1rem; }
.galleryhead .eyebrow a { text-decoration: none; color: var(--ink-faint); }
.galleryhead .eyebrow a:hover { color: var(--ink); }
/* the intro line is centred, so it cannot use the 66ch measure p inherits */
.galleryhead__sub { max-width: 52ch; margin-inline: auto; }

/* the wordmark becomes a link back to the house on this page */
.wordmark__link { text-decoration: none; color: inherit; display: block; }

/* ---------- the grid ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .7rem;
  padding-bottom: var(--gap);
}

/* Each photograph is a <button>, not a <div> or a bare <img>: it opens the
   lightbox, so it has to be reachable by keyboard and announce itself to a screen
   reader. A div with a click handler does neither. */
.shot {
  padding: 0; border: 0; margin: 0; background: var(--paper-alt);
  cursor: zoom-in; overflow: hidden; display: block; position: relative;
  aspect-ratio: 4 / 3;
}
.shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease, opacity .3s ease;
}
.shot:hover img,
.shot:focus-visible img { transform: scale(1.04); }
.shot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* A portrait photograph in a 4:3 hole loses its top and bottom to the crop. Giving
   the first tile of each row-pair a taller box would be prettier but would make the
   grid depend on how many photographs there are, which changes every time someone
   drops one in. A uniform crop stays predictable, and the lightbox shows the whole
   frame. */

.gallery__foot {
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center;
  padding-bottom: var(--gap); max-width: none;
}

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr auto auto;
  align-items: center; justify-items: center;
  gap: .5rem 1rem;
  padding: 1.2rem;
  background: rgba(23, 22, 20, .94);
}
.lightbox[hidden] { display: none; }

.lightbox__img {
  grid-column: 2; grid-row: 1;
  max-width: 100%; max-height: 78vh;
  width: auto; height: auto;
  object-fit: contain;
  background: #171614;
}

.lightbox__close {
  position: absolute; top: .8rem; right: 1rem;
  background: none; border: 0; cursor: pointer;
  font-size: 2rem; line-height: 1; color: rgba(255,255,255,.75);
  padding: .2rem .5rem;
}
.lightbox__close:hover { color: #fff; }

.lightbox__nav {
  background: none; border: 0; cursor: pointer;
  font-size: 1.6rem; color: rgba(255,255,255,.65);
  padding: .8rem .6rem; grid-row: 1;
}
.lightbox__nav:hover { color: #fff; }
.lightbox__nav--prev { grid-column: 1; }
.lightbox__nav--next { grid-column: 3; }

.lightbox__caption {
  grid-column: 2; grid-row: 2; margin: .6rem 0 0; max-width: 62ch;
  text-align: center; font-size: .88rem; color: rgba(255,255,255,.82);
}
.lightbox__count {
  grid-column: 2; grid-row: 3; margin: 0;
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Someone who has asked their system for less motion should not get a zooming
   thumbnail every time the pointer crosses one. */
@media (prefers-reduced-motion: reduce) {
  .shot img { transition: none; }
  .shot:hover img, .shot:focus-visible img { transform: none; }
}

/* ---------- narrow screens ---------- */

@media (max-width: 720px) {
  .gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .4rem; }
  /* the arrows would sit on top of the photograph at this width, so they move under it */
  .lightbox {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto auto auto;
    padding: 3rem .8rem 1.2rem;
  }
  .lightbox__img { grid-column: 1 / -1; grid-row: 1; max-height: 62vh; }
  .lightbox__caption { grid-column: 1 / -1; grid-row: 2; font-size: .8rem; }
  .lightbox__count { grid-column: 1 / -1; grid-row: 3; }
  .lightbox__nav { grid-row: 4; font-size: 1.3rem; }
  .lightbox__nav--prev { grid-column: 1; justify-self: end; }
  .lightbox__nav--next { grid-column: 2; justify-self: start; }
}