/* public/assets/css/landing_training.css -- the Teacher Training home page
   (landing/lv2/_tt_page.php), loaded AFTER landing_v2.css by _head.php only when
   $lv2Page is 'training'. Everything else comes from the homepage's stylesheet;
   this file holds the backdrop swap and the few blocks the homepage has no
   equivalent for. Tokens are landing_v2.css's (--lv2-*, --lp-*). 2026-10-13. */

/* ── Backdrop: phonetics and speech instead of the bookshelf ─────────────────
   Same fixed body::before as landing_v2.css's PAGE BACKDROP, image swapped. The
   later, more specific rule wins, so the bookshelf JPEG is never requested here. */
body.lv2-page-training::before {
  background-image: url('../images/training-home-bg.svg');
  background-size: cover;
  background-position: center center;
}
/* The drawing is darker than the photo, so the scrim can be lighter. */
body.lv2-page-training { --lv2-scrim-top: rgba(11,14,26,0.12); --lv2-scrim-bottom: rgba(11,14,26,0.38); }

/* ── Live backdrop (_tt_backdrop.php, tt_backdrop.js, 2026-10-31) ────────────
   Between body::before and the page. Only opacity and transform ever change, and
   the glow is always there, on a symbol that is simply more or less opaque. */
.tt-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.tt-bg-tint { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease-out; }
.tt-bg-tint--a { background: radial-gradient(70% 60% at 75% 25%, rgba(56,189,248,.26), transparent 70%), radial-gradient(60% 55% at 15% 85%, rgba(45,212,191,.14), transparent 70%); }
.tt-bg-tint--b { background: radial-gradient(70% 60% at 25% 30%, rgba(217,70,239,.24), transparent 70%), radial-gradient(60% 55% at 85% 80%, rgba(168,85,247,.24), transparent 70%); }
.tt-bg-wave { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease-out;
  background: url('../images/training-home-wave.svg') center center / cover no-repeat; }
.tt-bg.is-speaking .tt-bg-wave { opacity: .9; transition-duration: .15s; }
.tt-bg-bars { position: absolute; top: 14%; right: 6%; height: 22vh; display: flex; align-items: center; gap: .55vmax; }
.tt-bg-bars i { width: .5vmax; height: calc(var(--h) * 1%); border-radius: 99px; background: #7c83ff; opacity: .34;
  transform: scaleY(.6); transition: transform .22s ease-out; }
.tt-bg-sym { position: absolute; font-family: 'Noto Sans', 'DejaVu Sans', 'Segoe UI', 'Lucida Sans Unicode', 'Arial Unicode MS', Arial, sans-serif;
  font-size: calc(var(--s) * 1vmax); line-height: 1; color: #dfe3ff; white-space: nowrap;
  text-shadow: 0 0 .28em rgba(125,145,255,.95);
  opacity: .28; transition: opacity 1s ease-out, transform 1s ease-out; }
.tt-bg-sym.is-lit { opacity: .95; transform: scale(1.12); transition-duration: .1s; }
@media (max-width: 760px) {
  /* A third fewer on a phone, and quieter behind the hero's text. */
  .tt-bg-sym:nth-of-type(3n) { display: none; }
  .tt-bg-sym { opacity: .2; font-size: calc(var(--s) * .8vmax); }
  .tt-bg-bars { top: 9%; right: 4%; height: 14vh; }
}
@media print { .tt-bg { display: none; } }

/* ── Brand: "Teacher Training" beside the wordmark ───────────────────────── */
.lv2 .lv2-brand-home { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.lv2 .tt-brand-sub { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--lv2-text-3); white-space: nowrap; }
@media (max-width: 340px) { .lv2 .tt-brand-sub { display: none; } }
/* The bar's container may grow past the homepage's 900px (T4): with the picker and
   translated links it needs 923-1295px. Each language's breakpoint is in _nav_bp.php. */
body.lv2-page-training .lv2 .lv2-nav-inner { max-width: 1320px; }
/* On a phone the translated name ("Formación para docentes") pushed the picker and
   the menu button off the screen: there it may shrink and wrap onto two lines. */
