/* ==========================================================================
   responsive.css — breakpoints
     >=  960  desktop: logo + centred .mainnav + login / register (one row from 1200px), no sidebar, fixed dock; content capped at 1440px
     <= 1279  narrower grids; slide-over sidebar rules (the sidebar is only shown below 960px)
     <=  959  tablet: slide-over sidebar + bottom bar, stacked hero (768, phones)
     <=  599  phone: app-like UI               (430, 390, 375)
   Colours come from the tokens in style.css.
   ========================================================================== */

/* ---- <= 1279px: slide-over sidebar ----------------------------------------- */
@media (max-width: 1279px) {
    .layout { padding-left: 0; }
    .drawer {
        width: min(264px, 86vw);
        transform: translateX(-105%);
        box-shadow: var(--shadow-pop);
        visibility: hidden;
        transition: transform var(--transition), visibility 0s linear .22s;
    }
    .drawer-open .drawer { transform: none; visibility: visible; transition-delay: 0s; }
    .drawer-open body { overflow: hidden; }
    .provider-strip__list { grid-template-columns: repeat(6, 1fr); }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-strip__inner { gap: 24px; }
}

/* ---- <= 959px: tablet ------------------------------------------------------ */
@media (max-width: 959px) {
    :root { --bottom-bar-h: calc(66px + env(safe-area-inset-bottom, 0px)); --appbar-h: 60px; --mainnav-h: 0px; --section-gap: 28px; }
    .mainnav { display: none; }

    .container { padding: 12px 12px 32px; }

    /* touch target of the register CTA (the login button next to it in the header follows) */
    .register-cta, .auth-actions .btn { min-height: 42px; }


    .home-menu { grid-template-columns: 1fr; }
    .home-menu__hero { grid-template-columns: 1fr 1fr; }
    .menu-card { min-height: 92px; padding: 10px 12px; }
    .menu-card--hero .menu-card__title { font-size: 16px; }

    .game-row__track--wide > .game-card { flex-basis: 190px; }
    .game-grid--vertical { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .provider-strip__list { grid-template-columns: repeat(4, 1fr); }
    .services__list { grid-template-columns: repeat(2, 1fr); }

    .article { margin-top: 40px; padding: 28px 24px 0; }   /* side room for the text only: the article is the only padded block */
    .article__section { margin-top: 32px; }
    .article__section > h2 { font-size: 19px; }
    .provider-groups { grid-template-columns: 1fr; gap: 14px; }

    .catalog__controls .dropdown { flex: 1 1 0; min-width: 0; }
    .catalog__controls .toolbar-btn { width: 100%; justify-content: center; }
    .catalog__controls .dropdown:last-child .dropdown__menu { left: auto; right: 0; }
    .content-hero { padding: 18px; }
    .content-hero__title { font-size: 21px; }
    .contact-columns { grid-template-columns: 1fr; }

    .footer { margin-top: 40px; }
    .trust-strip__inner { gap: 16px; padding: 16px; }
    .trust-label { flex-basis: 100%; text-align: center; }
    .trust-label br { display: none; }
    .trust-divider { display: none; }
    .trust-logo img { max-height: 28px; }
    .footer__payment { flex-direction: column; gap: 14px; padding: 18px 16px 24px; text-align: center; }
    .payment, .payment__list { justify-content: center; }
    .footer__copyright { text-align: center; }

    /* .sitenav as the fixed bottom bar: 5 equal columns, the header logo in the middle (register) */
    /* room for the bar belongs to the footer (the last block of every page), so it holds wherever the footer sits in the markup */
    .layout { padding-bottom: 0; }
    .footer { padding-bottom: calc(var(--bottom-bar-h) + 14px); }
    .sitenav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
        display: grid; grid-template-columns: repeat(5, 20%); align-items: stretch; gap: 0;
        max-width: none; height: var(--bottom-bar-h); margin: 0; padding: 0 0 env(safe-area-inset-bottom, 0px);
        background: var(--bg-deep);
    }
    .sitenav__item { justify-content: center; gap: 3px; min-width: 0; padding: 0; font-size: 11px; line-height: 1.2; }
    .sitenav__item .navicon { width: 24px; height: 24px; }
    .sitenav__item:hover .navicon { transform: none; }
    .sitenav__item::after { top: 0; bottom: auto; width: 24px; margin-left: -12px; }
    .sitenav__item:hover::after { transform: scaleX(0); }
    .sitenav__item.is-active::after { transform: scaleX(1); }
    .sitenav__item--register { gap: 4px; }
    .sitenav__logo { transform: translateY(-5px); }
    .sitenav__item--register:hover .sitenav__logo { transform: translateY(-5px); }
    .sitenav__item--register:active .sitenav__logo { transform: translateY(-5px) scale(.96); }
}

