/* ============================================
   RESPONSIVE.CSS
   Media Queries for All Breakpoints
   ============================================ */

/* ============================================
   BREAKPOINTS REFERENCE
   - Mobile: 0 - 480px
   - Tablet Portrait: 481px - 768px
   - Tablet Landscape: 769px - 1024px
   - Desktop: 1025px - 1200px
   - Large Desktop: 1201px+
   ============================================ */

/* ============================================
   TABLET LANDSCAPE (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
    /* Header */
    .header {
        padding: var(--space-md) var(--space-xl);
    }

    .header--scrolled {
        padding: var(--space-md) var(--space-xl);
    }

    /* Navigation */
    .nav__list {
        gap: var(--space-xl);
    }

    /* Hero */
    .hero {
        padding: 100px var(--space-xl) var(--space-xl);
    }

    /* Sections */
    .section {
        padding: var(--space-3xl) var(--space-xl);
    }

    /* Container */
    .container {
        padding: 0 var(--space-xl);
    }

    /* Contact Fixed - Make it relative on tablet */
    .contact-fixed {
        position: relative;
        bottom: auto;
        right: auto;
        max-width: 100%;
        margin: var(--space-xl) auto;
        text-align: center;
    }

    .contact-box {
        max-width: 400px;
        margin: 0 auto;
    }

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

/* ============================================
   TABLET PORTRAIT (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    /* Header */
    .header {
        padding: var(--space-md) var(--space-lg);
    }

    /* Logo */
    .logo__text {
        display: none;
    }

    /* Mobile Menu Toggle - Show */
    .menu-toggle {
        display: flex;
        position: fixed;
        top: var(--space-md);
        right: var(--space-lg);
        z-index: 9999;
    }

    /* Navigation - Full Screen Overlay */
    .nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: var(--color-cream);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 9998;
    }

    .nav--active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav__list {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .nav__list li {
        width: 100%;
        text-align: center;
    }

    .nav__link {
        display: block;
        font-size: 1.25rem;
        padding: 1.25rem 2rem;
        color: var(--color-black);
        text-decoration: none;
        letter-spacing: 0.1em;
    }

    .nav__link:hover,
    .nav__link--active {
        color: var(--color-burgundy);
    }

    .nav__link::after {
        display: none;
    }

    /* Hero */
    .hero {
        min-height: auto;
        padding: 120px var(--space-lg) var(--space-2xl);
    }

    .hero__image-placeholder {
        height: 250px;
    }

    /* Page Hero */
    .page-hero {
        padding-top: 120px;
        padding-bottom: var(--space-xl);
    }

    /* Sections */
    .section {
        padding: var(--space-2xl) var(--space-lg);
    }

    /* Container */
    .container {
        padding: 0 var(--space-lg);
    }

    /* Timeline */
    .timeline::before {
        left: 20px;
    }

    .timeline__item {
        width: calc(100% - 50px);
        margin-left: 50px !important;
        text-align: left !important;
    }

    .timeline__item::before {
        left: -38px !important;
        right: auto !important;
    }

    /* Menu Item */
    .menu-item {
        flex-direction: column;
        gap: var(--space-md);
    }

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

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

    /* Footer */
    .footer {
        padding: var(--space-2xl) var(--space-lg);
    }

    /* Coming Soon */
    .coming-soon::before {
        width: 300px;
        height: 300px;
    }
}

/* ============================================
   MOBILE (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    /* Base font size adjustment */
    body {
        font-size: 16px;
    }

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

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    /* Header */
    .header {
        padding: var(--space-md);
    }

    .logo__placeholder {
        width: 50px;
        height: 50px;
    }

    /* Mobile Menu Toggle Position */
    .menu-toggle {
        top: var(--space-md);
        right: var(--space-md);
    }

    /* Mobile Nav Links */
    .nav__link {
        font-size: 1.1rem;
        padding: 1rem 1.5rem;
    }

    /* Hero */
    .hero {
        padding: 100px var(--space-md) var(--space-xl);
    }

    .hero__tagline {
        font-size: var(--text-base);
        letter-spacing: 0.1em;
    }

    .hero__subtitle {
        font-size: var(--text-base);
    }

    .hero__image-placeholder {
        height: 200px;
    }

    /* Sections */
    .section {
        padding: var(--space-xl) var(--space-md);
    }

    .section__header {
        margin-bottom: var(--space-xl);
    }

    /* Container */
    .container {
        padding: 0 var(--space-md);
    }

    /* Grid - All single column */
    .grid--2,
    .grid--3,
    .grid--4,
    .grid--auto {
        grid-template-columns: 1fr;
    }

    /* Service Cards */
    .service-card {
        padding: var(--space-lg);
    }

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

    /* Menu Item */
    .menu-item {
        padding: var(--space-lg);
    }

    .menu-item__number {
        font-size: var(--text-2xl);
    }

    /* Contact Box */
    .contact-box {
        padding: var(--space-md);
    }

    /* Buttons */
    .btn {
        padding: var(--space-sm) var(--space-lg);
        width: 100%;
    }

    .btn--lg {
        padding: var(--space-md) var(--space-xl);
    }

    /* Footer */
    .footer {
        padding: var(--space-xl) var(--space-md);
    }

    /* Timeline */
    .timeline__item {
        padding: var(--space-lg);
    }

    .timeline__year {
        font-size: var(--text-lg);
    }

    /* Coming Soon */
    .coming-soon {
        padding: var(--space-md);
    }

    .coming-soon__text {
        font-size: var(--text-base);
    }
}

/* ============================================
   LARGE DESKTOP (min-width: 1400px)
   ============================================ */
@media (min-width: 1400px) {
    /* Larger container */
    .container {
        max-width: 1600px;
    }

    /* Increase section padding */
    .section {
        padding: var(--space-4xl) var(--space-3xl);
    }

    /* Hero adjustments */
    .hero__image-placeholder {
        max-width: 800px;
        height: 450px;
    }
}

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

    .animate-fade-in,
    .animate-fade-in-up,
    .animate-fade-in-down,
    .animate-fade-in-left,
    .animate-fade-in-right,
    .animate-slide-in-right,
    .animate-slide-in-left,
    .animate-scale-in {
        opacity: 1;
        transform: none;
    }

    .scroll-animate {
        opacity: 1;
        transform: none;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    /* Hide non-essential elements */
    .header,
    .footer,
    .menu-toggle,
    .contact-fixed,
    .btn {
        display: none !important;
    }

    /* Remove backgrounds */
    body,
    .hero,
    .section,
    .section--warm {
        background: white !important;
        color: black !important;
    }

    /* Ensure content is visible */
    main {
        padding-top: 0 !important;
    }

    .hero {
        min-height: auto !important;
        padding: 2rem 0 !important;
    }

    /* Adjust typography for print */
    h1 { font-size: 24pt; }
    h2 { font-size: 18pt; }
    h3 { font-size: 14pt; }
    p { font-size: 12pt; }
}