/* ------------------------------------------------------------------
 * Responsive overrides.
 * Mobile-first would be cleaner, but the original site is desktop-first
 * and we keep the same visual identity, so we use breakpoint overrides.
 * Selectors include both shadcn-style `[data-slot]` names and legacy
 * class names so that markup migrated in stages keeps the same
 * breakpoints.
 * ------------------------------------------------------------------ */

/* ============== Tablet & small desktop ========================= */

@media (max-width: 900px) {
    .container {
        width: min(100% - 30px, var(--container-max));
    }

    [data-slot="navigation-menu-list"],
    .nav-links {
        display: none;
    }

    [data-slot="navigation-menu-tools"],
    .nav-tools {
        gap: var(--space-3);
    }

    .hero {
        padding: 54px 0 36px;
    }

    .hero-grid {
        display: block;
    }

    .hero h1 {
        font-size: 56px;
    }

    .hero p {
        font-size: var(--font-size-3xl);
    }

    .hero-actions [data-slot="button"],
    .hero-actions .btn {
        width: 100%;
        font-size: var(--font-size-lg);
        min-height: 58px;
    }

    [data-slot="badge"][data-variant="outline"],
    .pill {
        font-size: var(--font-size-base);
        padding: 13px 17px;
    }

    .visual {
        display: none;
    }

    [data-slot="steps"],
    .test-data-grid,
    .scenarios-grid,
    .feature-sections-grid,
    .audience-grid {
        grid-template-columns: 1fr;
    }

    .install-mac__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .install-mac__intro p {
        max-width: none;
    }

    [data-slot="list"][data-variant="numbered-large"],
    .install-mac__steps {
        padding: 22px;
    }

    [data-slot="card"][data-variant="positioning"],
    [data-slot="card"][data-variant="privacy-hero"],
    .positioning-card,
    .privacy-card {
        padding: 28px 24px;
    }

    [data-slot="card"][data-variant="positioning"] h2,
    [data-slot="card"][data-variant="privacy-hero"] h2,
    .positioning-card h2,
    .privacy-card h2 {
        font-size: 30px;
    }

    [data-slot="card"][data-variant="centered"],
    .macos-first-card {
        padding: 26px 22px;
    }

    [data-slot="card"][data-variant="centered"] h2,
    .macos-first-card h2 {
        font-size: 28px;
    }

    /* Two-column compare-table stays two-up on tablet, just tighter. */
    [data-slot="table"]:not([data-variant="three-col"]) [data-slot="table-cell"],
    .compare-table__cell {
        padding: 14px 16px;
        font-size: var(--font-size-base);
    }

    [data-slot="table"]:not([data-variant="three-col"]) [data-slot="table-head"],
    [data-slot="table"]:not([data-variant="three-col"]) [data-slot="table-cell"][data-variant="head"],
    .compare-table__cell--head {
        font-size: 11px;
    }

    /* Three-column compare-full-table reflows into a 2-col layout that
       mirrors the lighter compare-table:
         - the head row keeps "Usual process | In Cassini" at the top
           (the "Task" header is hidden, since each task becomes a
           full-width divider strip below)
         - each data row places its task name as a full-width strip
           followed by usual + cassini cells side by side. */
    [data-slot="table"][data-variant="three-col"],
    .compare-full-table {
        grid-template-columns: 1fr 1fr;
    }

    [data-slot="table"][data-variant="three-col"] [data-slot="table-header"] [data-slot="table-cell"]:first-child,
    .compare-full-table__head .compare-full-table__cell:first-child {
        display: none;
    }

    [data-slot="table"][data-variant="three-col"] [data-slot="table-cell"][role="rowheader"],
    .compare-full-table__cell[role="rowheader"] {
        grid-column: 1 / -1;
        background: rgba(255, 255, 255, 0.06);
        color: var(--color-text);
        font-weight: var(--font-weight-bold);
        text-align: center;
    }

    [data-slot="table"][data-variant="three-col"] [data-slot="table-cell"],
    .compare-full-table__cell {
        padding: 14px 16px;
        font-size: var(--font-size-base);
    }

    [data-slot="table"][data-variant="three-col"] [data-slot="table-head"],
    .compare-full-table__cell--head {
        font-size: 11px;
    }

    [data-slot="card"][data-variant="scenario"] h3,
    .scenario-card h3 {
        padding-right: 46px;
    }

    [data-slot="navigation-menu-tools"],
    .nav-tools {
        gap: var(--space-2);
    }

    [data-slot="dialog-content"],
    .modal {
        padding: 26px 18px;
        border-radius: var(--radius-2xl);
    }

    h2,
    .cta-box h2,
    [data-slot="card"] .cta-h2,
    .checklist-promo .cta-box h2,
    .checklist-promo [data-slot="card"] h2 {
        font-size: 40px;
    }

    [data-slot="dialog-title"],
    .modal h2 {
        font-size: 38px;
    }

    [data-slot="list"][data-variant="numbered"] > li,
    .install-steps li {
        font-size: 15px;
        padding-left: 48px;
    }

    .footer-inner {
        display: grid;
    }

    .sticky-actions {
        right: var(--container-gutter-sm);
        bottom: var(--container-gutter-sm);
    }

    .sticky-actions:not(.sticky-actions--checklist-row) [data-slot="button"]:not([data-size="icon"]),
    .sticky-actions:not(.sticky-actions--checklist-row) .btn:not(.btn-icon) {
        padding: 14px 20px;
        font-size: 15px;
    }
}

