/* --- Mar y Selva — Responsive Styles --- */

/* --- TABLET — 968px --- */
@media (max-width: 968px) {
    :root {
        --space-section: clamp(3rem, 8vh, 5rem);
        --space-3xl: 5rem;
    }
    /* Navigation */
    .nav__links { display: none; }
    .nav__cta { display: none; }
    .nav__toggle { display: flex; }
    /* Mobile menu — premium dark overlay */
    .nav__mobile-overlay {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: var(--z-mobile-menu);
        background-color: var(--color-dark);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        opacity: 0;
        visibility: hidden;
        transition:
            opacity var(--duration-normal) var(--ease-smooth),
            visibility var(--duration-normal) var(--ease-smooth);
    }
    .nav__mobile-overlay.is-open { opacity: 1; visibility: visible; }
    .nav__mobile-overlay .nav__mobile-link {
        font-family: var(--font-heading);
        font-size: var(--text-h2);
        font-weight: 300;
        color: var(--color-text-on-dark-muted);
        letter-spacing: var(--tracking-normal);
        padding: var(--space-sm) 0;
        opacity: 0;
        transform: translateY(20px);
        transition:
            opacity var(--duration-normal) var(--ease-out),
            transform var(--duration-normal) var(--ease-out),
            color var(--duration-fast) var(--ease-smooth);
    }
    .nav__mobile-overlay .nav__mobile-link:hover,
    .nav__mobile-overlay .nav__mobile-link:focus-visible { color: var(--color-text-on-dark); }
    .nav__mobile-overlay.is-open .nav__mobile-link { opacity: 1; transform: translateY(0); }
    .nav__mobile-overlay.is-open .nav__mobile-link:nth-child(1) { transition-delay: 0.08s; }
    .nav__mobile-overlay.is-open .nav__mobile-link:nth-child(2) { transition-delay: 0.14s; }
    .nav__mobile-overlay.is-open .nav__mobile-link:nth-child(3) { transition-delay: 0.20s; }
    .nav__mobile-overlay.is-open .nav__mobile-link:nth-child(4) { transition-delay: 0.26s; }
    .nav__mobile-overlay.is-open .nav__mobile-link:nth-child(5) { transition-delay: 0.32s; }
    .nav__mobile-overlay.is-open .nav__mobile-link:nth-child(6) { transition-delay: 0.38s; }
    .nav__mobile-overlay.is-open .nav__mobile-link:nth-child(7) { transition-delay: 0.44s; }
    .nav__mobile-cta {
        margin-top: var(--space-xl);
        opacity: 0;
        transform: translateY(20px);
        transition:
            opacity var(--duration-normal) var(--ease-out),
            transform var(--duration-normal) var(--ease-out);
    }
    /* Override btn--sage for dark mobile menu context */
    .nav__mobile-overlay .nav__mobile-cta {
        color: var(--color-text-on-dark);
        border-color: var(--color-white-40);
        background-color: transparent;
    }
    .nav__mobile-overlay .nav__mobile-cta:hover {
        background-color: var(--color-white-15);
        border-color: var(--color-white-80);
        color: var(--color-white);
    }
    .nav__mobile-overlay.is-open .nav__mobile-cta { opacity: 1; transform: translateY(0); transition-delay: 0.48s; }
    .nav__toggle.is-open span { background-color: var(--color-text-on-dark); }
    /* Accommodations — 2-col at tablet */
    .accommodations__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); max-width: var(--max-width); }
    /* Experience */
    .experience__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
    /* Gallery */
    .gallery__grid { grid-template-columns: repeat(2, 1fr); }
    .gallery__item--wide { grid-column: span 2; }
    /* Testimonials — single column, remove vertical dividers */
    .testimonials__grid { grid-template-columns: 1fr; gap: 0; max-width: var(--max-width-narrow); }
    .testimonial-card { border-left: none; border-top: 1px solid var(--color-border-light); padding: var(--space-xl); }
    .testimonial-card:first-child { border-top: none; }
    /* Location */
    .location__content { grid-template-columns: 1fr; gap: var(--space-xl); }
    /* Contact */
    .contact__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
    /* Booking CTA — scale heading for tablet */
    .booking-cta__heading { font-size: var(--text-h2); }
    /* Feature image — intermediate height between desktop and mobile */
    .feature-image { height: 55vh; min-height: 300px; }
    /* Intro — left-align from tablet down */
    .intro__inner { text-align: left; }
    .intro .section-divider { margin-left: 0; }
    /* Footer */
    .footer__top { flex-direction: column; gap: var(--space-xl); }
    .footer__links { flex-wrap: wrap; gap: var(--space-md); }
    .footer__bottom { flex-direction: column; gap: var(--space-sm); text-align: center; }
}

