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

/* ─── 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 */
    .locations > div {
        grid-template-columns: 1fr !important;
        gap: var(--space-xl) !important;
    }

    .locations__image {
        order: -1;
    }
}

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

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