/**
 * Hello Home — image beside a copy column.
 *
 * Two modes, set by params:
 *
 *   contained  the default — both halves sit inside the content column, with
 *              a gap, on whatever band background the row has
 *   bleed      the halves run the full row width, no gap, the copy half
 *              carrying its own colour panel
 *
 * Bleed works by zeroing the shared content column's width and padding
 * properties rather than fighting them with negative margins.
 */

.hello-media-split .hello-widget__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: center;
}

.hello-media-split__media {
  min-width: 0;
}

.hello-media-split__img {
  display: block;
  width: 100%;
  height: auto;
}

.hello-media-split__copy {
  min-width: 0;
}

.hello-media-split__copy-inner > :last-child {
  margin-bottom: 0;
}

.hello-media-split__subhead {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.2;
}

.hello-media-split__standfirst {
  margin: 0 0 16px;
  font-size: clamp(17px, 2.1vw, 22px);
  font-weight: 700;
  line-height: 1.3;
}

/* ---- image side --------------------------------------------------------- */

/* Source order is media first, so the default (image right) reorders. */
.hello-media-split--media-right .hello-media-split__media {
  order: 2;
}
.hello-media-split--media-right .hello-media-split__copy {
  order: 1;
}

/* ---- edge to edge ------------------------------------------------------- */

.hello-media-split--bleed {
  --hello-width: 100%;
  --hello-pad-y: 0;
  --hello-pad-x: 0;
}
.hello-media-split--bleed .hello-widget__inner {
  gap: 0;
  align-items: stretch;
}
/* The image fills its half rather than sitting at its natural height. */
.hello-media-split--bleed .hello-media-split__media {
  position: relative;
  min-height: 420px;
  background: #000;
}
.hello-media-split--bleed .hello-media-split__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hello-media-split--bleed .hello-media-split__copy {
  display: flex;
  align-items: center;
  padding: 72px clamp(24px, 5vw, 80px);
}
.hello-media-split--bleed .hello-media-split__copy-inner {
  width: 100%;
  max-width: 560px;
}

/* ---- copy panel fills --------------------------------------------------- */

.hello-media-split--panel-accent .hello-media-split__copy {
  background: var(--hello-accent);
  color: #fff;
}
.hello-media-split--panel-dark .hello-media-split__copy {
  background: #1c1c1c;
  color: #fff;
}

/* On a filled panel the shared pieces have to invert: the kicker and the tick
   both default to the accent colour, which is the panel itself. */
.hello-media-split--panel-accent .hello-widget__kicker,
.hello-media-split--panel-dark .hello-widget__kicker {
  color: #fff;
}
.hello-media-split--panel-accent .hello-widget__body,
.hello-media-split--panel-dark .hello-widget__body,
.hello-media-split--panel-accent .hello-widget__lead,
.hello-media-split--panel-dark .hello-widget__lead {
  color: rgba(255, 255, 255, 0.88);
}
.hello-media-split--panel-accent .hello-widget__rule,
.hello-media-split--panel-dark .hello-widget__rule {
  background: rgba(255, 255, 255, 0.35);
}
.hello-media-split--panel-accent .hello-widget__check::before {
  border-color: #fff;
}
.hello-media-split--panel-accent .hello-widget__accent {
  color: #fff;
}

/* ---- mobile: stack, image on top --------------------------------------- */

@media (max-width: 899px) {
  .hello-media-split .hello-widget__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  /* Order is reset so the image leads on every variant, matching the way the
     contained version already reads top-to-bottom. */
  .hello-media-split--media-right .hello-media-split__media,
  .hello-media-split--media-right .hello-media-split__copy {
    order: 0;
  }
  .hello-media-split--bleed .hello-media-split__media {
    min-height: 260px;
  }
  .hello-media-split--bleed .hello-media-split__copy {
    padding: 40px 24px;
  }
  .hello-media-split--bleed .hello-media-split__copy-inner {
    max-width: none;
  }
  .hello-media-split .hello-btn {
    width: 100%;
  }
}


/* ==========================================================================
 * Feature variant — "The Best Way to Learn".
 *
 * A black-to-accent gradient runs across BOTH halves rather than the copy
 * side carrying a solid panel, so the photo sits on black and the text on
 * red with the blend between them. Deliberately not built from the bleed +
 * panel switches: this is a different composition, not a tweak of that one.
 * ========================================================================== */

