/* ============================================================
   MOBILE RESPONSIVE — casino-theme
   Breakpoints: 1024px (tablet), 768px (mobile), 480px (small mobile)
   ============================================================ */

/* ============================================================
   TABLET (max 1024px)
   ============================================================ */
@media (max-width: 1024px) {

    /* Casino card — slightly narrower columns */
    .casino-card__main {
        grid-template-columns: 250px 1fr 290px;
    }

    /* General info box — 2 columns instead of 3 */
    .casino-general-info > div {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Related casinos */
    .related-casinos__grid { grid-template-columns: repeat(2, 1fr); }

    /* Footer */
    .footer-grid { grid-template-columns: repeat(2, 1fr); }

    /* Category cards */
    .category-grid { grid-template-columns: repeat(2, 1fr); }

    /* Group grid */
    .group-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   MOBILE (max 768px)
   ============================================================ */
@media (max-width: 768px) {

    /* ---- MINI REVIEW CARD ---- */
    .mini-review-grid { flex-direction: column !important; }

    /* ---- CASINO GROUP INFO GRID ---- */
    .group-info-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* ---- GLOBAL ---- */
    :root { --spacing-section: 32px; }
    .container { padding: 0 16px; }

    /* ---- HEADER ---- */
    .header-inner { height: 72px; }
    .site-logo { overflow: visible; max-width: calc(100vw - 32px); }
    .site-logo img,
    .site-logo .custom-logo,
    .custom-logo-link img {
        height: 46px !important;
        width: auto !important;
        max-width: 260px !important;
        object-fit: contain;
    }

    /* Mobile Nav Overlay */
    .main-nav { display: none; }
    .main-nav.is-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 60px;
        left: 0; right: 0; bottom: 0;
        background: #fff;
        overflow-y: auto;
        z-index: 999;
        padding: 0;
        gap: 0;
    }

    /* Top-level nav items */
    .main-nav.is-open .nav-item {
        border-bottom: 1px solid var(--color-border);
    }

    .main-nav.is-open .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px;
        font-size: 0.95rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-text);
        border-radius: 0;
        background: none;
    }

    .main-nav.is-open .nav-link:hover,
    .main-nav.is-open .nav-link.active {
        background: var(--color-surface);
        color: var(--color-primary);
    }

    .main-nav.is-open .nav-link svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        transition: transform 0.2s;
    }

    .main-nav.is-open .nav-item.is-open .nav-link svg {
        transform: rotate(180deg);
    }

    /* Dropdown inside mobile nav */
    .nav-dropdown {
        position: static;
        opacity: 1;
        pointer-events: all;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: var(--color-surface);
        display: none;
        padding: 0;
        margin: 0;
        min-width: unset;
        white-space: normal;
    }
    .nav-item.is-open .nav-dropdown { display: block; }

    .nav-dropdown a {
        display: block;
        padding: 14px 20px 14px 32px;
        font-size: 0.88rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--color-text-muted);
        border-radius: 0;
        border-bottom: 1px solid var(--color-border);
    }
    .nav-dropdown a:last-child { border-bottom: none; }
    .nav-dropdown a:hover {
        background: #e8eaf0;
        color: var(--color-primary);
    }

    /* Toggle button */
    .menu-toggle { display: flex; }

    /* Search button stays visible */
    .filter-bar { top: 60px; }

    /* ---- HERO ---- */
    .hero { padding: 32px 0; }
    .hero h1 { font-size: 1.5rem; }
    .hero p { font-size: 0.9rem; }

    /* ---- CASINO DETAIL HERO ---- */
    .casino-detail-hero { padding: 24px 0; }
    .casino-detail-hero__inner {
        grid-template-columns: 1fr !important;
        gap: 16px;
        text-align: center;
    }
    .casino-detail-hero__logo {
        width: 160px !important;
        height: 110px !important;
        margin: 0 auto;
    }
    .casino-detail-hero__logo img {
        width: 160px !important;
        height: 110px !important;
    }
    .casino-detail-hero__bonus { font-size: 1.2rem; }
    .casino-detail-hero__stats {
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px;
    }
    .casino-detail-hero__highlights { text-align: left; display: inline-block; }
    .casino-detail-hero__highlights li { font-size: 0.85rem; }

    /* ---- CASINO CARD — exact casinogroups mobile layout ---- */

    /*
       Layout:
       [ LOGO          ] [ BESTE WAHL badge        ]
       [ LOGO          ] [ Bonus Text               ]
       [ Rating+Link   ] [ Jetzt Spielen | Info     ]
    */

    .casino-card {
        position: relative;
        border: 2px solid var(--color-border);
        overflow: visible;
    }
    .casino-card--featured { border-color: var(--color-accent); }

    .casino-card__main {
        display: flex;
        flex-direction: column;
    }

    /* Logo row: logo + name + badges */
    .casino-card__col-logo {
        order: 1;
        padding: 14px 14px 6px;
        gap: 6px;
        height: auto;
    }
    .casino-card__logo-link { flex-direction: row; align-items: center; }

    .casino-card__logo {
        width: 90px !important;
        height: 65px !important;
        flex-shrink: 0;
    }
    .casino-card__logo img {
        width: 90px !important;
        height: 65px !important;
        object-fit: contain;
    }
    .casino-card__logo-link .casino-card__name { margin-left: 12px; }

    /* Bonus row */
    .casino-card__col-bonus {
        order: 2;
        padding: 6px 14px 10px;
        align-items: flex-start;
        gap: 6px;
    }
    .casino-card__bonus { font-size: 1.2rem; line-height: 1.3; }

    /* CTA row: full-width button + info toggle + 18+ */
    .casino-card__col-cta {
        order: 3;
        padding: 6px 14px 16px;
        height: auto;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        gap: 8px;
    }
    .casino-card__col-cta .btn {
        width: 100%;
        font-size: 0.85rem;
        padding: 13px 10px;
        text-transform: uppercase;
        font-weight: 800;
        white-space: nowrap;
    }
    .casino-card__col-cta .expand-toggle {
        font-size: 0.78rem;
        align-self: center;
    }

    /* Rank badge: small circle overlapping the top-left corner */
    .casino-card__rank-number {
        position: absolute;
        top: -10px;
        left: -10px;
        z-index: 2;
        font-size: 0.78rem;
        min-width: 24px;
        height: 24px;
    }

    /* Expand panel */
    .casino-card__expand {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* ---- CATEGORY GRID ---- */
    .category-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .category-card { padding: 16px 12px; }
    .category-card__icon { width: 56px; height: 56px; }

    /* ---- GROUP GRID ---- */
    .group-grid { grid-template-columns: 1fr; }

    /* ---- SINGLE CASINO PAGE ---- */
    .casino-review-content { font-size: 0.9rem; }

    /* Einführung + Vorteile stacked */
    .casino-review-content > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* General info box — single column */
    .casino-general-info > div {
        grid-template-columns: 1fr !important;
    }

    /* Info boxes side by side → stacked */
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Checklist grid 2 cols on mobile */
    .checklist-grid { grid-template-columns: repeat(2, 1fr); }

    /* Support grid */
    .support-grid { grid-template-columns: 1fr; }

    /* Bonus info grid */
    .bonus-info-grid { grid-template-columns: repeat(3, 1fr); }

    /* Payment wrap */
    .payment-icon-wrap { gap: 4px; }
    .payment-icon-item { font-size: 0.72rem; padding: 2px 6px; }
    .payment-icon-item img { width: 16px; height: 16px; }

    /* ---- AUTHOR BOX ---- */
    .author-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }
    .author-box__bio { font-size: 0.85rem; }

    /* ---- RELATED CASINOS ---- */
    .related-casinos__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .related-casino-card__bonus { font-size: 0.82rem; }

    /* ---- SLOT GRID ---- */
    .slot-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .slot-card__body { padding: 12px; }
    .slot-card__title { font-size: 0.85rem; }

    /* ---- FILTER TABS ---- */
    .filter-tabs { gap: 4px; padding: 8px 0; }
    .filter-tab { padding: 6px 12px; font-size: 0.8rem; }

    /* ---- PAGINATION ---- */
    .pagination { gap: 4px; margin-top: 32px; }
    .pagination .page-numbers { width: 36px; height: 36px; font-size: 0.85rem; }

    /* ---- FOOTER ---- */
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        font-size: 0.75rem;
    }
    .site-footer { padding: 40px 0 20px; }

    /* ---- INFO BOX GRID (payments) ---- */
    .info-box__grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
}

