/* ============================================
   Remondilaen.net - Responsive Stylesheet
   Mobile-first breakpoints: 320, 480, 768, 1024, 1200, 1440
   ============================================ */

/* ============================================
   Base Mobile (320px+) - Already handled in style.css
   Additional fine-tuning below
   ============================================ */

/* ============================================
   Small Mobile (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    :root {
        --container-padding: 1rem;
    }

    /* Cookie Banner */
    .cookie-content {
        flex-direction: column;
        gap: 1rem;
    }

    .cookie-actions {
        width: 100%;
    }

    .btn-cookie-accept,
    .btn-cookie-essential {
        flex: 1;
        text-align: center;
    }

    /* Affiliate bar */
    .affiliate-disclosure-bar {
        font-size: 0.75rem;
    }

    /* Hero */
    .hero {
        padding: 2.5rem 0 3rem;
        min-height: auto;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 0.9375rem;
    }

    .hero-stats {
        gap: 1rem;
        flex-wrap: wrap;
    }

    .stat strong {
        font-size: 1.25rem;
    }

    .stat-divider {
        display: none;
    }

    .hero-calculator {
        padding: 1.25rem;
    }

    .calc-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .calc-result {
        flex-direction: column;
        align-items: stretch;
        gap: 0.875rem;
    }

    .btn-calc {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    /* Trust bar */
    .trust-items {
        gap: 0.875rem;
    }

    .trust-item {
        font-size: 0.75rem;
    }

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

    /* Offers table - keep scrollable */
    .offers-table-wrapper {
        border-radius: var(--radius-lg);
    }

    /* Steps */
    .steps-grid {
        flex-direction: column;
        gap: 0;
    }

    .step-connector {
        transform: rotate(90deg);
        margin: 0.5rem auto;
    }

    .step-card {
        padding: 1.25rem;
    }

    /* Benefits */
    .benefits-grid {
        grid-template-columns: 1fr;
    }

    /* FAQ */
    .faq-question {
        font-size: 0.9375rem;
        padding: 1rem;
    }

    .faq-answer {
        padding: 0 1rem 1rem;
    }

    /* Lender cards */
    .lender-cards-grid {
        grid-template-columns: 1fr;
    }

    .featured-card {
        transform: none;
    }

    /* Offers CTA */
    .offers-cta {
        flex-direction: column;
    }

    .offers-cta .btn-primary,
    .offers-cta .btn-secondary {
        width: 100%;
        justify-content: center;
    }

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

    .footer-bottom .container {
        flex-direction: column;
        text-align: center;
    }

    /* Page hero */
    .page-hero {
        padding: 2rem 0;
    }

    .page-hero h1 {
        font-size: 1.625rem;
    }

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

    .bank-specs-grid {
        grid-template-columns: 1fr 1fr;
    }

    .pros-cons-grid {
        grid-template-columns: 1fr;
    }

    .bank-detail-header {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }

    .bank-detail-cta {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
    }

    /* About page */
    .about-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

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

    /* Contact page */
    .contact-layout {
        grid-template-columns: 1fr;
    }

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

/* ============================================
   Tablet Portrait (481px - 767px)
   ============================================ */
@media (min-width: 481px) and (max-width: 767px) {
    :root {
        --container-padding: 1.25rem;
    }

    /* Cookie Banner */
    .cookie-content {
        flex-direction: column;
        gap: 1rem;
    }

    /* Hero */
    .hero {
        min-height: auto;
        padding: 3rem 0 4rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .calc-row {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .calc-result {
        flex-wrap: wrap;
    }

    .btn-calc {
        width: 100%;
        justify-content: center;
        margin-left: 0;
        margin-top: 0.5rem;
    }

    /* Steps */
    .steps-grid {
        flex-direction: column;
        gap: 0;
    }

    .step-connector {
        transform: rotate(90deg);
        margin: 0.75rem auto;
    }

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

    /* Lender cards */
    .lender-cards-grid {
        grid-template-columns: 1fr 1fr;
    }

    .featured-card {
        grid-column: 1 / -1;
        transform: none;
    }

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

    .footer-brand {
        grid-column: 1 / -1;
    }

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

    /* Bank specs */
    .bank-specs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* About */
    .about-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

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

    /* Contact */
    .contact-layout {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Tablet Landscape (768px - 1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --container-padding: 1.5rem;
    }

    /* Navigation - show hamburger on tablet too */
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 68px;
        left: 0;
        right: 0;
        background: var(--color-white);
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        gap: 0.375rem;
        box-shadow: var(--shadow-lg);
        border-top: 1px solid var(--color-border);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-base);
        z-index: 999;
    }

    .nav-menu.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-link {
        padding: 0.75rem 1rem;
        border-radius: var(--radius-md);
    }

    .nav-cta {
        text-align: center;
        margin-left: 0;
        padding: 0.75rem 1rem;
        border-radius: var(--radius-md);
    }

    /* Hero */
    .hero {
        min-height: auto;
        padding: 4rem 0;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-calculator {
        max-width: 100%;
    }

    /* Trust bar */
    .trust-items {
        gap: 1.5rem;
    }

    /* Steps - vertical on tablet */
    .steps-grid {
        flex-direction: column;
        gap: 0;
    }

    .step-connector {
        transform: rotate(90deg);
        margin: 1rem auto;
    }

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

    /* Lender cards */
    .lender-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .featured-card {
        grid-column: 1 / -1;
    }

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

    .footer-brand {
        grid-column: 1 / -1;
    }

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

    /* Banks specs */
    .bank-specs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* About */
    .about-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

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

    /* Contact */
    .contact-layout {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Mobile Navigation (applied to all mobile/tablet)
   ============================================ */
@media (max-width: 767px) {
    /* Show hamburger, hide nav links */
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 68px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-white);
        flex-direction: column;
        align-items: stretch;
        padding: 1.5rem;
        gap: 0.375rem;
        box-shadow: var(--shadow-xl);
        border-top: 1px solid var(--color-border);
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-base);
        z-index: 999;
        overflow-y: auto;
    }

    .nav-menu.open {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-link {
        padding: 0.875rem 1rem;
        border-radius: var(--radius-md);
        font-size: 1rem;
        border-bottom: 1px solid var(--color-border);
    }

    .nav-link:last-of-type {
        border-bottom: none;
    }

    .nav-cta {
        margin-left: 0;
        text-align: center;
        padding: 0.875rem 1rem;
        border-radius: var(--radius-md);
        margin-top: 0.5rem;
    }

    /* Disclosure bar - smaller text */
    .affiliate-disclosure-bar {
        font-size: 0.75rem;
        padding: 0.375rem 0;
    }

    .disclosure-icon {
        display: none;
    }
}

/* ============================================
   Desktop (1024px - 1199px)
   ============================================ */
@media (min-width: 1024px) and (max-width: 1199px) {
    /* Benefits - maintain 3-col but reduce padding */
    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .benefit-card {
        padding: 1.25rem;
    }

    /* Lender cards - 3 col */
    .lender-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    /* Bank specs */
    .bank-specs-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Steps - horizontal at this size */
    .steps-grid {
        flex-direction: row;
        align-items: stretch;
    }

    .step-card {
        padding: 1.5rem;
    }

    .step-connector {
        transform: none;
        margin: 0;
    }

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

    /* About */
    .about-layout {
        grid-template-columns: 1fr 1fr;
    }

    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Contact */
    .contact-layout {
        grid-template-columns: 1fr 1.5fr;
    }
}

/* ============================================
   Large Desktop (1200px+)
   ============================================ */
@media (min-width: 1200px) {
    :root {
        --container-padding: 2rem;
    }

    /* Steps - fully horizontal */
    .steps-grid {
        flex-direction: row;
        align-items: stretch;
    }

    .step-connector {
        transform: none;
        margin: 0;
        padding-top: 5rem;
    }

    /* Hero calculator - full width */
    .hero-calculator {
        max-width: 700px;
    }

    /* Benefits */
    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Lender cards */
    .lender-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    /* About */
    .about-layout {
        grid-template-columns: 1fr 1fr;
    }

    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Contact */
    .contact-layout {
        grid-template-columns: 1fr 1.5fr;
    }
}

/* ============================================
   Wide Desktop (1440px+)
   ============================================ */
@media (min-width: 1440px) {
    :root {
        --container-max: 1320px;
    }

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

    .hero-calculator {
        max-width: 720px;
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .cookie-banner,
    .affiliate-disclosure-bar,
    .hamburger,
    .nav-cta,
    .btn-apply,
    .btn-apply-full,
    .btn-primary,
    .btn-secondary {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    .site-header {
        position: static;
        box-shadow: none;
    }

    .hero {
        background: #f0f2f7;
        min-height: auto;
        padding: 2rem 0;
    }

    .hero-title,
    .hero-subtitle {
        color: #000;
    }

    .offers-table {
        font-size: 10pt;
    }

    .footer-disclaimer {
        background: #f0f2f7;
    }

    .site-footer {
        background: #f0f2f7;
        color: #333;
    }
}

/* ============================================
   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;
    }

    .badge-dot {
        animation: none;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* ============================================
   High Contrast / Dark Mode Support
   ============================================ */
@media (prefers-color-scheme: dark) {
    /* Subtle dark mode hints - keeping brand consistent */
    /* For a full dark mode, a class toggle approach is better */
}

/* ============================================
   Touch / Hover Device Distinctions
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Touch devices - increase tap targets */
    .nav-link {
        padding: 0.75rem 1rem;
        min-height: 44px;
    }

    .btn-apply,
    .btn-primary,
    .btn-secondary {
        min-height: 44px;
    }

    .faq-question {
        min-height: 56px;
    }

    .range-slider::-webkit-slider-thumb {
        width: 26px;
        height: 26px;
    }

    /* Remove hover transforms on touch */
    .benefit-card:hover,
    .step-card:hover,
    .lender-card:hover,
    .bank-detail-card:hover {
        transform: none;
    }
}