/* Family Mosaic — page styles, from the "Family Mosaic.dc.html" design.
   Everything takes its values from the Broadsheet tokens in ds/broadsheet/styles.css. */

a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Full-width page. The side padding slides 8px (phone) -> 48px (desktop):
   linear between 640px and 1440px viewports, pinned at the ends. */
.album-page { padding: 28px clamp(8px, 5vw - 24px, 48px) 96px; }

/* — header — */
.album-header { margin-bottom: 40px; }
.album-title-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.album-title {
  font-family: var(--font-heading); line-height: 1.02;
  /* 36px on a phone, sliding up to the design's 64px from ~800px viewports on */
  font-size: clamp(36px, 8vw, 64px);
  font-weight: 700; margin: 0; max-width: 680px; text-wrap: pretty;
}
.album-title-row .btn { flex: none; }

/* — video (only tenants with a non-empty APP_VIDEO_URL_<name> get one) — */
.album-video { margin: 24px auto 0; max-width: 880px; }
.album-video iframe {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border: 0; border-radius: var(--radius-md); background: var(--color-text);
}

/* — mosaic — */
.mosaic {
  display: grid;
  /* Column count follows the viewport instead of a fixed 6: auto-fill packs as
     many tracks as fit (no predefined max on desktop) and 1fr stretches them to
     fill the row. The minimum tile width slides 92px -> 190px with the viewport,
     so phones start at 3 columns and the count only ever grows with width. */
  grid-template-columns: repeat(auto-fill, minmax(clamp(92px, 12vw, 190px), 1fr));
  grid-auto-rows: 108px; grid-auto-flow: dense;
}
.mosaic-tile {
  border: 0; font: inherit; text-align: left; cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex; align-items: flex-end; padding: 8px 10px;
  position: relative; overflow: hidden;
  background: var(--color-surface); /* shows until the photograph arrives */
}
.mosaic-tile > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.mosaic-tile:hover { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.mosaic-tile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* The design's span rhythm (an exclusive else-if chain over the 0-based index,
   here as 1-based :nth-child): i%13==0 -> 2x2, else i%7==3 -> wide, else i%9==5 -> tall */
.mosaic-tile:nth-child(13n+1) { grid-column: span 2; grid-row: span 2; }
.mosaic-tile:nth-child(7n+4):not(:nth-child(13n+1)) { grid-column: span 2; }
.mosaic-tile:nth-child(9n+6):not(:nth-child(13n+1)):not(:nth-child(7n+4)) { grid-row: span 2; }
.mosaic-tile-num { font-size: 11px; font-style: italic; color: var(--color-neutral-600); position: relative; }

/* — lightbox — */
.lightbox {
  position: fixed; inset: 0; padding: 24px;
  background: color-mix(in srgb, var(--color-text) 92%, transparent);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 50; animation: fadeIn 0.2s ease;
}
.lightbox[hidden] { display: none; }
/* the stage takes all the viewport height the controls leave free,
   and the photograph fills it up to its native resolution */
.lightbox-stage {
  flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-photo {
  max-width: 100%; max-height: 100%;
  border-radius: var(--radius-md);
}
/* The strip is two groups — the prev/counter/next trio and the play/close pair —
   so on narrow screens they wrap as whole rows instead of clipping off-screen. */
.lightbox-controls {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 20px; margin-top: 24px; color: var(--color-bg);
}
.lightbox-nav, .lightbox-actions { display: flex; align-items: center; gap: 20px; }
.lightbox-controls .btn { white-space: nowrap; }
.lightbox-counter { font-size: 14px; font-style: italic; min-width: 90px; text-align: center; }
@media (max-width: 600px) {
  .lightbox { padding: 12px; }
  .lightbox-controls { margin-top: 12px; gap: 8px 16px; }
  .lightbox-nav, .lightbox-actions { gap: 10px; }
  .lightbox-counter { min-width: 76px; }
}
.lightbox-close { color: var(--color-bg); }
/* The design gives the controls row — and, explicitly, the Close ghost — the
   paper ink on the dark overlay; .btn's own text color would leave the
   secondary buttons near-black on near-black, so they take the same ink here. */
.lightbox-controls .btn-secondary {
  color: var(--color-bg);
  border-color: color-mix(in srgb, var(--color-bg) 35%, transparent);
}
.lightbox-controls .btn-secondary:hover { background: color-mix(in srgb, var(--color-bg) 10%, transparent); }
.lightbox-controls .btn-secondary:active { background: color-mix(in srgb, var(--color-bg) 18%, transparent); }