/* =========================================================
   Livigo Living Platform
   Responsive and Device Adaptation
   Path: /assets/css/responsive.css
   ========================================================= */

/* =========================================================
   Small Mobile Devices
   ========================================================= */

@media (max-width: 22.5rem) {
    :root {
        --livigo-page-padding-mobile: 0.875rem;
    }

    .display-title {
        font-size: 2.15rem;
    }

    .heading-1 {
        font-size: 2rem;
    }

    .section__title {
        font-size: 1.75rem;
    }

    .button {
        white-space: normal;
    }

    .brand-logo__wordmark {
        font-size: 1.5rem;
    }

    .purpose-chip {
        padding-inline: 0.875rem;
    }

    .feature-card {
        gap: var(--livigo-space-3);
        padding: var(--livigo-space-4);
    }

    .card__icon {
        width: 2.85rem;
        height: 2.85rem;
    }
}

/* =========================================================
   Mobile and Tablet Navigation
   ========================================================= */

@media (max-width: 63.9375rem) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: flex;
    }

    .navigation--desktop {
        display: none;
    }
}

/* =========================================================
   Tablet
   ========================================================= */

@media (min-width: 40rem) and (max-width: 63.9375rem) {
    .display-title {
        max-width: 11ch;
    }

    .feature-card {
        min-height: 8.5rem;
    }

    .journey-card__content {
        width: min(62%, 24rem);
    }

    .video-card {
        border-radius: var(--livigo-radius-2xl);
    }
}

/* =========================================================
   Desktop
   ========================================================= */

@media (min-width: 64rem) {
    .desktop-only {
        display: initial;
    }

    .mobile-only {
        display: none !important;
    }

    .navigation--desktop {
        display: flex;
    }

    .display-title {
        max-width: 12ch;
    }

    .section__header {
        margin-bottom: var(--livigo-space-10);
    }

    .journey-card__content {
        width: min(58%, 25rem);
    }
}

/* =========================================================
   Large Desktop
   ========================================================= */

@media (min-width: 80rem) {
    :root {
        --livigo-page-padding-desktop: 4rem;
    }

    .display-title {
        font-size: 4.5rem;
    }

    .section__description {
        font-size: var(--livigo-font-size-lg);
    }
}

/* =========================================================
   Ultra-Wide Displays
   ========================================================= */

@media (min-width: 100rem) {
    :root {
        --livigo-container-xl: 82rem;
        --livigo-container-2xl: 94rem;
    }

    .display-title {
        font-size: 4.9rem;
    }
}

/* =========================================================
   Short Viewports
   ========================================================= */

@media (max-height: 43rem) and (orientation: landscape) {
    .section {
        padding-block: var(--livigo-space-12);
    }

    .section--large {
        padding-block: var(--livigo-space-16);
    }

    .install-prompt {
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
}

/* =========================================================
   Landscape Mobile
   ========================================================= */

@media (
    min-width: 35rem
) and (
    max-width: 63.9375rem
) and (
    orientation: landscape
) {
    .grid--landscape-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .video-card {
        max-width: 46rem;
        margin-inline: auto;
    }
}

/* =========================================================
   Touch Devices
   ========================================================= */

@media (hover: none) and (pointer: coarse) {
    .button,
    .icon-button,
    .purpose-chip,
    .navigation__link,
    .social-link {
        min-height: 2.75rem;
    }

    .button:hover,
    .card:hover,
    .purpose-chip:hover,
    .social-link:hover,
    .feature-card:hover {
        transform: none;
    }

    .navigation__link::after {
        bottom: 0.1rem;
    }
}

/* =========================================================
   Hover-Capable Devices
   ========================================================= */

@media (hover: hover) and (pointer: fine) {
    .card,
    .journey-card,
    .video-card,
    .button,
    .purpose-chip {
        will-change: transform;
    }
}

/* =========================================================
   Dark Mode Preference
   =========================================================
   Livigo maintains its own light/dark brand system instead
   of automatically recoloring every interface surface.
   ========================================================= */

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: light;
    }
}

/* =========================================================
   High Contrast
   ========================================================= */

@media (prefers-contrast: more) {
    :root {
        --livigo-border: #9aa8b8;
        --livigo-border-soft: #bcc6d1;
        --livigo-text-muted: #42526a;
        --livigo-text-on-dark-muted: rgba(255, 255, 255, 0.9);
    }

    .button,
    .purpose-chip,
    .form-control,
    .card,
    .icon-button {
        border-width: 2px;
    }

    .navigation__link {
        color: var(--livigo-white);
    }
}

/* =========================================================
   Reduced Transparency
   ========================================================= */

@media (prefers-reduced-transparency: reduce) {
    .surface--glass,
    .form-control--dark,
    .install-prompt,
    .video-card__play {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .surface--glass {
        background: var(--livigo-navy-850);
    }

    .install-prompt {
        background: var(--livigo-navy-900);
    }
}

/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .card,
    .button,
    .purpose-chip,
    .journey-card__media,
    .video-card__play,
    .social-link,
    .feature-card__arrow {
        transition: none;
    }

    .install-prompt.is-visible {
        animation: none;
    }

    .is-loading::after {
        animation-duration: 1.4s !important;
    }
}

/* =========================================================
   Standalone PWA
   ========================================================= */

@media (display-mode: standalone) {
    body {
        overscroll-behavior-y: contain;
    }

    .browser-only {
        display: none !important;
    }

    .site {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .site-header {
        padding-top: env(safe-area-inset-top);
    }

    .site-footer {
        padding-bottom:
            max(
                var(--livigo-space-5),
                env(safe-area-inset-bottom)
            );
    }
}

/* =========================================================
   iOS Standalone Compatibility
   ========================================================= */

@supports (-webkit-touch-callout: none) {
    @media (display-mode: standalone) {
        html,
        body {
            min-height: -webkit-fill-available;
        }

        .site {
            min-height: -webkit-fill-available;
        }
    }
}

/* =========================================================
   Print
   ========================================================= */

@media print {
    @page {
        size: A4;
        margin: 1.5cm;
    }

    .site-header,
    .site-footer,
    .install-prompt,
    .video-card__play,
    .button,
    .purpose-chips {
        display: none !important;
    }

    .section {
        padding-block: 1rem;
        break-inside: avoid;
    }

    .card,
    .journey-card {
        border: 1px solid #cccccc;
        box-shadow: none;
        break-inside: avoid;
    }

    .journey-card {
        min-height: auto;
        background: #ffffff;
        color: #000000;
    }

    .journey-card::after,
    .journey-card__media {
        display: none;
    }

    .journey-card__title {
        color: #000000;
    }
}