/* ============================================================================
   keystone.css — site-specific helpers for the Keystone Mutual sample
   Only what home.css/templates.css don't already provide. All token-driven.
   ============================================================================ */

/* coverage grid: 6 tiles, 3-up then 2-up then 1-up */
.cover-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 640px) { .cover-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .cover-grid { grid-template-columns: repeat(3, 1fr); } }

.cover-tile { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; }
.cover-tile__icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: grid; place-items: center; background: color-mix(in srgb, var(--color-accent) 18%, var(--color-bg)); color: var(--color-accent); margin-bottom: var(--space-1); }
.cover-tile__icon svg { width: 26px; height: 26px; }
.cover-tile__title { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-fg); margin: 0; font-weight: 600; line-height: var(--leading-snug); }
.cover-tile__body { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); line-height: var(--leading-normal); margin: 0 0 var(--space-2); }
.cover-tile .c-link--standalone { margin-top: auto; }

/* quote band: copy + a floating quote-start card */
.quote-band { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .quote-band { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-12); } }
.quote-band__copy .c-list--check li { color: var(--color-fg); }

.quote-card__h { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-fg); margin: var(--space-2) 0 var(--space-5); font-weight: 600; line-height: var(--leading-snug); }
.quote-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.quote-chip { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-fg); background: var(--color-bg); border: var(--border-default) solid var(--color-border); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.quote-chip:hover { border-color: var(--color-accent); }
.quote-chip[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-fg); border-color: var(--color-accent); }
.quote-chip:focus-visible { outline: var(--border-default) solid var(--color-ring); outline-offset: 2px; }
.quote-card__fine { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-muted); margin: var(--space-3) 0 0; text-align: center; }