/* responsive.css
   Tablet / mobile / forced-desktop rules keyed to html[data-device], zero-scroll mobile stepper, and reduced-motion. Must load last. */

/* Intermediate Desktop / Tablet (861px–1180px) */
@media (min-width: 861px) and (max-width: 1180px) {
    html:not([data-forced-desktop="true"]) .attr-cell .v {
        font-size: 0.62em;
    }
}

/* When user clicks 'Mobile' mode on a wide Desktop viewport (>860px), render Mobile Ergonomic Frame */
@media (min-width: 861px) {
    html[data-device="mobile"] .nav-inner,
    html[data-device="mobile"] .container {
        max-width: 520px;
    }
}

/* ============================================================================
   USER-AGENT CLIENT HINTS (UA-CH) MOBILE ZERO-SCROLL 1-CARD STEPPER DYNAMICS
   Maximizes active card real estate (>74% viewport height) with 0 vertical scroll
   ============================================================================ */
html[data-device="mobile"] .nav-inner {
    padding: 4px 10px;
    gap: 4px;
}
html[data-device="mobile"] .nav-brand {
    order: 1;
    gap: 6px;
}
html[data-device="mobile"] .nav-rune-badge {
    width: 24px;
    height: 24px;
    font-size: 0.92em;
}
html[data-device="mobile"] .nav-brand-text {
    font-size: 0.8em;
    letter-spacing: 0.3px;
}
html[data-device="mobile"] .nav-cta {
    order: 2;
    margin-left: auto;
    gap: 4px;
}
html[data-device="mobile"] .nav-cta .btn {
    padding: 3px 8px;
    font-size: 0.68em;
}
html[data-device="mobile"] .uach-bar {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    padding: 2px 6px;
    font-size: 0.64em;
}
html[data-device="mobile"] .container {
    padding: 4px 10px 6px 10px;
    gap: 4px;
}
html[data-device="mobile"] .hero {
    padding: 5px 10px;
    gap: 6px;
}
html[data-device="mobile"] .logo-img {
    width: 34px;
    height: 34px;
}
html[data-device="mobile"] h1 {
    font-size: 0.98rem;
}

/* Collapse secondary chrome in Mobile Paged mode so the active card fits 100dvh with 0 scroll */
html[data-device="mobile"]:not([data-view="all"]) .hero-sub,
html[data-device="mobile"]:not([data-view="all"]) .hero-attributes,
html[data-device="mobile"]:not([data-view="all"]) .realm-legend,
html[data-device="mobile"]:not([data-view="all"]) .section-desc,
html[data-device="mobile"]:not([data-view="all"]) footer > div:first-child {
    display: none !important;
}

html[data-device="mobile"] .page-tabs-row {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Compact 7-tab horizontal strip on Mobile */
html[data-device="mobile"] .page-tabs {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}
html[data-device="mobile"] .page-tab {
    padding: 4px 2px;
    font-size: 0.6rem;
}
html[data-device="mobile"] .page-tab .tab-full {
    display: none;
}
html[data-device="mobile"] .page-tab .tab-short {
    display: inline;
}
html:not([data-device="mobile"]) .page-tab .tab-short {
    display: none;
}

html[data-device="mobile"]:not([data-view="all"]) .mobile-card-stepper {
    display: flex;
}

html[data-device="mobile"] .grid-3,
html[data-device="mobile"] .workflow-grid {
    grid-template-columns: 1fr;
}

html[data-device="mobile"]:not([data-view="all"]) .grid-3 .card,
html[data-device="mobile"]:not([data-view="all"]) .workflow-grid .workflow-card,
html[data-device="mobile"]:not([data-view="all"]) .bundle-banner {
    display: none;
}

html[data-device="mobile"]:not([data-view="all"]) .grid-3 .card.mob-active-card,
html[data-device="mobile"]:not([data-view="all"]) .workflow-grid .workflow-card.mob-active-card,
html[data-device="mobile"][data-view="all"] .grid-3 .card,
html[data-device="mobile"][data-view="all"] .workflow-grid .workflow-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 10px 12px;
}

html[data-device="mobile"]:not([data-view="all"]) .bundle-banner.mob-active-card,
html[data-device="mobile"][data-view="all"] .bundle-banner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
}

/* Fix previous 3-column mobile list overlap: always stack bullets in 1 clean column on mobile */
html[data-device="mobile"] .grid-3 .card ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
    list-style: none;
    padding-left: 0;
    margin: 4px 0 6px 0;
}
html[data-device="mobile"] .grid-3 .card li {
    background: var(--bg-attr);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--realm-main);
    border-radius: 5px;
    padding: 6px 9px;
    margin-bottom: 0;
}

