/* ============================================================
   STORMY TITANS™ — TRAINING SINGLE-PAGE EXPERIENCE — 002-R17

   DESIGN SYSTEM NOTE
   This page deliberately uses a consistent spacing scale so sections,
   buttons, rails, and panel interiors do not visually "run into" edges.
   ============================================================ */

:root{
  --st-training-yellow:#ffe000;
  --st-training-ink:#071521;
  --st-space-1:4px;
  --st-space-2:8px;
  --st-space-3:12px;
  --st-space-4:16px;
  --st-space-5:20px;
  --st-space-6:24px;
}

/* HOME: Training is yellow only while actively pressed. */
.home-quick-grid a[href$="/training/"]:active,
.home-quick-grid a[href*="/training/"]:active{
  background:var(--st-training-yellow) !important;
  border-color:#fff27a !important;
  color:var(--st-training-ink) !important;
  box-shadow:0 0 14px rgba(255,224,0,.38);
}
.home-quick-grid a[href$="/training/"]:active b,
.home-quick-grid a[href*="/training/"]:active b{
  color:var(--st-training-ink) !important;
}

/* TRAINING PAGE */
.training-page{
  display:grid;
  gap:var(--st-space-4);
  padding-bottom:var(--st-space-5);
}

.training-page h2,
.training-page p{
  margin-top:0;
}

.training-hero-panel,
.training-section{
  border:1px solid #36536a;
  border-radius:10px;
  background:rgba(255,255,255,.035);
  overflow:hidden;
}

.training-hero-panel{
  background:#000;
}

.training-hero-video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:contain;
  background:#000;
}

.training-character-rail,
.training-module-rail,
.training-resource-rail{
  display:flex;
  gap:var(--st-space-3);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.training-character-rail::-webkit-scrollbar,
.training-module-rail::-webkit-scrollbar,
.training-resource-rail::-webkit-scrollbar{display:none}

.training-character-rail{
  padding:0 var(--st-space-1);
}
.training-character{
  flex:0 0 78px;
  display:grid;
  gap:6px;
  text-align:center;
  color:#fff !important;
  text-decoration:none !important;
  font-size:.72rem;
}
.training-character-image{
  width:72px;height:72px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.65);
  border-radius:8px;
  background:linear-gradient(145deg,#173b5d,#071c2e);
  margin-inline:auto;
}
.training-character-image img{width:100%;height:100%;object-fit:cover}

/* Same square destinations as Home, with disciplined gutters. */
.training-quick-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--st-space-2);
  padding:var(--st-space-3);
  border:1px solid #36536a;
  border-radius:10px;
  background:rgba(255,255,255,.045);
}
.training-quick-grid a{
  min-height:74px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:var(--st-space-2) var(--st-space-1);
  border:1px solid rgba(255,255,255,.20);
  border-radius:8px;
  background:rgba(255,255,255,.06);
  color:#fff !important;
  text-decoration:none !important;
  text-align:center;
}
.training-quick-grid a span{font-size:1.25rem}
.training-quick-grid a b{font-size:.72rem}

/* Persistent active Training tile on Training itself. */
.training-quick-grid a.is-active-training,
.training-quick-grid a[aria-current="page"]{
  background:var(--st-training-yellow) !important;
  border-color:#fff27a !important;
  color:var(--st-training-ink) !important;
  box-shadow:0 0 14px rgba(255,224,0,.36);
}
.training-quick-grid a.is-active-training b,
.training-quick-grid a[aria-current="page"] b{
  color:var(--st-training-ink) !important;
}

.training-section{
  padding:var(--st-space-4);
}

