/* WPI v62 — strict mobile/desktop separation.
   Mobile is a dedicated layout, not a scaled desktop canvas. */

/* Desktop/tablet keep the established experience. */
@media (min-width:821px){
  .hero-content{max-width:min(760px,58vw)!important}
}

@media (max-width:820px){
  /* Desktop-only floating controls must never appear on phones. */
  .wpi54-scroll-nav,
  .event-controls{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  html,body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  /* Mobile header is its own compact shell. */
  #wpi-v52-header{
    height:76px!important;
    min-height:76px!important;
    padding:0 16px!important;
    gap:12px!important;
  }
  #wpi-v52-header .wpi-brand{
    min-width:0!important;
    max-width:calc(100% - 64px)!important;
    margin-right:auto!important;
  }
  #wpi-v52-header .wpi-brand img{
    width:min(244px,66vw)!important;
    max-width:100%!important;
    height:46px!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  #wpi-v52-header .wpi-nav,
  #wpi-v52-header .wpi-signin,
  #wpi-v52-header .wpi-start{
    display:none!important;
  }
  #wpi-v52-header .wpi-actions{margin-left:0!important;gap:0!important}
  #wpi-v52-header .wpi-burger{
    display:flex!important;
    flex:0 0 48px!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
  }

  /* Homepage mobile hero: one clean viewport, no desktop side card. */
  body>main:has(.hero-video){
    margin-top:76px!important;
  }
  .hero{
    position:relative!important;
    display:block!important;
    width:100%!important;
    min-height:calc(100svh - 76px)!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    isolation:isolate!important;
  }
  .hero-video,
  .hero>video,
  .hero .hero-video video,
  .hero-video video{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    object-fit:cover!important;
    object-position:58% center!important;
    z-index:-3!important;
  }
  .hero-video-shade{
    position:absolute!important;
    inset:0!important;
    z-index:-2!important;
    background:
      linear-gradient(180deg,rgba(15,3,31,.18) 0%,rgba(15,3,31,.28) 34%,rgba(15,3,31,.86) 72%,rgba(15,3,31,.97) 100%),
      linear-gradient(90deg,rgba(20,8,43,.54),rgba(20,8,43,.18))!important;
  }
  .hero-glow{display:none!important}

  .hero-content{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    width:100%!important;
    max-width:none!important;
    min-height:calc(100svh - 76px)!important;
    margin:0!important;
    padding:clamp(230px,36svh,390px) 20px 34px!important;
    text-align:left!important;
  }
  .hero-content .eyebrow{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 13px!important;
    font-size:11px!important;
    line-height:1.45!important;
    letter-spacing:.15em!important;
    text-wrap:balance!important;
  }
  .hero-content h1{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    font-size:clamp(43px,12.2vw,54px)!important;
    line-height:.94!important;
    letter-spacing:-.055em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    text-wrap:balance!important;
  }
  .hero-content h1 br{display:none!important}
  .hero-content h1 em{
    display:block!important;
    margin-top:4px!important;
  }
  .hero-copy{
    width:100%!important;
    max-width:34rem!important;
    margin:18px 0 0!important;
    font-size:15px!important;
    line-height:1.55!important;
  }
  .hero-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
    margin-top:22px!important;
  }
  .hero-actions .button,
  .hero-actions .text-link{
    width:100%!important;
    min-height:50px!important;
    margin:0!important;
    padding:0 17px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    border-radius:13px!important;
  }

  /* This is desktop supporting information; mobile already has the event in the hero copy. */
  .hero>.event-card,
  .hero>.scroll-note{
    display:none!important;
  }

  /* Mobile sections should never inherit desktop fixed/absolute widths. */
  main section,
  main article,
  main section>div{
    max-width:100%!important;
  }
  .manifesto,
  .programs,
  .upcoming-events,
  .proof,
  .about,
  .register{
    width:100%!important;
    overflow:hidden!important;
  }
  .manifesto,
  .programs,
  .proof,
  .about,
  .register{
    padding-left:20px!important;
    padding-right:20px!important;
  }
  .programs-head,
  .about,
  .register{
    grid-template-columns:1fr!important;
  }
  .program-row{
    grid-template-columns:38px minmax(0,1fr) auto!important;
    gap:11px!important;
  }
  .program-row p{grid-column:2/-1!important}

  /* Upcoming events become a touch-first full-width card. */
  .upcoming-events{
    padding:58px 18px 68px!important;
  }
  .upcoming-head{
    display:block!important;
    width:100%!important;
    margin-bottom:24px!important;
  }
  .upcoming-head>div{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:10px!important;
  }
  .event-slide{
    width:100%!important;
    min-height:520px!important;
    height:auto!important;
    margin:0!important;
  }
  .event-slide-copy{
    left:14px!important;
    right:14px!important;
    bottom:14px!important;
    width:auto!important;
    max-width:none!important;
    padding:20px!important;
  }
  .event-slide-copy h3{
    font-size:clamp(31px,9vw,42px)!important;
    line-height:1!important;
  }

  /* Bottom/floating desktop affordances cannot create horizontal overflow. */
  body>*{
    max-width:100vw;
  }
}

@media (max-width:430px){
  #wpi-v52-header{padding:0 14px!important}
  #wpi-v52-header .wpi-brand img{width:min(225px,64vw)!important}
  .hero-content{padding-left:18px!important;padding-right:18px!important;padding-bottom:26px!important}
  .hero-content h1{font-size:clamp(40px,11.8vw,50px)!important}
  .manifesto,.programs,.proof,.about,.register{padding-left:18px!important;padding-right:18px!important}
}

@media (max-width:360px){
  .hero-content h1{font-size:39px!important}
  .hero-content .eyebrow{font-size:10px!important}
}