/* Three client cards (Elephant Sanctuary, HCA, Integrity Music) in the case
   studies tile grid. Desktop values below are exact Figma pixels (Frame 115,
   1440x910 board); mobile stacks to a single fluid column (no mobile board
   was designed for this page — derived from the site's established
   stacking pattern).

   Card background is the same paper-grain texture used elsewhere in the
   site (shared imageRef in the Figma file), rotated 180deg to match the
   purple concentration sitting toward the top of each card.

   .case-tiles__item (the <li>) is a plain grid cell below 1024px and a
   container-query host above it; .case-tiles__card carries the actual
   padding/layout so its cqw-based sizing resolves against the item's box
   rather than against itself — a container never queries its own size. */

.case-tiles {
  background-color: var(--pure-white);
  padding-block: var(--space-40);
}

.case-tiles__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-40);
  list-style: none;
}

.case-tiles__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  padding: var(--space-40);
  background-color: var(--pure-white);
  background-image: url("../../img/case-tile-bg.jpg");
  background-image: image-set(
    url("../../img/case-tile-bg-m.avif") type("image/avif"),
    url("../../img/case-tile-bg-m.webp") type("image/webp"),
    url("../../img/case-tile-bg.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: center;
  gap: 1.875rem; /* 30px — Figma's declared (not computed) item gap */
}

.case-tiles__media-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--media-gap, 1.875rem); /* 30px default, elephant tile is tighter */
}

.case-tiles__item--elephant .case-tiles__media-group {
  --media-gap: 0.625rem; /* 10px — the only reliably content-hugged gap in
    the source file (Frame 112's inner group), kept exact */
}

/* Square canvases with the cutout + overflow accents baked into the alpha;
   each renders at its Figma box's tall side, centered, overhanging the box
   — cover semantics without clipping (object-fit would crop the accents). */
.case-tiles__photo {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 1 / 1;
}

.case-tiles__item--elephant .case-tiles__photo {
  width: 102.333%; /* 307/300 */
  margin-inline: -1.167%;
}

.case-tiles__item--hca .case-tiles__photo {
  margin-block: -2.667%; /* box 300x284; canvas overhangs 8px top/bottom */
}

.case-tiles__item--integrity .case-tiles__photo {
  margin-block: -1.667%; /* box 300x290; canvas overhangs 5px top/bottom */
}

.case-tiles__logo {
  display: block;
  height: auto;
}

.case-tiles__item--elephant .case-tiles__logo {
  width: 87.67%; /* 263 / 300 */
}

.case-tiles__item--hca .case-tiles__logo {
  width: 50.67%; /* 152 / 300 */
}

.case-tiles__item--integrity .case-tiles__logo {
  width: 100%; /* 300 / 300 */
}

.case-tiles__item--closing-times .case-tiles__photo {
  margin-block: -2%; /* phone overhangs the D at top/bottom */
}

.case-tiles__item--closing-times .case-tiles__logo {
  width: 100%; /* sized up to sit closer to the sibling tiles' logos */
}

.case-tiles__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  width: 100%;
}

.case-tiles__headline {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-style: normal;
  font-size: 1.625rem; /* 26px */
  line-height: 1.2;
  color: var(--dozen-dark);
}

.case-tiles__subline {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-style: italic;
  font-size: 1.25rem; /* 20px */
  line-height: var(--p-leading);
  color: var(--dozen-blue);
}

.case-tiles__cta {
  display: flex;
  width: 100%;
  /* Bottom-justified across the row: the cards are equal-height grid items,
     so pushing every pill to its card's bottom edge lines the three up
     regardless of how long the copy above runs. */
  margin-top: auto;
  align-items: center;
  justify-content: center;
  padding: var(--space-20) var(--space-40);
  border: 2px solid var(--dozen-blue);
  border-radius: 999px;
  background-color: transparent;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 1.25rem; /* 20px */
  line-height: 1.2;
  letter-spacing: -0.035em;
  color: var(--dozen-blue);
  text-decoration: none;
  text-align: center;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.case-tiles__cta:hover,
.case-tiles__cta:focus-visible {
  background-color: var(--dozen-blue);
  color: var(--pure-white);
  transform: translateY(-1px);
}

/* 1024–1440 uses a fluid grid rather than flat 400px columns: three fixed
   400px flex columns don't fit a 1024px viewport (1278px minimum content
   width alone), so columns flex down to the available width and each card
   scales itself proportionally via container query units — landing on the
   exact Figma pixel values only once the column reaches 400px (at/around
   the 1440 board width), which is where the design has to match to the
   pixel. */
@media (min-width: 1024px) {
  .case-tiles {
    padding-block: var(--space-60);
  }

  /* max-width/centering already comes from the .container class on this
     element (1280px content column) — adding a second, slightly different
     max-width here would double up with its padding-inline under the
     global border-box reset and shrink the columns. */
  .case-tiles__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(
      1.5rem,
      -0.8077rem + 3.6058vw,
      2.4375rem
    ); /* 24px @1024 -> 39px @1440 */
  }

  .case-tiles__item {
    container-type: inline-size;
    width: 100%;
    max-width: 400px;
  }

  .case-tiles__card {
    padding: 12.5cqw; /* 50px at a 400px container */
    gap: 7.5cqw; /* 30px at a 400px container */
  }

  .case-tiles__media-group {
    gap: var(--media-gap, 7.5cqw);
  }

  .case-tiles__item--elephant .case-tiles__media-group {
    --media-gap: 2.5cqw; /* 10px at a 400px container */
  }

  .case-tiles__body {
    gap: 2.5cqw;
  }

  .case-tiles__headline {
    font-size: 6.5cqw; /* 26px at a 400px container */
  }

  .case-tiles__subline,
  .case-tiles__cta {
    font-size: 5cqw; /* 20px at a 400px container */
  }

  .case-tiles__cta {
    padding: 5cqw 10cqw;
  }
}

/* Services page variant: same instance content, block padding-block 50px
   at desktop rather than the case-study grid's 60px (Figma Frame 115: pad
   50/50/50/50 vs 60/40/60/40; cards themselves stay 50px-padded either
   way). Pure addition; the base rules above are untouched. */
@media (min-width: 1024px) {
  .case-tiles--services {
    padding-block: 3.125rem;
  }

  /* Services tile boxes are fixed 810 in Figma (vs the case-study grid's
     content-driven ~788); the slack falls below the CTA. */
  .case-tiles--services .case-tiles__card {
    min-height: 202.5cqw; /* 810px at a 400px container */
  }
}

/* Full-size art once the layout is desktop-wide; mobile ships 828w encodes. */
@media (min-width: 1024px) {
  .case-tiles__card {
    background-image: image-set(
      url("../../img/case-tile-bg.avif") type("image/avif"),
      url("../../img/case-tile-bg.webp") type("image/webp"),
      url("../../img/case-tile-bg.jpg") type("image/jpeg")
    );
  }
}