.training-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:var(--st-space-3);
  margin-bottom:var(--st-space-3);
}
.training-section-head small,
.training-eyebrow{
  display:block;
  color:var(--st-training-yellow);
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.training-section-head h2{
  margin:2px 0 0;
  font-size:1rem;
}
.training-section-head a{
  flex:0 0 auto;
  text-decoration:none;
  font-weight:800;
}

.training-module-rail{
  margin-inline:calc(var(--st-space-4) * -1);
  padding:0 var(--st-space-4) var(--st-space-1);
}
.training-module-card{
  flex:0 0 190px;
  scroll-snap-align:start;
  overflow:hidden;
  border:1px solid #315b79;
  border-radius:8px;
  background:#081f32;
  color:#fff !important;
  text-decoration:none !important;
}
.training-module-card.is-current{
  border-color:var(--st-training-yellow);
  box-shadow:0 0 12px rgba(255,224,0,.30);
}
.training-module-art{
  min-height:104px;
  position:relative;
  display:grid;
  align-content:start;
  gap:3px;
  padding:var(--st-space-3);
  background:linear-gradient(145deg,#0b3556,#061827);
}
.training-module-series{
  color:#9edfff;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.training-module-art strong{
  max-width:130px;
  font-size:.92rem;
}
.training-module-icon{
  position:absolute;
  right:10px;
  bottom:8px;
  font-size:2rem;
  opacity:.72;
}
.training-module-meta{
  display:grid;
  gap:4px;
  padding:var(--st-space-3);
}
.training-module-meta b{font-size:.82rem}
.training-module-meta small{color:var(--muted)}
.training-module-card.is-current .training-module-meta b{
  color:var(--st-training-yellow);
}
.training-mini-progress{
  height:4px;
  overflow:hidden;
  border-radius:999px;
  background:#415166;
}
.training-mini-progress i{
  display:block;
  width:0;
  height:100%;
  background:var(--st-training-yellow);
}

.training-current-module{
  display:grid;
  grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);
  gap:var(--st-space-4);
  align-items:stretch;
}
.training-current-copy{
  display:flex;
  flex-direction:column;
  padding:var(--st-space-1) 0;
}
.training-current-copy h2{
  margin:4px 0;
}
.training-series{
  font-weight:800;
  color:#d9effc;
  margin-bottom:var(--st-space-3);
}
.training-current-copy>p:last-of-type{
  color:var(--muted);
  line-height:1.5;
  margin-bottom:var(--st-space-4);
}
.training-current-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--st-space-2);
  margin-top:auto;
  padding-top:var(--st-space-2);
}
.training-current-actions .btn{
  min-height:44px;
  margin:0;
}
.training-resume{
  border-color:#fff27a !important;
  background:var(--st-training-yellow) !important;
  color:var(--st-training-ink) !important;
}

.training-player-shell{
  position:relative;
  display:grid;
  place-items:center;
  min-width:0;
  overflow:hidden;
  border:1px solid #2f668a;
  border-radius:8px;
  background:#000;
}
.training-current-video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:contain;
  background:#000;
}
.training-video-empty{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  gap:6px;
  padding:var(--st-space-4);
  text-align:center;
  background:#000;
  color:#fff;
}
.training-video-empty span{color:var(--muted);font-size:.82rem}

.training-resource-rail{
  margin-inline:calc(var(--st-space-4) * -1);
  padding:0 var(--st-space-4) var(--st-space-1);
}
.training-resource-card{
  flex:0 0 190px;
  min-height:96px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  align-items:start;
  gap:var(--st-space-2);
  padding:var(--st-space-3);
  border:1px solid #315b79;
  border-radius:8px;
  background:#081f32;
  color:#fff !important;
  text-decoration:none !important;
}
.training-resource-icon{
  display:grid;
  place-items:center;
  width:42px;height:42px;
  font-size:1.55rem;
}
.training-resource-card span:last-child{display:grid;gap:5px}
.training-resource-card b{font-size:.78rem}
.training-resource-card small{color:#c6d6e1;line-height:1.3}

/* Tablet/mobile */
@media(max-width:700px){
  .training-page{gap:var(--st-space-3);padding-bottom:var(--st-space-4)}
  .training-quick-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:8px}
  .training-quick-grid a{min-height:66px;padding:5px 2px}
  .training-section{padding:var(--st-space-3)}
  .training-section-head{margin-bottom:var(--st-space-3)}
  .training-module-rail,
  .training-resource-rail{
    margin-inline:calc(var(--st-space-3) * -1);
    padding-inline:var(--st-space-3);
  }
  .training-current-module{
    grid-template-columns:1fr;
    gap:var(--st-space-3);
  }
  .training-current-copy{padding:0}
  .training-player-shell{order:-1}
  .training-current-actions{
    padding-bottom:var(--st-space-1);
  }
  .training-module-card{flex-basis:165px}
  .training-resource-card{flex-basis:170px}
}
@media(max-width:390px){
  .training-quick-grid a b{font-size:.64rem}
  .training-section{padding:10px}
  .training-module-rail,
  .training-resource-rail{
    margin-inline:-10px;
    padding-inline:10px;
  }
}