/* --- MOBILE — 600px --- */
@media (max-width: 600px) {
    :root {
        --nav-height: 64px;
        --space-section: 3rem;
        --space-section-sm: 2rem;
        --space-3xl: 2.5rem;
        --space-2xl: 2rem;
        --space-xl: 1.5rem;
        --space-lg: 1.25rem;
    }
    /* Hero */
    .hero { min-height: auto; }
    .hero__video-desktop { display: none; }
    .hero__video-mobile { display: block; object-position: center center; }
    .hero__content-backdrop { width: 320px; height: 300px; }
    .hero__scroll { bottom: var(--space-md); }
    .hero__cta {
        padding: var(--space-sm) var(--space-lg);
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Section headings — tighter */
    .section-heading { margin-bottom: var(--space-md); }
    .section-divider { margin-bottom: var(--space-lg); }
    .intro .section-divider { margin-left: 0; }
    .section-label { margin-bottom: var(--space-sm); }
    /* Intro */
    .intro__inner { text-align: left; }
    /* Accommodations */
    .accommodations__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
    /* Experience */
    .experience__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
    .experience-card__image { aspect-ratio: 16 / 10; }
    .experience-card__text { max-width: none; }
    /* Stagger — cap delays on single-column layout */
    .reveal-stagger.is-visible > *:nth-child(n+4) { transition-delay: 0s !important; }
    /* Gallery */
    .gallery__grid { grid-template-columns: 1fr; gap: var(--space-sm); }
    .gallery__item--wide { grid-column: span 1; aspect-ratio: 16 / 9; }
    .gallery__item { aspect-ratio: 4 / 3; }
    /* Lightbox */
    .gallery-lightbox__nav { padding: var(--space-sm); }
    .gallery-lightbox__nav--prev { left: 0; }
    .gallery-lightbox__nav--next { right: 0; }
    /* Feature image */
    .feature-image { height: 40vh; min-height: 220px; }
    /* Testimonials */
    .testimonial-card { padding: var(--space-lg); }
    /* Booking CTA */
    .booking-cta__heading { font-size: var(--text-h2); }
    .booking-cta__text { margin-bottom: var(--space-lg); }
    /* Contact form */
    .form-row { grid-template-columns: 1fr; }
    .contact__form .btn { align-self: stretch; text-align: center; }
    /* Accommodations estate */
    .accommodations__estate { padding: var(--space-lg) var(--space-md); }
    /* Location */
    .location__map { aspect-ratio: 16 / 10; }
    /* Contact info links */
    .contact__info-value a { padding: 8px 0; display: inline-block; }
    /* Footer */
    .footer { padding-top: var(--space-xl); }
    .footer__top { align-items: center; text-align: center; }
    .footer__links { flex-direction: column; gap: 0; }
    .footer__link { padding: 10px 0; }
}

/* --- Very small screens — 380px --- */
@media (max-width: 380px) {
    .hero__title { font-size: clamp(2.2rem, 12vw, 3rem); }
    .section-heading { font-size: clamp(1.6rem, 8vw, 2rem); }
    .booking-cta__heading { font-size: clamp(1.4rem, 7vw, 1.8rem); }
    .testimonial-card { padding: var(--space-md); }
    .accommodations__estate { padding: var(--space-md) var(--space-sm); }
}

/* --- LARGE SCREENS — 1600px+ --- */
@media (min-width: 1600px) {
    .gallery__grid { gap: var(--space-sm); }
    .accommodations__grid { gap: var(--space-2xl); }
    .experience__grid { gap: var(--space-xl); }
    .testimonials__grid { gap: var(--space-2xl); }
}

/* --- PREFERS REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    /* Page load — show immediately */
    body { opacity: 1 !important; }
    /* Scroll reveals — show immediately */
    .reveal,
    .reveal--left,
    .reveal--right,
    .reveal--fade,
    .reveal--scale,
    .reveal-stagger > * { opacity: 1 !important; transform: none !important; will-change: auto !important; }
    /* Hero content — show immediately */
    .hero__content > * { animation: none !important; opacity: 1 !important; }
    .hero__scroll { animation: none !important; opacity: 1 !important; }
    .hero__scroll-line::after { animation: none !important; transform: scaleY(1) !important; }
    /* Section dividers — show immediately */
    .section-divider.is-visible { animation: none !important; transform: scaleX(1) !important; }
    /* Card hover image scales — disable */
    .villa-card__image img,
    .experience-card__image img,
    .gallery__item img { transition: none !important; }
    /* Gallery lightbox — show immediately */
    .gallery-lightbox,
    .gallery-lightbox__image,
    .gallery-lightbox__close,
    .gallery-lightbox__nav,
    .gallery-lightbox__counter { animation: none !important; }
    /* Nav link underlines — show instantly */
    .nav__link::after,
    .footer__link::after { transition: none !important; }
    /* Button press effect — disable */
    .btn:active,
    .hero__cta:active { transform: none !important; }
    /* Social icon hover — disable */
    .footer__social a { transition: none !important; }
    /* Mobile menu — show immediately */
    .nav__mobile-overlay .nav__mobile-link,
    .nav__mobile-overlay .nav__mobile-cta { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- SAFE AREA INSETS (notched/dynamic island devices) --- */
@supports (padding-top: env(safe-area-inset-top)) {
    .nav {
        padding-left: max(var(--content-padding), env(safe-area-inset-left));
        padding-right: max(var(--content-padding), env(safe-area-inset-right));
    }
    .footer { padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom)); }
    .gallery-lightbox {
        padding-top: max(var(--space-xl), env(safe-area-inset-top));
        padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom));
    }
    .nav__mobile-overlay {
        padding-top: max(0px, env(safe-area-inset-top));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
}

/* --- HIGH CONTRAST --- */
@media (prefers-contrast: high) {
    :root {
        --color-text-secondary: #3A3A38;
        --color-text-tertiary: #5A5A58;
        --color-border: #999;
    }
}

/* --- PRINT STYLES --- */
@media print {
    .nav,
    .hero__scroll,
    .gallery-lightbox,
    .nav__mobile-overlay { display: none !important; }
    .hero { height: auto; min-height: 0; page-break-after: always; }
    .hero__content { position: relative; color: #000; padding: 2rem 0; }
    body { color: #000; background: #fff; }
    .section-label { color: #333; }
}