/* ==========================================================================
   AudioBook AI - Responsive CSS
   Mobile-First Responsive Design
   ========================================================================== */

/* Mobile First Base Styles */
/* Already defined in main.css for mobile */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .hero-section h1 {
        font-size: 2.5rem;
    padding-top: 225px;
}
    
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    /* Services cards better spacing */
    #services .card {
        margin-bottom: 1.5rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    /* Hero section improvements */
    .hero-section h1 {
        font-size: 3rem;
    padding-top: 225px;
}
    
    .hero-section .lead {
        font-size: 1.25rem;
    }
    
    /* Team member layout */
    .team-member img {
        width: 120px;
        height: 120px;
    }
    
    /* Timeline responsive adjustments */
    .timeline-item {
        padding-left: 3rem;
    }
    
    /* Process steps better alignment */
    .process-step {
        width: 80px;
        height: 80px;
        font-size: 1.5rem;
    }
    
    /* Card hover effects more pronounced on larger screens */
    .card:hover {
        transform: translateY(-4px);
    }
    
    /* Footer layout improvements */
    footer .row {
        text-align: left;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    /* Typography scale up */
    .hero-section h1 {
        font-size: 3.5rem;
    padding-top: 225px;
}
    
    .display-4 {
        font-size: 3rem;
    }
    
    h1, .h1 {
        font-size: 2.5rem;
    }
    
    h2, .h2 {
        font-size: 2rem;
    }
    
    /* Section padding increase */
    section {
        padding: 6rem 0;
    }
    
    /* Hero section full utilization */
    .hero-section {
        min-height: 100vh;
    }
    
    /* Services grid improvements */
    #services .row {
        justify-content: center;
    }
    
    /* Team layout optimization */
    #team .row {
        justify-content: space-around;
    }
    
    /* Gallery grid optimization */
    #gallery .col-lg-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    
    /* Contact form better proportions */
    #contact .col-lg-8 {
        flex: 0 0 75%;
        max-width: 75%;
    }
    
    #contact .col-lg-4 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    /* Maximum width constraints */
    .container {
        max-width: 1140px;
    }
    
    /* Hero section optimal sizing */
    .hero-section h1 {
        font-size: 4rem;
    padding-top: 225px;
}
    
    .hero-section .lead {
        font-size: 1.375rem;
    }
    
    /* Section padding maximum */
    section {
        padding: 7rem 0;
    }
    
    /* Content width optimization */
    .col-lg-8.mx-auto {
        flex: 0 0 60%;
        max-width: 60%;
    }
}

/* Extra extra large devices (1400px and up) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    /* Prevent excessive scaling */
    .hero-section h1 {
        font-size: 4rem; /* Cap at 4rem */
    padding-top: 225px;
}
    
    .lead {
        font-size: 1.375rem; /* Cap lead text */
    }
}

/* Mobile-Specific Optimizations */
@media (max-width: 767.98px) {
    /* No scroll animations on mobile per requirements */
    [data-sal] {
        transform: none !important;
        opacity: 1 !important;
    }
    
    /* Mobile navigation improvements */
    .navbar-collapse {
        margin-top: 1rem;
        border-top: 1px solid var(--gray-200);
        padding-top: 1rem;
    }
    
    /* Mobile typography */
    .hero-section h1 {
        font-size: 2rem;
    padding-top: 225px;
}
    
    .display-4 {
        font-size: 2rem;
    }
    
    h1, .h1 {
        font-size: 1.75rem;
    }
    
    h2, .h2 {
        font-size: 1.5rem;
    }
    
    /* Mobile spacing adjustments */
    section {
        padding: 3rem 0;
    }
    
    /* Mobile hero adjustments */
    .hero-section {
        min-height: 80vh;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .hero-section .col-lg-6 {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    /* Mobile button adjustments */
    .hero-buttons .btn {
        display: block;
        width: 100%;
        margin-bottom: 0.75rem;
    }
    
    .hero-buttons .btn:last-child {
        margin-bottom: 0;
    }
    
    /* Mobile card stacking */
    .card {
        margin-bottom: 1.5rem;
    }
    
    /* Mobile form improvements */
    .form-control {
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    /* Mobile table responsiveness */
    .table-responsive {
        border: none;
    }
    
    /* Mobile process steps */
    .process-step {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
    
    /* Mobile team member adjustments */
    .team-member {
        margin-bottom: 2rem;
        text-align: center;
    }
    
    .team-member img {
        width: 100px;
        height: 100px;
    }
    
    /* Mobile timeline adjustments */
    .timeline-item {
        padding-left: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .timeline-item::before {
        left: 0.5rem;
    }
    
    .timeline-item::after {
        left: 0.25rem;
    }
    
    /* Mobile gallery grid */
    #gallery .col-6 {
        padding: 0.125rem;
    }
    
    /* Mobile contact form */
    #contact .col-lg-8,
    #contact .col-lg-4 {
        margin-bottom: 2rem;
    }
    
    /* Mobile footer adjustments */
    footer .col-lg-4 {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    footer .row.align-items-center > div {
        text-align: center !important;
    }
    
    /* Mobile additional pages */
    .col-lg-2.col-md-4 {
        margin-bottom: 2rem;
    }
}

/* Tablet Portrait Specific */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Services grid optimization for tablets */
    #services .col-lg-4 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 2rem;
    }
    
    /* Team member grid for tablets */
    #team .col-lg-2 {
        flex: 0 0 20%;
        max-width: 20%;
    }
    
    /* Features layout for tablets */
    #features .col-lg-6 {
        margin-bottom: 2rem;
    }
    
    /* Process steps for tablets */
    #process .col-lg-2 {
        flex: 0 0 20%;
        max-width: 20%;
        margin-bottom: 2rem;
    }
}

