/* ============================================================
   RESPONSIVE.CSS — Villa Petra Gaeta
   Breakpoints: 1200px, 1024px, 768px, 480px
   ============================================================ */


/* ─── Large Desktop → Tablet Landscape ─── */
@media (max-width: 1200px) {

    .ci-tech__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Exterior: narrower video column */
    .ci-exterior__layout {
        grid-template-columns: 1fr 340px;
    }
}


/* ─── Tablet Landscape → Tablet Portrait ─── */
@media (max-width: 1024px) {

    /* Architecture grids → stack */
    .ci-arch__floor-grid,
    .ci-arch__floor-grid--reverse {
        grid-template-columns: 1fr;
        gap: var(--ci-gap-sm);
    }

    .ci-arch__details {
        grid-template-columns: 1fr;
    }

    /* Counters → 2x2 */
    .ci-arch__counters {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Contact → stack */
    .ci-contact__grid {
        grid-template-columns: 1fr;
        gap: var(--ci-gap);
    }

    /* Exterior → stack vertically */
    .ci-exterior__layout {
        grid-template-columns: 1fr;
    }

    .ci-exterior__video-col {
        position: relative;
        top: auto;
    }

    /* Video: horizontal crop on tablet, not full 9:16 */
    .ci-exterior__video {
        aspect-ratio: 3 / 4;
        max-height: 500px;
    }

    /* Nav → hamburger */
    .ci-nav__links {
        display: none;
    }

    .ci-nav__hamburger {
        display: flex;
    }

    /* Room Navigator tabs — single row scrollable */
    .ci-room-tabs {
        gap: 4px;
        padding: 4px;
    }

    .ci-room-tabs__floor-label {
        display: none; /* Hide floor labels on tablet to save space */
    }
}


/* ─── Tablet → Mobile ─── */
@media (max-width: 768px) {

    /* Global button responsive layout fix */
    .ci-btn {
        white-space: normal !important;
        padding: 0.9em 1.5em !important;
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
        max-width: 100%;
        box-sizing: border-box;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Hero adjustments */
    .ci-hero {
        align-items: center;
        min-height: 500px;
    }

    .ci-hero__content {
        padding-bottom: 100px;
    }

    .ci-hero__subtitle {
        font-size: 0.95rem;
    }

    .ci-hero__badge {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 16px;
    }

    .ci-hero__badge-label,
    .ci-hero__badge-status {
        font-size: 0.7rem;
    }

    /* Exterior cards → 1 column */
    .ci-exterior__grid {
        grid-template-columns: 1fr;
    }

    /* Tech grid → 1 column */
    .ci-tech__grid {
        grid-template-columns: 1fr;
    }

    /* Counters → full row */
    .ci-arch__counters {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .ci-counter__number {
        font-size: 2rem;
    }

    .ci-counter__label {
        font-size: 0.65rem;
    }

    /* B/A Slider aspect ratio → taller on mobile */
    .ci-ba-slider__wrapper {
        aspect-ratio: 4 / 3;
    }

    /* Room Navigator — Mobile */
    .ci-concept__room-title {
        display: block; /* Show room name above slider on mobile */
    }

    .ci-room-tabs {
        border-radius: var(--ci-radius-lg);
        gap: 3px;
        padding: 3px;
    }

    .ci-room-tab {
        font-size: 0.9rem;
        padding: 10px 16px;
    }

    /* Angle thumbnails — smaller on mobile */
    .ci-angle-selector {
        gap: 8px;
    }

    .ci-angle-thumb {
        width: 72px;
        height: 48px;
    }

    /* Lightbox — more room on mobile */
    .ci-lightbox__inner {
        max-width: 95vw;
        max-height: 85vh;
    }

    .ci-lightbox__close {
        top: -40px;
        right: 4px;
        width: 36px;
        height: 36px;
    }

    .ci-lightbox__img {
        max-width: 95vw;
        max-height: 75vh;
    }

    /* B/A Slider caption */
    .ci-ba-slider__caption {
        font-size: 0.75rem;
        padding: 0 1rem;
    }

    /* Detail button — full width on mobile */
    .ci-concept__details-bar {
        flex-direction: column;
        align-items: center;
    }

    /* Footer → stack */
    .ci-footer__inner {
        flex-direction: column;
        text-align: center;
    }

    .ci-footer__legal {
        order: 2;
    }

    .ci-footer__links {
        order: 1;
    }

    /* Section padding reduction */
    .ci-section {
        padding-top: var(--ci-section-py-sm);
        padding-bottom: var(--ci-section-py-sm);
    }

    /* Rooftop */
    .ci-arch__roof {
        padding: 32px 24px;
    }

    /* Form */
    .ci-form {
        padding: 24px;
    }

    /* Mobile menu */
    .ci-nav__mobile-link {
        font-size: 1.8rem;
    }
}


/* ─── Small Mobile ─── */
@media (max-width: 480px) {

    /* Counters → 2x2 on very small screens */
    .ci-arch__counters {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Contact phones → stack */
    .ci-contact__phone span {
        font-size: 1rem;
    }

    /* Badge → column */
    .ci-hero__badge {
        flex-direction: column;
        align-items: flex-start;
    }

    .ci-hero__badge-dot {
        display: none;
    }

    /* Nav brand */
    .ci-nav__brand-name {
        font-size: 1.1rem;
    }

    .ci-nav__brand-location {
        display: none;
    }

    /* Room tabs — even more compact */
    .ci-room-tab {
        font-size: 0.85rem;
        padding: 8px 12px;
        letter-spacing: 0;
    }

    /* B/A Slider aspect ratio → square on small mobile to exploit vertical height */
    .ci-ba-slider__wrapper {
        aspect-ratio: 1 / 1;
    }

    /* Angle thumbs — minimal */
    .ci-angle-thumb {
        width: 60px;
        height: 42px;
        border-radius: var(--ci-radius);
    }
}


/* ─── Print Styles ─── */
@media print {
    .ci-nav,
    .ci-hero__scroll,
    .ci-nav__hamburger,
    .ci-footer__back-top,
    .ci-form__submit-loader {
        display: none !important;
    }

    .ci-hero {
        height: auto !important;
        min-height: 0 !important;
    }

    .ci-hero__video {
        display: none;
    }

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

    body {
        color: #000;
        background: #fff;
    }
}


/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }

    .ci-reveal {
        opacity: 1;
        transform: none;
    }

    .ci-reveal--line {
        transform: scaleX(1);
    }

    .ci-parallax-img img {
        transform: none !important;
    }
}