@media (max-width: 640px) {
  body.lv2-page-training .lv2 .lv2-brand-home { flex-shrink: 1; min-width: 0; }
  body.lv2-page-training .lv2 .lv2-brand-logo { flex-shrink: 0; }
  body.lv2-page-training .lv2 .tt-brand-sub {
    white-space: normal; font-size: 12px; line-height: 1.15; min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  body.lv2-page-training .lv2 .lp-lang-switch,
  body.lv2-page-training .lv2 .lv2-nav-toggle { flex-shrink: 0; }
}
/* In any other language the picker shows two flags (~133px) and leaves no room at
   all, so there the name goes (the hero's eyebrow names the course right below). */
@media (max-width: 640px) { html:not([lang="en"]) body.lv2-page-training .lv2 .tt-brand-sub { display: none; } }
@media (max-width: 340px) { body.lv2-page-training .lv2 .tt-brand-sub { display: none; } }

/* The contact form: the homepage's partial. Its fade-in needs l3_nav.js, which this page does not load. */
body.lv2-page-training #contact .lp-reveal { opacity: 1; transform: none; }
body.lv2-page-training #contact .lp-field input { width: 100%; box-sizing: border-box; }

/* ── Hero: the drawn certificate pane ─────────────────────────────────────────────────────── */

.lv2 .tt-cert-mock { box-sizing: border-box; }  /* else padding + border push the hero past a phone's width */
.lv2 .tt-cert-mock { width: 100%; max-width: 380px; padding: 28px 22px; text-align: center; background: #fff; color: #14161f;
                     border: 7px double #4f46e5; border-radius: 6px; box-shadow: 0 18px 50px rgba(0,0,0,0.45); }
.lv2 .tt-cert-mock-brand { font-weight: 800; font-size: 15px; }
.lv2 .tt-cert-mock-brand span { color: #6366f1; }
.lv2 .tt-cert-mock-kicker { margin-top: 14px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #5b6072; }
.lv2 .tt-cert-mock-name { margin-top: 10px; font: 600 24px Georgia, 'Times New Roman', serif; }
.lv2 .tt-cert-mock-course { margin-top: 4px; font-size: 15px; font-weight: 700; color: #4338ca; }
.lv2 .tt-cert-mock-line { height: 6px; margin: 14px auto 0; width: 78%; border-radius: 3px; background: #e6e8f0; }
.lv2 .tt-cert-mock-line--short { width: 46%; margin-top: 8px; }

/* ── What you learn ──────────────────────────────────────────────────────── */
.lv2 .tt-facts { list-style: none; margin: 0 auto 28px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lv2 .tt-facts li { padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid var(--lv2-glass-border);
                    color: var(--lv2-text-2); font-size: 14px; }
.lv2 .tt-facts b { color: var(--lv2-text); font-size: 17px; margin-right: 2px; }
.lv2 .tt-units { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.lv2 .tt-units li { padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--lv2-glass-border); display: grid; gap: 2px; }
.lv2 .tt-unit-num { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-accent); }
.lv2 .tt-unit-name { font-size: 16px; font-weight: 700; color: var(--lv2-text); }
.lv2 .tt-unit-meta { font-size: 13px; color: var(--lv2-text-3); }
.lv2 .tt-note { margin: 22px auto 0; max-width: 68ch; text-align: center; color: var(--lv2-text-3); font-size: 14px; line-height: 1.6; }

/* ── Tools / two-column cards ────────────────────────────────────────────── */
.lv2 .tt-tools { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.lv2 .tt-tools--two { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lv2 .tt-tool { padding: 20px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--lv2-glass-border); }
.lv2 .tt-tool h3 { margin: 0 0 6px; font-size: 16px; color: var(--lv2-text); }
.lv2 .tt-tool p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--lv2-text-2); }

/* ── Closing call to action ──────────────────────────────────────────────── */
.lv2 .tt-start { text-align: center; }
.lv2 .tt-start h2 { margin: 0 0 10px; }
.lv2 .tt-start p { margin: 0 auto 22px; max-width: 56ch; color: var(--lv2-text-2); }
.lv2 .tt-start-ctas { justify-content: center; margin-bottom: 0; }

/* ── Signed-out notice in the hero ── */
.lv2 .tt-notice { margin: 0 0 18px; padding: 10px 14px; border-radius: 10px; font-size: 14px; color: var(--lv2-text); background: rgba(16,185,129,0.14); border: 1px solid rgba(16,185,129,0.5); }
.lv2 .tt-notice a { color: #6ee7b7; }

/* The hero grid's 1fr column would otherwise grow to the carousel track's min-content,
   which is the SUM of its slides' widths (a flex row), pushing a phone layout to 438px. */
.lv2 .lv2-hero-grid > * { min-width: 0; }

/* The weekly speaking test and its printed report: assets/css/tt_weekly.css (2026-10-22,
   shared with the homepage). */


/* The logo + "Teacher Training" must not be squeezed by the links (they overlapped at 820px). */
.lv2 .lv2-brand-home { flex-shrink: 0; }