/*
 * PivHub CSS Module: 05-responsive.css
 * Global animation and responsive rules.
 */

/* --------------------------------------------------------------------------
   15. AOS & Animations
   -------------------------------------------------------------------------- */

[data-aos] {
    pointer-events: none;
}

[data-aos].aos-animate {
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   16. Responsive — Tablet (768-1023px)
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
    :root {
        --space-15: 80px;
    }

    .primary-nav {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .header-right .btn {
        display: none;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }

    .footer-brand {
        grid-column: 1 / -1;
        max-width: 480px;
    }

    .contact-hero-grid,
    .contact-apply-layout {
        grid-template-columns: 1fr;
    }

    .contact-hero {
        min-height: auto;
        padding-top: calc(var(--header-height) + var(--space-8));
    }

    .contact-hero-panel,
    .contact-sidebar {
        position: static;
    }

    .choice-grid-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

/* --------------------------------------------------------------------------
   17. Responsive — Mobile (≤767px)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    :root {
        --space-15: 48px;
        --space-10: 56px;
        --space-8: 48px;
        --container-pad: 16px;
    }

    .header-inner {
        padding-inline: var(--container-pad);
    }

    .logo-image {
        height: 30px;
    }

    .hero {
        min-height: 100svh;
        align-items: flex-end;
        padding-bottom: var(--space-8);
    }

    .hero-bg {
        background-position: center top;
    }

    .hero-gradient {
        background: linear-gradient(180deg,
            rgba(var(--theme-bg-rgb), 0.24) 0%,
            rgba(var(--theme-bg-rgb), 0.18) 40%,
            rgba(var(--theme-bg-rgb), 0.82) 72%,
            rgba(var(--theme-bg-rgb), 0.96) 100%);
    }

    .hero-title {
        font-size: clamp(40px, 13vw, 56px);
    }

    .hero-glow-1 {
        width: 300px;
        height: 300px;
    }

    .hero-glow-2 {
        width: 250px;
        height: 250px;
    }

    .hero-actions {
        flex-direction: column;
        max-width: 280px;
        margin-inline: auto;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-subtitle {
        font-size: var(--fs-body);
    }

    .final-cta-actions {
        flex-direction: column;
        width: 100%;
    }

    .final-cta-actions .btn {
        width: 100%;
    }

    .final-cta-contact {
        flex-direction: column;
        gap: var(--space-2);
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .footer-brand {
        max-width: 100%;
    }

    .form-row-2 {
        grid-template-columns: 1fr;
    }

    .contact-title {
        font-size: clamp(40px, 13vw, 56px);
    }

    .contact-hero-panel,
    .form-section,
    .contact-info-card {
        padding: var(--space-3);
    }

    .choice-grid-4,
    .choice-grid-5 {
        grid-template-columns: 1fr;
    }

    .choice-label {
        justify-content: flex-start;
        text-align: left;
    }

    .section-header-center {
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   18. Reduced Motion
   -------------------------------------------------------------------------- */

@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;
    }

    .hero-glow-1,
    .hero-glow-2 {
        animation: none;
    }

    .hero-badge-dot {
        animation: none;
    }

    .scroll-line::after {
        animation: none;
    }
}