/* ============================================================
   SISTEMA F BET — Responsivo
   breakpoints: 1024 · 900 · 768 (nav) · 560
   script.js alterna .active em .nav__toggle/.nav__menu — o painel
   mobile é este .nav__menu.active abaixo.
   ============================================================ */

@media (max-width: 1024px) {
    .hero__container { grid-template-columns: 1fr; gap: 40px; }

    .sports__grid, .casino__categories, .bonus__grid, .about__features { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .footer__main { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 768px) {
    .nav__toggle { display: flex; }

    .nav__menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--panel);
        border-bottom: 1px solid var(--brass-deep);
        padding: 10px 24px 16px;
        box-shadow: 0 20px 32px rgba(0, 0, 0, 0.45);
    }

    .nav__link {
        display: block;
        padding: 13px 4px;
        border-radius: 0;
        border-bottom: 1px solid var(--hairline);
    }

    .nav__link::after { display: none; }

    .hero { padding: calc(var(--header-h) + 44px) 0 60px; }

    .hero__features { grid-template-columns: 1fr; }

    .hero__feature + .hero__feature { border-left: 0; border-top: 1px solid var(--hairline); }

    .sports, .casino, .bonus, .about { padding: 58px 0; }

    .odds-item { grid-template-columns: 1fr repeat(3, 52px); padding: 12px 12px; }

    section.about:not([id]) div[style] { padding: 24px 20px 10px; }
}

@media (max-width: 560px) {
    .sports__grid, .casino__categories, .bonus__grid, .about__features { grid-template-columns: 1fr; }

    .hero__cta { flex-direction: column; align-items: stretch; }

    .btn { width: 100%; max-width: 320px; margin-inline: auto; }

    .footer__bottom { flex-direction: column; }

    .sport-card__leagues li { font-size: 0.68rem; }
}