/* ===================================================================
   Production Street — Responsive CSS 2026
   Mobile-first · All breakpoints
   =================================================================== */

/* -------------------------------------------------------------------
   TABLET <= 1024px
------------------------------------------------------------------- */
@media (max-width: 1024px) {

    /* Hero */
    .hero {
        grid-template-columns: 1fr;
        min-height: 100svh;
    }

    .hero-text-col {
        padding: calc(var(--header-height) + 2.5rem) var(--container-px) 2.5rem;
        min-height: 60svh;
    }

    .hero-image-col {
        height: 45svh;
    }

    .hero-image-col::before {
        background: linear-gradient(180deg, var(--ink-2) 5%, transparent 40%);
    }

    .hero-stats-pill {
        bottom: var(--sp-lg);
        right: var(--sp-lg);
        gap: var(--sp-lg);
    }

    /* Story */
    .story-layout {
        grid-template-columns: 1fr;
        gap: var(--sp-2xl);
    }

    .story-image-wrap img {
        aspect-ratio: 16/9;
    }

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

    /* Services cards */
    .service-card-h {
        min-width: clamp(260px, 70vw, 380px);
    }

    /* Process */
    .process-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .process-grid::before {
        display: none;
    }

    .process-step {
        padding: var(--sp-xl) var(--sp-lg);
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .process-step:last-child {
        border-bottom: none;
    }

    /* Gallery */
    .gallery-organic {
        columns: 2;
    }

    /* Contact */
    .contact-layout {
        grid-template-columns: 1fr;
    }

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

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-xl);
    }

    .footer-masthead {
        font-size: clamp(2rem, 8vw, 4rem);
    }
}

/* -------------------------------------------------------------------
   MOBILE <= 767px
------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* Typography */
    :root {
        --section-py: clamp(3.5rem, 10vw, 5rem);
    }

    h1 {
        font-size: clamp(2.2rem, 8vw, 3rem);
    }

    h2 {
        font-size: clamp(1.6rem, 6vw, 2.2rem);
    }

    h3 {
        font-size: clamp(1.2rem, 4vw, 1.6rem);
    }

    /* Header — Floating Pill على الموبايل */
    .header {
        top: .65rem;
        inset-inline: .75rem;
        height: 56px;
    }

    .header.scrolled {
        top: .4rem;
        height: 50px;
    }

    /* إخفاء زر الحجز على الموبايل لتوفير المساحة */
    .header-actions .btn-primary {
        display: none;
    }

    /* Hero */
    .hero-image-col {
        height: 35svh;
    }

    .hero-stats-pill {
        position: static;
        display: flex;
        justify-content: center;
        gap: var(--sp-lg);
        margin-top: var(--sp-xl);
        background: none;
        backdrop-filter: none;
        border: none;
        padding: 0;
    }

    .hero-bg-text {
        font-size: clamp(3.5rem, 18vw, 7rem);
    }

    /* Grid overrides */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr !important;
    }

    /* Values */
    .values-grid {
        grid-template-columns: 1fr;
    }

    /* Stats row */
    .stats-row {
        grid-template-columns: 1fr 1fr;
    }

    /* Services */
    .service-card-h {
        min-width: clamp(260px, 85vw, 360px);
    }

    /* Gallery masonry */
    .gallery-organic {
        columns: 1;
    }

    /* Form row */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Testimonials */
    .testimonial-card-big {
        padding: var(--sp-xl) var(--sp-lg);
    }

    .quote-mark {
        font-size: 5rem;
    }

    .testimonial-text {
        font-size: 1rem;
    }

    /* Team */
    .team-grid {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-xl);
    }

    .footer-masthead {
        font-size: clamp(2rem, 12vw, 3.5rem);
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--sp-sm);
        text-align: center;
    }

    /* CTA */
    .cta-big-text {
        font-size: clamp(1.8rem, 7vw, 2.8rem);
    }

    /* Contact */
    .contact-glass {
        padding: var(--sp-xl) var(--sp-lg);
    }
}

/* -------------------------------------------------------------------
   VERY SMALL <= 400px
------------------------------------------------------------------- */
@media (max-width: 400px) {
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

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

    .filter-bar {
        gap: .5rem;
    }

    .filter-btn {
        padding: .4rem 1rem;
        font-size: .78rem;
    }
}

/* -------------------------------------------------------------------
   LARGE SCREENS >= 1440px
------------------------------------------------------------------- */
@media (min-width: 1440px) {
    .gallery-organic {
        columns: 3;
    }
}

/* -------------------------------------------------------------------
   REDUCED MOTION
------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* -------------------------------------------------------------------
   FOCUS VISIBLE — keyboard nav
------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 3px;
    border-radius: 4px;
}