/* ============================================
   PandaBike Workshop - Responsive Styles
   Mobile-First Breakpoints
   ============================================ */

/* ============================================
   MOBILE LANDSCAPE - 640px+
   ============================================ */
@media (min-width: 640px) {

    /* Grid 4 columns on larger mobile */
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Force Hero Visibility */
    .hero-slider,
    .contact-hero {
        opacity: 1 !important;
        visibility: visible !important;
        background-color: var(--color-gray-dark);
        /* Fallback */
    }

    .slide img {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Fix background attachment on mobile */
    .contact-hero {
        background-attachment: scroll !important;
        background-position: center center !important;
        background-size: cover !important;
    }

    /* Tune down overlay if it's too dark */
    .hero-overlay,
    .contact-hero::before {
        background: rgba(0, 0, 0, 0.4) !important;
        /* Lighter overlay on mobile */
    }

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

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

/* ============================================
   TABLET - 768px+
   ============================================ */
@media (min-width: 768px) {

    /* Typography */
    h1 {
        font-size: 3.5rem;
    }

    h2 {
        font-size: 2.5rem;
    }

    h3 {
        font-size: 2rem;
    }

    h4 {
        font-size: 1.5rem;
    }

    /* Container */
    .container {
        padding: 0 1.5rem;
    }

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

    /* Header */
    .mobile-menu-toggle {
        display: none;
    }

    .nav ul {
        display: flex;
    }

    /* Hero */
    .hero {
        padding: 5rem 0;
    }

    .hero h1 {
        font-size: 3rem;
    }

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

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

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

    /* Button Group */
    .btn-group {
        flex-direction: row;
        justify-content: center;
    }

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

    /* Pricing Table */
    .pricing-table th,
    .pricing-table td {
        padding: 1rem 1.5rem;
    }

    /* Instructions */
    .instructions-grid {
        grid-template-columns: repeat(4, 1fr);
    }

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

/* ============================================
   DESKTOP - 1024px+
   ============================================ */
@media (min-width: 1024px) {

    /* Container */
    .container {
        padding: 0 2rem;
    }

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

    /* Hero */
    .hero {
        padding: 6rem 0;
    }

    .hero h1 {
        font-size: 3.5rem;
    }

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

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

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

    /* Step Cards - Horizontal Layout */
    .step-card {
        padding: 2rem;
    }

    /* Contact Methods */
    .contact-methods .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   LARGE DESKTOP - 1280px+
   ============================================ */
@media (min-width: 1280px) {
    .container {
        max-width: 1200px;
    }
}

/* ============================================
   MOBILE MENU (< 768px)
   ============================================ */
@media (max-width: 767px) {
    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--color-primary);
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition-slow);
        z-index: 9999;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .nav.active {
        max-height: 100vh;
        border-bottom: 2px solid var(--color-accent);
        overflow-y: auto;
    }

    .nav ul {
        display: flex !important;
        flex-direction: column;
        padding: 1rem 0;
        margin: 0;
        width: 100%;
    }

    .nav li {
        width: 100%;
    }

    .nav a {
        display: block;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--color-gray-dark);
    }

    .nav a::after {
        display: none;
    }

    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {

    .header,
    .footer,
    .btn,
    .mobile-menu-toggle,
    .social-links {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    body::before {
        display: none;
    }

    a {
        text-decoration: underline;
    }
}

/* ============================================
   CONTACT PAGE RESPONSIVE
   ============================================ */
@media (min-width: 768px) {
    .contact-priority {
        max-width: 600px;
        margin: 0 auto var(--spacing-xxl);
    }

    .messenger-card {
        padding: var(--spacing-xxl);
    }
}

/* ============================================
   BOOKING PAGE RESPONSIVE
   ============================================ */
@media (max-width: 767px) {
    .booking-progress {
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .progress-step {
        flex: 1 1 40%;
    }

    .progress-line {
        display: none;
    }

    .progress-step span {
        font-size: 0.75rem;
    }

    .progress-circle {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }

    /* Booking Container - maximize space */
    .booking-container {
        padding: 0.5rem !important;
        /* Minimal padding */
        width: 100%;
        overflow: hidden;
    }

    /* Calendar Mobile Optimization */
    .calendar-container {
        width: 100%;
        padding: 0;
    }

    .calendar-grid {
        gap: 2px !important;
        /* Minimize gaps */
    }

    .calendar-day {
        font-size: 0.75rem;
        /* Smaller font */
        padding: 0;
        height: auto;
        aspect-ratio: 1/1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 30px !important;
        /* Smaller minimum */
        min-width: unset !important;
    }

    /* Ensure touch targets override */
    .calendar-day.touch-target-override {
        min-height: 30px !important;
        min-width: 30px !important;
    }

    .calendar-header h4 {
        font-size: 0.95rem;
    }

    .btn-calendar {
        width: 32px;
        height: 32px;
    }

    /* Time slots */
    .time-slots-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .time-slot {
        font-size: 0.8rem;
        padding: 0.4rem;
        min-height: 38px;
    }

    .service-option {
        padding: 1rem;
    }

    .service-option h4 {
        font-size: 1rem;
        margin-bottom: 0;
    }

    .service-option p {
        display: none;
    }
}

@media (min-width: 768px) {
    .booking-container {
        padding: var(--spacing-xxl);
    }

    .time-slots-container {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* ============================================
   TOUCH TARGETS (Mobile)
   ============================================ */
@media (max-width: 767px) {

    .btn,
    .nav a,
    .service-option {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION
   ============================================ */
@media (max-height: 600px) and (orientation: landscape) {
    .hero {
        padding: 3rem 0;
    }

    .section {
        padding: 2rem 0;
    }
}

/* ============================================
   ADDITIONAL MOBILE FIXES (Sporty Elements)
   ============================================ */
@media (max-width: 767px) {

    /* Skew Buttons - Compact on mobile */
    /* Skew Buttons - Compact on mobile */
    .booking-navigation .btn-skew {
        padding: 0.5rem 0.25rem !important;
        transform: skewX(-10deg) !important;
        flex: 1 !important;
        width: auto !important;
        margin-bottom: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        font-size: 0.8rem !important;
        min-height: 38px !important;
        max-width: none !important;
    }

    .booking-navigation {
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        display: flex !important;
    }

    #btnNext,
    #btnPrev {
        min-width: unset !important;
        width: auto !important;
        flex: 1 !important;
    }

    .btn-skew span {
        transform: skewX(10deg);
        white-space: nowrap;
    }

    /* Workshop Image - Remove tilt on mobile */
    .contact-workshop-image {
        transform: none !important;
        margin-top: 1.5rem;
        border-width: 2px;
        box-shadow: 5px 5px 0 var(--color-gray-light);
    }

    /* Pricing Table - Horizontal Scroll */
    .pricing-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-right: -1rem;
        /* Bleed to edge */
        padding-right: 1rem;
    }

    .pricing-table {
        min-width: 500px;
        /* Force scroll */
    }

    /* Hero Subtitle visibility */
    .hero-subtitle {
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
        font-size: 1.125rem;
    }
}