/**
 * Layout Styles
 *
 * Section-level grid/layout rules shared across MULTIPLE templates
 * (not homepage-only). Per theme-architecture/CSS_ARCHITECTURE.md.
 *
 * HOMEPAGE DEVELOPMENT PASS: hero, trust-strip, stats-bar, and pro-band
 * rules previously here have MOVED to assets/css/homepage.css, which
 * is now enqueued only on the front page (per inc/assets.php's new
 * conditional enqueue) — keeping them here would mean every template
 * sitewide downloads homepage-only CSS, which is exactly what
 * theme-architecture/PERFORMANCE_ARCHITECTURE.md's conditional-asset
 * rule exists to prevent. Only the genuinely cross-template card-grid
 * primitive remains in this file.
 */

/* Card grids */
.card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 640px) { .card-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
	.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
	.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Pro band (shared by homepage + future template-pro-landing.php) */
.pro-band { background: var(--color-navy); color: var(--color-text-on-navy); padding: var(--space-7) 0; }
.pro-band h2 { color: var(--color-text-on-navy); }
.pro-band p { color: var(--color-text-on-navy-muted); }
.pro-inner { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 1024px) { .pro-inner { grid-template-columns: 1.2fr 1fr; } }
.pro-modules { display: flex; gap: var(--space-3); margin-top: var(--space-4); overflow-x: auto; }
@media (min-width: 640px) { .pro-modules { display: grid; grid-template-columns: repeat(3, 1fr); overflow-x: visible; } }
.pro-module-card { border: var(--border-hairline-navy); border-radius: var(--radius-md); padding: var(--space-4); flex: 0 0 78%; }
@media (min-width: 640px) { .pro-module-card { flex: initial; } }
/* h3 covers pro-teaser.php's real markup; h4 covers the older
   pro-card.php (still on disk for future crosslink-context reuse). */
.pro-module-card h3, .pro-module-card h4 { color: var(--color-text-on-navy); font-size: 1rem; margin-bottom: var(--space-1); }
.pro-module-card p { font-size: 0.875rem; margin-bottom: 0; }
.module-tag { display: inline-block; font-size: 0.6875rem; text-transform: uppercase; padding: 2px 8px; border-radius: var(--radius-sm); margin-bottom: var(--space-2); }
.module-tag.claims { background: rgba(15,76,58,0.25); color: #9fd9c1; }
.module-tag.eot { background: rgba(62,142,107,0.25); color: #bfe3d2; }
.module-tag.variations { background: rgba(217,164,65,0.25); color: #f0cf8e; }

.pro-modules-hint {
	font-size: 0.75rem; color: var(--color-text-on-navy-muted); margin: var(--space-2) 0 0; text-align: center;
}
@media (min-width: 640px) { .pro-modules-hint { display: none; } }

/* TODO: calculator-only, hsn-sac-only, and compliance-article-only
   layout rules belong in their own files once those templates are built —
   per theme-architecture/CSS_ARCHITECTURE.md's file-split plan. */