/* =========================================================
   Spirited Lina — lightbox + data-driven additions
   Loaded AFTER css/style.css. Nothing in style.css is changed.

   House rules respected here:
     · --radius is 0 — everything stays rectangular
     · no `padding` shorthand on anything carrying .wrap
     · no overflow-x:hidden on html/body, ever
     · tap targets 44px+
   ========================================================= */

/* =========================================================
   1. Thumbnails are <button>s now (so keyboard + screen readers
      get Enter/Space and a real role). Strip the button chrome
      so they look exactly like the original divs.
   ========================================================= */

button.r,
button.tile {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: var(--cream-2);
  cursor: zoom-in;
}
button.tile { margin: 0 0 var(--gap); }

button.r:focus-visible,
button.tile:focus-visible {
  outline: 2px solid var(--fern);
  outline-offset: 3px;
}

/* The mosaic tiles size their image to the tile's aspect ratio. */
button.r > img { width: 100%; height: 100%; object-fit: cover; }

/* Collection tiles keep their natural height inside the masonry columns. */
button.tile > img { width: 100%; height: auto; display: block;
  transition: transform .7s cubic-bezier(.2,.7,.2,1); }
button.tile:hover > img { transform: scale(1.035); }

/* Video treatment for mosaic tiles on the home page — same look the
   collection page already gets from .tile--video in style.css. */
.r--video { position: relative; }
.r--video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(28,26,20,.16);
}
.r--video .play {
  position: absolute; z-index: 4; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 54px; height: 54px;
  background: rgba(239,232,219,.94);
  display: grid; place-items: center;
}
.r--video .play::after {
  content: "";
  width: 0; height: 0;
  margin-left: 3px;
  border-left: 14px solid var(--ink);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}

/* Video collections read better in wide columns. */
.masonry--video { columns: 2 320px; }

/* The MENU button is the one control on a phone that was under the
   44px comfortable-tap floor. Nudged here rather than in style.css. */
.nav__toggle { min-height: 44px; }

/* The brand logo and the footer link row are standalone tap targets
   whose text is only ~17px tall. On phones we grow the *hit* area to
   44px with an invisible centred overlay, so nothing moves and nothing
   looks different - the finger just gets a fairer box to land in.
   (Inline links inside a sentence are deliberately left alone: padding
   them out would make them overlap the words above and below.) */
@media (max-width: 860px) {
  .brand,
  .footer__links a { position: relative; }

  .brand::after,
  .footer__links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }
}

/* =========================================================
   2. No-JavaScript note
   ========================================================= */

.nojs {
  padding-top: 2rem;
  padding-bottom: 2rem;
  color: var(--ink-soft);
}
.nojs strong { color: var(--ink); }

/* =========================================================
   3. THE LIGHTBOX
   ========================================================= */

.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}
.lb.is-open { display: block; }

.lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(243,238,229,.93);
}

.lb__dialog {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  color: var(--ink);
}

/* ---------- top bar: counter + close ---------- */

.lb__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem clamp(.9rem, 2.4vw, 1.6rem);
  border-bottom: 1px solid rgba(44,42,36,.14);
}
.lb__counter {
  margin: 0;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.lb__close {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
  min-width: 48px;
  padding: 0 1rem;
  border: 1px solid rgba(44,42,36,.28);
  background: rgba(44,42,36,.04);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.lb__close span[aria-hidden] { font-size: 1.5rem; line-height: 1; }
.lb__close:hover { background: rgba(44,42,36,.10); border-color: rgba(44,42,36,.55); }

/* ---------- body: media | info ---------- */

.lb__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(268px, 26vw, 380px);
  gap: clamp(.8rem, 2vw, 1.6rem);
  min-height: 0;
  padding: clamp(.8rem, 2vw, 1.4rem) clamp(.9rem, 2.4vw, 1.6rem) clamp(1rem, 2.4vw, 1.8rem);
}

.lb__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
}

