/* V6 — faithful responsive translation of the approved homepage */

/* Tighten the desktop editorial flow without changing the desktop hero */
@media (min-width: 851px){
  #conversation-preview{padding-top:34px;padding-bottom:24px}
  #conversation-preview .section-title{margin-bottom:18px}
  #conversation-preview .pink-script{margin:14px 0 0}
  #programs-preview{padding-top:24px;padding-bottom:34px}
  #programs-preview .section-title{margin-bottom:5px}
  #programs-preview .section-sub{margin-bottom:18px}
  .warriors{padding-top:30px;padding-bottom:34px}
  .warriors .section-title{margin-bottom:3px}
  .warriors .section-sub{margin-bottom:18px}
  .bee-grid{min-height:250px}
  .bee-copy,.bee-promise{padding-top:30px;padding-bottom:30px}
}

/* Tablet: keep the hero composed, but protect every element */
@media (min-width: 701px) and (max-width: 1050px){
  .header-inner{grid-template-columns:220px 1fr auto;gap:10px}
  .brand img{width:215px}
  .hero,.hero-inner{min-height:520px}
  .hero-inner{display:grid;grid-template-columns:47% 53%}
  .hero-copy{
    margin-right:-55px;
    padding:38px 16px 28px 28px;
    background:linear-gradient(90deg,var(--cream) 0,var(--cream) 78%,rgba(255,248,242,.93) 89%,rgba(255,248,242,0) 100%);
  }
  .hero-photo{display:block;min-height:520px;background-position:57% center}
  .hero h1{font-size:58px}
  .hero h1 em{font-size:70px}
  .kicker{font-size:23px}
  .lead{font-size:17px;line-height:1.42}
  .hero-actions{gap:9px;margin-top:15px}
  .hero-actions .btn{font-size:12px;padding:9px 12px;min-height:46px}
  .journey-note{font-size:22px;margin:15px 0 0 18px}
  #conversation-preview{padding:30px 20px 22px}
  #programs-preview{padding:24px 20px 32px}
  .program-grid{grid-template-columns:repeat(3,1fr)}
  .program-card{min-height:330px}
  .program-card .pcopy{min-height:175px;padding:18px 12px 12px}
  .program-card .pimg{height:155px}
}

/* Phone: same hierarchy, intentionally recomposed rather than squeezed */
@media (max-width: 700px){
  .site-header{position:sticky;top:0}
  .header-inner{min-height:68px;padding:5px 14px;grid-template-columns:minmax(0,1fr) auto}
  .brand img{width:min(280px,76vw);max-height:56px;object-fit:contain;object-position:left center}
  .menu-toggle{display:block}
  .survivor-top{display:none}

  .hero{
    min-height:0 !important;
    background:var(--cream) !important;
  }
  .hero-inner{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
  }
  .hero-copy{
    order:1;
    padding:24px 20px 18px !important;
    margin:0 !important;
    background:var(--cream) !important;
  }
  .hero-photo{
    display:block !important;
    order:2;
    min-height:0 !important;
    height:clamp(260px,66vw,390px) !important;
    background-position:center 48% !important;
    background-size:cover !important;
  }
  .hero h1{font-size:clamp(43px,12vw,58px);line-height:.92}
  .hero h1 em{font-size:clamp(54px,15vw,72px);line-height:1}
  .kicker{font-size:clamp(20px,5.7vw,25px);line-height:1.12;margin:13px 0 9px}
  .lead{font-size:16px;line-height:1.43;margin:0}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}
  .hero-actions .btn{width:100%;min-height:50px;font-size:13.5px;line-height:1.2;padding:10px 12px}
  .journey-note{margin:15px 0 0;text-align:center;font-size:21px;line-height:1.2}

  .section{padding-left:18px;padding-right:18px}
  #conversation-preview{padding-top:30px;padding-bottom:18px}
  #conversation-preview .section-title{font-size:27px;line-height:1.08;margin-bottom:16px}
  .conversation-grid{gap:12px}
  .convo-card{
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:56% 44% !important;
  }
  .convo-copy{padding:20px 14px 20px 18px !important}
  .convo-copy h3{font-size:21px;line-height:1.1;margin-bottom:8px}
  .convo-copy p{font-size:14px;line-height:1.35;margin-bottom:13px}
  .convo-copy .btn{min-height:42px;font-size:12px;padding:8px 10px}
  .convo-photo{min-height:210px !important;height:auto !important}
  #conversation-preview .pink-script{font-size:27px;line-height:1.12;margin:13px 0 0}

  #programs-preview{padding-top:18px;padding-bottom:28px}
  #programs-preview .section-title{font-size:27px;line-height:1.08;margin-bottom:6px}
  #programs-preview .section-sub{font-size:15px;line-height:1.38;margin-bottom:14px}
  .program-grid{grid-template-columns:1fr !important;gap:11px !important}
  .program-card{
    display:grid !important;
    grid-template-columns:58% 42% !important;
    min-height:0 !important;
    height:176px !important;
  }
  .program-card .pcopy{
    min-height:0 !important;
    height:176px !important;
    padding:16px 14px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    text-align:left !important;
  }
  .program-card h3{font-size:19px;line-height:1.1;margin:0 0 7px}
  .program-card p{font-size:13.5px;line-height:1.32}
  .program-card .pimg{
    display:block !important;
    margin:0 !important;
    min-height:176px !important;
    height:176px !important;
    background-size:cover !important;
    background-position:center !important;
  }

  .warriors{padding-top:25px;padding-bottom:28px}
  .warriors .section-title{font-size:30px;line-height:1.05;letter-spacing:1px;margin-bottom:3px}
  .warriors .section-sub{font-size:14px;margin-bottom:14px}
  .warrior-grid{gap:10px}
  .warrior-card{min-height:160px;grid-template-columns:38% 62%}
  .warrior-photo-placeholder{min-height:160px !important;font-size:14px}
  .warrior-card .wcopy{padding:15px 12px}
  .wcopy h3{font-size:20px}

  .bee-grid{min-height:0}
  .bee-photo{min-height:220px}
  .bee-copy,.bee-promise{padding:26px 22px}
  .bee-copy h2{font-size:43px}
}

/* Narrow phones: preserve image + text cards rather than dropping the photos below */
@media (max-width: 430px){
  .hero-copy{padding-left:17px !important;padding-right:17px !important}
  .convo-card{grid-template-columns:58% 42% !important}
  .convo-copy{padding:18px 11px 18px 15px !important}
  .convo-copy h3{font-size:19px}
  .convo-copy p{font-size:13px}
  .program-card{grid-template-columns:59% 41% !important;height:166px !important}
  .program-card .pcopy,.program-card .pimg{height:166px !important;min-height:166px !important}
  .program-card h3{font-size:18px}
  .program-card p{font-size:12.5px}
}

/* Never allow the old preview rules to create scrollbars */
html,body{width:100%;max-width:100%;overflow-x:hidden}
*{min-width:0}