/* ============================================================
   FREE TRAINING (VSL) PAGE — css/pages/cert-free-training.css
   Funnel page for /wedding-planner-certification/free-training
   ============================================================ */

:root {
  --cert-accent: #879fa1;
  --cert-accent-hover: #9ab3b5;
  --cert-dark: #1a2e2e;
}

body {
  background-color: #f2f2f0;
}


/* ---- Minimal Nav Override ---- */

.nav-se--minimal {
  justify-content: center;
}

.nav-se--minimal .nav-se__links--left,
.nav-se--minimal .nav-se__links--right {
  display: none;
}

.nav-se--minimal .nav-se__brand {
  margin: 0;
}


/* ---- Screen reader only ---- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   HERO — Gate + Video
   ============================================================ */

.vsl-hero {
  padding: calc(90px + var(--space-2xl)) var(--section-padding-x) var(--space-3xl);
  text-align: center;
}

.vsl-hero__inner {
  max-width: 800px;
  margin: 0 auto;
}

.vsl-hero__eyebrow {
  font-family: var(--font-eyebrow);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
  max-width: none;
}

.vsl-hero__headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  line-height: 1.1;
  color: var(--cert-dark);
  margin-bottom: var(--space-xl);
}


/* ---- Email Gate ---- */

.vsl-gate {
  max-width: 480px;
  margin: 0 auto;
}

.vsl-gate__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: var(--space-lg);
  max-width: none;
}

.vsl-gate__form {
  position: relative;
}

.vsl-gate__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.vsl-gate__input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--cert-dark);
  background: #fff;
  border: 1px solid #d9d9d6;
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast);
}

.vsl-gate__input:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(184, 141, 92, 0.12);
}

.vsl-gate__btn {
  display: block;
  width: 100%;
  padding: 1rem 2rem;
  font-family: var(--font-eyebrow);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--cert-dark);
  background: var(--gold-gradient);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.vsl-gate__btn:hover {
  background: var(--gold-hover);
  transform: translateY(-1px);
}

.vsl-gate__micro {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--color-gray);
  font-style: italic;
  margin-top: var(--space-sm);
  max-width: none;
}


/* ---- Video ---- */

.vsl-video {
  max-width: 800px;
  margin: 0 auto;
}

.vsl-video__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  background: #e5e4e1;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.vsl-video__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.vsl-video__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-eyebrow);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-gray);
}

.vsl-video__context {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #555;
  margin-top: var(--space-lg);
  max-width: none;
}


/* ============================================================
   BELOW THE FOLD — What you'll learn
   ============================================================ */

.vsl-learn {
  padding: var(--space-2xl) var(--section-padding-x);
}

.vsl-learn__inner {
  max-width: 600px;
  margin: 0 auto;
}

.vsl-learn__headline {
  font-family: var(--font-eyebrow);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cert-dark);
  margin-bottom: var(--space-lg);
}

.vsl-learn__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vsl-learn__list li {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--cert-dark);
  padding: var(--space-sm) 0;
  padding-left: var(--space-lg);
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.vsl-learn__list li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--color-gold);
}

.vsl-learn__list li:last-child {
  border-bottom: none;
}


/* ============================================================
   BIO
   ============================================================ */

.vsl-bio {
  padding: var(--space-2xl) var(--section-padding-x);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.vsl-bio__inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.vsl-bio__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #555;
  margin-bottom: var(--space-lg);
  max-width: none;
}

.vsl-bio__seen-label {
  font-family: var(--font-eyebrow);
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-gray);
  margin-bottom: var(--space-sm);
  max-width: none;
}

.vsl-bio__logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.vsl-bio__logos img {
  height: 20px;
  width: auto;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: opacity var(--transition-fast);
}

.vsl-bio__logos img:hover {
  opacity: 0.8;
}


/* ============================================================
   TESTIMONIAL
   ============================================================ */

.vsl-testimonial {
  padding: var(--space-2xl) var(--section-padding-x);
  background: #f0f4f1;
}

.vsl-testimonial__inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.vsl-testimonial__inner blockquote {
  margin: 0;
}

.vsl-testimonial__inner p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.5;
  color: var(--cert-dark);
  margin-bottom: var(--space-md);
  max-width: none;
}

.vsl-testimonial__inner cite {
  font-family: var(--font-eyebrow);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-gold);
  font-style: normal;
}


/* ============================================================
   BOTTOM CTA
   ============================================================ */

.vsl-bottom-cta {
  padding: var(--space-3xl) var(--section-padding-x);
  text-align: center;
}

.vsl-bottom-cta__inner {
  max-width: 600px;
  margin: 0 auto;
}

.vsl-bottom-cta__headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  line-height: 1.15;
  color: var(--cert-dark);
  margin-bottom: var(--space-lg);
}

.vsl-bottom-cta__btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  font-family: var(--font-eyebrow);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--cert-dark);
  background: var(--gold-gradient);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), transform var(--transition-fast);
  margin-bottom: var(--space-lg);
}

.vsl-bottom-cta__btn:hover {
  background: var(--gold-hover);
  transform: translateY(-1px);
}

.vsl-bottom-cta__btn span {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.vsl-bottom-cta__btn:hover span {
  transform: translateX(4px);
}

.vsl-bottom-cta__secondary {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  color: #555;
  max-width: none;
}

.vsl-bottom-cta__secondary a {
  color: var(--cert-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vsl-bottom-cta__secondary a:hover {
  color: var(--cert-accent-hover);
}


/* ============================================================
   MINIMAL SIGN-OFF (no footer nav)
   ============================================================ */

.vsl-signoff {
  padding: var(--space-xl) var(--section-padding-x) var(--space-lg);
  text-align: center;
}

.vsl-signoff__cheers {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  color: var(--color-gold);
  margin-bottom: var(--space-md);
  max-width: none;
}

.vsl-signoff__copy {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.75rem;
  color: #999;
  max-width: none;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {
  .vsl-gate__row {
    grid-template-columns: 1fr;
  }

  .vsl-hero {
    padding-top: calc(70px + var(--space-xl));
  }

  .vsl-bottom-cta__btn {
    display: block;
    width: 100%;
    text-align: center;
  }
}