/*=============================
    NEW PROJECTS / WORKS GRID
    One markup for desktop + mobile.
    Load after style.css (or paste into style.css under "NEW PROJECTS / WORKS").
=============================*/

.works-set {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  scroll-margin-top: 90px;            /* clears the fixed nav when a set is scrolled into view */
}
.works-set[hidden] { display: none; }
.works-set.is-revealed { animation: works-rise .5s ease both; }
@keyframes works-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .works-set.is-revealed { animation: none; }
}

/* Tiles. The .arrow-up / .arrow-down glyphs stay positioned by style.css
   (their containing block is now .works-tile). */
.works-tile {
  position: relative;
  display: flex;
  min-width: 0;
  aspect-ratio: 1 / 1;                /* perfect squares, like the original layout */
}
/* Tile height, three zones (desktop / tablet / very large screens):
     tablets (about 768 to 1020px wide)  tiles are portrait, never shorter than 340px, so the copy fits
     laptops (about 1020 to 1440px)      tiles are perfect squares (height = one third of the grid width)
     very large screens (1440px and up)  tiles stop growing taller at 480px and just get wider
   Tune --works-tile-min and --works-tile-max (or the 340px / 480px below) to taste.
   Browsers without container units fall back to the plain aspect-ratio squares above. */
@supports (width: 1cqw) {
  .works-set { container-type: inline-size; }
  .works-tile {
    aspect-ratio: auto;
    width: 100%;
    height: min(max(33.3333cqw, var(--works-tile-min, 340px)), var(--works-tile-max, 480px));
  }
}
.works-tile > [class*="works-preview-"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  overflow: hidden;                   /* image tiles crop cleanly when the tile turns landscape */
}
.works-text {
  align-items: center;
  justify-content: center;
  padding: 3%;
  background-color: #fff;
}
.works-text > .number-box { width: 100%; }

/* Desktop checkerboard.
   DOM order per project is: image, text. Grid places them as
   row 1:  image A | text B | image C
   row 2:  text A  | image B | text C                              */
.works-set > :nth-child(1) { grid-column: 1; grid-row: 1; }
.works-set > :nth-child(2) { grid-column: 1; grid-row: 2; }
.works-set > :nth-child(3) { grid-column: 2; grid-row: 2; }
.works-set > :nth-child(4) { grid-column: 2; grid-row: 1; }
.works-set > :nth-child(5) { grid-column: 3; grid-row: 1; }
.works-set > :nth-child(6) { grid-column: 3; grid-row: 2; }

/* Tablet / small laptop: tighten spacing so the copy still fits inside a square */
@media (min-width: 768px) and (max-width: 1199px) {
  .works-text .number-box > * { margin-top: 0; }
  .works-text .number-box p { height: auto; font-size: 15px; line-height: 1.5; }
  .works-text .number-box hr { margin: 14px auto; }
  .works-text .number-box h5 { margin: 8px 0; }
}

/* Mobile: single column, each project is text then image (same as your old mobile block) */
@media (max-width: 767px) {
  .works-set { grid-template-columns: minmax(0, 1fr); }
  .works-set > * { grid-column: auto !important; grid-row: auto !important; }
  .works-tile { aspect-ratio: 1 / 1; height: auto; }    /* no height cap on phones: single column, images stay square */
  .works-text { aspect-ratio: auto; min-height: 0; }   /* text grows with its copy on phones; images stay square */
  .works-set > :nth-child(1) { order: 2; }
  .works-set > :nth-child(2) { order: 1; }
  .works-set > :nth-child(3) { order: 4; }
  .works-set > :nth-child(4) { order: 3; }
  .works-set > :nth-child(5) { order: 6; }
  .works-set > :nth-child(6) { order: 5; }
  /* every image sits under its text, so the notch always points down at the top edge */
  .works-set .arrow-up { top: -3%; }
  .works-set .arrow-up:after { content: "\e917"; }
}

/* Accessible status text for screen readers */
.works-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: 0;
}

/* ADD A NEW PROJECT BACKGROUND (example). Then use class="works-preview-4-bg" on the image tile:
.works-preview-4-bg {
  background-image: url(../images/featured-projects/works-bg-hussh.webp) !important;
  background-position: center; background-repeat: no-repeat; background-size: cover;
}
*/