/* =============================================================
   RESPONSIVE.CSS
   Estratégia: a base (style.css) já é fluida (clamp, %, flex-wrap).
   Aqui ajustamos espaçamentos, grids e tamanhos que não escalam
   bem sozinhos em cada faixa de tela.
   Ordem: telas grandes → pequenas (desktop-first, pois o design
   nasceu para leitura vertical em qualquer aparelho).
============================================================= */

/* =========================================================
   DESKTOP GRANDE (>= 1440px)
   Limita a largura de leitura para não esticar demais
========================================================= */
@media (min-width: 1440px) {
  .hero__content,
  .message,
  .timeline,
  .countdown,
  .details,
  .location,
  .rsvp {
    max-width: 720px;
    margin-inline: auto;
  }

  .hero__portrait-frame {
    max-width: 400px;
  }
}

/* =========================================================
   NOTEBOOK / DESKTOP PADRÃO (1024px – 1439px)
========================================================= */
@media (max-width: 1439px) and (min-width: 1024px) {
  .hero {
    padding-inline: var(--space-lg);
  }
}

/* =========================================================
   TABLET (768px – 1023px)
========================================================= */
@media (max-width: 1023px) {
  .hero__portrait-frame {
    max-width: 300px;
  }

  .countdown__grid {
    gap: var(--space-sm);
  }

  .timeline {
    padding-inline: var(--space-md);
  }
}

/* =========================================================
   MOBILE LANDSCAPE / TABLET PEQUENO (576px – 767px)
========================================================= */
@media (max-width: 767px) {
  .opening__corner {
    width: 90px;
    height: 90px;
  }

  .site-header {
    padding: var(--space-xs) var(--space-sm);
  }

  .hero {
    min-height: 92vh;
    padding: var(--space-lg) var(--space-sm);
  }

  .hero__portrait-frame {
    margin-top: var(--space-md);
    max-width: 240px;
  }

  .message,
  .timeline,
  .details,
  .location,
  .rsvp {
    padding: var(--space-lg) var(--space-sm);
  }

  .countdown {
    padding: var(--space-lg) var(--space-sm);
  }

  .countdown__item {
    min-width: 64px;
  }

  .countdown__number {
    font-size: 2rem;
  }

  .timeline__icon {
    width: 2.6rem;
    height: 2.6rem;
  }

  .timeline__list::before {
    left: 22px;
  }

  .timeline__label {
    font-size: 1.3rem;
  }
}

/* =========================================================
   MOBILE PORTRAIT (< 576px)
========================================================= */
@media (max-width: 575px) {
  .opening__title,
  .hero__title {
    font-size: clamp(2.2rem, 11vw, 3.2rem);
  }

  .opening__name {
    font-size: 1.5rem;
  }

  .btn {
    padding: 0.8rem 1.8rem;
    font-size: 0.9rem;
  }

  .countdown__grid {
    gap: var(--space-xs);
  }

  .countdown__item {
    min-width: 56px;
  }

  .countdown__number {
    font-size: 1.7rem;
  }

  .timeline__item {
    gap: var(--space-xs);
    padding-bottom: var(--space-md);
  }

  .timeline__desc {
    font-size: 0.9rem;
  }

  .hero__decor {
    width: 160px;
    height: 160px;
  }
}

/* =========================================================
   ORIENTAÇÃO: LANDSCAPE EM TELAS BAIXAS (celular deitado)
   Evita que a tela de abertura e o hero fiquem cortados
   quando a altura da viewport é pequena
========================================================= */
@media (max-height: 480px) and (orientation: landscape) {
  .opening__content {
    transform: scale(0.85);
  }

  .hero {
    min-height: auto;
    padding-block: var(--space-lg);
  }

  .hero__portrait-frame {
    max-width: 180px;
    margin-top: var(--space-sm);
  }

  .hero__decor {
    display: none;
  }
}

/* =========================================================
   ORIENTAÇÃO: PORTRAIT (padrão em celulares — reforço de leitura)
========================================================= */
@media (orientation: portrait) and (max-width: 575px) {
  .hero__content {
    padding-inline: var(--space-xs);
  }
}

/* =========================================================
   TELAS MUITO PEQUENAS (<= 360px) — ex: celulares compactos
========================================================= */
@media (max-width: 360px) {
  .countdown__grid {
    gap: 0.4rem;
  }

  .countdown__item {
    min-width: 48px;
  }

  .countdown__label {
    font-size: 0.7rem;
  }
}

/* =========================================================
   TELAS DE ALTA DENSIDADE (Retina) — nitidez de bordas finas
========================================================= */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .timeline__list::before,
  .hero__divider {
    transform: scaleY(0.5);
  }
}