/* SPE BUE - mobile layout + motion (loaded after the page styles and spe-extras.css)
   A. phone layout: compact people cards, swipeable events, tidy committees
   B. motion: word-by-word headings, photo wipes, hero drift, button shine, tap feedback
   Animations play on every device (the site ignores the system "reduce motion" setting on purpose).
*/

/* =====================================================================
   A. PHONE LAYOUT (max-width: 760px)
   ===================================================================== */
@media (max-width:760px){
  #events,#leadership,#board,#committees{--wp:20px;padding-top:2.8rem;padding-bottom:2.8rem}
  .section-head{margin-bottom:1.5rem}
  .section-head h2{font-size:1.75rem;line-height:1.08}
  .section-head p{font-size:.93rem;line-height:1.6}
  .divider-label{margin:.2rem 0 1rem;font-size:.74rem;gap:.7rem}

  /* award banner */
  .award-banner{padding:2.4rem 0}
  .ab{gap:1.3rem}
  .ab img{max-width:88%;margin:0 auto}
  .ab h2{font-size:1.55rem}
  .ab p{font-size:.93rem;line-height:1.6}

  /* events -> swipe row with a peek of the next card */
  #events .e-grid{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--wp));padding:4px var(--wp) 10px;scroll-padding:0 var(--wp);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  #events .e-grid::-webkit-scrollbar{display:none}
  #events .e-card{flex:0 0 80%;scroll-snap-align:start;min-width:0}
  #events .e-img{height:148px}
  #events .e-body{padding:1rem 1rem 1.15rem}
  #events .e-body h3{font-size:1.1rem}
  #events .e-body p{font-size:.86rem;line-height:1.5}
  .sw-dots{display:flex;justify-content:center;gap:7px;margin-top:.7rem;height:7px}
  .sw-dots i{display:block;width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.25);transition:width .25s ease,background .25s ease}
  .sw-dots i.on{width:22px;background:var(--gold,#F5B82E)}

  /* faculty supervisors + executive board -> two per row */
  #leadership .sup-grid{grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:0}
  #leadership .sup-grid .l-card h3{font-size:.98rem!important;line-height:1.2}
  #leadership .sup-grid .l-card p{font-size:.72rem!important;line-height:1.4;margin-bottom:.6rem}
  #leadership .l-photo{margin-bottom:.7rem}
  /* the page forces 330px photo frames; in two columns use a 4:5 frame (photos stay uncropped) */
  #leadership .sup-grid .l-photo,#board .b-photo{height:auto!important;aspect-ratio:4/5!important}
  #leadership .lead-grid .featured .l-photo,#leadership .lead-grid .vp .l-photo{height:300px!important}

  #board .b-grid,#board .b-grid.b-center{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
  #board .b-grid.b-center>.b-card{flex:none;min-width:0}
  #board .b-card{padding:.55rem .55rem .95rem;border-radius:16px}
  #board .b-photo{margin-bottom:.7rem;border-radius:11px}
  #board .b-card h4{font-size:.95rem;line-height:1.2}
  #board .b-card span{font-size:.74rem;line-height:1.3;margin-top:.2rem;margin-bottom:.55rem}
  #board .tap-hint{font-size:.66rem;margin:.3rem 0 .35rem;opacity:.85}
  #board .b-li,#leadership .b-li{padding:.32rem .7rem;font-size:.72rem}
  #board .b-grid>.b-card:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - .4rem);justify-self:center}

  /* committees -> even 2-column grid, quiet "learn more" */
  #committees .cm-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.2rem}
  #committees .cm-grid .committee{flex:none;min-width:0;min-height:0;padding:1rem .6rem .85rem;gap:.5rem;border-radius:16px}
  #committees .cm-grid .committee-icon{width:42px;height:42px;border-radius:13px}
  #committees .cm-grid .committee-icon svg{width:22px;height:22px}
  #committees .cm-grid .committee-name{font-size:.88rem;line-height:1.2}
  #committees .cm-grid .learn{align-self:center;padding:.3rem .65rem;font-size:.68rem;white-space:nowrap;box-shadow:none}
  #committees .cm-grid>.committee:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - .375rem);justify-self:center}

  .cta-strip{padding:3rem 0}
  .cta-strip h2{font-size:1.55rem}
  .cta-strip p{font-size:.93rem}
}
@media (min-width:561px) and (max-width:760px){
  #events,#leadership,#board,#committees{--wp:28px}
}
@media (min-width:761px){.sw-dots{display:none}}

/* =====================================================================
   B. MOTION
   ===================================================================== */
@media all{

  /* headings: words rise out of a mask, accent words glow gold, underline draws itself */
  .sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
  .sw>i{display:inline-block;font-style:inherit;transform:translateY(108%)}
  .sw.ac>i{background:linear-gradient(135deg,#ffe08a,#F5B82E);-webkit-background-clip:text;background-clip:text;color:transparent}
  .section-head.in .sw>i{transform:none;transition:transform .85s cubic-bezier(.2,.85,.2,1) calc(var(--wi,0) * 70ms + 140ms)}
  .section-head.reveal h2::after{width:0}
  .section-head.reveal.in h2::after{width:52px;transition:width .9s cubic-bezier(.2,.85,.2,1) .6s}

  /* small pulsing dot on every section tag */
  .section-head .tag::before{content:'';display:inline-block;width:6px;height:6px;margin-right:.5rem;border-radius:50%;background:var(--gold,#F5B82E);vertical-align:middle;animation:speDot 2.2s ease-in-out infinite}
  @keyframes speDot{0%,100%{box-shadow:0 0 0 0 rgba(245,184,46,.55)}60%{box-shadow:0 0 0 7px rgba(245,184,46,0)}}

  /* divider labels: gold tick, then the hairline draws across */
  .divider-label.reveal::before{transform:scaleX(0);transform-origin:left}
  .divider-label.reveal::after{transform:scaleX(0);transform-origin:left}
  .divider-label.reveal.in::before{transform:none;transition:transform .5s ease .15s}
  .divider-label.reveal.in::after{transform:none;transition:transform 1.1s cubic-bezier(.2,.85,.2,1) .4s}

  /* people photos: wipe in from the top while the card pops */
  .b-card.reveal .b-photo,.l-card.reveal .l-photo{clip-path:inset(0 0 100% 0 round 12px)}
  .b-card.reveal.in .b-photo,.l-card.reveal.in .l-photo{clip-path:inset(0 0 0 0 round 12px);transition:clip-path 1s cubic-bezier(.65,0,.35,1) calc(var(--d,0ms) + .2s)}

  /* events: image settles from a slight zoom as the card appears */
  .e-card.reveal .e-img{transform:scale(1.18);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
  .e-card.reveal.in .e-img{transform:scale(1)}
  .e-card{overflow:hidden}

  /* hero: slow Ken Burns drift on the active slide */
  .hero-slide.active{animation:speKb 14s ease-out both}
  @keyframes speKb{from{scale:1}to{scale:1.12}}

  /* buttons: soft light sweep every few seconds (inline links need a box for the sweep to be clipped) */
  a.btn-primary:not(.pm-li),a.btn-ghost{display:inline-block}
  .btn-primary,.apply-btn,.af-badge{position:relative;overflow:hidden}
  .btn-primary::after,.apply-btn::after,.af-badge::after{
    content:'';position:absolute;top:0;bottom:0;left:0;width:55%;pointer-events:none;
    background:linear-gradient(110deg,transparent,rgba(255,255,255,.34),transparent);
    transform:translateX(-130%) skewX(-18deg);animation:speShine 4.2s ease-in-out 1.8s infinite;
  }
  @keyframes speShine{0%{transform:translateX(-130%) skewX(-18deg)}38%,100%{transform:translateX(300%) skewX(-18deg)}}

  /* tap ripple (created by spe-mobile.js) */
  .btn-primary,.btn-ghost,.apply-btn,.b-li,.e-card,.committee{position:relative;overflow:hidden}
  .b-li{overflow:hidden}
  .rip{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.42);transform:scale(0);animation:speRip .65s ease-out forwards;z-index:3}
  @keyframes speRip{to{transform:scale(1);opacity:0}}
}

/* phones only: gentle idle motion */
@media (max-width:760px){
  .ab img{animation:speFloat 6s ease-in-out infinite}
  @keyframes speFloat{0%,100%{transform:translateY(0) rotate(-.7deg)}50%{transform:translateY(-8px) rotate(.7deg)}}
  #committees .cm-grid .committee-icon{animation:speBob 3.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.55s)}
  @keyframes speBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
}

/* touch feedback: cards press in slightly */
@media (hover:none){
  .b-card.reveal.in,.l-card.reveal.in,.e-card.reveal.in,.committee.reveal.in{transition:transform .18s ease,box-shadow .3s ease,border-color .3s ease}
  .b-card.reveal.in:active,.l-card.reveal.in:active,.e-card.reveal.in:active,.committee.reveal.in:active{transform:scale(.97)}
  .btn-primary:active,.btn-ghost:active,.apply-btn:active{transform:scale(.97)}
}

/* =====================================================================
   C. PERSON "CLICK FOR DETAILS" POPUP
   - close button always on top (the photo's slide-in used to paint over it)
   - photo sits on a blurred copy of itself instead of dark side bars
   - on phones the box is a sheet: photo on top, text scrolls, X never moves
   ===================================================================== */
.pm-box{border:1px solid rgba(245,184,46,.6);box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07)}
.pm-x{
  z-index:6;width:38px;height:38px;padding:0;display:grid;place-items:center;
  font-size:1.35rem;line-height:1;
  background:rgba(4,12,31,.68);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.pm-x:hover{background:var(--gold,#F5B82E);color:#07142f}
.pm-x:active{transform:scale(.9)}

.pm-photo[data-fill]{
  position:relative;isolation:isolate;overflow:hidden;
  background-image:none!important;background-color:#0a1a3d;
  border:1px solid rgba(245,184,46,.28);
}
.pm-photo[data-fill]::before,.pm-photo[data-fill]::after{
  content:'';position:absolute;background-image:var(--pm-img);background-repeat:no-repeat;background-position:center;
}
.pm-photo[data-fill]::before{inset:-26px;background-size:cover;filter:blur(22px) saturate(1.15) brightness(.5);z-index:0}
.pm-photo[data-fill]::after{inset:0;background-size:contain;z-index:1}

.pm-li{display:inline-block}

@media (max-width:700px){
  .pm{padding:12px!important}
  .pm-box{
    display:flex!important;flex-direction:column;gap:0!important;
    padding:12px!important;border-radius:22px;
    max-height:calc(100dvh - 24px)!important;overflow:hidden!important;
  }
  .pm-photo{flex:0 0 auto;aspect-ratio:auto!important;height:min(42dvh,340px)!important;border-radius:16px!important}
  .pm-box>div:last-child{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:1.1rem .75rem .75rem}
  .pm-box h3{font-size:1.55rem;line-height:1.15;margin:0 0 .3rem}
  .pm-role{font-size:.95rem;margin-bottom:.75rem}
  .pm-desc{font-size:.95rem;line-height:1.65;margin-bottom:1.1rem}
  .pm-li{display:block;width:100%;text-align:center;box-sizing:border-box;box-shadow:0 4px 12px rgba(245,184,46,.22)}
  .pm-x{top:22px;right:22px}
}