/* =============================================================================
   08-responsive.css  ·  the ONLY place media queries live
   Verify at 320 / 375 / 414 / 768 / 1024 / 1280 / 1440
   ========================================================================== */

/* ---- Large tablet / small desktop ---- */
@media (max-width:1024px){
  .pillars{ grid-template-columns:repeat(2,1fr); }
  .detail-cards{ grid-template-columns:repeat(2,1fr); }
  .site-nav{ gap:1.1rem; }
}

/* ---- Tablet ---- */
@media (max-width:860px){
  .site-nav a:not(.btn){ display:none; }     /* one-pager: links hide; persistent header RSVP button stays */
  .header-inner{ gap:.5rem; }
}

/* ---- Phones ---- */
@media (max-width:620px){
  :root{ --header-h:64px; }
  .pillars{ grid-template-columns:1fr; gap:1rem; }
  .pillar{ flex-direction:row; align-items:stretch; }
  .pillar-media{ aspect-ratio:auto; width:38%; min-height:100%; flex:none; }
  .pillar-body{ flex:1; justify-content:center; }
  .detail-cards{ grid-template-columns:1fr; }
  .detail-card{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; }
  .detail-card .detail-ico{ order:-1; }
  .detail-card h3{ flex:1; }
  .detail-card p{ flex-basis:100%; }
  .brand-text{ display:none; }
  .brand-mark{ width:46px; height:46px; }
  .hero-inner{ max-width:none; }
  .hero-sub{ font-size:1.14rem; }
}

/* ---- Countdown fits 320 without overflow ---- */
@media (max-width:430px){
  .cd-unit{ min-width:0; flex:1; padding:.7rem .35rem; }
  .cd-clock{ gap:.3rem; width:100%; }
  .cd-colon{ display:none; }                  /* gaps read as separation; saves width */
  .cd-lab{ font-size:.6rem; letter-spacing:.1em; }
}

/* ---- Tall, narrow: tighten hero vertical rhythm ---- */
@media (max-width:430px){
  .hero{ padding-block:calc(var(--header-h) + 1.5rem) 4.5rem; }
  .hero-medallion{ width:clamp(120px,30vw,160px); margin-bottom:.6rem; }
}

/* ---- Large screens: a touch more presence ---- */
@media (min-width:1440px){
  .hero-inner{ max-width:960px; }
}

/* ---- Landscape phones: don't let hero crowd ---- */
@media (max-height:560px) and (orientation:landscape){
  .hero{ min-height:auto; padding-block:calc(var(--header-h) + 2rem) 3rem; }
  .scroll-cue{ display:none; }
}

/* ---- Short viewports: hide the scroll cue so it never collides with the hero CTA ---- */
@media (max-height:820px){
  .scroll-cue{ display:none; }
}