/**
 * Hello Home — the existing home page's hero.
 *
 * Copy and tick list on the left, two columns of instructor cards scrolling
 * upward on the right. The marquee is CSS only: each column's list is emitted
 * twice and the track animated from 0 to -50%, so the second copy arrives
 * exactly where the first began and the loop has no seam.
 *
 * Deliberately a separate implementation from hero.css even though the
 * technique is shared -- see the note at the top of the widget class. Values
 * here come from the live page's raw-html block (.vsg-*): 14px gutters, a
 * 40px mask fade top and bottom, 16:9 images, and the dark caption bar.
 */

.hello-hero-classic {
  --hello-pad-y: clamp(48px, 7vw, 120px);
  --hello-pad-x: clamp(20px, 5vw, 60px);
  --hello-width: calc(1280px + 2 * clamp(20px, 5vw, 60px));
  --hello-marquee-gap: 14px;
  /* The visible window on the marquee. The live page hard-codes 900px, which
     is taller than most laptops; capped against the viewport instead. */
  --hello-marquee-height: min(820px, 80vh);
  /**
   * The band is white unless an editor sets one, rather than inherited.
   *
   * On production this section sits on a .site-content the theme paints
   * white; this instance leaves that transparent and the page shows through
   * dark, which put near-black type on a near-black background. A widget
   * that specifies its own text colour has to specify the ground under it --
   * the other bands here (academy, playalongs, testimonials) all do.
   *
   * var(--hello-bg, …) rather than a flat value so the Style tab still wins.
   */
  background: var(--hello-bg, #fff);
  color: #0d0d0d;
}

.hello-hero-classic .hello-widget__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* ---- copy --------------------------------------------------------------- */

.hello-hero-classic__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hello-hero-classic__title {
  /* Live page: 68px / 1 / 800, down to 36px below 1005px. */
  margin: 0 0 20px;
  font-size: clamp(34px, 5vw, 68px) !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  letter-spacing: -1px;
  /* "Learn From the Best" overruns a half-width column at this size and drops
     a single word onto its own line. Balance evens the two instead. */
  text-wrap: balance;
}

.hello-hero-classic__body {
  margin: 0 0 28px;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  font-weight: 700;
}

/**
 * The tick list runs in two columns, as the live page lays it out in a pair
 * of vc_column_inner halves. column-count rather than a grid so the six items
 * flow 3-and-3 without the markup having to know where the break falls.
 */
.hello-hero-classic .hello-widget__checks {
  width: 100%;
  margin-bottom: 32px;
  column-count: 2;
  column-gap: 32px;
}
.hello-hero-classic .hello-widget__check {
  break-inside: avoid;
}

.hello-hero-classic__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}

.hello-hero-classic__guarantee {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #444;
}
.hello-hero-classic__guarantee strong {
  color: #0d0d0d;
}

/* ---- marquee ------------------------------------------------------------ */

.hello-hero-classic__marquee {
  display: flex;
  gap: var(--hello-marquee-gap);
  height: var(--hello-marquee-height);
  overflow: hidden;
}

/**
 * The fade at each end is a mask rather than a gradient overlay, so it works
 * whatever the band behind it is -- an overlay would have to know the
 * background colour, and this widget's is an editor setting.
 */
.hello-hero-classic__col {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.hello-hero-classic__track {
  display: flex;
  flex-direction: column;
  gap: var(--hello-marquee-gap);
  animation: hello-hero-classic-up var(--hello-marquee-speed, 50s) linear infinite;
}

/* The second column starts part-way up, so the two are never in step. */
.hello-hero-classic__col--2 .hello-hero-classic__track {
  animation-name: hello-hero-classic-up-offset;
}

@keyframes hello-hero-classic-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); } /* -50%: the list is duplicated once */
}
@keyframes hello-hero-classic-up-offset {
  from { transform: translateY(-140px); }
  to   { transform: translateY(calc(-50% - 140px)); }
}

.hello-hero-classic__marquee:hover .hello-hero-classic__track {
  animation-play-state: paused;
}

/* ---- cards -------------------------------------------------------------- */

.hello-hero-classic__card {
  margin: 0;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* Ratio on the wrapper, not the image: an image that 404s has no intrinsic
   size and would otherwise collapse the card. */
.hello-hero-classic__card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1a1a1a;
}
@supports not (aspect-ratio: 16 / 9) {
  .hello-hero-classic__card-img { height: 0; padding-bottom: 56.25%; }
}

.hello-hero-classic__card-img img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The theme rounds every image in post content; the card already clips. */
  border-radius: 0;
}

.hello-hero-classic__card-name {
  padding: 12px 14px;
  background: #1a1a1a;
  font-size: clamp(17px, 1.5vw, 24px);
  line-height: 1.3;
  font-weight: 900;
  color: #fff;
}

/* ---- on a dark band ----------------------------------------------------- */

.hello-widget--on-dark.hello-hero-classic {
  color: #fff;
}
.hello-widget--on-dark .hello-hero-classic__guarantee {
  color: rgba(255, 255, 255, 0.72);
}
.hello-widget--on-dark .hello-hero-classic__guarantee strong {
  color: #fff;
}

/* ---- motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hello-hero-classic__track {
    animation: none;
  }
  /* Stopped at the keyframe start, column 2 would sit 140px high and show a
     gap at the foot; put both back to zero. */
  .hello-hero-classic__col--2 .hello-hero-classic__track {
    transform: none;
  }
}

/* ---- stacked ------------------------------------------------------------
 * The live page keeps the two columns side by side and just shrinks the
 * marquee to 360px, which leaves the copy in a column barely wider than the
 * tick list. Stacking instead: the pitch gets the full width, and the marquee
 * follows as a band of texture under it.
 * ------------------------------------------------------------------------ */

@media (max-width: 899px) {
  .hello-hero-classic .hello-widget__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .hello-hero-classic__marquee {
    height: 360px;
  }
}

@media (max-width: 599px) {
  /* Two columns of ticks at this width leaves "250+ Courses/Masterclasses"
     breaking across three lines. One column, full measure. */
  .hello-hero-classic .hello-widget__checks {
    column-count: 1;
  }
  .hello-hero-classic__ctas {
    width: 100%;
  }
  .hello-hero-classic__ctas .hello-btn {
    flex: 1 1 100%;
  }
}