/* icon-grid — @tokens: --icon-grid-min, --icon-grid-icon-size

   A responsive grid of icon + title + text cells (services / features / benefits).
   A CONTENT BLOCK dropped INSIDE a `.hzo-section` > `.hzo-container` (it is NOT
   full-bleed — the section owns the vertical rhythm + background). Primitive:
   CSS-only, not interactive (carries no control, so no focus/disabled idioms).

   Token-only: the responsive column floor + the icon box have no dedicated
   semantic role in the scale, so they're component tokens with a literal
   fallback (the icon-button.css dial pattern). Everything else reads a
   semantic/L1 token — so an archetype re-themes the ink + accent from :root. */
.hzo-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--icon-grid-min, 240px), 1fr));
    gap: var(--space-xl);
}

/* Each cell — a stacked flex column: icon over title over text. */
.hzo-icon-grid__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Accent-tinted glyph in a fixed box so ragged svg viewBoxes align on the grid.
   flex: 0 0 auto keeps it from stretching in the column. */
.hzo-icon-grid__icon {
    flex: 0 0 auto;
    width: var(--icon-grid-icon-size, 40px);
    height: var(--icon-grid-icon-size, 40px);
    color: var(--accent);
}
.hzo-icon-grid__icon > svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Cell heading — heading ink, semibold, a heading-scale size. */
.hzo-icon-grid__title {
    margin: 0;
    font-size: var(--fs-400);
    font-weight: var(--fw-600);
    line-height: var(--lh-snug);
    color: var(--text-heading);
}

/* Supporting copy — muted ink, comfortable leading. */
.hzo-icon-grid__text {
    margin: 0;
    font-size: var(--fs-200);
    line-height: var(--lh-normal);
    color: var(--text-muted);
}

/* Center modifier — centers each cell's contents + its text block. */
.hzo-icon-grid--center .hzo-icon-grid__item {
    align-items: center;
    text-align: center;
}