/* OpenVibe.Food's home page only (server/http/pages.js): counts, recipe and food cards, the delivery search, meal kits,
   cities and questions. Theme tokens only, so light and dark both read; every grid fits a 320px phone. */
.home-stats { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); }
.home-stats li { border-radius: 14px; border: 1px solid var(--border, #1f2d47); border-top: 3px solid var(--accent, #3b82f6); background: var(--bg-secondary, #0f1729); }
.home-stats a { display: block; height: 100%; box-sizing: border-box; padding: 14px 16px; color: inherit; text-decoration: none; border-radius: 14px; }
.home-stats a:hover, .home-stats a:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: -2px; }
.home-stats b { display: block; font-size: 1.6rem; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; }
.home-stats span { display: block; margin-top: 4px; font-size: .86rem; color: var(--text-secondary, #96a7c2); }

.home-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.home-cards.three { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.home-cards.five { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
.home-cards a { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #131c2e); color: var(--text-primary, #e6edf7); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.home-cards a:hover, .home-cards a:focus-visible { border-color: var(--accent, #3b82f6); transform: translateY(-1px); outline: 0; }
.home-cards b { font-size: 1rem; overflow-wrap: anywhere; }
.hc-main { font-size: .88rem; color: var(--text-secondary, #96a7c2); }
.hc-main strong { font-size: 1.25rem; color: var(--text-primary, #e6edf7); font-variant-numeric: tabular-nums; }
.hc-sub { font-size: .84rem; color: var(--text-secondary, #96a7c2); }
.hc-host { margin-top: auto; padding-top: 4px; font-size: .78rem; color: var(--text-muted, #7386a3); }
.hc-tag { margin-left: 6px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border-light, #2c3d5c); font-size: .72rem; font-weight: 600; color: var(--text-secondary, #96a7c2); vertical-align: 2px; }

.home-chips { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.home-chips li { font-size: .92rem; }
.home-chips li:not(:has(a)) { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border, #1f2d47); color: var(--text-secondary, #96a7c2); }
.home-chips a { display: inline-flex; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-light, #2c3d5c); background: var(--bg-secondary, #0f1729); color: var(--text-primary, #e6edf7); text-decoration: none; }
.home-chips a:hover, .home-chips a:focus-visible { border-color: var(--accent, #3b82f6); }

.home-search { display: grid; gap: 6px; max-width: 640px; }
.home-search label { font-size: .85rem; font-weight: 650; color: var(--text-secondary, #96a7c2); }
.home-search-row { display: flex; flex-wrap: wrap; gap: 8px; }
.home-search input { flex: 1 1 220px; min-width: 0; font: inherit; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border-light, #2c3d5c); background: var(--bg-secondary, #0f1729); color: var(--text-primary, #e6edf7); }

.home-faq { display: grid; gap: 8px; max-width: 820px; }
.home-faq details { border-radius: 12px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #131c2e); }
.home-faq summary { cursor: pointer; padding: 12px 16px; font-weight: 650; }
.home-faq summary:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: -2px; border-radius: 12px; }
.home-faq details p { margin: 0; padding: 0 16px 14px; color: var(--text-secondary, #96a7c2); line-height: 1.55; }
@media (max-width: 520px) { .home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .home-cards a { padding: 10px 12px; } .hc-main strong { font-size: 1.1rem; } }
@media (prefers-reduced-motion: reduce) { .home-cards a { transition: none; } .home-cards a:hover { transform: none; } }