/* Case study cards: the /case-studies index grid and the "More case studies" row at
   the end of each case study (markup: _build/templates/case-cards.js). */

/* Index page heading. */
.cases-hero { padding-top: 48px; }
.cases-hero .crumbs { margin-bottom: 28px; }
.cases-hero__head { max-width: 880px; margin-bottom: 52px; }

.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* Seven cards on three columns: the first and last span two, so every row is full.
   Those wide cards lie on their side (image left, text right) to stay as tall as the rest. */
.case-grid:not(.case-grid--three) > :first-child,
.case-grid:not(.case-grid--three) > :last-child { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-column: span 2; }
.case-grid:not(.case-grid--three) > :first-child .case-card__media,
.case-grid:not(.case-grid--three) > :last-child .case-card__media { aspect-ratio: auto; min-height: 100%; }

.case-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--white);
  color: var(--ink);
  transition: transform .35s var(--ease), box-shadow .35s ease, border-color .35s ease;
}
.case-card:hover { border-color: transparent; transform: translateY(-6px); box-shadow: 0 30px 60px -36px rgb(26 33 48 / 45%); }

.case-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); }
.case-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.case-card:hover .case-card__media img { transform: scale(1.04); }

.case-card__body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 26px 28px 28px; }
.case-card__client { font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.case-card__title { font-weight: 600; font-size: 22px; line-height: 1.25; letter-spacing: -.4px; text-wrap: balance; }
.case-card__text { font-size: 15px; line-height: 1.6; color: var(--slate); }
.case-card__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 14.5px; }
.case-card:hover .case-card__go { color: var(--blue); }

.more-cases .head-split { align-items: end; margin-bottom: 40px; }
.more-cases .head-split .btn { justify-self: end; }

@media (max-width: 1100px) {
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-grid:not(.case-grid--three) > :last-child { display: flex; grid-column: auto; }
  .case-grid:not(.case-grid--three) > :last-child .case-card__media { aspect-ratio: 16 / 10; min-height: 0; }
  .case-grid--three > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .case-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .case-grid > :first-child,
  .case-grid > :last-child { display: flex; grid-column: auto; }
  .case-grid > :first-child .case-card__media { aspect-ratio: 16 / 10; min-height: 0; }
  .case-card__body { padding: 22px 22px 24px; }
  .case-card__title { font-size: 20px; }
  .more-cases .head-split .btn { justify-self: start; }
}