/* =====================================================
   Free training pages — page-templates/free-training.php (signup) and
   page-templates/free-training-video.php (video). Loaded only on those two
   templates (inc/free-training.php), after workshop.css.

   The signup hero is the homepage Stay Connected section
   (.wp-block-cover.ppc-email-section, style.css #region EMAIL) on a navy
   leaf-shadow photo; sections, cards, dividers and buttons come from
   workshop.css. Only what differs lives here.
===================================================== */

/* #region SHARED */

/* Navy leaf-shadow photo, used by the signup hero and the video stage.
   The image is mirrored so the light corner sits behind the signup card,
   away from the copy (keeps the eyebrow above 4.5:1). */
.ppc-free-training {
  --ft-bg: #1e314a url("../images/free-training-bg.webp") left top / cover no-repeat;
  --ft-on-dark: rgba(247, 244, 239, 0.94);
  --ft-on-dark-soft: rgba(247, 244, 239, 0.86);
  --ft-eyebrow-on-dark: #d8d1c7;
}

/* #endregion SHARED */

/* #region SIGNUP HERO */

html body .wp-block-cover.ppc-email-section.ppc-free-training__hero {
  background: var(--ft-bg);
  --ppc-email-copy-color: var(--ft-on-dark);
}

/* Copy on the left, signup card on the right (no plant gutter). */
html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .wp-block-columns {
  padding-left: 4% !important;
  padding-right: 4% !important;
}

html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .ppc-email-eyebrow {
  color: var(--ft-eyebrow-on-dark) !important;
}

html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .ppc-email-section__text {
  color: var(--ft-on-dark-soft) !important;
}

/* Olive divider sized like the other page heroes (workshop, Offerings, About):
   25vw, 52.5vw at 768px and below, the artwork's own proportions, and the
   same 1.75rem above (heading margin) and below. The Stay Connected rule this
   replaces is a small fixed-height strip. */
html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .ppc-email-copy-inner > :is(h1, h2, h3).wp-block-heading.ppc-email-heading {
  margin-bottom: 1.75rem !important;
}

html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .ppc-email-copy-inner > hr.ppc-email-rule {
  aspect-ratio: 1470 / 112;
  height: auto !important;
  margin: 0 0 1.75rem !important;
  max-width: none !important;
  min-height: 2vw !important;
  width: 25vw !important;
}

/* Card: the Stay Connected card, with a deeper shadow to sit on navy. */
html body .wp-block-cover.ppc-email-section.ppc-free-training__hero
  .wp-block-column:nth-child(2)
  > .wp-block-group.ppc-free-training__card {
  box-shadow: 0 18px 50px rgba(8, 14, 24, 0.35) !important;
}

.ppc-free-training .ppc-free-training__card-title {
  color: var(--ws-navy) !important;
  font-family: var(--ws-serif) !important;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  text-align: center;
}

/* The button label wraps on narrow cards; give the two lines room. */
html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .fluentform .ff-btn-submit {
  line-height: 1.35 !important;
  width: 100%;
}

/* Focus outlines on the fields and button come from the Stay Connected
   styles (style.css #region EMAIL). */

/* Consent line: the Stay Connected privacy line, readable size, linked. */
html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .ppc-free-training__card .ppc-email-privacy {
  font-size: 0.875rem !important;
  line-height: 1.55 !important;
}

