/* ============================================
   MGR JEWELRY - RESPONSIVE STYLES
   Mobile-First Breakpoints
   ============================================ */

/* ─── GLOBAL: Prevent horizontal overflow ─── */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* ─── Large Desktop (1200px and up) ─── */
@media (min-width: 1200px) {
    .nav__logo-img {
        height: 120px;
    }

    .hero {
        padding-top: 140px;
    }

    .hero__content {
        padding-top: 0;
    }

    .footer__logo-img {
        height: 200px !important;
    }
}

/* ─── Desktop (992px to 1199px) ─── */
@media (max-width: 1199px) {
    .nav__logo-img {
        height: 100px;
    }

    .hero {
        padding-top: 120px;
    }

    .footer__logo-img {
        height: 180px !important;
    }
}

/* ─── Tablet (768px to 991px) ─── */
@media (max-width: 1024px) {
    :root {
        --container-padding: clamp(1.5rem, 4vw, 3rem);
        --section-padding: clamp(4rem, 8vh, 7rem);
    }

    /* Navigation */
    .nav__logo-img {
        height: 80px;
    }

    .footer__logo-img {
        height: 150px !important;
    }

    .nav__menu {
        gap: var(--space-lg);
    }

    /* Hero adjustments */
    .hero {
        padding-top: 90px;
        min-height: 100vh;
    }

    .hero__content {
        padding-top: 20px;
    }

    .hero__title {
        font-size: clamp(2.5rem, 6vw, 4rem);
    }

    /* Services Grid */
    .services {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    /* Work Grid */
    .work-item--large,
    .work-item--small,
    .work-item--medium {
        grid-column: span 6;
    }

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

    /* Footer */
    .footer__top {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2xl);
    }

    .footer__brand {
        grid-column: span 2;
        max-width: 100%;
    }

    .footer__brand img {
        height: 80px !important;
    }
}

