/*
The grid of tiles: panes laid three to a row, every other one displaced downwards.

It was written inside "Why Choose Us?" and moved out when the Blood Panel page turned out to draw
the same thing inside an accordion panel — the pane, the checker and the way the text sits at the
foot of each tile are one decision, not two copies of it.

THE TILE IS TRANSLUCENT: #e8efef at a tenth over whatever it stands on, edged in solid white — a
pane laid on the surface rather than a shape cut out of it. The shadow is not in the node's data
(the bridge returns no effects for any node, see CLAUDE.md) and is in the render.

THE TEXT SITS AT THE FOOT of the tile, with the title at the head and the space between them
wherever it falls. That is what lets a row line its paragraphs up while its titles run to one, two
or three lines — the service hero's column does the same thing for the same reason.

WHICH TILE IS DISPLACED IS THE BLOCK'S ARITHMETIC, not this file's: the class is put on by whoever
prints the tiles, because how a row is counted depends on how many go in it.
*/

.tile-grid {
  display: grid;
  padding: 0;
  align-items: start;
  gap: var(--tile-grid-row-gap) var(--tile-grid-col-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}

.tile-grid__tile {
  display: flex;
  min-height: var(--tile-grid-tile-h);
  flex-direction: column;
  justify-content: space-between;
  padding: var(--tile-grid-tile-pad);
  border: var(--rule-w) solid var(--tile-grid-tile-border);
  border-radius: var(--tile-grid-tile-radius);
  background: var(--tile-grid-tile-bg);
  box-shadow: var(--tile-grid-tile-shadow);
}

/*
The displaced tile. Its own margin rather than a translate, so the row's box grows with it and the
next row starts clear of it instead of overlapping.
*/
.tile-grid__tile--low {
  margin-top: var(--tile-grid-tile-drop);
}

.tile-grid__head {
  display: flex;
  margin: 0;
  align-items: flex-start;
  gap: var(--tile-grid-icon-gap);
}

.tile-grid__icon {
  display: flex;
  width: var(--tile-grid-icon-box);
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
}

.tile-grid__icon img {
  width: var(--tile-grid-icon-size);
  height: auto;
}

.tile-grid__name {
  color: var(--tile-grid-name-color);
  font-family: var(--font-display);
  font-size: var(--fs-tile-grid-name);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tile-grid-name);
  line-height: var(--lh-tile-grid-name);
}

.tile-grid__text {
  margin: var(--tile-grid-text-gap) 0 0;
  color: var(--tile-grid-text-color);
  font-size: var(--fs-tile-grid-text);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tile-grid-text);
  line-height: var(--lh-tile-grid-text);
}

/* --bp-lg: two columns, and the displacement goes with them — see the note in treatment-why.css. */
@media (max-width: 1300px) {
  .tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile-grid__tile--low {
    margin-top: 0;
  }
}

/*
--bp-sm: the tiles stop being a grid and become a row that scrolls sideways, which is what the phone
frame draws. overflow-x on the row itself and not on anything above it: the row scrolls, the page
does not, and the tiles keep their full width instead of being squeezed into a column too narrow for
their titles. scroll-snap because a row of cards that stops between two of them reads as broken. No
script: the browser does all of it.

The negative margins let the row bleed to the edges of whatever holds it while the padding keeps the
first tile aligned with the heading above — so a tile can sit half in view at the right, which is
the frame's own arrangement rather than a truncation.
*/
@media (max-width: 700px) {
  .tile-grid {
    display: flex;
    margin-inline: calc(var(--tile-grid-bleed) * -1);
    padding-inline: var(--tile-grid-bleed);
    overflow-x: auto;
    gap: var(--tile-grid-col-gap);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .tile-grid::-webkit-scrollbar {
    display: none;
  }

  .tile-grid__tile {
    width: var(--tile-grid-tile-w);
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .tile-grid__tile--low {
    margin-top: var(--tile-grid-tile-drop);
  }
}