/* Photo albums: album cards, the mixed-shape mosaic, the lightbox and the single photo page.
   Builds on blog.css for the centered page head and the preview notice. */

.visually-hidden-heading { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.photo-empty { padding: 40px 0; text-align: center; color: var(--text-muted); }

/* ---------- Album list ---------- */
.photo-albums { padding-top: 56px; padding-bottom: 96px; }
.photo-album-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; margin: 0; padding: 0; list-style: none; }
.photo-album-link { display: flex; flex-direction: column; gap: 14px; color: var(--ink); text-decoration: none; }
.photo-album-link:hover { text-decoration: none; }
.photo-album-cover { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--cream); transition: border-color 200ms ease-out, box-shadow 200ms ease-out; }
.photo-album-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-album-link:hover .photo-album-cover, .photo-album-link:focus-visible .photo-album-cover { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange); }
.photo-album-link:focus-visible { outline: none; }
.photo-album-body { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.photo-album-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 500 0.85rem 'Space Grotesk', sans-serif; color: var(--text-muted); font-feature-settings: "tnum"; }
.photo-album-title { font: 600 1.3rem/1.2 'Space Grotesk', sans-serif; letter-spacing: -0.01em; }
.photo-album-link:hover .photo-album-title { color: var(--orange-deep); }

/* ---------- Album head ---------- */
.photo-crumbs + .blog-index-head { padding-top: 40px; }
.photo-album-eyebrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.photo-album-credits { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin: 0; color: var(--text-muted); }
.photo-album-credits strong { color: var(--ink); font-weight: 600; }
.photo-album-credits a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Mosaic ----------
   A puzzle of designed blocks. Every block is a 12-column grid whose rows are as tall as a
   column is wide, fully tiled by rounded squares, portrait and landscape rectangles.
   PhotoMosaic.Layout picks the block for the next photos; the slot positions are below
   (grid-area: row / column / span rows / span columns). */
.photo-mosaic-wrap { --mosaic-gap: 12px; container-type: inline-size;
  max-width: calc(1240px + 2 * var(--gutter)); margin: 0 auto; padding: 56px var(--gutter) 96px; }
.photo-mosaic { display: grid; gap: var(--mosaic-gap); }
.mosaic-block {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: calc((100cqi - 11 * var(--mosaic-gap)) / 12);
  gap: var(--mosaic-gap); margin: 0; padding: 0; list-style: none;
}
.mosaic-tile { min-width: 0; min-height: 0; }

.block-a .slot-1 { grid-area: 1 / 1 / span 4 / span 6; }
.block-a .slot-2 { grid-area: 1 / 7 / span 3 / span 2; }
.block-a .slot-3 { grid-area: 1 / 9 / span 2 / span 2; }
.block-a .slot-4 { grid-area: 1 / 11 / span 2 / span 2; }
.block-a .slot-5 { grid-area: 3 / 9 / span 4 / span 4; }
.block-a .slot-6 { grid-area: 4 / 7 / span 3 / span 2; }
.block-a .slot-7 { grid-area: 5 / 1 / span 2 / span 3; }
.block-a .slot-8 { grid-area: 5 / 4 / span 2 / span 3; }

.block-b .slot-1 { grid-area: 1 / 1 / span 6 / span 4; }
.block-b .slot-2 { grid-area: 1 / 5 / span 3 / span 4; }
.block-b .slot-3 { grid-area: 1 / 9 / span 3 / span 4; }
.block-b .slot-4 { grid-area: 4 / 5 / span 3 / span 3; }
.block-b .slot-5 { grid-area: 4 / 8 / span 3 / span 3; }
.block-b .slot-6 { grid-area: 4 / 11 / span 3 / span 2; }

.block-c .slot-1 { grid-area: 1 / 1 / span 2 / span 2; }
.block-c .slot-2 { grid-area: 1 / 3 / span 2 / span 2; }
.block-c .slot-3 { grid-area: 1 / 5 / span 3 / span 2; }
.block-c .slot-4 { grid-area: 1 / 7 / span 4 / span 6; }
.block-c .slot-5 { grid-area: 3 / 1 / span 4 / span 4; }
.block-c .slot-6 { grid-area: 4 / 5 / span 3 / span 2; }
.block-c .slot-7 { grid-area: 5 / 7 / span 2 / span 3; }
.block-c .slot-8 { grid-area: 5 / 10 / span 2 / span 3; }

.block-d .slot-1 { grid-area: 1 / 1 / span 3 / span 4; }
.block-d .slot-2 { grid-area: 1 / 5 / span 3 / span 4; }
.block-d .slot-3 { grid-area: 1 / 9 / span 6 / span 4; }
.block-d .slot-4 { grid-area: 4 / 1 / span 3 / span 2; }
.block-d .slot-5 { grid-area: 4 / 3 / span 3 / span 3; }
.block-d .slot-6 { grid-area: 4 / 6 / span 3 / span 3; }

.block-e .slot-1 { grid-area: 1 / 1 / span 4 / span 3; }
.block-e .slot-2 { grid-area: 1 / 4 / span 2 / span 2; }
.block-e .slot-3 { grid-area: 1 / 6 / span 2 / span 3; }
.block-e .slot-4 { grid-area: 1 / 9 / span 4 / span 4; }
.block-e .slot-5 { grid-area: 3 / 4 / span 2 / span 3; }
.block-e .slot-6 { grid-area: 3 / 7 / span 2 / span 2; }

/* the last photos: even rows of two landscapes or three squares */
.block-tail .tail-wide { grid-column: span 6; grid-row: span 4; }
.block-tail .tail-square { grid-column: span 4; grid-row: span 4; }
.block-tail .tail-solo { grid-column: span 12; grid-row: span 6; }

