/* =========================================================
   FILE: assets/css/responsive.css
   PURPOSE: All media queries and responsive breakpoints
   ========================================================= */

/* ===== BREAKPOINTS =====
   xs:  320px  (minimum)
   sm:  375px  (small phone)
   md:  768px  (tablet portrait)
   lg:  1024px (tablet landscape / small laptop)
   xl:  1280px (desktop)
   2xl: 1440px (large desktop)
*/

/* ===== 2XL: 1440px+ LARGE DESKTOP ===== */
@media (min-width: 1440px) {
    .hero__headline {
        font-size: 5rem;
    }

    .stats-grid {
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* ===== XL: max 1280px ===== */
@media (max-width: 1280px) {
    .hero__container {
        gap: 2.5rem;
    }

    .hero__floating-chip--balance {
        right: -20px;
    }

    .hero__floating-chip--transaction {
        right: -30px;
    }

    .hero__floating-chip--security {
        left: -60px;
    }

    .footer__top {
        grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
        gap: 2rem;
    }
}

/* ===== LG: max 1024px — Tablet Landscape / Small Laptop ===== */
@media (max-width: 1024px) {

    /* Navbar */
    .navbar__nav,
    .navbar__actions .btn--ghost,
    .navbar__actions .btn--primary {
        display: none;
    }

    .navbar__hamburger {
        display: flex;
    }

    .navbar-aurex {
        height: 64px;
        padding: 0 1.5rem;
    }

    /* Hero */
    .hero {
        padding-top: 106px;
    }

    .hero__container {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
        padding: 3rem 1.5rem 4rem;
    }

    .hero__content {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero__subheadline {
        max-width: 580px;
    }

    .hero__ctas {
        justify-content: center;
    }

    .hero__trust-bar {
        justify-content: center;
    }

    .hero__visual {
        width: 100%;
        height: 420px;
    }

    .hero__floating-chip--balance {
        right: 20px;
        top: 5%;
    }

    .hero__floating-chip--transaction {
        right: 10px;
        bottom: 10%;
    }

    .hero__floating-chip--security {
        left: 10px;
        top: 35%;
    }

    /* Sections */
    .section {
        padding: 4rem 0;
    }

    /* Solutions Grid */
    .solutions__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* About Preview */
    .about-preview {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-preview__image-wrap {
        height: 360px;
    }

    /* Cards Display */
    .cards-display {
        grid-template-columns: repeat(2, 1fr);
    }

    .cards-display .card-tier:last-child {
        grid-column: 1 / -1;
        max-width: 360px;
        margin: 0 auto;
    }

    /* Calculator */
    .calculator-layout {
        grid-template-columns: 1fr;
    }

    /* Features Grid */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* App Section */
    .app-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .app-features {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .app-store-buttons {
        justify-content: center;
    }

    .app-rating {
        justify-content: center;
    }

    /* Stats */
    .stats-grid {
        flex-wrap: wrap;
    }

    .stat-item {
        flex: 0 0 calc(33.333% - 1rem);
    }

    .stat-item:not(:last-child)::after {
        display: none;
    }

    /* Footer */
    .footer__top {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2rem;
    }

    .footer__top > *:nth-child(1) {
        grid-column: 1 / -1;
    }

    /* Legal Layout */
    .legal-layout {
        grid-template-columns: 1fr;
    }

    .legal-sidebar {
        position: static;
        margin-bottom: 2rem;
    }

    /* Service Detail */
    .service-detail-section {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .service-detail-section.reverse {
        direction: ltr;
    }

    /* Team Grid */
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Values Grid */
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Page Banner */
    .page-banner {
        margin-top: 106px;
        padding: 5rem 0 3rem;
    }
}

/* ===== MD: max 768px — Tablet Portrait ===== */
@media (max-width: 768px) {

    /* Topbar */
    .topbar__contact {
        display: none;
    }

    .topbar__right {
        gap: 0.75rem;
    }

    /* Hero */
    .hero__headline {
        font-size: 2.5rem;
    }

    .hero__subheadline {
        font-size: 1rem;
    }

    .hero__visual {
        height: 360px;
    }

    .credit-card {
        width: 290px;
        height: 180px;
    }

    .hero__floating-chip--security {
        display: none;
    }

    /* Solutions Grid */
    .solutions__grid {
        grid-template-columns: 1fr;
    }

    /* Section Header */
    .section__title {
        font-size: 1.75rem;
    }

    /* About Stats */
    .about-preview__stats {
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    /* Cards Display */
    .cards-display {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .cards-display .card-tier:last-child {
        grid-column: auto;
        max-width: 100%;
    }

    /* Calculator Result Panel */
    .result-panel__details {
        grid-template-columns: 1fr;
    }

    /* Result Monthly */
    .result-panel__monthly {
        font-size: 2.25rem;
    }

    /* Features Grid */
    .features-grid {
        grid-template-columns: 1fr;
    }

    /* Stats */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

    .stat-item {
        flex: auto;
        padding: 2rem 1.25rem;
    }

    .stat-item:nth-child(odd):not(:last-child)::after {
        display: block;
    }

    /* Newsletter */
    .newsletter-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .newsletter-form {
        max-width: 100%;
        width: 100%;
    }

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

    .footer__top > *:nth-child(1) {
        grid-column: 1 / -1;
    }

    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Contact Cards */
    .support-cards-grid {
        grid-template-columns: 1fr;
    }

    /* Stepper */
    .stepper {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }

    .stepper::before {
        display: none;
    }

    .stepper-step {
        display: grid;
        grid-template-columns: 48px 1fr;
        align-items: start;
        gap: 1rem;
        text-align: left;
        max-width: 100%;
    }

    /* Auth */
    .auth-page {
        padding: 1.5rem;
        padding-top: 106px;
    }

    .auth-card {
        padding: 2rem;
    }

    /* Social Login Buttons */
    .social-login-btns {
        grid-template-columns: 1fr;
    }

    /* Progress Steps */
    .progress-steps {
        gap: 0.5rem;
    }

    .progress-step:not(:last-child)::after {
        width: calc(100% - 10px);
    }

    /* Page Banner */
    .page-banner {
        padding: 4rem 0 2.5rem;
    }

    .page-banner__title {
        font-size: 2rem;
    }

    /* FAQ Categories */
    .faq-categories {
        gap: 0.375rem;
    }

    /* Legal Layout stays 1-col */
    .legal-layout {
        grid-template-columns: 1fr;
    }

    /* Team Grid */
    .team-grid {
        grid-template-columns: 1fr;
    }

    /* Values Grid */
    .values-grid {
        grid-template-columns: 1fr;
    }

    /* Timeline */
    .timeline {
        padding-left: 1.5rem;
    }

    /* About Hero Split */
    .about-preview {
        gap: 2rem;
    }

    /* App Store Buttons */
    .app-store-buttons {
        flex-direction: column;
        align-items: center;
    }

    .app-store-btn {
        width: 100%;
        max-width: 240px;
        justify-content: center;
    }

    /* Services Detail */
    .service-detail-section {
        gap: 2rem;
        padding: 2.5rem 0;
    }

    /* CTA section buttons */
    .cta-section__buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-section__buttons .btn--primary,
    .cta-section__buttons .btn--ghost {
        width: 100%;
        max-width: 300px;
    }
}

/* ===== SM: max 480px — Small phones ===== */
@media (max-width: 480px) {

    /* Topbar */
    .topbar {
        height: 36px;
    }

    .topbar__social {
        display: none;
    }

    /* Hero */
    .hero {
        padding-top: 100px;
    }

    .hero__headline {
        font-size: 2rem;
    }

    .hero__visual {
        height: 300px;
    }

    .credit-card {
        width: 260px;
        height: 162px;
    }

    .credit-card__inner {
        padding: 1rem 1.25rem;
    }

    .hero__floating-chip--transaction {
        display: none;
    }

    /* Buttons */
    .hero__ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__ctas .btn--primary,
    .hero__ctas .btn--ghost {
        text-align: center;
        justify-content: center;
    }

    /* Trust Items */
    .hero__trust-bar {
        gap: 0.75rem;
    }

    .hero__trust-item {
        font-size: 11px;
    }

    /* Section */
    .section {
        padding: 3rem 0;
    }

    .section__header {
        margin-bottom: 2.5rem;
    }

    /* Container Padding */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .container-fluid-pad {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Auth card */
    .auth-card {
        padding: 1.5rem;
        border-radius: var(--radius-md);
    }

    /* Footer */
    .footer__top {
        grid-template-columns: 1fr;
    }

    .footer__payment-icons {
        flex-wrap: wrap;
    }

    /* Calculator panel */
    .calculator-panel {
        padding: 1.25rem;
    }

    /* Cards */
    .bank-card {
        max-width: 300px;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-item::after {
        display: none !important;
    }

    .stat-item {
        padding: 1.5rem 1rem;
        border-bottom: 1px solid var(--color-border);
    }

    /* About stats */
    .about-preview__stats {
        flex-direction: column;
        gap: 1rem;
    }

    /* Phone mockup */
    .phone-mockup {
        width: 240px;
        height: 480px;
        border-radius: 36px;
    }

    /* Testimonial card */
    .testimonial-card {
        padding: 1.75rem 1.25rem;
    }

    .testimonial-card__quote {
        font-size: var(--fs-base);
    }

    /* FAQ */
    .faq-question {
        font-size: 0.9rem;
    }

    /* Section title */
    .section__title {
        font-size: 1.5rem;
    }

    .page-banner__title {
        font-size: 1.75rem;
    }

    /* Newsletter full width */
    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form .btn--primary {
        width: 100%;
        justify-content: center;
    }
}

/* ===== XS: max 375px — Minimum supported ===== */
@media (max-width: 375px) {

    html {
        font-size: 14px;
    }

    .hero__headline {
        font-size: 1.85rem;
    }

    .credit-card {
        width: 240px;
        height: 148px;
    }

    .credit-card__inner {
        padding: 0.875rem 1rem;
    }

    .credit-card__middle {
        font-size: 0.75rem;
        letter-spacing: 0.12em;
    }

    .auth-card {
        padding: 1.25rem;
    }

    .page-banner__title {
        font-size: 1.5rem;
    }

    .footer__top {
        grid-template-columns: 1fr;
    }

    .navbar-aurex {
        padding: 0 1rem;
    }

    .topbar__inner {
        padding: 0 1rem;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .topbar,
    .navbar-aurex,
    .footer,
    .hero__visual,
    .cta-section,
    .newsletter-section {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    .legal-content p,
    .legal-content li {
        color: #333;
    }

    .legal-content h2,
    .legal-content h3 {
        color: #111;
    }
}

/* ===== HIGH CONTRAST / ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .topbar__marquee {
        animation: none;
    }

    .hero__glow--1,
    .phone-mockup-wrap,
    .hero__floating-chip,
    .bg-orb {
        animation: none !important;
    }
}

/* ===== HOVER ENHANCEMENTS (pointer devices only) ===== */
@media (hover: none) {
    .hover-lift:hover,
    .hover-glow:hover,
    .solution-card:hover,
    .feature-item:hover,
    .card--glass:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ===== OVERFLOW GUARDS ===== */
.hero,
.testimonials-section,
.stats-section,
.cta-section,
.app-section {
    overflow-x: hidden;
}

/* ===== TABLE RESPONSIVE ===== */
@media (max-width: 768px) {
    .table-responsive-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-sm);
        border: 1px solid var(--color-border);
    }

    .comparison-table {
        min-width: 600px;
    }
}

/* ===== TOPBAR RESPONSIVE ===== */
@media (max-width: 600px) {
    .topbar__marquee-wrap {
        max-width: 100%;
    }

    .topbar__right {
        display: none;
    }
}

/* ===== CONTACT PAGE RESPONSIVE ===== */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===== LOGIN/SIGNUP FULL HEIGHT ===== */
@media (max-width: 480px) {
    .auth-page {
        align-items: flex-start;
        padding-top: calc(106px + 1rem);
    }

    .auth-card {
        min-height: auto;
    }
}

/* ===== CARDS PAGE RESPONSIVE ===== */
@media (max-width: 768px) {
    .cards-display {
        overflow-x: auto;
        display: flex;
        gap: 2rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1rem;
    }

    .card-tier {
        flex: 0 0 85%;
        scroll-snap-align: center;
    }
}

/* ===== ABOUT PAGE ===== */
@media (max-width: 768px) {
    .mission-vision-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===== LOAN PAGE RESPONSIVE ===== */
@media (max-width: 768px) {
    .loan-cards-grid {
        grid-template-columns: 1fr !important;
    }

    .requirements-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===== NAVBAR TRANSITION ===== */
@media (max-width: 1024px) {
    .navbar-aurex {
        top: 36px;
    }

    .navbar-aurex.navbar--scrolled {
        top: 0;
    }

    .page-banner {
        margin-top: 100px;
    }
}

@media (max-width: 600px) {
    .navbar-aurex {
        top: 36px;
    }

    .page-banner {
        margin-top: 100px;
    }
}