/**
 * responsive.css
 * Mobile-first responsive overrides
 * Breakpoints: 1200px | 1024px | 768px | 480px
 */

/* ══════════════════════════════════════════════════════
   1200px — Large tablet / small desktop
═══════════════════════════════════════════════════════ */

@media (max-width: 1200px) {

    :root {
        --container-gutter: 32px;
    }

    /* Stages — 2 columns */
    .stages-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer — 2 column */
    .site-footer__upper {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }

    .site-footer__brand {
        grid-column: span 2;
    }

}

/* ══════════════════════════════════════════════════════
   1024px — Tablet
═══════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

    :root {
        --container-gutter: 28px;
    }

    /* Header — hide desktop nav and phone, show hamburger */
    .site-header__nav,
    .site-header__phone {
        display: none;
    }

    .site-header__hamburger {
        display: flex;
    }

    /* Opportunity — stack */
    .opportunity__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .opportunity__image-accent,
    .opportunity__stat-float {
        display: none;
    }

    .opportunity__image {
        height: 420px;
    }

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

    /* Process timeline — tighten gap on tablet */
    .process__step {
        column-gap: 28px;
    }

    /* Lifestyle — stack */
    .lifestyle__grid {
        grid-template-columns: 1fr;
        gap: 0;
        min-height: unset;
    }

    .lifestyle__map-img {
        height: 380px;
    }

    .distances {
        padding: var(--space-10) var(--container-gutter);
    }

    /* Builder — stack */
    .builder__grid {
        grid-template-columns: 1fr;
        gap: 0;
        min-height: unset;
    }

    .builder__content {
        padding: var(--space-30) var(--container-gutter);
    }

    .builder__image-wrap { display: none; }

    /* Buyers — 2 columns */
    .buyers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* Team — 2 columns */
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Contact — stack */
    .contact__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    /* Gallery — 3 columns on tablet */
    .gallery__grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 240px;
    }

    .gallery-item:nth-child(12) {
        grid-column: span 1;
    }

}

/* ══════════════════════════════════════════════════════
   768px — Mobile landscape / large phone
═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    :root {
        --container-gutter: 20px;
        --space-30: 80px;
        --space-24: 60px;
    }

    /* Hero */
    .hero__title  { font-size: clamp(36px, 9vw, 52px); }
    .hero__badges { gap: 8px; }
    .hero__badge  { padding: 8px 12px; }
    .hero__ctas   { flex-direction: column; align-items: flex-start; }
    .hero__ctas .btn { width: 100%; justify-content: center; }
    .hero__content-wrap { padding-bottom: var(--space-12); }

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

    /* Process timeline — compact on mobile */
    .process__step {
        grid-template-columns: 44px 1fr;
        column-gap: 20px;
        padding-bottom: 28px;
    }

    .process__circle {
        width: 42px;
        height: 42px;
    }

    .process__circle span {
        font-size: 13px;
    }

    .process__track::before {
        left: 21px;
        top: 21px;
        bottom: 21px;
    }

    .process__card {
        padding: 20px 22px;
    }

    .process__card::after {
        font-size: 90px;
    }

    .stat-card {
        padding: 36px 28px;
    }

    /* Stages — 1 column */
    .stages-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Buyers — 1 column */
    .buyers-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Inclusions — 1 column */
    .inclusions-grid {
        grid-template-columns: 1fr;
    }

    /* Team — 1 column */
    .team-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .team__lead { max-width: 100%; }

    /* Video — full width on mobile */
    .video-section__video-container {
        padding-inline: 0;
        max-width: 100%;
    }

    /* Gallery — 2 columns on mobile */
    .gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }

    .gallery-item:nth-child(1) {
        grid-column: span 2;
        grid-row: span 1;
    }

    .gallery-item:nth-child(12) {
        grid-column: span 2;
    }

    /* Contact form row */
    .form__row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact__form-wrap {
        padding: 32px 24px;
    }

    /* Footer */
      .footer-underlayer {
        position: relative;
    }

    
    .site-footer__upper {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-block: 52px 48px;
    }

    .site-footer__brand { grid-column: span 1; }

    .site-footer__bottom-inner {
        flex-direction: column;
        gap: 16px;
    }

    .site-footer__legal-nav {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* CTA section */
    .pre-footer-cta {
        padding-block: 100px;
    }

    .pre-footer-cta__buttons {
        flex-direction: column;
        align-items: flex-start;
    }

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

    /* Plan legend */
    .plan-legend__hint { display: none; }

    /* Lightbox nav */
    .lightbox__prev { left: 12px; }
    .lightbox__next { right: 12px; }

    /* Back to top */
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
    }
}

/* ══════════════════════════════════════════════════════
   480px — Small phone
═══════════════════════════════════════════════════════ */

@media (max-width: 480px) {

    :root {
        --container-gutter: 16px;
    }

    /* Hero */
    .hero__badge      { padding: 7px 10px; }
    .hero__badge-text { font-size: 9px; }

    /* Gallery — single column on small phones */
    .gallery__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
    }

    .gallery-item:nth-child(1),
    .gallery-item:nth-child(12) {
        grid-column: span 1;
    }

    /* Contact form */
    .contact__form-wrap {
        padding: 24px 16px;
    }

    /* Stage card */
    .stage-card { padding: 32px 24px; }

    /* Buyer card */
    .buyer-card { padding: 36px 28px; }

    /* Team card */
    .team-card { padding: 32px 24px; }

    /* Stat card */
    .stat-card { padding: 32px 20px; }

    /* Plan controls — smaller */
    .plan-controls__btn { width: 36px; height: 36px; font-size: 18px; }
}

/* ══════════════════════════════════════════════════════
   PRINT
═══════════════════════════════════════════════════════ */

@media print {
    .site-header,
    .mobile-drawer,
    .mobile-overlay,
    .back-to-top,
    .hero__scroll,
    .plan-controls {
        display: none !important;
    }

    .hero {
        min-height: auto;
        padding: 40px 0;
    }

    * { animation: none !important; }
}