/* ============================================
   Alpha-Pe Responsive Styles
   ============================================ */

/* ── Tablet (1024px and below) ── */
@media (max-width: 1024px) {
    .hero__container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--sp-10);
    }

    .hero__subtitle {
        margin-inline: auto;
    }

    .hero__actions {
        justify-content: center;
    }

    .hero__visual {
        max-width: 500px;
        margin: 0 auto;
    }

    .credit-score__container {
        grid-template-columns: 1fr;
        gap: var(--sp-10);
    }

    .partner__container {
        grid-template-columns: 1fr;
        gap: var(--sp-10);
    }

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

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-8);
    }

    .about-intro__container {
        grid-template-columns: 1fr;
        gap: var(--sp-10);
    }

    .contact__container {
        grid-template-columns: 1fr;
        gap: var(--sp-10);
    }

    .how-it-works__steps {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-8);
    }

    .how-it-works__steps::before,
    .how-it-works__steps::after {
        display: none;
    }
}

/* ── Mobile (768px and below) ── */
@media (max-width: 768px) {
    /* Navigation */
    .nav__links {
        display: none;
    }

    .nav__toggle {
        display: flex;
    }

    .nav__drawer {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        width: 85%;
        max-width: 380px;
        height: 100vh;
        height: 100dvh;
        background: var(--surface-primary);
        z-index: var(--z-overlay);
        transform: translateX(100%);
        transition: transform var(--duration-normal) var(--ease-out);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
        padding: var(--sp-20) var(--sp-8) var(--sp-8);
        overflow-y: auto;
    }

    .nav__drawer.open {
        transform: translateX(0);
    }

    .nav__drawer-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: calc(var(--z-overlay) - 1);
        opacity: 0;
        visibility: hidden;
        transition: all var(--duration-normal);
    }

    .nav__drawer-overlay.visible {
        opacity: 1;
        visibility: visible;
    }

    .nav__drawer-links {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: var(--sp-1);
    }

    .nav__drawer-links a {
        display: block;
        padding: var(--sp-4) var(--sp-4);
        color: var(--text-primary);
        font-weight: var(--fw-medium);
        font-size: var(--fs-md);
        border-radius: var(--radius-md);
        text-decoration: none;
        transition: all var(--duration-fast);
    }

    .nav__drawer-links a:hover {
        background: var(--surface-secondary);
        color: var(--clr-accent);
    }

    .nav__drawer-cta {
        display: block;
        margin-top: var(--sp-6);
        text-align: center;
        background: var(--gradient-primary);
        color: var(--text-inverse) !important;
        padding: var(--sp-4);
        border-radius: var(--radius-md);
        font-weight: var(--fw-semibold);
        text-decoration: none;
    }

    /* Hero */
    .hero {
        min-height: auto;
        padding: var(--sp-12) var(--container-padding);
    }

    .hero__title {
        font-size: var(--fs-2xl);
    }

    .hero__stats {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-3);
    }

    .stat {
        padding: var(--sp-3);
    }

    .stat__number {
        font-size: var(--fs-lg);
    }

    .hero__actions {
        flex-direction: column;
        align-items: center;
    }

    .hero__cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-3);
    }

    .hero__float-card {
        padding: var(--sp-4);
    }

    /* Products */
    .products__grid {
        grid-template-columns: 1fr;
    }

    /* How it works */
    .how-it-works__steps {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
        max-width: 300px;
        margin: 0 auto;
    }

    /* Calculator */
    .calculator__box {
        padding: var(--sp-6);
    }

    .calculator__tabs {
        gap: 0;
    }

    .calc-tab {
        padding: var(--sp-2) var(--sp-3);
        font-size: var(--fs-xs);
    }

    /* Partner */
    .partner__benefits {
        grid-template-columns: 1fr;
    }

    /* Testimonials */
    .testimonials__grid {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--sp-8);
    }

    .footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer__bottom-links {
        justify-content: center;
    }

    /* CTA Banner */
    .cta-banner__actions {
        flex-direction: column;
        align-items: center;
    }

    /* Blog */
    .blog-grid__container {
        grid-template-columns: 1fr;
    }

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

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

    /* Back to top - closer to edge on mobile */
    .back-to-top {
        bottom: var(--sp-5);
        right: var(--sp-5);
        width: 42px;
        height: 42px;
    }

    /* Cookie banner */
    .cookie-banner__inner {
        flex-direction: column;
        text-align: center;
    }
}

/* ── Small mobile (480px and below) ── */
@media (max-width: 480px) {
    .hero__stats {
        grid-template-columns: 1fr;
    }

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

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

    .section-header h2 {
        font-size: var(--fs-xl);
    }

    .trust-bar__logos {
        gap: var(--sp-6);
    }

    .trust-bar__badges {
        flex-direction: column;
    }
}