/* ═══ the home page — every shoot at a glance ═════════════════════════════
   Plain markup, no JavaScript. A header, the favourites as one wide tile,
   then a grid of every shoot. The list is hand-maintained in index.html. */

@layer home {
  .home {
    max-inline-size: var(--measure); margin-inline: auto;
    padding: calc(28px + var(--safe-t)) max(var(--pad), var(--safe-r))
             clamp(48px, 8vw, 96px) max(var(--pad), var(--safe-l));
    display: grid; gap: clamp(40px, 6vw, 72px);
  }

  .home-head {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px;
    padding-block-end: 20px;
    border-block-end: 1px solid var(--line-soft);
  }
  .home-name {
    font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 600;
    letter-spacing: -.02em; line-height: 1.1;
  }
  .home-count { margin-inline-start: auto; }

  /* ── tiles ────────────────────────────────────────────────────────────
     A tile is a link: photograph, name, one line of copy, the numbers.
     Photograph heights come from the column width, not from the image, so
     every tile in a row lines up whatever its cover's orientation — and a
     wide tile is exactly as tall as its neighbours. The grid is the size
     container, so 100cqi is its inner width. */

  .shelf, .feature {
    --g: clamp(16px, 2.2vw, 28px);
    --cols: 3;
    --ratio: 1.25;          /* photograph height ÷ column width */
    --cell: calc((100cqi - (var(--cols) - 1) * var(--g)) / var(--cols));
    container-type: inline-size;
  }

  .tile {
    display: grid; align-content: start; gap: 2px;
    picture { display: block; margin-block-end: 12px; }
    img {
      inline-size: 100%; block-size: calc(var(--cell) * var(--ratio));
      object-fit: cover;
      border-radius: var(--r-photo);
      background: var(--tint);
      filter: brightness(.9);
      transition: filter var(--quick) var(--ease);
    }
    &:hover img, &:focus-visible img { filter: none; }
    &:hover .tile-name, &:focus-visible .tile-name {
      text-decoration: underline; text-underline-offset: .2em;
      text-decoration-thickness: 1px;
    }
    &:focus-visible { outline-offset: 6px; border-radius: var(--r-photo); }
  }
  .tile-name { font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; }
  .tile-meta { margin-block-start: 4px; color: var(--dim); }

  /* Favourites: three photographs across the full measure. */
  .feature {
    .tile-photos {
      display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--g);
      margin-block-end: 14px;
      picture { margin: 0; }
      img { block-size: min(calc(var(--cell) * var(--ratio)), 78svh); }
    }
    .tile-name { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
  }

  /* The shoots. Wide tiles take a landscape cover and span two columns;
     `dense` lets a narrow tile fill the gap a wide one leaves. Six shoots
     and no wide tiles fill three columns and two exactly; keep the grid
     full when a shoot is added (seven wants two .tile-wide). */
  .shelf {
    display: grid; gap: clamp(32px, 4vw, 48px) var(--g);
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    grid-auto-flow: row dense;
  }
  .shelf-title { font-size: 1rem; font-weight: 600; margin-block-end: 18px; }

  @media (width >= 900px) {
    .tile-wide { grid-column: span 2; }
  }
  /* Two columns: only the last wide tile spans the row. */
  @media (520px <= width < 900px) {
    .shelf, .feature { --cols: 2; }
    .tile:nth-last-child(1 of .tile-wide) { grid-column: span 2; }
    .feature .tile-photos picture:nth-child(3) { display: none; }
  }
  @media (width < 520px) {
    .shelf, .feature { --cols: 1; --ratio: 1.15; }
    .tile-wide img { block-size: calc(var(--cell) / 1.5); }
    .feature .tile-photos picture:not(:first-child) { display: none; }
    .home-count { margin-inline-start: 0; }
  }
}