/* Homepage case-study collage: a 414px desktop row rhythm. */
.home-cases-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 414px;
  gap: 16px;
}

.home-cases-grid .tile {
  min-height: 0;
  grid-row: auto;
}

.home-cases-grid .tile:nth-child(1) { grid-column: span 6; }
.home-cases-grid .tile:nth-child(2) { grid-column: span 3; }
.home-cases-grid .tile:nth-child(3) { grid-column: span 3; }
.home-cases-grid .tile:nth-child(4) { grid-column: span 3; }
.home-cases-grid .tile:nth-child(5) { grid-column: span 3; }
.home-cases-grid .tile:nth-child(6) { grid-column: span 6; }
.home-cases-grid .tile:nth-child(7) { grid-column: span 3; }
.home-cases-grid .tile:nth-child(8) { grid-column: span 6; }
.home-cases-grid .tile:nth-child(9) { grid-column: span 3; }
.home-cases-grid .tile:nth-child(10) { grid-column: span 6; }
.home-cases-grid .tile:nth-child(11) { grid-column: span 3; }
.home-cases-grid .tile:nth-child(12) { grid-column: span 3; }

/* Case Studies and Industries listing pages: 4-col grid, repeating 3-row pattern
   [2,1,1] → [1,1,2] → [1,2,1] (row width ratios, cycles every 9 tiles). */
.filterbar:has(+ #case-list) {
  padding-bottom: 0;
}

#case-list {
  padding-top: 40px;
}

.cases-mosaic > .mosaic {
  display: grid;
  gap: 16px;
  grid-auto-rows: 414px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cases-mosaic > .mosaic .tile:nth-child(n) {
  grid-row: auto;
  min-height: 0;
}

/* Row cycle on a 4-col grid: 9 tiles per cycle.
   wide  (span 2): 9n+1, 9n+6, 9n+8
   narrow(span 1): 9n+2, 9n+3, 9n+4, 9n+5, 9n+7, 9n  */
.cases-mosaic > .mosaic .tile:nth-child(9n+1),
.cases-mosaic > .mosaic .tile:nth-child(9n+6),
.cases-mosaic > .mosaic .tile:nth-child(9n+8) { grid-column: span 2; }

.cases-mosaic > .mosaic .tile:nth-child(9n+2),
.cases-mosaic > .mosaic .tile:nth-child(9n+3),
.cases-mosaic > .mosaic .tile:nth-child(9n+4),
.cases-mosaic > .mosaic .tile:nth-child(9n+5),
.cases-mosaic > .mosaic .tile:nth-child(9n+7),
.cases-mosaic > .mosaic .tile:nth-child(9n) { grid-column: span 1; }

.mosaic .case-card {
  background-color: #d9ddd6;
  background-image: var(--case-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: none;
}

.case-card:hover { transform: none; }
.case-card::after { content: none; }

.case-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  padding: clamp(24px, 4vw, 64px);
  color: var(--ink);
  text-align: center;
  background: #cef28f;
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}

.case-card:hover .case-card__overlay,
.case-card:focus-visible .case-card__overlay {
  opacity: 1;
}

.case-card__overlay strong {
  font: 400 24px/1 DMSerif, Georgia, serif;
}

.case-card__overlay small {
  max-width: 760px;
  font: 400 17px/1.35 WorkSans, Arial, sans-serif;
}

@media (max-width: 800px) {
  .home-cases-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 190px;
    gap: 10px;
  }

  .home-cases-grid .tile:nth-child(n) {
    grid-column: span 1;
    grid-row: auto;
  }

  .home-cases-grid .tile:nth-child(1) {
    grid-column: span 2;
  }

  .cases-mosaic > .mosaic {
    gap: 10px;
    grid-auto-rows: 240px;
    grid-template-columns: 1fr;
  }

  .cases-mosaic > .mosaic .tile:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }

  .cases-mosaic > .mosaic .tile:nth-child(1) {
    grid-column: auto;
  }

  .case-card__overlay {
    gap: 12px;
    padding: 18px;
  }
  .case-card__overlay strong {
    font-size: 20px;
  }
  .case-card__overlay small {
    font-size: 15px;
  }
}