/* ========================================================================== Kiddohub — Responsive & Age-Adaptive (Phase 14) Breakpoint matrix: 320 / 375 / 768 / 1024 / 1440 Age-adaptive scaling via body data attributes set per selected child. ========================================================================== */ /* ---- Responsive grid helpers ---- */ .kh-grid { display: grid; gap: var(--kh-space-md); } .kh-grid--2 { grid-template-columns: repeat(2, 1fr); } .kh-grid--3 { grid-template-columns: repeat(3, 1fr); } .kh-grid--4 { grid-template-columns: repeat(4, 1fr); } .kh-grid--5 { grid-template-columns: repeat(5, 1fr); } /* ========================================================================== AGE-ADAPTIVE UI The selected child's age_group is emitted on . Little Explorer gets larger type, controls, spacing, and simpler layouts. ========================================================================== */ /* Little Explorer (ages 4–6): bigger everything, fewer choices */ body[data-age="little_explorer"] { --kh-text-body: 1.2rem; --kh-text-card: 1.35rem; --kh-touch: 3.25rem; /* larger touch targets */ } body[data-age="little_explorer"] .kh-btn { font-size: 1.15rem; min-height: 3.4rem; } body[data-age="little_explorer"] .flag-card__image-wrap { height: 11rem; } body[data-age="little_explorer"] .flag-card__image { max-height: 9rem; } body[data-age="little_explorer"] .country-flag-large img { max-height: 18rem; } body[data-age="little_explorer"] .game-choice { min-height: 4.25rem; font-size: 1.2rem; } body[data-age="little_explorer"] .kh-chip { min-height: 3.1rem; font-size: 1.05rem; } /* Young Traveller (ages 10–11): slightly denser, richer content allowed */ body[data-age="young_traveller"] { --kh-text-body: 1rem; } /* ========================================================================== BREAKPOINT MATRIX ========================================================================== */ /* --- 1440px and up: cap content width (already via .kh-container) --- */ @media (min-width: 1440px) { .kh-container { max-width: var(--kh-max-width); } } /* --- ≤1024px (tablet landscape): 3-col grids --- */ @media (max-width: 1024px) { .kh-grid--5 { grid-template-columns: repeat(4, 1fr); } .kh-grid--4 { grid-template-columns: repeat(3, 1fr); } } /* --- ≤992px: stack map layouts (matches existing) --- */ @media (max-width: 991.98px) { .map-layout { grid-template-columns: 1fr !important; } .map-country-panel { grid-column: 1; grid-row: 2; } .map-surface { grid-column: 1; grid-row: 1; } #world-map { height: 525px; } } /* --- ≤768px (tablet portrait): 3-col → 2/3, larger touch --- */ @media (max-width: 768px) { .kh-grid--5 { grid-template-columns: repeat(3, 1fr); } .kh-grid--4 { grid-template-columns: repeat(2, 1fr); } .kh-grid--3 { grid-template-columns: repeat(2, 1fr); } } /* --- ≤576px (mobile): single column focus --- */ @media (max-width: 575.98px) { .kh-grid--4, .kh-grid--5 { grid-template-columns: repeat(2, 1fr); } .kh-grid--3 { grid-template-columns: 1fr; } #world-map { height: 430px; } /* Little Explorer mobile: one large card per row */ body[data-age="little_explorer"] .flag-grid, body[data-age="little_explorer"] .kh-grid--4, body[data-age="little_explorer"] .kh-grid--5 { grid-template-columns: 1fr; } } /* --- ≤375px (small mobile) --- */ @media (max-width: 375px) { .kh-container { padding-inline: 0.85rem; } .kh-btn { padding: 0.7rem 1.1rem; } } /* --- ≤320px (very small) --- */ @media (max-width: 320px) { .kh-grid--4, .kh-grid--5, .kh-grid--2 { grid-template-columns: 1fr; } } /* ========================================================================== PRINT — hide chrome, keep content (Passport & Parent Summary) ========================================================================== */ @media print { .app-navbar, .mobile-bottom-nav, .app-footer, .kh-btn, .kh-chip, button, form, .passport-actions, .passport-filters, .next-adventure, .back-link { display: none !important; } body { background: #fff; } .kh-card, .passport-stamp, .dashboard-panel, .dashboard-stat-card { box-shadow: none !important; break-inside: avoid; } }