/* ─── Mobile Large (768px and down) ─── */
@media (max-width: 768px) {
    /* Navigation */
    .nav {
        padding: var(--space-sm) var(--container-padding);
    }

    .nav__logo-img {
        height: 70px;
    }

    .footer__logo-img {
        height: 120px !important;
    }

    .footer__brand {
        align-items: center;
    }

    .nav__menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        max-width: 400px;
        height: 100vh;
        background-color: var(--bg-secondary);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--space-xl);
        transform: translateX(100%);
        transition: transform var(--duration-normal) var(--ease-out);
        padding: var(--space-2xl);
    }

    .nav__menu.active {
        transform: translateX(0);
    }

    .nav__toggle {
        display: flex;
        z-index: calc(var(--z-nav) + 1);
    }

    .nav__link {
        font-size: var(--fs-h4);
    }

    /* Hero */
    .hero {
        min-height: 100svh;
        padding-top: 80px;
    }

    .hero__content {
        padding-top: 30px;
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .hero__subtitle {
        font-size: 0.75rem;
        letter-spacing: 0.15em;
    }

    .hero__title {
        font-size: clamp(2rem, 8vw, 3rem);
        line-height: 1.1;
        margin-bottom: var(--space-lg);
    }

    .hero__description {
        font-size: 0.9rem;
        margin-bottom: var(--space-xl);
    }

    .hero__cta {
        flex-direction: column;
        gap: var(--space-md);
    }

    .hero__cta .btn {
        width: 100%;
        max-width: 280px;
    }

    .hero__scroll {
        display: none;
    }

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

    .service-card__number {
        font-size: var(--fs-h1);
    }

    /* Work Grid */
    .work-grid {
        grid-template-columns: 1fr;
    }

    .work-item--large,
    .work-item--small,
    .work-item--medium {
        grid-column: span 1;
    }

    /* Carousel */
    .carousel__item {
        width: 85vw;
    }

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

    .stat {
        padding: var(--space-lg);
        border-bottom: var(--border-thin);
    }

    .stat:last-child {
        border-bottom: none;
    }

    /* Testimonial */
    .testimonial__quote {
        font-size: var(--fs-h4);
    }

    .testimonial__author {
        flex-direction: column;
        text-align: center;
    }

    .testimonial__info {
        text-align: center;
    }

    /* Footer */
    .footer__top {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .footer__brand {
        grid-column: span 1;
        text-align: center;
    }

    .footer__brand img {
        height: 70px !important;
        margin-left: auto;
        margin-right: auto;
    }

    .footer__bottom {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }

    .footer__legal {
        justify-content: center;
    }

    /* Page Header */
    .page-header {
        padding: calc(var(--space-3xl) + 80px) 0 var(--space-2xl);
    }

    .page-header__title {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    /* Locations grid - Global Presence section */
    .locations,
    .locations[style*="repeat(2, 1fr)"],
    .locations[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-xl) !important;
    }

    .locations__image {
        order: -1;
        width: 100%;
    }

    .locations__image img {
        width: 100% !important;
        max-height: 300px !important;
        object-fit: cover !important;
    }

    .locations__content {
        order: 2;
        text-align: center;
    }

    /* Keep Milan/Bangkok as 2-col row but centered */
    .locations__content > div[style*="display: flex"] {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    /* ═══════════════════════════════════════════════════════════
       CRITICAL: Override ALL inline grid layouts for mobile
       These use !important to override inline styles
       ═══════════════════════════════════════════════════════════ */

    /* --- Marketing & Story: Service sections with 2 columns --- */
    .section-services-detail [style*="grid-template-columns: 1fr 1fr"],
    .section-services-detail [style*="grid-template-columns:1fr 1fr"],
    .section-intro [style*="grid-template-columns: 1fr 1fr"],
    .section-intro [style*="grid-template-columns:1fr 1fr"],
    .section-materials [style*="grid-template-columns: 1fr 1fr"],
    .section-materials [style*="grid-template-columns:1fr 1fr"],
    [style*="display: grid"][style*="1fr 1fr"] {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-xl) !important;
    }

    /* Reset order for mobile - text first, images after */
    .section-services-detail [style*="grid"] > div:first-child,
    .section-intro [style*="grid"] > div:first-child {
        order: 1 !important;
    }

    .section-services-detail [style*="grid"] > div:last-child,
    .section-intro [style*="grid"] > div:last-child {
        order: 2 !important;
    }

    /* Override explicit order styles on service sections */
    .section-services-detail [style*="order: 1"],
    .section-services-detail [style*="order:1"] {
        order: 2 !important;
    }

    .section-services-detail [style*="order: 2"],
    .section-services-detail [style*="order:2"] {
        order: 1 !important;
    }

    /* Image containers - always come after text on mobile */
    .section-services-detail .image-reveal,
    .section-intro .image-reveal,
    .section-materials .image-reveal {
        order: 2 !important;
    }

    /* Text containers - always come first on mobile */
    .section-services-detail > .container > div > div:not(.image-reveal),
    .section-intro > .container > div > div:not(.image-reveal) {
        order: 1 !important;
    }

    /* --- Team Section: 3 columns to 1 column --- */
    .section-team [style*="repeat(3, 1fr)"],
    .section-team [style*="repeat(3,1fr)"],
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns:repeat(3, 1fr)"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--space-2xl) !important;
    }

    /* Team member styling on mobile */
    .team-member {
        text-align: center;
        max-width: 320px;
        margin: 0 auto;
    }

    .team-member__image {
        width: 180px !important;
        height: 180px !important;
        margin: 0 auto var(--space-md) !important;
    }

    /* --- Manufacturing: Process grid (6 steps) --- */
    .process-grid,
    .section-process [style*="repeat(3, 1fr)"],
    .section-process [style*="repeat(3,1fr)"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--space-lg) !important;
    }

    .process-step {
        padding: var(--space-lg) !important;
    }

    /* --- Manufacturing: Capabilities grid (3 cards) --- */
    .section-capabilities [style*="repeat(3, 1fr)"],
    .section-capabilities [style*="repeat(3,1fr)"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--space-lg) !important;
    }

    .capability-card {
        padding: var(--space-lg) !important;
    }

    /* --- Values Section: 4 columns to 2 columns --- */
    .section-values [style*="repeat(4, 1fr)"],
    .section-values [style*="repeat(4,1fr)"],
    [style*="grid-template-columns: repeat(4, 1fr)"],
    [style*="grid-template-columns:repeat(4, 1fr)"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-md) !important;
    }

    .value-card {
        padding: var(--space-md) !important;
    }

    /* --- Images: Full width on mobile --- */
    .section-services-detail img,
    .section-intro img,
    .section-materials img,
    .section-capabilities img {
        width: 100% !important;
        max-height: 350px !important;
        object-fit: cover !important;
        border-radius: var(--radius-md) !important;
    }

    /* --- Typography improvements for mobile --- */
    .section-services-detail .section-title,
    .section-intro .section-title,
    .section-materials .section-title {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
        line-height: 1.2 !important;
    }

    .section-description {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    /* Service number styling */
    .section-services-detail span[style*="font-size: var(--fs-display)"],
    .process-step div[style*="font-size: var(--fs-display)"] {
        font-size: var(--fs-h1) !important;
    }

    /* --- Footer: Logo and layout --- */
    .footer__brand {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .footer__brand > div {
        width: 120px !important;
        padding: var(--space-sm) !important;
    }

    .footer__brand img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .footer__tagline {
        text-align: center !important;
    }

    .footer__column {
        text-align: center;
    }

    .footer__links {
        align-items: center;
    }
}

/* ─── Mobile Small (480px and down) ─── */
@media (max-width: 480px) {
    :root {
        --container-padding: 1rem;
        --section-padding: 2.5rem;
    }

    /* Navigation */
    .nav__logo-img {
        height: 60px;
    }

    .footer__logo-img {
        height: 100px !important;
    }

    /* Typography scaling */
    h1 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
    h2 { font-size: clamp(1.5rem, 6vw, 1.75rem); }
    h3 { font-size: clamp(1.25rem, 5vw, 1.5rem); }

    /* Hero */
    .hero {
        padding-top: 70px;
    }

    .hero__content {
        padding-top: 20px;
    }

    .hero__subtitle {
        font-size: 0.65rem;
        letter-spacing: 0.1em;
        margin-bottom: var(--space-sm);
    }

    .hero__title {
        font-size: clamp(1.75rem, 9vw, 2.5rem);
        margin-bottom: var(--space-md);
    }

    .hero__description {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    /* Buttons */
    .btn {
        padding: var(--space-sm) var(--space-lg);
        font-size: var(--fs-caption);
    }

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

    .service-card__icon {
        width: 36px;
        height: 36px;
    }

    .service-card__title {
        font-size: var(--fs-h4);
    }

    /* Marquee */
    .marquee__item {
        font-size: var(--fs-h4);
    }

    /* Section Headers */
    .section-header {
        margin-bottom: var(--space-xl);
    }

    .section-label {
        font-size: 0.6rem;
    }

    .section-label::before,
    .section-header--center .section-label::after {
        width: 15px;
    }

    /* Contact Form */
    .form-input,
    .form-textarea {
        padding: var(--space-sm);
    }

    /* Footer */
    .footer__brand img {
        height: 50px !important;
    }

    .footer__social {
        justify-content: center;
    }

    /* Loader logo */
    .loader__logo-img {
        height: 80px !important;
    }

    /* ═══════════════════════════════════════════════════════════
       SMALL MOBILE: Additional refinements for tiny screens
       ═══════════════════════════════════════════════════════════ */

    /* Values section: 4 cols → 1 col on very small screens */
    .section-values [style*="repeat(4"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: 1fr !important;
    }

    /* Process steps: reduce padding */
    .process-step {
        padding: var(--space-md) !important;
    }

    /* Team member images: smaller on tiny screens */
    .team-member__image {
        width: 150px !important;
        height: 150px !important;
    }

    /* Images: limit height further */
    .section-services-detail img,
    .section-intro img,
    .section-materials img {
        max-height: 280px !important;
    }

    /* Container padding */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Service/process numbers smaller */
    .section-services-detail span[style*="font-size: var(--fs-display)"],
    .process-step div[style*="font-size: var(--fs-display)"] {
        font-size: var(--fs-h2) !important;
    }

    /* Footer brand */
    .footer__brand > div {
        width: 100px !important;
    }
}

/* ─── Extra Small (360px and down) ─── */
@media (max-width: 360px) {
    .nav__logo-img {
        height: 50px;
    }

    .footer__logo-img {
        height: 70px !important;
    }

    .hero__title {
        font-size: 1.5rem;
    }

    .hero__subtitle {
        font-size: 0.6rem;
    }

    .footer__brand img {
        height: 40px !important;
    }
}

/* ─── Landscape Mobile ─── */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: 100vh;
        padding: var(--space-xl) 0;
        padding-top: 80px;
    }

    .hero__content {
        padding-top: 0;
    }

    .hero__title {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }

    .hero__description {
        display: none;
    }

    .hero__scroll {
        display: none;
    }

    .nav__logo-img {
        height: 40px;
    }
}

