/* Homepage "Latest Works": one track of cards (text card first, then
   the case studies). js/works-scroll.js pins the section and turns
   vertical scroll into horizontal movement on desktop (992px and up) by
   adding .is-horizontal; tablets get a two-up grid, phones one column.
   Card styling is unchanged — only the layout differs.

   Without the script (or with reduced motion) the cards wrap two-up,
   close to the original rows. */
.works-track {
  flex-flow: row wrap;
  gap: 19px;
}

.works-track > .port-item {
  flex: 1 1 calc(50% - 10px);
}

.works-track > .port-item.shorter {
  flex-grow: 0;
  flex-basis: 600px;
}

.works-track > .port-item.text-only {
  flex-basis: 450px;
}

/* Horizontal gallery: cards keep the widths they had in the old rows
   (half the content width, 600px for the narrower ones, 450px for the
   text card) and sit in a single line that the script translates. */
.latest-works.is-horizontal {
  --works-card-w: calc((min(100vw - 40px, 1400px) - 19px) / 2);
}

.latest-works.is-horizontal .works-track {
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
}

.latest-works.is-horizontal .works-track > .port-item {
  flex: none;
  width: var(--works-card-w);
}

.latest-works.is-horizontal .works-track > .port-item.shorter {
  width: min(600px, var(--works-card-w));
}

.latest-works.is-horizontal .works-track > .port-item.text-only {
  width: 450px;
}

/* Tablet: two cards per row (text card first), all the same width.
   Range syntax so there's no gap for fractional viewport widths
   (e.g. 767.5px) between this and the max-width: 767px phone rules. */
@media screen and (767px < width <= 991px) {
  .works-track > .port-item,
  .works-track > .port-item.shorter,
  .works-track > .port-item.text-only {
    flex: 0 0 calc(50% - 9.5px);
    max-width: none;
  }
}

@media screen and (max-width: 767px) {
  .works-track {
    flex-direction: column;
  }

  .works-track > .port-item,
  .works-track > .port-item.shorter,
  .works-track > .port-item.text-only {
    flex: none;
  }
}

/* Homepage thumbnails are 30% taller than the site default (cards
   500 → 650px), at each of Webflow's breakpoints. The image inside
   stretches to fill the card, so it grows with it. */
.works-track > .port-item {
  min-height: 650px;
}

@media screen and (max-width: 991px) {
  .works-track > .port-item {
    min-height: 520px;
  }
}

@media screen and (max-width: 479px) {
  .works-track > .port-item {
    min-height: 416px;
  }
}

/* Mobile: the "Collection of…" card's text 20% smaller, side padding
   halved, and its height hugging the text with 50px above and below
   (instead of the thumbnails' fixed card height), at both of Webflow's
   phone breakpoints (its sizes differ between them). */
@media screen and (max-width: 767px) {
  .works-track > .port-item.text-only {
    min-height: 0;
    padding: 50px 22.5px;
  }

  .works-track > .port-item.text-only .myh3 {
    font-size: 22.4px;
  }

  .works-track > .port-item.text-only .myh1 {
    font-size: 45.6px;
  }
}

@media screen and (max-width: 479px) {
  .works-track > .port-item.text-only .myh1 {
    font-size: 32px;
  }
}

/* Homepage thumbnails zoom further on hover than the site default
   (motion.css: 1.08 over 6s), and get there a little quicker so the
   extra zoom reads. */
.works-track > .port-item:hover .image-con::before {
  transform: scale(1.16);
  transition: transform 4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Desktop: the "Collection of…" card's text ~20% bigger
   (28 → 34px, 49 → 60px). Tablet and phone sizes are set above. */
@media screen and (width >= 992px) {
  .works-track > .port-item.text-only .myh3 {
    font-size: 34px;
  }

  .works-track > .port-item.text-only .myh1 {
    font-size: 60px;
  }
}