/* ============================================
   RESPONSIVE STYLES
   Bookedout BNB Website
   Breakpoints:
   - Desktop: 1200px+
   - Tablet: 768px - 1199px
   - Mobile: below 768px
   - Small Mobile: below 480px
   ============================================ */

/* ===== Large Tablet / Small Desktop (max-width: 1024px) ===== */
@media (max-width: 1024px) {

    /* Hero */
    .hero-section .container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .hero-subtitle {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-cta-group {
        justify-content: center;
    }

    .trust-indicators {
        justify-content: center;
    }

    .hero-visual {
        max-width: 400px;
        margin: 0 auto;
    }

    .card-revenue {
        right: -10px;
    }

    .card-bookings {
        left: -10px;
    }

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

    /* Why Us */
    .why-us-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .results-grid .result-card:last-child {
        grid-column: span 2;
        max-width: 50%;
        justify-self: center;
    }

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

    .testimonials-grid .testimonial-card:last-child {
        grid-column: span 2;
        max-width: 50%;
        justify-self: center;
    }

    /* Trust Banner */
    .trust-banner {
        flex-direction: column;
        text-align: center;
    }

    /* Contact */
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-info {
        text-align: center;
    }

    .contact-benefits {
        align-items: center;
    }

    .contact-trust {
        justify-content: center;
    }

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


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

    /* Header / Navigation */
    .mobile-toggle {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: var(--white-base);
        flex-direction: column;
        padding: 100px 30px 30px;
        gap: 0;
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
        transition: right var(--transition-cubic);
        z-index: 1000;
        overflow-y: auto;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-link {
        padding: 16px 0;
        font-size: 1.05rem;
        border-bottom: 1px solid var(--gray-soft);
        width: 100%;
    }

    .nav-link::after {
        display: none;
    }

    .cta-link {
        margin-top: 16px;
        text-align: center;
        width: 100%;
        justify-content: center;
    }

    /* Mobile overlay */
    .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-normal);
        z-index: 999;
    }

    .nav-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Section Padding */
    .problem-section,
    .services-section,
    .why-us-section,
    .process-section,
    .results-section,
    .testimonials-section,
    .faq-section,
    .contact-section {
        padding: 60px 0;
    }

    .section-header {
        margin-bottom: 40px;
    }

    /* Stats */
    .stats-grid {
        flex-direction: column;
        gap: 24px;
    }

    .stat-divider {
        width: 60px;
        height: 1px;
    }

    /* Problem Grid */
    .problem-grid {
        grid-template-columns: 1fr;
    }

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

    /* Why Us */
    .why-us-grid {
        grid-template-columns: 1fr;
    }

    /* Results */
    .results-grid {
        grid-template-columns: 1fr;
    }

    .results-grid .result-card:last-child {
        grid-column: span 1;
        max-width: 100%;
    }

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

    .testimonials-grid .testimonial-card:last-child {
        grid-column: span 1;
        max-width: 100%;
    }

    /* Trust Banner */
    .trust-banner {
        padding: 32px 24px;
    }

    .trust-badges {
        grid-template-columns: 1fr;
    }

    /* Process */
    .process-step {
        gap: 16px;
    }

    .step-content {
        padding: 22px;
    }

    /* Footer */
    .footer-main {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}


/* ===== Small Mobile (max-width: 480px) ===== */
@media (max-width: 480px) {

    /* Hero */
    .hero-section {
        padding: 100px 0 60px;
    }

    .hero-cta-group {
        flex-direction: column;
    }

    .hero-cta-group .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-card-main {
        padding: 20px;
    }

    .floating-card {
        padding: 12px 16px;
        font-size: 0.8rem;
    }

    .card-revenue {
        right: 0;
        top: 10px;
    }

    .card-bookings {
        left: 0;
        bottom: 20px;
    }

    .fc-value {
        font-size: 0.95rem;
    }

    .fc-label {
        font-size: 0.7rem;
    }

    /* Service Card */
    .service-card-header {
        padding: 28px 24px;
    }

    .service-card-body {
        padding: 24px;
    }

    .service-icon-large {
        width: 60px;
        height: 60px;
    }

    .service-icon-large i {
        font-size: 1.6rem;
    }

    .service-number {
        font-size: 2.5rem;
    }

    /* Contact Form */
    .contact-form-wrapper {
        padding: 28px 20px;
    }

    .input-wrapper input,
    .input-wrapper select,
    .input-wrapper textarea {
        padding: 12px 12px 12px 40px;
        font-size: 0.9rem;
    }

    /* Back to top */
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
    }
}


/* ===== Extra Small (max-width: 360px) ===== */
@media (max-width: 360px) {
    .hero-title {
        font-size: 1.8rem;
    }

    .hero-badge {
        font-size: 0.75rem;
        padding: 8px 14px;
    }

    .calendar-grid {
        gap: 3px;
    }

    .cal-day {
        font-size: 0.6rem;
    }
}