/* 99for1.AI v5.27 mobile hardening
   CSS-only responsive layer: applies by viewport, not UA, so iOS/Android browsers and in-app browsers all get it. */

html, body { max-width:100%; }
img, video, iframe, svg { max-width:100%; }

@media (max-width: 900px) {
  html { -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:hidden; }
  body { overflow-x:hidden !important; width:100% !important; min-width:0 !important; }
  * { box-sizing:border-box; }
  input, textarea, select, button { max-width:100%; }
  input, textarea, select { font-size:16px !important; }
  img, video { height:auto; }
  iframe { width:100% !important; }
  .wrap { width:calc(100% - 24px) !important; max-width:none !important; margin-inline:auto !important; }

  /* Public shell */
  .nav { position:sticky; top:0; z-index:100; background:rgba(6,6,6,.96); backdrop-filter:blur(14px); }
  .nav-inner { min-height:60px !important; gap:10px !important; }
  .nav-links { display:none !important; }
  .public-brand, .brand-logo-link { min-width:0; }
  .public-brand .brand-logo-img, .brand-logo-img { width:128px !important; max-width:44vw !important; height:auto !important; }
  .brand-tagline { display:none !important; }
  .nav .btn, .nav .btn-sm { min-height:42px !important; padding:10px 12px !important; white-space:nowrap; }

  .retheme-hero {
    min-height:0 !important;
    padding-top:58vw !important;
    background-image:url('../img/hero-return-mobile.webp') !important;
    background-size:100% auto !important;
    background-position:center top !important;
    background-repeat:no-repeat !important;
    background-color:#080808 !important;
  }
  .retheme-hero::before {
    background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.04) 32vw,rgba(8,8,8,.72) 49vw,#080808 58vw,#080808 100%) !important;
  }
  .hero-grid { display:block !important; min-height:0 !important; }
  .hero-copy { padding:18px 0 42px !important; max-width:none !important; }
  .hero-copy h1 { font-size:clamp(3.1rem,14vw,5rem) !important; line-height:.84 !important; }
  .hero-copy p { font-size:1.05rem !important; max-width:100% !important; }
  .hero-actions { display:grid !important; grid-template-columns:1fr !important; gap:10px !important; }
  .hero-actions .btn { width:100% !important; justify-content:center; }
  .hero-note { display:none !important; }
  .micro-row { display:flex !important; flex-wrap:wrap !important; gap:9px 12px !important; }

  .parchment-grid, .section-heading, .ask-grid, .letters-grid, .apparel-grid, .story-grid,
  .feminine-section, .nature-grid-section, .stats-grid, .team-grid, .resource-grid {
    grid-template-columns:1fr !important;
  }
  .section, .section-dark, .parchment-band { overflow:hidden; }
  .apparel-image, .feminine-image, .nature-bike, .nature-jesus { min-height:320px !important; }

  /* Logged-in app shell */
  .app-top { position:sticky !important; top:0 !important; z-index:120 !important; background:rgba(5,5,5,.97) !important; backdrop-filter:blur(16px); }
  .app-top .nav-inner { min-height:58px !important; }
  .header-profile-link { min-width:0; }
  .header-profile-link span { max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .app-layout { display:block !important; width:100% !important; min-width:0 !important; min-height:auto !important; }
  .side {
    position:sticky !important;
    top:58px !important;
    z-index:110 !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:stretch !important;
    gap:4px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:7px 8px !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(214,164,77,.25) !important;
    background:rgba(8,7,6,.97) !important;
    backdrop-filter:blur(14px);
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .side::-webkit-scrollbar { display:none; }
  .side a { flex:0 0 auto !important; white-space:nowrap !important; min-height:42px !important; padding:10px 12px !important; display:flex !important; align-items:center !important; }
  .main { width:100% !important; min-width:0 !important; max-width:none !important; padding:18px 12px max(30px,env(safe-area-inset-bottom,0px)) !important; overflow:hidden; }
  .main > * { max-width:100%; min-width:0; }
  .main h1 { font-size:clamp(2.35rem,10.5vw,3.5rem) !important; line-height:.94 !important; }
  .main h2 { max-width:100%; }

  .grid-2, .grid-3, .grid-4, .kpis, .church-result-grid, .doctrine-grid,
  .church-search-options, .church-location-actions, .theme-choice-grid, .tts-controls {
    grid-template-columns:1fr !important;
  }
  .card, .form-card, .testimony, .list-item { width:100% !important; min-width:0 !important; padding:17px !important; }
  .btn { min-height:44px !important; touch-action:manipulation; }
  .church-search-shell { padding:18px 13px !important; }
  .church-search-options .btn, .tts-select { width:100% !important; max-width:none !important; }
  .table-wrap, .responsive-table, .data-table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table { min-width:680px; }

  /* Daily visual becomes a native-phone experience */
  .daily-experience { min-height:72svh !important; width:100% !important; background-size:cover !important; background-position:var(--daily-bg-position,center center) !important; }
  .daily-experience-top { padding:13px !important; }
  .daily-experience .daily-experience-center {
    inset:auto 0 0 !important;
    min-height:58% !important;
    padding:68px 18px 46px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    align-items:flex-start !important;
    text-align:left !important;
    background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.12) 12%,rgba(0,0,0,.76) 66%,rgba(0,0,0,.92) 100%) !important;
  }
  .daily-immersive-copy { max-width:96% !important; font-size:clamp(2rem,9vw,3.15rem) !important; line-height:1 !important; }
  .daily-immersive-reference { max-width:95% !important; }
  .daily-immersive-actions { justify-content:flex-start !important; flex-wrap:wrap !important; }
  .daily-experience-controls { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:9px !important; padding:12px !important; }
  .daily-experience-controls .btn { width:100% !important; }

  /* Curated voices */
  .voice-browser { grid-template-columns:1fr !important; min-height:0 !important; }
  .voice-feature { grid-template-rows:230px auto !important; }
  .voice-feature-media { min-height:230px !important; }
  .voice-feature-copy { padding:18px !important; }
  .voice-feature-copy h2 { font-size:clamp(2.5rem,11vw,3.4rem) !important; }
  .voice-feature-actions { display:grid !important; grid-template-columns:1fr !important; }
  .voice-feature-actions .btn { width:100% !important; }
  .voice-roster-list { max-height:none !important; grid-template-columns:1fr !important; }
  .voice-roster-item { grid-template-columns:70px minmax(0,1fr) 18px !important; width:100% !important; }
  .voice-roster-thumb { width:70px !important; }

  .next-step-strip { display:grid !important; grid-auto-flow:column !important; grid-auto-columns:86% !important; overflow-x:auto !important; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .next-step-strip > * { scroll-snap-align:start; }
}

@media (max-width: 430px) {
  .wrap { width:calc(100% - 18px) !important; }
  .main { padding-inline:9px !important; }
  .public-brand .brand-logo-img, .brand-logo-img { width:112px !important; }
  .nav .btn-sm { font-size:.55rem !important; padding:8px 9px !important; }
  .hero-copy h1 { font-size:clamp(2.85rem,15vw,4.2rem) !important; }
  .daily-experience { min-height:78svh !important; }
  .daily-immersive-copy { font-size:clamp(1.9rem,9.8vw,2.8rem) !important; }
}

@media (max-width:900px) and (orientation:landscape) {
  .retheme-hero { padding-top:36vw !important; }
  .daily-experience { min-height:92svh !important; }
  .voice-feature { grid-template-rows:300px auto !important; }
}

/* iOS safe areas; harmless elsewhere. */
@supports (padding: max(0px)) {
  @media (max-width:900px) {
    .nav, .app-top { padding-left:max(0px,env(safe-area-inset-left)); padding-right:max(0px,env(safe-area-inset-right)); }
    .main { padding-bottom:max(30px,env(safe-area-inset-bottom)) !important; }
  }
}