/* ─── Large Screens (1440px and up) ─── */
@media (min-width: 1440px) {
    .container {
        padding: 0 calc((100vw - var(--container-width)) / 2 + var(--container-padding));
    }

    .nav__logo-img {
        height: 130px;
    }

    .footer__logo-img {
        height: 220px !important;
    }
}

/* ─── Ultra Wide (1920px and up) ─── */
@media (min-width: 1920px) {
    .nav__logo-img {
        height: 150px;
    }

    .hero__video-wrapper {
        max-width: 2560px;
        margin: 0 auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .footer__logo-img {
        height: 250px !important;
    }
}

/* ─── Print Styles ─── */
@media print {
    .nav,
    .hero__video-wrapper,
    .cursor,
    .cursor-follower,
    .hero__scroll,
    .loader,
    .page-transition {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    a {
        text-decoration: underline;
    }

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

    section {
        page-break-inside: avoid;
    }
}

/* ─── High Contrast Mode ─── */
@media (prefers-contrast: high) {
    :root {
        --accent-gold: #ffd700;
        --text-muted: #cccccc;
        --border-thin: 2px solid rgba(255, 255, 255, 0.3);
    }

    .btn--primary {
        border: 2px solid var(--accent-gold);
    }
}

/* ─── Dark Mode Adjustments (for system dark mode) ─── */
@media (prefers-color-scheme: dark) {
    /* Already dark by default, no changes needed */
}

/* ─── Touch Device Optimizations ─── */
@media (hover: none) and (pointer: coarse) {
    /* Increase tap targets */
    .nav__link {
        padding: var(--space-sm);
    }

    .btn {
        min-height: 48px;
    }

    .footer__link {
        padding: var(--space-xs) 0;
    }

    /* Disable hover-dependent effects */
    .service-card:hover {
        transform: none;
    }

    .work-item__overlay {
        opacity: 1;
        transform: translateY(0);
        background: linear-gradient(to top, rgba(10, 10, 10, 0.95), transparent);
    }

    .video-hover__video {
        display: none;
    }
}