.hello-media-split--feature {
  --hello-width: 100%;
  --hello-pad-y: 0;
  --hello-pad-x: 0;
  color: #fff;
  background-image: linear-gradient(90deg,
    #000 0%,
    #000 30%,
    var(--hello-accent) 70%,
    var(--hello-accent) 100%);
}

/* Stacked, a horizontal blend would put the join down the middle of the
   photo. The comp switches the gradient to vertical at the same width the
   columns collapse. */
@media (max-width: 919px) {
  .hello-media-split--feature {
    background-image: linear-gradient(180deg,
      #000 0%,
      #000 30%,
      var(--hello-accent) 60%,
      var(--hello-accent) 100%);
  }
}

.hello-media-split--feature .hello-widget__inner {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 0;
  align-items: stretch;
  min-height: 640px;
}

.hello-media-split--feature .hello-media-split__media {
  display: flex;
  align-items: center;
  padding: clamp(24px, 4vw, 72px) clamp(20px, 4vw, 72px);
  background: none;
  min-height: 0;
}

/* Framed print, not a bleed: natural height inside a white border. */
.hello-media-split--feature .hello-media-split__img {
  position: static;
  width: 100%;
  height: auto;
  border: 6px solid #fff;
  box-sizing: border-box;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  object-fit: initial;
}

.hello-media-split--feature .hello-media-split__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 2.6vw, 36px);
  padding: clamp(48px, 6vw, 104px) clamp(24px, 5vw, 88px);
  background: none;
}
.hello-media-split--feature .hello-media-split__copy-inner {
  display: contents; /* the gap above spaces the children directly */
}

.hello-media-split--feature .hello-widget__heading {
  margin: 0;
  font-size: clamp(44px, 5.4vw, 88px) !important;
  line-height: 0.98 !important;
  font-weight: 900 !important;
  letter-spacing: -2px;
  text-wrap: balance;
}

.hello-media-split--feature .hello-media-split__subhead {
  margin: -8px 0 0;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* The rule is a border on the stand-first here, so the shared <hr> goes. */
.hello-media-split--feature .hello-widget__rule {
  display: none;
}

.hello-media-split--feature .hello-media-split__standfirst {
  margin: 0;
  padding-top: clamp(20px, 2vw, 28px);
  border-top: 2px solid rgba(255, 255, 255, 0.4);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.3;
  font-weight: 900;
}

.hello-media-split--feature .hello-widget__body {
  margin: 0;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
  font-weight: 500;
  color: #fff;
}

.hello-media-split--feature .hello-btn {
  align-self: flex-start;
  height: 60px;
  padding: 0 36px;
  border-width: 3px;
  font-size: 17px;
  font-weight: 700;
}

@media (max-width: 919px) {
  .hello-media-split--feature .hello-widget__inner {
    min-height: 0;
  }
  /* Image first when stacked, whichever side it takes on desktop. */
  .hello-media-split--feature .hello-media-split__media,
  .hello-media-split--feature .hello-media-split__copy {
    order: 0;
  }
  /**
   * The photo sits flush to the top edge.
   *
   * Turned vertical, the gradient puts pure black along the section's top
   * edge, which butts the dark band above it and the two read as one block.
   * Horizontally there was no such problem: the top edge carried red as well
   * as black, and that is what divided them. Dropping the pane's top padding
   * brings the photo's white frame up to the join, so the boundary is drawn
   * by the artwork rather than by the background.
   */
  .hello-media-split--feature .hello-media-split__media {
    padding-top: 0;
  }
}


/* ==========================================================================
 * Playalongs.
 *
 * The band is part of the section, not something the editor has to set on
 * the row -- same as the hero, testimonials, FAQ and plans. Values are the
 * comp's.
 * ========================================================================== */

.hello-media-split--playalongs {
  --hello-pad-y: clamp(64px, 7vw, 104px);
  --hello-pad-x: clamp(20px, 5vw, 80px);
  /* The comp caps its content at 1280px inside the padded section. */
  --hello-width: calc(1280px + 2 * clamp(20px, 5vw, 80px));
  background: #0d0d0d;
  color: #fff;
}

.hello-media-split--playalongs .hello-widget__inner {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

.hello-media-split--playalongs .hello-widget__heading {
  font-size: clamp(34px, 3.8vw, 56px) !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  letter-spacing: -1px;
  color: #fff;
  text-wrap: balance;
}

.hello-media-split--playalongs .hello-widget__body {
  font-size: 18px;
  line-height: 1.55;
  color: #d6d6d6;
  text-wrap: pretty;
}

.hello-media-split--playalongs .hello-widget__checks {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hello-media-split--playalongs .hello-widget__check {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}