/**
 * Section: Assurance Strip
 *
 * Ported from .docs/mockup/css/shop.css §4 (lines 338-376) plus its share of
 * the pooled responsive block (387-390, 411-413). Tokens only.
 *
 * The two px values are the mockup's own icon sizes; there is no type token
 * for a decorative glyph and the section contract keeps the mockup's
 * structural literals rather than inventing near-miss substitutions.
 *
 * `.material-symbols-outlined` itself, `.reveal` and the reveal delays are
 * shared chrome in assets/css/components.css and are not redeclared.
 */

.assurance {
  padding-block: var(--section-space-s);
  padding-inline: var(--space-gutter);
  background: var(--pebble);
}

.assurance-grid {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-l);
}

.assure-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.assure-item .material-symbols-outlined {
  font-size: 32px;
  color: var(--eucalypt);
}

/* `h3` here, `h4` in the mockup — a heading-level fix only. The type
   treatment is the mockup's `.assure-item h4` rule, unchanged. */
.assure-item h3 {
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--deep-ocean);
}

.assure-item p {
  font-size: var(--text-small);
  color: var(--graphite);
  line-height: 1.5;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .assurance-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-m);
  }
}

@media (max-width: 640px) {
  .assurance-grid {
    grid-template-columns: 1fr;
  }
}