/*
Block Treatment-06 "Why Choose Us?" on a service page. Every value comes from tokens.css, spec:
docs/blocks/treatment-06-why-weight-loss.md.

The plate is the shared panel, the heading is the shared two-tone component, the button is the
shared button and the arrival is the shared scroll reveal. What this file draws is the tile and
the way the tiles are displaced against each other.

THE TILE IS TRANSLUCENT. The design fills it with #e8efef at a tenth over the panel's own tint and
edges it in solid white — a pane laid on the plate rather than a shape cut out of it. The shadow
is not in the node's data (the bridge never returns effects, see CLAUDE.md) and is in the render,
so it is taken from the shared card shadow.
*/

.treatment-why {
  padding-block: var(--treatment-why-top) var(--treatment-why-bottom);
}

.treatment-why__title {
  --heading-fs: var(--fs-treatment-why-title);
  --heading-ls: var(--ls-treatment-why-title);
  --heading-lh: var(--lh-treatment-why-title);
  --heading-segment-display: inline;
}

/*
The grid of tiles is the shared component (assets/css/tile-grid.css). What belongs to this block is
where it sits and how far it is inset from the panel's own padding: the design's container is 1246
with 34.5 of its own padding, which comes to 1177 of tiles inside 1278 of panel.
*/
.treatment-why__grid {
  margin-top: var(--treatment-why-grid-gap);
}

/*
The inset is set only where there is a grid to inset. Below --bp-sm the component turns the row
into a scroller and pulls it out to the edges with a negative margin of its own; a margin-inline
here would overwrite that and the row would stop bleeding — which is what happened, and it showed
up as the first tile standing one pixel in from the card's edge.
*/
@media (min-width: 701px) {
  .treatment-why__grid {
    margin-inline: var(--treatment-why-grid-inset);
  }
}

/*
The button is centred under the tiles, which is the one place on a service page where it is: every
other block sets it against the left edge or the end of a heading's line.
*/
.treatment-why__cta {
  display: flex;
  margin: var(--treatment-why-cta-gap) auto 0;

  --btn-w: min(var(--treatment-why-cta-w), 100%);
}

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

  /*
  The pattern was counted in threes and the grid is now in twos, so the class no longer lands
  where the eye expects. Rather than recount it in CSS the displacement is dropped: a checker of
  two columns is a stagger, which is a different drawing from the one the design makes.
  */
  .treatment-why__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 — five tiles at 265 running off the right edge of a 350 card.

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 a 24px
title. The negative margins let the row bleed to the card's edges while the padding keeps the first
tile aligned with the heading above it — so a tile can sit half in view at the right, which is the
frame's own arrangement rather than a truncation.

scroll-snap because a row of cards that stops between two of them reads as broken. No script: the
browser does all of it.
*/
@media (max-width: 700px) {
  .treatment-why__grid {
    display: flex;
    margin-inline: calc(var(--panel-pad-x) * -1);
    padding-inline: var(--panel-pad-x);
    overflow-x: auto;
    gap: var(--tile-grid-col-gap);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .treatment-why__grid::-webkit-scrollbar {
    display: none;
  }

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

  /* The displacement comes back here: the frame staggers this row as the wide one staggers its. */
  .treatment-why__tile--low {
    margin-top: var(--tile-grid-tile-drop);
  }
}