.mosaic-link { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: var(--r-media); background: var(--cream); transition: box-shadow 200ms ease-out; }
.mosaic-link img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1); }
.mosaic-link:hover, .mosaic-link:focus-visible { box-shadow: 0 0 0 3px var(--orange); outline: none; }
.mosaic-link:hover img { transform: scale(1.03); }


/* album footer: share the album, then how to ask for a removal */
.photo-album-foot { display: flex; flex-direction: column; align-items: center; gap: 28px; max-width: 60ch; margin: 72px auto 0; padding-top: 40px; border-top: 1px solid var(--border); text-align: center; }
.photo-album-share { display: flex; flex-direction: column; align-items: center; }
.photo-album-share .share-row, .photo-album-head-share .share-row { justify-content: center; }
.photo-album-head-share { margin-top: 4px; }

/* ---------- Photo details (lightbox panel and photo page) ---------- */
.photo-details { display: flex; flex-direction: column; gap: 18px; }
.photo-counter { margin: 0; font: 500 0.85rem 'Space Grotesk', sans-serif; color: var(--text-muted); font-feature-settings: "tnum"; }
.photo-caption { margin: 0; font-size: 1.15rem; line-height: 1.5; }
.photo-facts { display: grid; gap: 12px; margin: 0; }
.photo-facts div { display: grid; gap: 2px; }
.photo-facts dt { font: 500 0.72rem 'Space Grotesk', sans-serif; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); }
.photo-facts dd { margin: 0; font-weight: 500; }
.photo-facts a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.photo-facts a:hover { color: var(--orange-deep); }
.photo-facts [hidden] { display: none; }
.photo-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.photo-share { margin-top: 0; }
.photo-removal { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.photo-removal a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Lightbox ---------- */
.modal-overlay.photo-lightbox { padding: 0; background: rgba(22, 19, 14, 0.94); }
.photo-lightbox-dialog { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 360px; width: 100%; height: 100dvh; }
.photo-lightbox-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 40px 88px; touch-action: pan-y; }
.photo-lightbox-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r-media); background: rgba(245, 244, 236, 0.06); transition: opacity 160ms ease-out; }
.photo-lightbox-img.is-loading { opacity: 0.35; }
.photo-lightbox-nav { position: absolute; top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-top: -26px; padding: 0; border: 1.5px solid rgba(245, 244, 236, 0.3); border-radius: 50%; background: rgba(245, 244, 236, 0.08); color: var(--ink-inverse); cursor: pointer; transition: border-color 200ms ease-out, background-color 200ms ease-out; }
.photo-lightbox-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.photo-lightbox-nav:hover, .photo-lightbox-nav:focus-visible { border-color: var(--orange); background: var(--orange); outline: none; }
.photo-lightbox-nav.is-prev { left: 20px; }
.photo-lightbox-nav.is-next { right: 20px; }
.photo-lightbox-nav[hidden] { display: none; }
.photo-lightbox-panel { min-height: 0; overflow-y: auto; padding: 72px 28px 32px; background: var(--surface); }
.photo-lightbox-close { position: absolute; top: 18px; right: 18px; z-index: 2; }

/* ---------- Single photo page ---------- */
.photo-page { max-width: calc(1240px + 2 * var(--gutter)); margin: 0 auto; padding: 40px var(--gutter) 96px; }
.photo-page .blog-preview { margin: 0 auto 32px; }
.photo-page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.photo-page-figure { position: relative; margin: 0; display: flex; justify-content: center; padding: 24px; border-radius: var(--r-card); background: var(--cream); }
.photo-page-figure img { display: block; max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain; border-radius: var(--r-media); }
.photo-page-nav .photo-lightbox-nav { border-color: var(--border); background: var(--surface); color: var(--ink); }
.photo-page-nav .photo-lightbox-nav:hover, .photo-page-nav .photo-lightbox-nav:focus-visible { border-color: var(--orange); background: var(--orange); color: #fff; }
.photo-page-nav .is-prev { left: -18px; }
.photo-page-nav .is-next { right: -18px; }
.photo-page-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }

@media (max-width: 900px) {
  .photo-album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-lightbox-dialog { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .photo-lightbox-stage { padding: 64px 16px 16px; }
  .photo-lightbox-nav { top: auto; bottom: 24px; margin-top: 0; width: 44px; height: 44px; }
  .photo-lightbox-panel { max-height: 42dvh; padding: 22px 20px 28px; }
  .photo-lightbox-close { background: var(--surface); }
  .photo-page-grid { grid-template-columns: 1fr; gap: 28px; }
  .photo-page-nav .is-prev { left: 8px; }
  .photo-page-nav .is-next { right: 8px; }
}
/* phones: the blocks flow into one two-column grid. Rows are half a column tall, so a
   square is 1x2, a portrait 1x4 and a landscape 2x2; dense packing leaves no holes. */
@media (max-width: 700px) {
  .photo-mosaic-wrap { --mosaic-gap: 10px; padding-top: 40px; }
  .photo-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: calc((100cqi - var(--mosaic-gap)) / 4); grid-auto-flow: dense; }
  .mosaic-block { display: contents; }
  .mosaic-block .mosaic-tile { grid-area: auto / auto / span 2 / span 1; }
  .mosaic-block .mosaic-tile.is-portrait { grid-row: span 4; }
  .mosaic-block .mosaic-tile.is-landscape { grid-column: span 2; }
}
}
@media (max-width: 560px) {
  .photo-album-grid { grid-template-columns: 1fr; }
  .photo-page-figure { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .mosaic-link img, .photo-lightbox-img, .mosaic-link, .photo-album-cover { transition: none; }
  .mosaic-link:hover img { transform: none; }
}