/* Asymmetric project-listing row: one large card + two smaller cards,
   built on the site's 12-column grid rather than a bespoke one. Mobile and
   tablet stack everything for breathing room; the 6/3/3 split only appears
   at desktop, where the primary and secondary group each take half the row
   and the secondary group's own 2-up grid splits that half again. */

/* Mobile/tablet: primary and secondary stay stacked (span 12) all the way
   up to 1024px, so .project-row's own gap is genuine vertical breathing
   room between them right up to that point — bumped to space-16 for more
   room on small screens, then reset to the original space-10 at 1024px,
   where the gap switches roles entirely (primary/secondary go side by
   side, so it becomes a horizontal column-gap instead — left untouched). */
.project-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

@media (min-width: 768px) {
  .project-row {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
  }
}

@media (min-width: 1024px) {
  .project-row {
    gap: var(--space-10);
  }
}

.project-row__primary {
  grid-column: span 12;
}

/* Below 768px this stacks (span 1fr column), so the gap is vertical space
   between the two secondary cards — bumped for the same reason as above.
   From 768px it becomes a 2-up row (horizontal gap) all the way through
   desktop, so it's reset back to space-10 there instead of waiting for
   1024px like .project-row above. */
.project-row__secondary {
  grid-column: span 12;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-20);
}

@media (min-width: 768px) {
  .project-row__secondary {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10);
  }
}

@media (min-width: 1024px) {
  .project-row__primary,
  .project-row__secondary {
    grid-column: span 6;
  }
}

/* Row 2 — smaller portrait card on the left, a deliberate empty grid gap,
   then a substantially larger card on the right. Both cards are plain
   .project-card (same default aspect-ratio); the size contrast comes
   entirely from the grid span, and the wider card's proportionally taller
   render is what makes it read as "larger" — no new aspect-ratio modifier
   needed. Reuses .project-row's own vertical rhythm as a sibling row. */

.project-row + .project-row-2 {
  margin-top: var(--space-20);
}

@media (min-width: 1024px) {
  .project-row + .project-row-2 {
    margin-top: var(--space-24);
  }
}

/* Below 768px, primary/secondary stack (this gap is vertical); from 768px
   they split into side-by-side columns (span 4 / span 8 below), so the gap
   becomes horizontal and is reset back to space-10 there — see .project-row
   above for the same pattern. */
.project-row-2 {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

@media (min-width: 768px) {
  .project-row-2 {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--space-10);
  }
}

.project-row-2__primary,
.project-row-2__secondary {
  grid-column: span 12;
}

@media (min-width: 768px) {
  .project-row-2__primary {
    grid-column: span 4;
  }

  .project-row-2__secondary {
    grid-column: span 8;
  }
}

@media (min-width: 1024px) {
  /* Explicit start on the secondary card skips columns 4–6, leaving a real
     empty grid track between the two cards rather than just visual margin. */
  .project-row-2__primary {
    grid-column: span 3;
    align-self: end;
  }

  .project-row-2__secondary {
    grid-column: 7 / span 6;
  }
}

/* Row 3 — large landscape card on the left, a deliberate empty grid gap,
   then a smaller portrait card on the far right. Mirrors Row 2's
   gap-via-explicit-start technique in reverse. Top-aligned images need no
   extra rule: grid's default item alignment (stretch) already leaves block
   content sitting at the top of its cell. */

.project-row-2 + .project-row-3 {
  margin-top: var(--space-20);
}

@media (min-width: 1024px) {
  .project-row-2 + .project-row-3 {
    margin-top: var(--space-24);
  }
}

/* Same vertical-below-768/horizontal-from-768 pattern as .project-row-2. */
.project-row-3 {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

@media (min-width: 768px) {
  .project-row-3 {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--space-10);
  }
}

.project-row-3__primary,
.project-row-3__secondary {
  grid-column: span 12;
}

@media (min-width: 768px) {
  .project-row-3__primary {
    grid-column: span 8;
  }

  .project-row-3__secondary {
    grid-column: span 4;
  }
}

@media (min-width: 1024px) {
  .project-row-3__primary {
    grid-column: span 6;
  }

  /* Explicit start skips columns 7–9, leaving the empty gap. */
  .project-row-3__secondary {
    grid-column: 10 / span 3;
  }
}

/* Row 4 — a very large landscape card with a narrow portrait card
   immediately alongside it, separated only by the standard grid gutter
   (no deliberate empty track this time). Top-aligned by the same default
   stretch behaviour as Row 3. */

.project-row-3 + .project-row-4 {
  margin-top: var(--space-20);
}

@media (min-width: 1024px) {
  .project-row-3 + .project-row-4 {
    margin-top: var(--space-24);
  }
}

/* Same vertical-below-768/horizontal-from-768 pattern as .project-row-2. */
.project-row-4 {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

@media (min-width: 768px) {
  .project-row-4 {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--space-10);
  }
}

.project-row-4__primary,
.project-row-4__secondary {
  grid-column: span 12;
}

@media (min-width: 768px) {
  .project-row-4__primary {
    grid-column: span 9;
  }

  .project-row-4__secondary {
    grid-column: span 3;
  }
}

/* At 9 columns wide, the standard 4:3 crop (tuned for 6-column cards)
   renders far taller than intended — width and ratio compound, so the
   wider the card, the taller a fixed ratio makes it. This card spans 1.5x
   a 6-column card's width, so a 2:1 ratio (roughly 4:3 stretched by that
   same 1.5x) renders at very nearly the same height as the other
   landscape cards elsewhere on the page, despite the wider crop. Scoped to
   768px+ since that 9-column span itself only exists from that width up —
   below it the card is a full-width single column and falls back to the
   card's own .project-card--landscape 4:3 ratio. */
@media (min-width: 768px) {
  .project-row-4__primary .project-card__media {
    aspect-ratio: 2 / 1;
  }
}

/* Row 5 — a deliberate empty grid column at the row's start, then a smaller
   portrait card, immediately followed (standard gutter only) by a
   substantially larger card. Bottom-aligned: the shorter (smaller) card
   gets align-self: end so its image's bottom edge lines up with the
   taller card's, same technique as Row 2. */

.project-row-4 + .project-row-5 {
  margin-top: var(--space-20);
}

@media (min-width: 1024px) {
  .project-row-4 + .project-row-5 {
    margin-top: var(--space-24);
  }
}

/* Same vertical-below-768/horizontal-from-768 pattern as .project-row-2. */
.project-row-5 {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

@media (min-width: 768px) {
  .project-row-5 {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--space-10);
  }
}

.project-row-5__primary,
.project-row-5__secondary {
  grid-column: span 12;
}

@media (min-width: 768px) {
  .project-row-5__primary {
    grid-column: span 4;
  }

  .project-row-5__secondary {
    grid-column: span 8;
  }
}

@media (min-width: 1024px) {
  /* Explicit start skips columns 1–3, leaving the leading empty gap. */
  .project-row-5__primary {
    grid-column: 4 / span 3;
    align-self: end;
  }

  .project-row-5__secondary {
    grid-column: 7 / span 6;
  }
}