/* Print Media Queries */
@media print {
    /* Hide interactive elements */
    .navbar,
    .btn,
    .breadcrumb,
    footer,
    #space {
        display: none !important;
    }
    
    /* Optimize for print */
    body {
        font-size: 12pt;
        line-height: 1.4;
        color: #000000 !important;
        background: #ffffff !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        color: #000000 !important;
        page-break-after: avoid;
    }
    
    .card {
        border: 1px solid #000000 !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }
    
    section {
        padding: 1rem 0;
        page-break-inside: avoid;
    }
    
    .container {
        width: 100% !important;
        max-width: none !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .card {
        border: 2px solid #000000;
    }
    
    .btn {
        border: 2px solid;
    }
    
    .form-control {
        border: 2px solid #000000;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .card:hover {
        transform: none;
    }
    
    .btn:hover {
        transform: none;
    }
    
    #gallery img:hover {
        transform: none;
    }
    
    .team-member:hover img {
        transform: none;
    }
    
    /* Disable all scroll-triggered animations on mobile regardless */
    [data-sal] {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Dark Mode Support (Future Enhancement) */

/* Landscape Phone Adjustments */
@media (max-width: 767.98px) and (orientation: landscape) {
    .hero-section {
        min-height: 70vh;
    }
    
    section {
        padding: 2rem 0;
    }
    
    .navbar-brand {
        font-size: 1.125rem;
    }
}

/* Very Large Screens (1600px+) */
@media (min-width: 1600px) {
    /* Prevent content from becoming too spread out */
    .container {
        max-width: 1400px;
    }
    
    /* Maintain readable line lengths */
    .col-lg-8.mx-auto {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    /* Cap section padding */
    section {
        padding: 8rem 0;
    }
}

/* Accessibility - Focus Management */
@media (max-width: 767.98px) {
    .navbar-toggler:focus {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }
    
    .nav-link {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--gray-200);
    }
    
    .nav-link:last-child {
        border-bottom: none;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .card:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }
    
    .btn:hover {
        transform: none;
    }
    
    /* Increase touch targets */
    .btn {
        min-height: 44px;
        padding: 0.875rem 1.5rem;
    }
    
    .nav-link {
        min-height: 44px;
        padding: 0.875rem 1rem;
    }
    
    .form-control {
        min-height: 44px;
    }
}

/* Safari iOS Specific Fixes */
@supports (-webkit-appearance: none) {
    .form-control {
        -webkit-appearance: none;
        border-radius: 0.5rem;
    }
    
    /* Fix iOS zoom on input focus */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        font-size: 16px;
    }
}

/* Firefox Specific Adjustments */
@-moz-document url-prefix() {
    .form-control {
        -moz-appearance: none;
    }
}

/* Edge/IE Compatibility */
@media screen and (-ms-high-contrast: active) {
    .card {
        border: 2px solid;
    }
    
    .btn {
        border: 2px solid;
    }
}