/* ============================================================
   MOBILE PASS — loaded after inline styles so it wins.
   Target: iPhone SE (320) through Pro Max (430).
   ============================================================ */

html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }
*{ -webkit-tap-highlight-color:rgba(123,92,255,0.18); }

/* stop iOS zooming in when a field is focused (needs >=16px) */
input, select, textarea, button{ font-size:16px !important; }

@media (max-width:760px){

  /* ---------- NAV: drop the wordmark, give the 5 links the full width ---------- */
  nav{
    padding:6px 6px !important;
    padding-bottom:calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }
  nav .nav-logo{ display:none !important; }
  nav .nav-links{
    display:flex !important; width:100%; gap:0 !important;
    justify-content:space-between; align-items:stretch;
  }
  nav a.link{
    flex:1 1 0; text-align:center;
    font-size:0.6rem !important; letter-spacing:0.4px !important;
    padding:14px 2px !important;            /* 44px+ tap target */
    display:flex; align-items:center; justify-content:center;
    min-height:44px;
  }
  nav a.link::after{ left:6px !important; right:6px !important; bottom:8px !important; }

  /* pages sit under a shorter nav now */
  .page-hero{ padding-top:104px !important; }
  .hero{ padding-top:88px !important; }

  /* ---------- HERO ---------- */
  .hero h1{ font-size:clamp(2.1rem, 12vw, 3.2rem) !important; letter-spacing:1px !important; }
  .hero-logo img{ width:min(300px, 82vw) !important; }
  .hero .date{ font-size:1.15rem !important; }
  .hero .tagline i{ width:24px !important; }
  .hero .tagline span{ font-size:0.62rem !important; letter-spacing:2.5px !important; }
  .photo-frame{ width:150px !important; height:150px !important; }
  .scroll-hint{ display:none; }

  /* ---------- COUNTDOWN: clean 2x2, no stray dividers ---------- */
  .cd{ display:grid !important; grid-template-columns:1fr 1fr; gap:20px 0; max-width:300px; }
  .cd .box{ min-width:0 !important; padding:0 6px !important; }
  .cd .box::before{ display:none !important; }
  .cd .box:nth-child(even)::after{
    content:''; position:absolute; left:0; top:12%; bottom:12%; width:1px;
    background:var(--line, rgba(123,92,255,0.26));
  }
  .cd .num{ font-size:2.5rem !important; }
  .cdwrap{ padding:52px 18px !important; }
  .cdwrap h2{ font-size:1.6rem !important; margin-bottom:26px !important; }

  /* ---------- SECTIONS ---------- */
  section.block, section.category{ padding:52px 18px !important; }
  .section-head, .cat-head, .head{ margin-bottom:30px !important; }
  .section-head h2, .cat-head h2, .head h2, .page-hero h1{ font-size:1.75rem !important; }
  .page-hero h1{ font-size:2rem !important; }
  .eyebrow{ font-size:0.6rem !important; letter-spacing:2.5px !important; }

  /* cards: single column, tighter */
  .grid{ grid-template-columns:1fr !important; gap:14px !important; }
  .item, .card, .story-card, .detail-card{ padding:22px 20px !important; }
  .story-card{ flex-direction:column !important; gap:12px !important; }
  .story-card .icon{ width:40px !important; height:40px !important; font-size:1.2rem !important; }
  .card:hover, .item:hover, .story-card:hover, .detail-card:hover, .tile:hover{
    transform:none !important;            /* hover lifts are pointless on touch */
  }

  /* ---------- INVITE ---------- */
  #lock{ padding:24px 16px !important; }
  #lock .box{ padding:34px 22px !important; }
  #lock .lock-logo img{ width:150px !important; }
  #lock h2{ font-size:1.5rem !important; }
  .details{ padding:44px 16px 20px !important; gap:14px !important; }
  .detail-card h3{ font-size:1.3rem !important; }
  .detail-card .row{ flex-direction:column !important; gap:2px !important; margin-bottom:14px !important; }
  .detail-card .row b{ padding-top:0 !important; min-width:0 !important; }
  .rsvp-section{ padding:52px 16px 70px !important; }
  .rsvp-form{ padding:26px 18px !important; }
  .checks label{ padding:14px 12px !important; min-height:48px; }
  .checks input{ width:20px !important; height:20px !important; }
  .rsvp-form button, #lock button{ min-height:52px; }

  /* ---------- FAQ ---------- */
  .q summary{ padding:18px 40px 18px 2px !important; font-size:1.08rem !important; min-height:48px; }
  .q .a{ font-size:0.9rem !important; }

  /* ---------- INFO ROWS ---------- */
  .info .row{ padding:18px 18px !important; }

  /* ---------- GALLERY ---------- */
  .masonry{ padding:34px 12px 70px !important; column-gap:10px !important; }
  .tile{ margin-bottom:10px !important; }
  #lb .pv, #lb .nx{ font-size:2rem !important; padding:14px 10px !important; }
  #lb img{ max-width:96vw !important; max-height:78vh !important; }

  /* ---------- MUSIC PLAYER ---------- */
  #da-player{
    right:12px !important;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #da-fab{ width:50px !important; height:50px !important; }
  #da-panel{ width:min(300px, calc(100vw - 24px)) !important; bottom:62px !important; }

  /* ---------- FOOTER ---------- */
  footer{ padding:44px 18px 40px !important; }
  footer .flogo img{ height:70px !important; }
}

/* very small phones (iPhone SE / 320–360) */
@media (max-width:380px){
  nav a.link{ font-size:0.54rem !important; padding:14px 1px !important; }
  .hero h1{ font-size:1.95rem !important; }
  .cd .num{ font-size:2.1rem !important; }
  .page-hero h1{ font-size:1.7rem !important; }
}

/* landscape phones — don't force a full-height hero */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto !important; padding:96px 22px 50px !important; }
  #lock{ min-height:auto !important; padding:90px 16px 40px !important; }
}

/* music player close button — was a 16px tap target */
#da-close{
  min-width:44px; min-height:44px;
  display:flex; align-items:center; justify-content:center;
  margin:-10px -10px 0 0; font-size:1.5rem !important;
}