/**
 * RESPONSIVIDADE & MEDIA QUERIES
 * Casamento Geovana & Lourenço
 * Suporte validado: 375px, 390px, 430px, 768px, 1024px, 1280px, 1440px, 1920px
 */

/* Pendências técnicas não devem aparecer para o visitante. O CTA de mapa
   é substituído dinamicamente por um link real quando wedding.json fornece mapsUrl. */
.venue-cta-disabled,
.venue-validation-note {
  display: none !important;
}

/* Drawer precisa continuar utilizável também em celulares de pouca altura. */
.mobile-drawer {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* O botão de fechar dos modais mantém touch target mínimo de 44px. */
.gift-modal-close {
  width: 44px !important;
  height: 44px !important;
}

/* ==========================================================================
   1. MOBILE COMPACTO (375px a 430px)
   ========================================================================== */
@media (max-width: 480px) {
  .site-header {
    padding-block: var(--space-12);
  }

  .site-header.header--scrolled {
    padding-block: var(--space-8);
  }

  .header-actions {
    gap: var(--space-6, 6px);
  }

  .header-cta {
    padding: var(--space-4) var(--space-10, 10px);
    font-size: 0.67rem;
    min-height: 44px;
    max-width: min(48vw, 180px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-title {
    font-size: clamp(2.35rem, 11vw, 3.25rem);
    line-height: 1.1;
  }

  .hero-date {
    font-size: 1rem;
    letter-spacing: var(--tracking-wide);
    white-space: normal;
    text-align: center;
  }

  .hero-venue {
    font-size: 1.15rem;
    white-space: normal;
    text-align: center;
  }

  .hero-section {
    padding-bottom: clamp(90px, 13vh, 110px);
  }

  /* Countdown em telas estreitas */
  .countdown-grid {
    gap: var(--space-8);
  }

  .countdown-unit {
    min-width: 58px;
    padding: var(--space-8) var(--space-4);
  }

  .countdown-value {
    font-size: 1.65rem;
  }

  .countdown-label {
    font-size: 0.65rem;
  }

  /* Cronograma em telas móveis */
  .timeline-tree {
    padding-left: 24px;
  }

  .timeline-marker {
    left: -20px;
    width: 9px;
    height: 9px;
  }

  .timeline-time {
    font-size: 1.35rem;
    min-width: 56px;
  }

  .timeline-desc {
    font-size: 1rem;
  }

  /* Local / Venue */
  .venue-title {
    font-size: 1.75rem;
  }

  .venue-address {
    font-size: 1rem;
  }

  /* Dress code swatches */
  .dresscode-swatches {
    gap: var(--space-16);
  }

  .swatch-circle {
    width: 56px;
    height: 56px;
  }

  /* Pix QR Code em mobile */
  .pix-qr-container {
    width: 180px;
    height: 180px;
  }

  .pix-wrapper {
    padding: var(--space-24) var(--space-16);
  }
}

/* Celulares com viewport vertical reduzida ou orientação paisagem. */
@media (max-height: 720px) and (max-width: 1023px) {
  .mobile-drawer {
    justify-content: flex-start;
    padding-top: 76px;
    padding-bottom: 28px;
  }

  .mobile-nav-list {
    gap: var(--space-8);
  }

  .mobile-nav-link {
    font-size: clamp(1.25rem, 4.5vw, 1.75rem);
    padding: var(--space-4) var(--space-8);
  }

  .mobile-drawer-footer {
    margin-top: var(--space-20, 20px);
  }
}

/* ==========================================================================
   2. TABLET (768px a 1023px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header {
    padding-block: var(--space-20, 20px);
  }

  .site-header.header--scrolled {
    padding-block: var(--space-12);
  }

  .hero-content {
    max-width: 800px;
  }
}

/* ==========================================================================
   3. DESKTOP PADRÃO & WIDE (1024px a 1440px)
   ========================================================================== */
@media (min-width: 1024px) {
  .hero-content {
    max-width: 980px;
  }

  .hero-title {
    margin-bottom: var(--space-20);
  }

  .hero-date-group {
    flex-direction: row;
    gap: var(--space-12);
    align-items: center;
    justify-content: center;
  }
}

/* Telas com pouca altura vertical (evita qualquer sobreposição) */
@media (max-height: 720px) {
  .hero-section {
    padding-bottom: 70px;
  }

  .hero-scroll {
    display: none;
  }

  .hero-title {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    margin-bottom: var(--space-12);
  }
}

/* ==========================================================================
   4. ULTRA-WIDE (1920px+)
   ========================================================================== */
@media (min-width: 1920px) {
  .hero-title {
    font-size: 5.75rem;
  }

  .container {
    max-width: 1440px;
  }
}

/* ==========================================================================
   5. ACESSIBILIDADE DE MOVIMENTO (PREFERS-REDUCED-MOTION)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .hero-picture,
  .hero-image {
    transition: none !important;
    transform: none !important;
  }

  .hero-scroll-line {
    animation: none !important;
  }

  [data-reveal],
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}