/* ============== Phone ========================================== */

@media (max-width: 480px) {
    main {
        padding-bottom: 94px;
    }

    .hero h1 {
        font-size: 40px;
        line-height: 0.98;
        overflow-wrap: anywhere;
    }

    h2,
    .cta-box h2,
    .checklist-promo .cta-box h2,
    .checklist-promo [data-slot="card"] h2 {
        font-size: 32px;
    }

    [data-slot="dialog-title"],
    .modal h2 {
        font-size: 30px;
    }

    .hero p {
        font-size: var(--font-size-lg);
    }

    .hero-actions [data-slot="button"],
    .hero-actions .btn {
        min-height: 54px;
        font-size: var(--font-size-lg);
    }

    .cta-box {
        padding: 26px 18px;
    }

    .download-row [data-slot="button"],
    .download-row .btn {
        width: 100%;
    }

    [data-slot="dialog-overlay"],
    .modal-backdrop {
        place-items: end center;
        padding: 10px 10px max(10px, env(safe-area-inset-bottom));
    }

    [data-slot="dialog-content"],
    .modal {
        width: 100%;
        max-height: calc(100dvh - 20px);
        padding: 18px 14px 14px;
        border-radius: var(--radius-xl);
    }

    [data-slot="dialog-footer"] [data-slot="button"],
    .modal-actions .btn {
        width: 100%;
    }

    [data-slot="list"][data-variant="numbered"] > li,
    .install-steps li {
        font-size: var(--font-size-md);
        padding-left: 40px;
    }

    .sticky-actions:not(.sticky-actions--checklist-row) {
        left: 12px;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-2);
        opacity: 0;
        pointer-events: none;
        transform: translateY(14px);
        transition: opacity var(--duration-fast) var(--ease-soft),
        transform var(--duration-fast) var(--ease-soft);
        will-change: transform, opacity;
    }

    .sticky-actions--checklist-row {
        left: 12px;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: stretch;
        gap: 8px;
        max-width: none;
        width: auto;
    }

    /* The landing's bottom sticky bar fades in once the hero scrolls past
       (main-landing.js toggles .is-visible). The checklist page does not
       load main-landing.js, so its sticky bar must stay always visible. */
    .sticky-actions:not(.sticky-actions--checklist-row).is-visible {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .sticky-actions:not(.sticky-actions--checklist-row) [data-slot="button"],
    .sticky-actions:not(.sticky-actions--checklist-row) .btn {
        width: 100%;
        justify-content: center;
    }

    .sticky-actions--checklist-row [data-slot="button"],
    .sticky-actions--checklist-row .btn {
        width: auto;
        min-width: 0;
    }

    .sticky-actions--checklist-row .sticky-actions__share {
        flex: 1 1 auto;
    }

}