/*
 * Hub-specific layout rules for /  and /{cc}/ pages.
 *
 * Why a dedicated file: the pre-built style.min.css ships Tailwind v4
 * with native CSS nesting, which is unreliable for responsive width
 * utilities like lg:w-1/3. And the grid utility `lg:grid` isn't in the
 * build at all. Rather than inline <style> blocks in every partial,
 * component-scoped layout rules live here.
 *
 * Loaded only from:
 *   - resources/views/country/hub.blade.php
 *   - resources/views/global/hub.blade.php
 */

/* ── Country picker 5-column grid (header-minimal) ───────────────── */
.mkv-country-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 8px;
}
@media (max-width: 1023px) {
    .mkv-country-grid { display: none; }
}

/* ── Minimal footer 3-column layout ──────────────────────────────── */
.mkv-footer-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1rem;
    margin-right: -1rem;
}
.mkv-footer-col {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 2rem;
}
@media (min-width: 1024px) {
    .mkv-footer-row {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }
    .mkv-footer-col {
        width: 33.3333%;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin-bottom: 0;
    }
}