/* ===========================
   T412 Youth — styles.css (fresh)
   Header rebuilt: big home logo, verse always on, neat spacing
   =========================== */

/* Core theme */
:root{
  --bg:#0f172a;        /* slate-900 */
  --ink:#94a3b8;       /* slate-200 */
  --muted:#94a3b8;     /* slate-400 */
  --line:rgba(148,163,184,.25);

  --brand:#38bdf8;     /* sky-400 */
  --brand2:#a78bfa;    /* violet-400 */
  --cta:#22c55e;       /* emerald-500 */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1140px;margin:0 auto;padding:0 16px}

/* ===========================
   Header (grid layout so spacing stays tidy)
   =========================== */
.site-header{
  background:linear-gradient(180deg,#071a33 0%,#0b244b 100%);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
  color:#eaf2ff;
}

/* Two columns: brand (logo + verse) | nav */
.header-row{
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:20px; padding:10px 0; min-height:64px;
}

/* Brand cluster */
.brand{display:flex; align-items:center; gap:14px; text-decoration:none}
.site-logo{height:60px; width:auto; filter:drop-shadow(0 0 6px rgba(0,180,255,.35))}
.brand-verse{
  font-size:.95rem; line-height:1.35; color:#a8c4e6; font-style:italic;
  max-width:420px;
}

/* Nav (right side) */
.primary-nav{display:flex; justify-content:flex-end}
.menu{
  display:flex; align-items:center; gap:16px; list-style:none; margin:0; padding:0;
}
.menu a{
  position:relative; display:inline-block; padding:8px 10px; border-radius:10px;
  color:#ffffff; text-decoration:none;
}
.menu a:hover{background:rgba(148,163,184,.12); text-decoration:none}
.btn-login{
  background:var(--cta); color:#052e14; font-weight:800; padding:9px 14px; border-radius:12px
}
.btn-login:hover{filter:brightness(1.05)}

/* Neon underline (hover + active) */
.menu a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:4px; height:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
  box-shadow:0 0 0 rgba(56,189,248,0);
}
.menu a:hover::after{ transform:scaleX(1) }
.menu a.active::after{
  transform:scaleX(1);
  box-shadow:0 0 10px rgba(56,189,248,.65), 0 0 16px rgba(167,139,250,.35);
}

/* ===========================
   HOME VARIANT
   - Logo = 300px tall
   - Header no taller than logo
   - Verse stays to the right (not under)
   - Nav vertically centered next to logo
   =========================== */
body.home .header-row{
  min-height:300px;            /* make the header as tall as the logo */
  align-items:center;          /* center verse & nav vertically against big logo */
  padding:0;                   /* no extra vertical padding */
}
body.home .site-logo{
  height:300px; width:auto;
}
body.home .brand{align-items:center}
body.home .brand-verse{
  font-size:1.05rem; line-height:1.4; max-width:520px; color:#cfe4ff;
}

/* ===========================
   Mobile
   =========================== */
.nav-toggle{display:none}
@media (max-width: 900px){
  /* stack header for small screens */
  .header-row{
    grid-template-columns:1fr; gap:10px; padding:10px 0;
  }
  .brand{justify-content:center; text-align:center}
  .brand-verse{max-width:90%}

  /* home logo smaller on mobile to fit */
  body.home .site-logo{ height:200px }
  body.home .header-row{ min-height:200px }

  /* mobile menu */
  .primary-nav{justify-content:center; position:relative}
  .nav-toggle{
    display:inline-block; background:transparent; border:1px solid var(--line);
    color:#94a3b8; padding:6px 10px; border-radius:8px; margin:6px 0;
  }
  .menu{
    position:absolute; left:50%; transform:translateX(-50%);
    top:48px; flex-direction:column; gap:8px; background:rgba(2,6,23,.98);
    border:1px solid var(--line); padding:10px; border-radius:12px; display:none;
  }
  .menu.open{display:flex}
}

/* ===========================
   Minimal base utilities below (optional)
   =========================== */
.hero{display:grid; gap:20px; align-items:center; min-height:56vh; padding:48px 0}
.lead{color:#b9c9e0; max-width:65ch}
.btn{display:inline-block; padding:12px 16px; border-radius:12px; background:var(--cta);
  color:#062c11; font-weight:800}
.btn:hover{text-decoration:none; filter:brightness(1.05)}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--ink)}

/* ---------- HERO ---------- */
.hero-home { padding: 32px 0 20px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: center;
}
.hero-media img {
  width: 100%; height: auto; border-radius: 16px;
  border: 1px solid var(--line); object-fit: cover;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.hero-video {
  width: 100%;
  max-width: 420px;      /* keeps it from getting huge on desktop */
  aspect-ratio: 1 / 1;   /* maintains perfect square */
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  display: block;
  margin: 0 auto;
}
.hero-copy .btn-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }
@media (max-width: 980px){
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero-copy .btn-row { justify-content: center; }
}

/* ---------- LAM (Learn / Apply / Multiply) — compact & square ---------- */
.lam { padding: 24px 0 8px; }

.lam-row{
  display:flex;
  align-items:center;
  gap:24px;
  margin:18px 0 28px;
}

.lam-row.reverse{ flex-direction: row-reverse; }

/* Square image, controlled width */
.lam-media{
  flex:0 0 340px;              /* desktop width of the square card */
  max-width:340px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line, rgba(148,163,184,.25));
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}