.lb__media {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.lb__img {
  max-width: 100%;
  /* A percentage max-height has to travel back up through .lb__media and
     the .lb__stage grid item to find a definite height, and browsers treat
     that chain as indefinite — the photo then ignored the cap and ran past
     the bottom of a short window. Measuring off the viewport instead is
     unambiguous: the bar plus the body padding cost about 8rem, so this
     leaves a small margin under it. */
  max-height: calc(100vh - 8.5rem);
  width: auto;
  height: auto;
  object-fit: contain;
  background: rgba(44,42,36,.05);
}

/* video embed — 16:9, never wider than the stage */
.lb__frame {
  /* Same reasoning as .lb__img: derive the width cap from the viewport
     height so the 16:9 box can never be taller than the stage. */
  width: min(100%, calc((100vh - 8.5rem) * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000;
}
.lb__iframe { width: 100%; height: 100%; border: 0; display: block; }

/* a film with no link yet */
.lb__pending {
  display: grid;
  gap: .9rem;
  justify-items: center;
  max-height: 100%;
  min-height: 0;
}
.lb__pending .lb__img { min-height: 0; max-height: 58vh; }
.lb__pending-note {
  margin: 0;
  max-width: 46ch;
  text-align: center;
  font-size: .86rem;
  color: var(--muted);
}

/* ---------- prev / next ---------- */

.lb__nav {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(44,42,36,.22);
  background: rgba(252,249,244,.82);
  color: var(--ink);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.lb__nav:hover { background: var(--cream); border-color: rgba(44,42,36,.5); }
.lb__nav--prev { left: 0; }
.lb__nav--next { right: 0; }
.lb__nav[hidden] { display: none; }
.lb__nav span { position: relative; top: -3px; }

/* ---------- info panel ---------- */

.lb__info {
  min-width: 0;
  align-self: start;
  border-left: 1px solid rgba(44,42,36,.14);
  padding-left: clamp(.9rem, 2vw, 1.5rem);
}
.lb__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.2;
  margin: 0 0 1rem;
  color: var(--ink);
}
.lb__specs { margin: 0 0 1.6rem; }
.lb__spec {
  padding: .7rem 0;
  border-bottom: 1px solid rgba(44,42,36,.14);
}
.lb__spec:first-child { padding-top: 0; }
.lb__spec dt {
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .28rem;
}
.lb__spec dd {
  margin: 0;
  font-size: .95rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.lb__socials-label {
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .5rem;
}
.lb__social {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  min-height: 44px;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(44,42,36,.14);
  color: var(--ink);
}
.lb__social-label {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lb__social-handle { font-size: .95rem; overflow-wrap: anywhere; }
.lb__social:hover .lb__social-handle { color: var(--fern); }

.lb__close:focus-visible,
.lb__nav:focus-visible,
.lb__social:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
}

/* =========================================================
   4. Lightbox — tablet and phone
      The info panel stacks UNDER the media and the whole dialog
      scrolls if it runs long. The dialog is its own scroll
      container, so iOS body scrolling is never involved.
   ========================================================= */

@media (max-width: 860px) {
  /* Plain block flow when stacked — NOT grid.
     The dialog is position:absolute inset:0, so it has a definite height,
     and CSS grid shrinks `auto` tracks below their content to fit that
     height. The photo has a fixed max-height and does not shrink with it,
     so it spilled over the info panel. Normal flow cannot do that: the
     content sets the height and the dialog simply scrolls. */
  .lb__dialog {
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .lb__bar {
    position: sticky;
    top: 0;
    z-index: 6;
    background: rgba(243,238,229,.96);
  }
  .lb__body { display: block; }

  /* The stage stays a grid so the photo stays centred, but it is now
     height:auto and sizes itself to the picture. */
  .lb__stage { min-height: 0; }
  .lb__media { height: auto; min-height: 0; }
  .lb__pending { max-height: none; }
  .lb__img,
  .lb__pending .lb__img { max-height: 60vh; }
  .lb__frame { width: 100%; max-width: 100%; }
  .lb__info {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(44,42,36,.14);
    padding-top: 1.1rem;
    margin-top: 1.1rem;
  }
}

@media (max-width: 640px) {
  .masonry--video { columns: 1 200px; }

  .lb__close-word { display: none; }        /* the × alone, still 48px */
  .lb__close { padding: 0; justify-content: center; }
  .lb__nav { width: 46px; height: 46px; font-size: 1.7rem; }
  .lb__img,
  .lb__pending .lb__img { max-height: 56vh; }
  .lb__title { font-size: 1.05rem; }
}

/* =========================================================
   5. Motion preferences
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  button.tile > img,
  button.r > img { transition: none; }
}