/* ---- <= 599px: phone ---------------------------------------------------------- */
@media (max-width: 599px) {
    :root { --gap: 10px; --appbar-h: 56px; }

    .appbar { gap: 6px; padding: 0 10px 0 8px; }
    .appbar__logo { width: auto; padding: 4px 0; }
    .appbar__logo img { width: auto; max-height: 26px; max-width: clamp(80px, 26vw, 110px); }
    .appbar__actions, .auth-actions { gap: 6px; }
    .appbar__search { display: none; }
    .icon-btn { width: 40px; height: 40px; border-color: transparent; background: transparent; }
    .icon-btn .icon { width: 22px; height: 22px; }
    .auth-actions .btn { height: 40px; padding: 0 10px; font-size: 13px; }

    .video-card { min-height: 0; }

    .menu-card { min-height: 84px; padding: 10px; }
    .menu-card--hero .menu-card__title, .menu-card--mini .menu-card__title { font-size: 14px; }
    .menu-card__title .icon { width: 18px; height: 18px; }
    .home-menu__mini { gap: 8px; }

    .section-title, .game-row__title, .catalog__title { font-size: 18px; }
    .section-title[data-en]::before, .game-row__title[data-en]::before { height: 30px; }
    .row-btn { min-width: 40px; height: 40px; }
    .game-row__track { scroll-snap-type: x mandatory; }
    .game-row__track > .game-card { flex-basis: 116px; }
    .game-row__track--wide > .game-card { flex-basis: 170px; }
    .game-grid--vertical { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .game-grid--horizontal { grid-template-columns: 1fr 1fr; }
    .provider-strip__list { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .provider-box { height: 48px; }
    .services__list { grid-template-columns: 1fr 1fr; }
    .service { padding: 12px; gap: 10px; }
    .service__title { font-size: 14px; }
    .service__desc { font-size: 12px; }

    .article { padding-left: 18px; padding-right: 18px; }
    .article__lead, .article__section > p { font-size: 15px; line-height: 1.75; }
    .article__lead p + p, .article__section > p + p { margin-top: 14px; }
    .article__section { margin-top: 28px; }
    .article__section > h2 { margin-bottom: 12px; font-size: 18px; }
    .feature-grid { grid-template-columns: 1fr; }
    .cta { padding: 14px; }
    .cta__actions { width: 100%; }
    .cta__actions .btn { flex: 1 1 0; }

    .dropdown__menu--wide { width: min(300px, calc(100vw - 24px)); }
    .content-grid, .channel-grid { grid-template-columns: 1fr; }
    .empty-state__code { font-size: 52px; }

    .footer__links { gap: 0 18px; }
    .payment__list img { width: 30px; height: 30px; }

    /* dialogs become bottom sheets */
    .modal { max-width: 100vw; margin: auto 0 0; }
    .modal__panel { padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; max-height: 92dvh; }

    .floating { right: 12px; }
}

/* ---- touch devices: no hover lift --------------------------------------------- */
@media (hover: none) {
    .game-card__thumb:hover, .menu-card:hover, .promo-strip__slide:hover, .btn--primary:hover { transform: none; }
    .game-card__thumb:hover img { transform: none; }
}