/* ==========================================================================
   Homepage (index.html): one project per row.
   Only loaded by that page.
   ========================================================================== */

.scroll-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A row: text column + large image. A thin line between rows, with the
   same space on both sides: 1.25rem (20px) above it (from whichever is
   lower in the row, image or text) and 1.25rem below it (to the next
   row's title and image) */
.scroll-row {
  display: grid;
  gap: var(--space-m);
  padding-block: 1.25rem;
  border-block-start: 1px solid var(--color-line);
}

.scroll-row:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

/* Scroll snap (wide screens, where the sidebar stays put): when you stop
   scrolling, the page settles with the nearest project at the top of the
   screen, its title exactly level with the name (the 1px divider line sits
   just above the edge). The first project settles at the page's start.
   Rows don't overlap; they just stop in the right place. */
@media (min-width: 64em) {
  html {
    scroll-snap-type: y mandatory;
  }

  .scroll-row {
    scroll-snap-align: start;
    scroll-margin-block-start: -1px;
  }

  .scroll-row:first-child {
    scroll-margin-block-start: var(--page-top);
  }

  /* …and, when there's page left below the last project (low screens), one
     at the very end, so the footer can be reached and the last project
     doesn't pull the page back up. Switched on by fillEnd in js/home.js. */
  body[data-page="home"] .site-footer.snap-end {
    scroll-snap-align: end;
  }
}

/* Typography: shared with project pages — see "Typography (Figma spec)" in main.css */




/* Title, blank line, description, blank line, "See more" — the same rhythm
   as the sidebar (name, blank line, "+"), so the description's first line
   sits level with "+" */
.scroll-text {
  display: grid;
  gap: 1lh;
  align-content: start;
  order: 2;                 /* phones: image first, then text */
}

/* Title: bold, indented relative to the description (tune here) */
.scroll-title {
  /* size, weight and indent: shared heading style in main.css */
  /* Same space under the title as on project pages: 0.7em instead of the
     blank line (cancels the gap for this one space only) */
  margin-block-end: calc(0.7em - 1lh);
}

/* The title stays bold as a link (the shared type rule sets links to
   regular weight) */
body[data-page="home"] .scroll-title a {
  font-weight: inherit;
}

.scroll-summary-link {
  display: block;
}

/* Description: the first two sentences, wrapping naturally */
.scroll-summary {
  max-inline-size: none;
}

.scroll-more {
  justify-self: start;
}

.scroll-media {
  display: block;
  order: 1;
  background: var(--color-placeholder);
}

.scroll-media img,
.scroll-media video {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* A project with no images yet: the column stays empty, no grey box */
.scroll-media--empty {
  background: none;
}

.scroll-media--soon {
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
}

/* ---- Page grid for this page (from the Figma file) ----
   12 columns, 1.25rem (20px) gutters, 1.25rem (20px) margins left, right
   and top; columns stretch with the
   window (no maximum page width).
     sidebar       columns 1–2
     description   columns 3 to the middle of 6 (3.5 columns)
     image         columns 7–12 */
body[data-page="home"] {
  --gutter: 1.25rem;   /* left/right margin (20px at a 16px root) */
  --grid-gap: 1.25rem; /* gutter between columns (20px) */
  --page-top: 1.25rem; /* top margin (20px) */
}

body[data-page="home"] .wrap {
  max-inline-size: none;
}

@media (min-width: 64em) {
  body[data-page="home"] .layout,
  body[data-page="home"] .site-footer .wrap {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }

  body[data-page="home"] .sidebar {
    grid-column: 1 / span 2;
  }

  body[data-page="home"] .layout-main {
    grid-column: 3 / -1;
  }

  /* The content area is columns 3–12 (10 columns): each row splits it into
     the same 10 columns with the same gutter, so its edges fall exactly on
     the page's column lines */
  .scroll-row {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }

  /* Text: 3.5 columns — placed across 4 columns (3–6), then trimmed by half
     a column so it ends halfway through column 6.
     In a 4-column area, 100% = 4 columns + 3 gutters, so
     87.5% + 3/8 gutter = 3.5 columns + 3 gutters. */
  .scroll-text {
    grid-column: 1 / span 4;
    inline-size: calc(87.5% + var(--grid-gap) * 3 / 8);
    order: 0;
  }

  .scroll-media {
    grid-column: 5 / span 6;
    order: 0;
  }

  body[data-page="home"] .site-footer .wrap > * {
    grid-column: 1 / span 2;
  }
}