/* ================================================================
   RESPONSIVE OVERRIDES
   Base styles in style.css are mobile-first.
   This file adds layout changes for larger screens only.
   ================================================================ */

/* ---------- Small phones: tighten a few things ---------- */
@media (max-width: 360px) {
  .open-btn__label { font-size: 15px; }
  .timeline { padding-left: 50px; }
  .timeline-item__icon { left: -50px; }
}

/* ---------- Tablets and up (>= 640px) ---------- */
@media (min-width: 640px) {
  .hosts__grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
  }

  .curtain { width: 51%; }
}

/* ---------- Small laptops / large tablets (>= 900px) ---------- */
@media (min-width: 900px) {
  .hero__heading { max-width: 30ch; margin-inline: auto; }

  .invite-card__text { font-size: 20px; }

  .timeline { max-width: 640px; margin-inline: auto; }

  .blessing__idol { width: min(30vw, 320px); }
}

/* ---------- Desktop (>= 1200px) ---------- */
@media (min-width: 1200px) {
  .hero__content { padding-block: 60px; }
  .section-title { font-size: 46px; }
}

/* ---------- Landscape phones: opening screen shouldn't feel cramped ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .open-btn { width: 150px; }
  .opening__eyebrow { margin-bottom: 18px; }
  .opening__hint { margin-top: 14px; }
}

/* ---------- High-DPI safety: keep gold hairlines crisp ---------- */
@media (min-resolution: 2dppx) {
  .invite-card { border-width: 1px; }
}