/* =================================================================
   Airport Concierge Rental Service - Responsive CSS
   Mobile-first responsive design for all devices
   ================================================================= */

/* =================================================================
   Mobile First Base Styles (0px and up)
   ================================================================= */

/* Base mobile styles are in main.css */

/* =================================================================
   Small devices (landscape phones, 576px and up)
   ================================================================= */
@media (min-width: 576px) {
    .container-sm {
        max-width: 540px;
    }
    
    /* Typography adjustments */
    h1 { font-size: 2.75rem; }
    h2 { font-size: 2.25rem; }
    
    /* Hero section */
    .hero-section {
        min-height: 70vh;
    }
    
    /* Card improvements */
    .card-img-top {
        height: 220px;
    }
    
    /* Process steps */
    .process-step {
        width: 90px;
        height: 90px;
        font-size: 2.25rem;
    }
}

/* =================================================================
   Medium devices (tablets, 768px and up)
   ================================================================= */
@media (min-width: 768px) {
    .container-md {
        max-width: 720px;
    }
    
    /* Typography */
    h1 { font-size: 3rem; }
    h2 { font-size: 2.5rem; }
    .display-4 { font-size: 3.5rem; }
    
    /* Hero section */
    .hero-section {
        min-height: 80vh;
    }
    
    .hero-section .container {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    /* Navigation */
    .navbar-nav .nav-link {
  font-size: 12px !important;
        margin: 0 0.75rem;
    }
    
    /* Sections */
    section {
        padding: 6rem 0;
    }
    
    /* Cards */
    .card-img-top {
        height: 250px;
    }
    
    /* Team grid */
    .col-lg-2-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    
    /* Process steps */
    .process-step {
        width: 100px;
        height: 100px;
        font-size: 2.5rem;
    }
    
    /* Contact form */
    .form-control {
        padding: 1rem 1.25rem;
        font-size: 1.1rem;
    }
    
    /* Gallery adjustments */
    #gallery .col-md-4 {
        margin-bottom: 1rem;
    }
    
    /* Footer improvements */
    footer {
        padding: 4rem 0 3rem;
    }
    
    /* Testimonials */
    .testimonial-swiper .card {
        margin: 0 1rem;
    }
}

/* =================================================================
   Large devices (desktops, 992px and up)
   ================================================================= */
@media (min-width: 992px) {
    .container-lg {
        max-width: 960px;
    }
    
    /* Typography */
    h1 { font-size: 3.5rem; }
    h2 { font-size: 3rem; }
    .display-4 { font-size: 4rem; }
    
    /* Hero section */
    .hero-section {
        min-height: 100vh;
    }
    
    .hero-section .row {
        align-items: center;
        min-height: 100vh;
    }
    
    /* Navigation */
    .navbar-nav .nav-link {
  font-size: 12px !important;
        margin: 0 1rem;
        font-size: 1.1rem;
    }
    
    /* Sections */
    section {
        padding: 8rem 0;
    }
    
    /* Cards */
    .card-img-top {
        height: 280px;
    }
    
    /* Team proper 5-column layout */
    .col-lg-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
    
    /* Process steps enhanced */
    .process-step {
        width: 120px;
        height: 120px;
        font-size: 3rem;
    }
    
    /* Services grid enhancements */
    .services-grid .col-lg-4:nth-child(3n+1) {
        clear: left;
    }
    
    /* Enhanced hover effects */
    .card:hover {
        transform: translateY(-15px);
    }
    
    .timeline-item:hover {
        transform: translateY(-8px);
    }
    
    /* Gallery grid */
    #gallery .col-lg-3 {
        padding: 0.25rem;
    }
    
    /* Contact form layout */
    #contacts .row {
        align-items: center;
    }
    
    /* Testimonials spacing */
    .testimonial-swiper .card {
        margin: 0 1.5rem;
    }
}

/* =================================================================
   Extra large devices (large desktops, 1200px and up)
   ================================================================= */
@media (min-width: 1200px) {
    .container-xl {
        max-width: 1140px;
    }
    
    /* Typography */
    h1 { font-size: 4rem; }
    h2 { font-size: 3.5rem; }
    .display-4 { font-size: 4.5rem; }
    
    /* Hero section */
    .hero-section .container {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    
    /* Navigation */
    .navbar-brand {
        font-size: 1.75rem !important;
    }
    
    .navbar-nav .nav-link {
  font-size: 12px !important;
        margin: 0 1.25rem;
        font-size: 1.15rem;
    }
    
    /* Sections */
    section {
        padding: 10rem 0;
    }
    
    /* Cards */
    .card-img-top {
        height: 300px;
    }
    
    /* Enhanced animations */
    .card:hover {
        transform: translateY(-20px) scale(1.02);
    }
    
    /* Process steps */
    .process-step {
        width: 140px;
        height: 140px;
        font-size: 3.5rem;
    }
    
    /* Gallery enhanced */
    #gallery .col-lg-3 {
        padding: 0.5rem;
    }
    
    /* Footer enhanced */
    footer {
        padding: 5rem 0 4rem;
    }
    
    /* Contact info spacing */
    #contacts .col-lg-4 {
        margin-top: 3rem;
    }
}