/* ============================================================
   SMALL MOBILE (max 480px)
   ============================================================ */
@media (max-width: 480px) {

    /* Typography */
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.2rem; }

    /* Casino card tighter */
    .casino-card__logo { width: 70px !important; height: 50px !important; }
    .casino-card__logo img { width: 70px !important; height: 50px !important; }
    .casino-card__bonus { font-size: 0.95rem; }

    /* Slot grid single column on very small screens */
    .slot-grid { grid-template-columns: repeat(2, 1fr); }

    /* Related casinos single column */
    .related-casinos__grid { grid-template-columns: repeat(2, 1fr); }

    /* Category grid */
    .category-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .category-card { padding: 12px 8px; }
    .category-card__title { font-size: 0.8rem; }

    /* Hero */
    .hero { padding: 24px 0; }
    .casino-detail-hero__logo {
        width: 130px !important;
        height: 90px !important;
    }
    .casino-detail-hero__logo img {
        width: 130px !important;
        height: 90px !important;
    }

    /* Info boxes */
    .checklist-grid { grid-template-columns: 1fr 1fr; }
    .bonus-info-grid { grid-template-columns: 1fr 1fr; }

    /* General info — single col */
    .casino-general-info > div {
        grid-template-columns: 1fr !important;
    }

    /* Rank number */
    .casino-card__rank-number { min-width: 26px; height: 26px; font-size: 0.78rem; }

    /* Expand toggle */
    .expand-toggle { font-size: 0.75rem; }
}