.ppc-free-training__card .ppc-email-privacy a {
  color: var(--ws-button);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Fluent Forms inline validation messages under a field. */
.ppc-free-training__card .ff-el-is-error .text-danger,
.ppc-free-training__card .error.text-danger {
  color: #9b2c2c;
  font-size: 0.875rem;
  margin-top: 0.35rem;
}

/* #endregion SIGNUP HERO */

/* #region VIDEO STAGE */

/* Cream leaf-shadow ground (the signup hero keeps the navy --ft-bg). The
   duotone video card and navy text read as the dark elements on it. */
.ppc-free-training__stage {
  background: var(--ws-cream-warm) url("../images/free-training-bg-cream.webp") center top / cover no-repeat;
  padding-block: 5.5rem 6rem;
}

.ppc-free-training__welcome {
  margin-bottom: 3rem;
  text-align: center;
}

/* Text flips to the cream-section tones (the workshop defaults). */
.ppc-free-training__stage .ppc-workshop__eyebrow {
  color: var(--ws-warm-text);
}

/* .ppc-workshop__heading sets navy with !important. */
.ppc-workshop .ppc-free-training__stage .ppc-workshop__heading {
  color: var(--ws-navy) !important;
  font-size: 3rem;
}

.ppc-free-training__stage .ppc-workshop__section-intro {
  color: var(--ws-ink-soft);
}

/* The training video is 16:9 (widescreen). The frame is capped at 52rem
   (about 830 × 468px) and centred so it stays a comfortable size on wide
   screens; it goes full width on phones. */
.ppc-free-training__video {
  aspect-ratio: 16 / 9;
  background: #151c29;
  border-radius: var(--ws-radius);
  box-shadow: 0 18px 50px rgba(8, 14, 24, 0.35);
  margin-inline: auto;
  max-width: 52rem;
  overflow: hidden;
  position: relative;
}

.ppc-free-training__video iframe {
  border: 0;
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

/* Branded click-to-play cover. At rest it shows the video's poster under a
   cream wash (or a solid navy card if the poster can't be fetched) plus a play
   button — no Vimeo chrome. The iframe is only loaded on click
   (ppc-free-training-video.js), so the player's controls appear once the video
   is playing, and Vimeo hides them again when idle. */
.ppc-free-training__video-cover {
  align-items: center;
  background: radial-gradient(120% 120% at 50% 42%, #24374f 0%, #151c29 70%);
  border: 0;
  color: var(--ft-eyebrow-on-dark);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  gap: 1.15rem;
  height: 100%;
  inset: 0;
  justify-content: center;
  margin: 0;
  padding: 1.5rem;
  position: absolute;
  width: 100%;
}

.ppc-free-training__video-play {
  align-items: center;
  background: var(--ws-cream);
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(8, 14, 24, 0.45);
  display: flex;
  height: clamp(60px, 8.5vw, 86px);
  justify-content: center;
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  width: clamp(60px, 8.5vw, 86px);
}

.ppc-free-training__video-play svg {
  fill: var(--ws-navy-dark);
  height: 52%;
  margin-left: 7%; /* optical centring of the triangle */
  width: 52%;
}

.ppc-free-training__video-cover:hover .ppc-free-training__video-play,
.ppc-free-training__video-cover:focus-visible .ppc-free-training__video-play {
  background: #fff;
  box-shadow: 0 14px 40px rgba(8, 14, 24, 0.55);
  transform: scale(1.06);
}

.ppc-free-training__video-cover:focus-visible {
  outline: 3px solid var(--color-accent, #35679a);
  outline-offset: 4px;
}

/* Poster variant: the video's frame recoloured into a navy + cream duotone, so
   a loud thumbnail becomes an on-brand, editorial cover that blends into the
   navy stage. It is built by blending layers: the grayscale poster multiplied
   onto a cream base (cream highlights, dark shadows), then navy lightened over
   that (navy shadows). `isolation` keeps the blend off the page behind it, and
   the play button sits above the layers. Falls back to the plain navy card
   when no poster is set. */
.ppc-free-training__video-cover.has-poster {
  background: var(--ws-cream);
  isolation: isolate;
}

.ppc-free-training__video-cover.has-poster::before,
.ppc-free-training__video-cover.has-poster::after {
  content: "";
  inset: 0;
  position: absolute;
}

.ppc-free-training__video-cover.has-poster::before {
  background-image: var(--ppc-video-poster);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: grayscale(100%);
  mix-blend-mode: multiply;
}

.ppc-free-training__video-cover.has-poster::after {
  background: var(--ws-navy);
  mix-blend-mode: lighten;
}

/* Keep the play button above the duotone layers (unblended). */
.ppc-free-training__video-cover.has-poster .ppc-free-training__video-play {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ppc-free-training__video-play {
    transition: background-color 0.25s ease;
  }

  .ppc-free-training__video-cover:hover .ppc-free-training__video-play,
  .ppc-free-training__video-cover:focus-visible .ppc-free-training__video-play {
    transform: none;
  }
}

.ppc-free-training__video-empty {
  align-items: center;
  color: var(--ft-eyebrow-on-dark);
  display: flex;
  height: 100%;
  justify-content: center;
  margin: 0 !important;
}

/* #endregion VIDEO STAGE */

/* #region NEXT STEP */

.ppc-free-training__next {
  background: var(--ws-cream);
}

.ppc-free-training__next-inner {
  align-items: center;
  display: flex;
  gap: 6vw;
}

/* The workshop photo as a card — site card radius and shadow. */
.ppc-free-training__next-media {
  flex: 0 0 36%;
  margin: 0;
  min-width: 0;
}

.ppc-free-training__next-media img {
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(31, 42, 55, 0.06);
  border-radius: var(--ws-radius);
  box-shadow: var(--ws-shadow);
  object-fit: cover;
  object-position: 50% 40%;
  width: 100%;
}

.ppc-free-training__next-copy {
  flex: 1 1 0;
  min-width: 0;
}

.ppc-workshop .ppc-free-training__next-copy .ppc-workshop__heading {
  margin-bottom: 1.75rem;
}

.ppc-free-training__next-copy .ppc-workshop__divider {
  margin: 0 0 1.75rem;
}

.ppc-free-training__next-copy p:not(.ppc-workshop__eyebrow) {
  color: var(--ws-ink-soft);
  max-width: 36rem;
}

.ppc-workshop .ppc-free-training__details {
  color: var(--ws-warm-text) !important;
  font-weight: 600;
}

/* #endregion NEXT STEP */

/* #region RESPONSIVE */

@media (max-width: 999px) {
  .ppc-free-training__next-inner {
    align-items: stretch;
    flex-direction: column;
    gap: 3rem;
  }

  .ppc-free-training__next-media {
    flex: none;
  }

  .ppc-free-training__next-media img {
    aspect-ratio: 4 / 3;
  }

  /* Stacked, the photo and copy share one column the width of the signup
     hero's (36rem plus the side gutters), so the photo doesn't fill the page. */
  .ppc-workshop__container.ppc-free-training__next-inner {
    max-width: calc(36rem + 12vw);
  }
}

/* Signup hero type. The Stay Connected styles size the fields and button in
   vw, which is fine in the homepage's wide section but leaves 10–12px
   placeholders and a 9–12px button label here. Fixed sizes instead: fields at
   1rem at every width, the button at the site's 14px label floor below 1400px. */
html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .fluentform .ff-el-form-control,
html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .fluentform input[type="text"],
html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .fluentform input[type="email"] {
  font-size: 1rem !important;
}

@media (max-width: 1399px) {
  html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .fluentform .ff-btn-submit {
    font-size: 0.875rem !important;
  }
}

/* The homepage sizes this heading at 3vw (30px at 1000px); hold it at 36px
   until 3vw catches up at 1200px, so it doesn't shrink as the layout splits. */
@media (max-width: 1199px) {
  html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .ppc-email-copy-inner > :is(h1, h2, h3).wp-block-heading.ppc-email-heading {
    font-size: 2.25rem !important;
  }
}

/* Stacked signup hero, at the same width as the other page heroes (999px):
   copy above the card in one centred column. Replaces the homepage layout's
   plant gutter and its reversed row between 577 and 768px, which put a narrow
   card to the left of the copy. */
@media (max-width: 999px) {
  html body .wp-block-cover.ppc-email-section.ppc-free-training__hero {
    min-height: 0 !important;
    padding-block: 5rem !important;
  }

  html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .wp-block-columns {
    padding-inline: 0 !important;
  }

  html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .wp-block-column:nth-child(2) {
    align-items: stretch !important;
    flex-direction: column !important;
    margin-inline: auto !important;
    max-width: 36rem !important;
    row-gap: 2.5rem !important;
    width: 100% !important;
  }

  html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .ppc-email-copy-inner,
  html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .ppc-email-copy-inner.is-layout-constrained {
    max-width: 100% !important;
  }

  html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .wp-block-column:nth-child(2) > .wp-block-group.ppc-free-training__card {
    max-width: 100% !important;
    width: 100% !important;
  }

  html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .ppc-email-copy-inner > :is(h1, h2, h3).wp-block-heading.ppc-email-heading {
    max-width: none !important;
  }
}

@media (max-width: 768px) {
  html body .wp-block-cover.ppc-email-section.ppc-free-training__hero {
    padding-block: 3.5rem !important;
  }

  html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .ppc-email-copy-inner > hr.ppc-email-rule {
    min-height: 0 !important;
    width: 52.5vw !important;
  }

  html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .ppc-email-copy-inner > :is(h1, h2, h3).wp-block-heading.ppc-email-heading {
    font-size: 2rem !important;
  }

  .ppc-free-training__stage {
    padding-block: 4rem;
  }

  /* Stays larger than the next-step heading (38px here from workshop.css). */
  .ppc-workshop .ppc-free-training__stage .ppc-workshop__heading {
    font-size: 2.5rem;
  }

  .ppc-free-training__welcome {
    margin-bottom: 2.25rem;
  }

  .ppc-free-training__next-copy .ppc-workshop__divider {
    margin-bottom: 1.5rem;
  }

  .ppc-workshop .ppc-free-training__next-copy .ppc-workshop__heading {
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 576px) {
  html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .ppc-email-copy-inner > :is(h1, h2, h3).wp-block-heading.ppc-email-heading {
    font-size: 1.75rem !important;
  }

  /* Narrow phones: let the button label wrap rather than clip. */
  html body .wp-block-cover.ppc-email-section.ppc-free-training__hero .fluentform .ff-btn-submit {
    letter-spacing: 0.14em !important;
    padding-inline: 1.25rem !important;
    white-space: normal !important;
  }

  .ppc-workshop .ppc-free-training__stage .ppc-workshop__heading {
    font-size: 2.125rem;
  }
}

/* #endregion RESPONSIVE */