/* ==========================================================================
   RESPONSIVE — Exterior Images
   Mobile-first breakpoint overrides.
   ========================================================================== */

/* ==========================================================================
   MOBILE (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {

  /* ---- Typography ---- */
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }

  .prose { font-size: var(--text-base); }

  .drop-cap::first-letter {
    font-size: 2.8em;
  }

  .pull-quote {
    font-size: var(--text-xl);
    padding-left: var(--space-6);
    margin: var(--space-8) 0;
  }

  .section-heading h2 {
    font-size: var(--text-2xl);
  }

  /* ---- Layout ---- */
  .section {
    padding: var(--section-padding-sm) 0;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .split {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .split--reverse .split__content,
  .split--reverse .split__media {
    order: unset;
  }

  /* ---- Hero ---- */
  .hero {
    min-height: 60vh;
  }

  .hero--full {
    min-height: 80vh;
  }

  .hero__content h1 {
    font-size: var(--text-3xl);
  }

  .hero__content p {
    font-size: var(--text-base);
  }

  .hero--page {
    min-height: 30vh;
  }

  .hero--page h1 {
    font-size: var(--text-2xl);
  }

  /* ---- Logo ---- */
  .site-logo img,
  .site-logo__img {
    height: 114px;
  }

  .scrolled .site-logo img,
  .scrolled .site-logo__img {
    height: 53px;
  }

  .footer-brand img {
    height: 80px;
  }

  /* ---- Navigation ---- */
  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    background-color: var(--parchment);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-24) var(--space-8) var(--space-8);
    transform: translateX(100%);
    transition: transform var(--duration-normal) var(--ease-out);
    z-index: calc(var(--z-overlay) + 1); /* 301 — above the overlay backdrop */
    box-shadow: var(--shadow-xl);
    overflow-y: auto;
  }

  .main-nav.active {
    transform: translateX(0);
  }

  .mobile-nav-overlay.active {
    display: block;
  }

  .main-nav__link {
    color: var(--color-text);
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-4);
    width: 100%;
    border-radius: 0;
    border-bottom: var(--border-light);
  }

  .main-nav__link.active::after {
    display: none;
  }

  .main-nav__cta {
    margin-left: 0;
    margin-top: var(--space-4);
    text-align: center;
    width: 100%;
    display: block;
  }

  /* Force scrolled styles on mobile nav items since drawer has light bg */
  .scrolled .main-nav__link,
  .main-nav__link {
    color: var(--color-text);
  }

  /* ---- Components ---- */
  .process-steps {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .process-step:not(:last-child)::after {
    display: none;
  }

  .testimonial__quote {
    font-size: var(--text-xl);
  }

  .cta-banner {
    padding: var(--space-12) var(--space-6);
    border-radius: var(--radius-md);
  }

  .cta-banner h2 {
    font-size: var(--text-2xl);
  }

  /* ---- Ask AI ---- */
  .ask-ia-btn {
    color: var(--color-primary);
    border-color: var(--color-primary);
    margin-top: var(--space-2);
    justify-content: center;
    width: 100%;
  }

  .ask-ia-btn.active {
    background-color: var(--color-primary);
    color: var(--warm-white);
  }

  .ask-ia-panel.active {
    max-height: 70vh;
  }

  .ask-ia__messages {
    max-height: 45vh;
  }

  /* ---- Video Grid ---- */
  .video-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* ---- Gallery ---- */
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  .gallery-filter {
    gap: var(--space-1);
    margin-bottom: var(--space-8);
  }

  .gallery-filter__btn {
    font-size: 0.65rem;
    padding: var(--space-1) var(--space-3);
  }

  /* ---- Lightbox ---- */
  .lightbox__nav {
    font-size: var(--text-xl);
    padding: var(--space-2);
  }

  .lightbox__nav--prev { left: var(--space-2); }
  .lightbox__nav--next { right: var(--space-2); }

  /* ---- Footer ---- */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }
}

/* ==========================================================================
   SMALL MOBILE (max-width: 480px)
   ========================================================================== */
@media (max-width: 480px) {
  h1 { font-size: var(--text-2xl); }

  .site-logo img,
  .site-logo__img {
    height: 86px;
  }

  .scrolled .site-logo img,
  .scrolled .site-logo__img {
    height: 42px;
  }

  .hero {
    min-height: 50vh;
  }

  .hero__content h1 {
    font-size: var(--text-2xl);
  }

  .process-steps {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .btn--lg {
    font-size: var(--text-sm);
    padding: var(--space-4) var(--space-8);
  }
}

/* ==========================================================================
   TABLET (min-width: 769px) AND (max-width: 1024px)
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .hero__content h1 {
    font-size: var(--text-4xl);
  }

  .main-nav__link {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
  }
}

/* ==========================================================================
   LARGE SCREENS (min-width: 1200px)
   ========================================================================== */
@media (min-width: 1200px) {
  .container {
    padding: 0 var(--space-8);
  }
}

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

  .fade-in {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .site-header,
  .nav-toggle,
  .mobile-nav-overlay,
  .lightbox,
  .cta-banner .btn,
  .gallery-filter,
  .ask-ia-panel {
    display: none !important;
  }

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

  .section {
    padding: 1rem 0;
  }
}