/* comparison_grid block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   two-up comparison cards, navy variant */

/* The section markup does not carry .content-area.pad, so it had no vertical
   rhythm and the cards sat flush to the section edges. Apply the shared section
   spacing here (top AND bottom) using the same tokens .content-area.pad uses. */
.comparison-grid { padding-top: var(--space-section); padding-bottom: var(--space-section); }

/* Columns are not an ACF choice, so auto-fit to the card count: 2 cards -> 2
   cols, 3 -> 3, etc., instead of a fixed 2-col that wrapped 3 cards as 2 + 1. */
.comparison-grid__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap-grid); }
.comparison-card { display: flex; flex-direction: column; gap: .7rem; background: var(--white); border: 1px solid var(--line); border-top: var(--card-edge) solid var(--accent); border-radius: var(--radius-sm); padding: 1.7rem 1.8rem; }
.comparison-card--navy { background: var(--surface-dark); border-color: var(--surface-dark); }
.comparison-card--navy :is(h2, h3, .comparison-card__title) { color: var(--white); }
.comparison-card--navy :is(.comparison-card__description, .comparison-card__body li) { color: rgba(var(--on-dark-rgb), .84); }
.comparison-card__header { display: flex; align-items: center; gap: .75rem; }
/* A filled chip carrying text needs a fill/label pair that is known to work.
   --accent-2 is a bright accent with no defined label partner, so white on it
   measured 2.15:1 on nlc's teal. --btn-accent-bg / --btn-accent-text ARE defined
   as a pair, per brand, and every child sets them to clear AA together. */
.comparison-card__badge { font-size: var(--fs-meta); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--btn-accent-text); background: var(--btn-accent-bg); padding: .35rem .8rem; border-radius: var(--radius-pill); }
.comparison-card__title { font-size: 1.75rem; }
.comparison-card__description { font-size: var(--fs-min); color: var(--muted); }
.comparison-card__body { display: flex; flex-direction: column; gap: .6rem; margin-top: .3rem; }
.comparison-card__body li { display: flex; gap: .7rem; font-size: var(--fs-min); line-height: 1.55; color: var(--muted); }
.comparison-card__body li::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-top: .5rem; background: var(--accent-2); }
.comparison-card__cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; font-weight: 700; font-size: var(--fs-min); color: var(--link); text-decoration: none; }
.comparison-card__cta:hover { text-decoration: underline; }

/* Navy card: DC's orange accent (--accent-2) bullets and the orange link fail
   contrast on navy — lift them to the bright on-dark accent (yellow on DC,
   otherwise the brand's accent-on-dark). */
.comparison-card--navy .comparison-card__body li::before { background: var(--yellow, var(--accent-on-dark)); }
.comparison-card--navy .comparison-card__cta { color: var(--yellow, var(--accent-on-dark)); }

@media (max-width: 64em) { .comparison-grid__cards { grid-template-columns: 1fr; } }