/* =================================================================
   Extra Extra large devices (1400px and up)
   ================================================================= */
@media (min-width: 1400px) {
    .container-xxl {
        max-width: 1320px;
    }
    
    /* Typography max sizes */
    h1 { font-size: 4.5rem; }
    h2 { font-size: 4rem; }
    .display-4 { font-size: 5rem; }
    
    /* Sections max padding */
    section {
        padding: 12rem 0;
    }
    
    /* Cards max height */
    .card-img-top {
        height: 320px;
    }
    
    /* Process steps max size */
    .process-step {
        width: 160px;
        height: 160px;
        font-size: 4rem;
    }
}

/* =================================================================
   Mobile Landscape Adjustments (specific orientations)
   ================================================================= */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: 90vh;
        padding: 1rem 0;
    }
    
    .hero-section .container {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    section {
        padding: 3rem 0;
    }
    
    .navbar-nav .nav-link {
  font-size: 12px !important;
        padding: 0.25rem 0.75rem !important;
    }
}

/* =================================================================
   High DPI / Retina Display Adjustments
   ================================================================= */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders and shadows for high DPI displays */
    .card {
        border: 0.5px solid rgba(0,0,0,0.05);
    }
    
    .btn-primary {
        border: 0.5px solid rgba(255,255,255,0.1);
    }
    
    .process-step {
        border: 1px solid rgba(255,255,255,0.2);
    }
}

/* =================================================================
   Dark Mode Support (if system preference)
   ================================================================= */
@media (prefers-color-scheme: dark) {
    :root {
        --light: #1a1a1a;
        --gray-100: #2a2a2a;
        --gray-200: #3a3a3a;
        --gray-300: #4a4a4a;
    }
    
    .bg-light {
        background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
    }
    
    .card {
        background-color: #2a2a2a;
        color: #ffffff;
    }
    
    .accordion-body {
        background: #3a3a3a;
        color: #ffffff;
    }
}

/* =================================================================
   Print Responsive Adjustments
   ================================================================= */
@media print {
    @page {
        margin: 1in;
    }
    
    .container {
        max-width: none !important;
        width: 100% !important;
    }
    
    .col-md-6, .col-lg-4, .col-lg-6 {
        width: 100% !important;
        float: none !important;
    }
    
    .card {
        break-inside: avoid;
        margin-bottom: 1rem;
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .hero-section {
        min-height: auto !important;
        padding: 2rem 0 !important;
    }
    
    section {
        padding: 2rem 0 !important;
    }
}

/* =================================================================
   Accessibility & Motion Preferences
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
    .card,
    .timeline-item,
    .process-step,
    .btn-primary,
    .navbar-nav .nav-link {
  font-size: 12px !important;
        transition: none !important;
        animation: none !important;
    }
    
    .card:hover,
    .timeline-item:hover {
        transform: none !important;
    }
    
    .hero-section::before {
        animation: none !important;
    }
}

/* =================================================================
   Focus Improvements for Keyboard Navigation
   ================================================================= */
@media (min-width: 768px) {
    .navbar-nav .nav-link:focus {
        outline: 2px solid var(--accent-1);
        outline-offset: 2px;
    }
    
    .btn:focus {
        outline: 2px solid var(--accent-1);
        outline-offset: 2px;
    }
    
    .form-control:focus {
        outline: none;
        box-shadow: 0 0 0 0.25rem rgba(44, 62, 80, 0.25);
    }
}

/* =================================================================
   Performance Optimizations
   ================================================================= */
@media (max-width: 767px) {
    /* Reduce animations on mobile for better performance */
    .card:hover .card-img-top {
        transform: none;
    }
    
    .hero-section::before {
        transform: none;
    }
    
    /* Optimize mobile gallery */
    #gallery img {
        will-change: transform;
    }
}

/* =================================================================
   Container Queries (Future-proofing)
   ================================================================= */
@supports (container-type: inline-size) {
    .card-container {
        container-type: inline-size;
    }
    
    @container (min-width: 300px) {
        .card-title {
            font-size: 1.5rem;
        }
    }
}

/* =================================================================
   Utility Classes for Responsive Behavior
   ================================================================= */
.mobile-only {
    display: block;
}

.desktop-only {
    display: none;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none;
    }
    
    .desktop-only {
        display: block;
    }
}

/* Responsive text alignment */
.text-sm-center { text-align: center; }
.text-md-left { text-align: left; }
.text-lg-right { text-align: right; }

@media (min-width: 576px) {
    .text-sm-left { text-align: left; }
    .text-sm-right { text-align: right; }
}

@media (min-width: 768px) {
    .text-md-center { text-align: center; }
    .text-md-right { text-align: right; }
}

@media (min-width: 992px) {
    .text-lg-left { text-align: left; }
    .text-lg-center { text-align: center; }
}