/* Homepage project list: row view (one project per row) and grid view.
   Both views share one column grid; each card spans --span columns,
   set per view and size below. Covers are never cropped: they fill their
   span and keep their own proportions. */
.project-list {
  --columns: 4;
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: var(--spacing-3);
  align-items: start;
  user-select: none;
}

/* Desktop: 12 columns. In grid view the first stays free, the cards
   get the other 11 */
@media (min-width: 768px) {
  .project-list {
    gap: var(--spacing-4);
    --columns: 12;

    &[data-view="row"] {
      row-gap: 275px;
    }

    &[data-view="grid"] {
      --columns: 11;
      row-gap: 130px;
      padding-inline-start: calc((100% + var(--spacing-4)) / 12);
    }
  }
}

.project-card {
  grid-column: span var(--span);

  /* width: 100% so right-aligned covers (justify-self: end) still fill
     their span instead of shrinking to the image's own pixel width */
  > * {
    width: 100%;
  }

  img {
    width: 100%;
  }
}

/* Row view: every card on its own row. The card spans the whole row and
   passes the columns on (subgrid), so two small cards never share a row. */
.project-list[data-view="row"] {
  .project-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;

    /* --shift: empty columns between the cover and its side (desktop only) */
    --shift: 0;

    /* Tall covers would not fit the screen: the height is capped at
       --cover-max-height through the cover's aspect ratio (--ratio, set inline
       by project-card.php). All children get this box, so the mobile title
       and link line up with the cover: each lands on its own row. */
    --cover-max-height: 80vh;

    > * {
      grid-column: calc(1 + var(--shift)) / span var(--span);
      max-width: calc(var(--cover-max-height) * var(--ratio));
    }

    &[data-placement="right"] > * {
      grid-column: span var(--span) / calc(-1 - var(--shift));
      justify-self: end;
    }

    &:is([data-size="s"], [data-size="m"], [data-size="l"]) {
      --span: 3;
    }
    &:is([data-size="xl"], [data-size="full"]) {
      --span: 4;
    }
  }
}

/* Mobile row view: one project per screen, the page snaps from one to the next.
   Title, cover and link stay together, centred on the screen as one group. The
   header overlays the list, so the first project snaps like all the others. */
@media (width < 768px) {
  /* .is-auto-scrolling: set by smooth-scroll.js, snapping would fight its animation */
  html:has(.project-list[data-view="row"]):not(.is-auto-scrolling) {
    scroll-snap-type: y mandatory;
  }

  .home:has(.project-list[data-view="row"]) {
    padding-block: 0;
  }

  .project-list[data-view="row"] {
    row-gap: 0;
    margin-block-start: calc(-1 * var(--header-height));

    /* With the About intro (intro.css), the intro takes that place instead */
    .intro ~ & {
      margin-block-start: 0;
    }

    .project-card {
      --cover-max-height: 60svh;
      align-content: center;
      height: 100svh;
      padding-block: var(--header-height);
      scroll-snap-align: start;
    }
  }
}

@media (min-width: 768px) {
  .project-list[data-view="row"] .project-card {
    /* Offset from the panel (--offset, set inline by project-card.php),
       clamped so the cover always fits */
    --shift: min(var(--offset, 0), var(--columns) - var(--span));

    &[data-size="s"] {
      --span: 4;
    }
    &[data-size="m"] {
      --span: 5;
    }
    &[data-size="l"] {
      --span: 6;
    }
    &[data-size="xl"] {
      --span: 8;
    }
    &[data-size="full"] {
      --span: 12;
    }
  }
}

.project-list[data-view="grid"] {
  /* dense: a cover that doesn't fit at the end of a row wraps, and later
     smaller covers fill the hole it leaves. Covers can then appear out of
     panel order. Delete this line to keep the panel order (holes remain). */
  grid-auto-flow: dense;

  .project-card {
    &:is([data-size="s"], [data-size="m"]) {
      --span: 1;
    }
    &:is([data-size="l"], [data-size="xl"], [data-size="full"]) {
      --span: 2;
    }
  }
}

@media (min-width: 768px) {
  .project-list[data-view="grid"] {
    .project-card {
      &[data-size="s"] {
        --span: 1;
      }
      &:is([data-size="m"], [data-size="l"]) {
        --span: 2;
      }
      &[data-size="xl"] {
        --span: 3;
      }
      &[data-size="full"] {
        --span: 4;
      }
    }
  }
}