html[data-device="mobile"] .bundle-grid {
    grid-template-columns: 1fr;
}
html[data-device="mobile"] .bundle-price-col {
    width: 100%;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

html[data-device="mobile"] .bottom-pager {
    padding: 4px 8px;
}
html[data-device="mobile"] .pager-btn {
    padding: 4px 8px;
    font-size: 0.68em;
}
html[data-device="mobile"] .pager-indicator {
    font-size: 0.66em;
}

@media (max-width: 480px) {
    #cookie-consent-banner {
        left: 12px;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Hide empty .grid-3 / .workflow-grid when the 4th step (.bundle-banner) is active on Mobile */
html[data-device="mobile"]:not([data-view="all"]) .deck-page:has(.bundle-banner.mob-active-card) .grid-3,
html[data-device="mobile"]:not([data-view="all"]) .deck-page:has(.bundle-banner.mob-active-card) .workflow-grid {
    display: none !important;
}
html[data-device="mobile"] .bundle-banner > div:first-child {
    flex: 0 1 auto !important;
}

/* Short Desktop / Laptop Viewports (e.g. 1366x768 where clientHeight is ~625px) */
@media (min-width: 861px) and (max-height: 820px) {
    html[data-device="desktop"][data-view="paged"] .top-nav .nav-inner {
        padding: 3px 12px;
    }
    html[data-device="desktop"][data-view="paged"] .container {
        padding: 3px 12px 4px 12px;
        gap: 3px;
    }
    html[data-device="desktop"][data-view="paged"] .deck-stage {
        gap: 3px;
    }
    html[data-device="desktop"][data-view="paged"] .hero {
        padding: 3px 10px;
    }
    html[data-device="desktop"][data-view="paged"] .logo-img {
        width: 34px;
        height: 34px;
    }
    html[data-device="desktop"][data-view="paged"] h1 {
        font-size: 1rem;
    }
    html[data-device="desktop"][data-view="paged"] .hero-sub {
        font-size: 0.68em;
    }
    html[data-device="desktop"][data-view="paged"] .deck-nav-panel {
        padding: 3px 6px;
    }
    html[data-device="desktop"][data-view="paged"] .page-tabs-row {
        padding-bottom: 3px;
        margin-bottom: 3px;
    }
    html[data-device="desktop"][data-view="paged"] .page-tab {
        padding: 3px 4px;
        font-size: 0.6rem;
    }
    html[data-device="desktop"][data-view="paged"] .legend-chip {
        padding: 1px 3px;
        font-size: 0.54em;
    }
    html[data-device="desktop"][data-view="paged"] .section-header h2 {
        font-size: 0.88rem;
    }
    html[data-device="desktop"][data-view="paged"] .section-desc {
        font-size: 0.66em;
        margin-bottom: 1px;
    }
    html[data-device="desktop"][data-view="paged"] .card {
        padding: 6px 10px 5px 10px;
    }
    html[data-device="desktop"][data-view="paged"] .card-top {
        margin-bottom: 3px;
    }
    html[data-device="desktop"][data-view="paged"] .card h3 {
        font-size: 0.85rem;
    }
    html[data-device="desktop"][data-view="paged"] .price {
        font-size: 0.98rem;
    }
    html[data-device="desktop"][data-view="paged"] .attr-strip {
        padding: 2px 6px;
        margin-bottom: 3px;
    }
    html[data-device="desktop"][data-view="paged"] .card ul {
        font-size: 0.65rem;
        line-height: 1.2;
        margin-bottom: 3px;
    }
    html[data-device="desktop"][data-view="paged"] .card li {
        margin-bottom: 1px;
    }
    html[data-device="desktop"][data-view="paged"] .card-footer {
        padding-top: 3px;
    }
    html[data-device="desktop"][data-view="paged"] .bundle-banner {
        padding: 4px 10px;
        gap: 6px;
    }
    html[data-device="desktop"][data-view="paged"] .bundle-banner h3 {
        font-size: 0.82em;
        margin: 0 0 1px 0;
    }
    html[data-device="desktop"][data-view="paged"] .bundle-option {
        padding: 2px 6px;
        font-size: 0.64em;
        line-height: 1.16;
    }
    html[data-device="desktop"][data-view="paged"] .bundle-price-col {
        padding: 3px 8px;
        min-width: 155px;
    }
    html[data-device="desktop"][data-view="paged"] .bundle-price {
        font-size: 1.02em;
    }
    html[data-device="desktop"][data-view="paged"] .bottom-pager {
        padding: 3px 8px;
    }
}