.lam-media img{
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;          /* makes it square */
  object-fit:cover;
  display:block;
}

.lam-copy{ flex:1 1 auto; }
.lam-copy h3{ margin:0 0 6px; font-size:1.35rem; }
.lam-copy p{ margin:0 0 10px; color:#c8d6ea; }
.check{ padding-left:18px; margin:6px 0 0; }
.check li{ margin:6px 0; }

/* Tablet: make card a bit larger */
@media (min-width: 981px) and (max-width: 1280px){
  .lam-media{ flex-basis:300px; max-width:300px; }
}

/* Mobile: stack, center, slightly smaller square */
@media (max-width: 980px){
  .lam-row{ flex-direction:column; text-align:center; }
  .lam-row.reverse{ flex-direction:column; }
  .lam-media{ flex-basis:260px; max-width:260px; }
  .lam-copy{ width:100%; }
}
/* ---------- EXPERIENCE GALLERY ---------- */
.experience {
  padding: 48px 0;
  background: linear-gradient(180deg, #0c1522 0%, #101d35 100%);
}

.experience-gallery {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 24px;
}

.exp-card {
  flex: 1 1 30%;
  max-width: 400px;
  background: #0f1b2c;
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.exp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
}

.exp-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
}

.exp-card figcaption {
  font-size: 1.1rem;
  color: #cde2ff;
  padding: 12px 0 16px;
  background: rgba(255, 255, 255, 0.05);
  letter-spacing: 0.5px;
}

@media (max-width: 980px) {
  .exp-card { flex: 1 1 100%; max-width: none; }
}
.experience .wrap { max-width: 1100px; }
.exp-card figcaption { font-size: 1rem; padding: 14px 12px 18px; }

/* Reuse your existing .card-tiles; add a 3-column helper */
.cards-3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
@media (max-width: 980px){ .cards-3 { grid-template-columns:1fr; } }

/* Plan minimal styles (piggybacks on .card and .btn you already use) */
.plan { display:flex; flex-direction:column; }
.plan-head h2 { margin:0 0 4px; font-size:1.2rem; }
.price { font-weight:800; font-size:2rem; line-height:1; margin:6px 0 10px; }
.price span { font-size:1.1rem; vertical-align:baseline; }
.price .per { font-size:.95rem; color:var(--muted); margin-left:2px; }
.list { margin:8px 0 16px; padding-left:18px; }
.list li { margin:6px 0; }

/* Subtle emphasis for the middle card without new color system */
.plan--featured { outline:1px solid rgba(56,189,248,.5); box-shadow:0 8px 26px rgba(2,132,199,.25); transform:translateY(-2px); }
.plan--featured .btn { background:linear-gradient(90deg, var(--brand), var(--brand2)); color:#061422; }

/* Small badge—purely cosmetic */
.ribbon {
  position:absolute; top:-10px; left:40%;
  font-size:.75rem; font-weight:900;
  background:linear-gradient(90deg, var(--brand), var(--brand2));
  color:#031324; padding:6px 10px; border-radius:999px;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.grid-two { display:grid; grid-template-columns: 2fr 1fr; gap:18px; }
@media (max-width: 980px){ .grid-two { grid-template-columns: 1fr; } }
.topics .card h3 + ul { margin-top:6px; }
.topics .card ul + h3 { border-top:1px solid rgba(148,163,184,.2); padding-top:12px; }

/* Pill button styling */
.pill {
  display: inline-block;
  background: linear-gradient(90deg, #00bfff, #0077ff);
  color: #fff;
  padding: 10px 24px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.pill:hover {
  background: linear-gradient(90deg, #0077ff, #0044cc);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.pill:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.t412-form label { display:block; font-weight:600; margin-top:1em; }
.t412-form input, .t412-form textarea { width:100%; padding:8px; border-radius:6px; border:1px solid #ccc; }
.t412-form h3 { margin-top:2em; color:#0077ff; }
.radio-group label { margin-right:20px; }
.dbox-donation-button:hover {
  background: #147efb; /* slightly lighter blue */
  transform: translateY(-2px);
}
.member-bar { background:#0b1d2a; color:#fff; border-bottom:1px solid rgba(255,255,255,.08); }
/* Add breathing room between top menu items */
.member-bar nav a {
  margin: 0 0.5rem;  /* adjust 0.5rem → wider if you want */
}
.member-bar .wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:10px 0; }
.member-bar .brand { display:flex; align-items:center; gap:.5rem; color:#fff; text-decoration:none; font-weight:700; }
.member-bar .member-nav a { color:#cfe9ff; text-decoration:none; margin:0 .5rem; padding:.25rem .4rem; border-radius:6px; }
.member-bar .member-nav a.active { background:rgba(255,255,255,.12); color:#fff; }
.member-bar .user .btn { background:var(--brand); color:#fff; padding:.4rem .8rem; border-radius:10px; text-decoration:none; }
/* Auth pages: make forms comfy on small screens */
.auth main.wrap { max-width: 480px; margin: 2rem auto; padding: 0 16px; }
.auth .card { background:#fff; color:#111; border-radius:12px; padding:1.25rem 1.5rem; box-shadow:0 6px 18px rgba(0,0,0,.08); }
.auth label { display:block; font-weight:600; margin:.75rem 0 .35rem; }
.auth input[type="email"],
.auth input[type="password"] { width:100%; padding:.7rem .8rem; border:1px solid #ccd; border-radius:8px; font-size:1rem; }
.auth button[type="submit"] { width:100%; padding:.8rem 1rem; border:0; border-radius:10px; background:var(--brand,#128aed); color:#fff; font-weight:800; }
@media (max-width: 480px){
  .auth main.wrap { margin: 1.25rem auto; }
}
/* --- Testimonials (handle portrait vs landscape video) --- */
/* --- Testimonials layout --- */
.testimonials { text-align: center; padding: 48px 0; }
.testimonials h2 { margin-bottom: 24px; color: #cfe4ff; }

.testimonial-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  align-items: flex-start;
}

.testimonial {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Unified video sizing */
.testimonial-video {
  height: 460px;        /* fixed visual height for consistency */
  width: auto;
  max-width: 90vw;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  object-fit: cover;    /* fills the frame neatly */
  background: #000;
}

/* keep smaller on mobile */
@media (max-width: 600px) {
  .testimonial-video {
    height: 360px;
  }
}

.video-credit {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #a8c4e6;
  font-style: italic;
}