/*
 * Per-slide hero copy + hero polish.
 *
 * Loads ONLY when the banner actually has slide-level copy, so a banner using
 * the old single-message setup is untouched — every selector here requires
 * .banner--slide-copy (or the nav markup that only renders with it).
 *
 * .banner itself carries 72 rules in the compiled css/styles.css, which has no
 * source in this repo. Overrides below are specificity-checked against it:
 *   .banner .btn+.btn            = (0,3,0)  → beaten with (0,4,0)
 *   .banner .btn+.btn:hover      = (0,4,0)  → beaten with (0,5,0)
 *   .banner .right .item .item-inner = (0,4,0) → tied at (0,4,0); this file
 *                                    enqueues after the bundle, so it wins.
 *
 * Contrast (computed, WCAG):  #181726/#fff 17.66  ·  #5f6577/#fff 5.81
 * #7d859b border/#fff 3.68 (UI ≥3)  ·  #0d76ab/#eef5f9 4.54 (AA text)
 * #009e23/#fff 3.55 (30px large text ≥3)  ·  #15a7de 2.76 = decorative ONLY.
 */

/* ------------------------------------------------------------------ *
 *  Copy stack — crossfading blocks, centered inside the locked stack
 * ------------------------------------------------------------------ */

/*
 * The JS locks the stack to the tallest block (min-height). Centering the
 * active block inside that lock splits the shorter slides' slack evenly
 * instead of pooling ~100px of white below the buttons.
 */
.banner--slide-copy .banner-copy-set {
  position: relative;
  display: flex;
  align-items: center;
}

/*
 * Inactive blocks stay in the document with layout (absolute + visibility,
 * NOT display:none) for two reasons: opacity can transition, and their height
 * is measurable so the JS can lock the stack to the tallest one. top:50% +
 * translate keeps them at the same optical position as the centered active
 * block, so the crossfade never jumps.
 */
.banner--slide-copy .banner-copy {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

/*
 * The active block goes back into flow (as the only flex item) so the column
 * has a real height even before JS runs. Slide 0 ships with .is-active from
 * PHP, which is what keeps this from being a layout-shift on first paint.
 */
.banner--slide-copy .banner-copy.is-active {
  position: relative;
  top: auto;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ------------------------------------------------------------------ *
 *  Type rhythm
 * ------------------------------------------------------------------ */

.banner--slide-copy .banner-title {
  text-wrap: balance;
}

/*
 * The bundle's 59px subtitle margin dates from the one-message hero; with
 * three rotating blocks it reads as a hole between message and actions.
 * 1.35 leading replaces the bundle's effective 1.15, which was set for a
 * single line and is too tight once a subtitle wraps.
 */
.banner--slide-copy .banner-subtitle {
  line-height: 1.35;
  margin-bottom: 34px;
  text-wrap: balance;
}

/* Bundle green #00b82a is 2.66:1 — fails even the 3:1 large-text bar. */
.banner--slide-copy .banner-subtitle strong {
  color: #009e23;
}

/* ------------------------------------------------------------------ *
 *  Buttons — one filled action per slide, quiet secondary
 * ------------------------------------------------------------------ */

/*
 * Covers BOTH secondary forms: the explicit .btn-hollow on per-slide buttons
 * and the bundle's own second default-copy button (.btn + .btn), so the
 * secondary treatment is identical across all three rotations.
 */
.banner--slide-copy .banner-copy .btn + .btn,
.banner--slide-copy .banner-copy .btn.btn-hollow {
  background: transparent;
  color: #181726;
  border-color: #7d859b;
}

.banner--slide-copy .banner-copy .btn + .btn:hover,
.banner--slide-copy .banner-copy .btn.btn-hollow:hover {
  background: #eef5f9;
  color: #0d76ab;
  border-color: #0d76ab;
}

/*
 * The bundle paints "TAINER" white on hover for its orange-filled hover;
 * on the pale wash above it would vanish. Keep the wordmark's own gray.
 * (COLD/TAINER lettering is the logotype — WCAG exempts brand marks.)
 */
.banner--slide-copy .banner-copy .btn + .btn:hover strong small {
  color: #9c9b9b;
}

@media (max-width: 567px) {
  /* Stacked buttons with two different intrinsic widths read as clutter. */
  .banner--slide-copy .banner-copy .btn {
    display: block;
    width: 100%;
    margin-right: 0;
    text-align: center;
  }
}

/* ------------------------------------------------------------------ *
 *  Slide rail — replaces slick's 19px photo-corner dots
 * ------------------------------------------------------------------ */

/*
 * !important is load-bearing: slick writes style="display: block;" INLINE on
 * the dots UL during responsive refresh, and no selector outranks an inline
 * style. The rail (below) is this variant's only slide navigation.
 */
.banner--slide-copy .slick-dots {
  display: none !important;
}

/*
 * Rendered by PHP (real content, so the theme's empty-wrapper stripper leaves
 * it alone), revealed once banner-dynamic.js has wired it to slick. Space is
 * reserved from first paint — only opacity changes, so no layout shift.
 */
.banner--slide-copy .banner-slide-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 36px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.banner--slide-copy.banner--nav-ready .banner-slide-nav {
  opacity: 1;
}

.banner--slide-copy .banner-slide-nav__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.banner--slide-copy .banner-slide-nav__chip:focus-visible {
  outline: 2px solid #0d76ab;
  outline-offset: 2px;
}

.banner--slide-copy .banner-slide-nav__num {
  font-family: 'Barlow', Helvetica, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: #5f6577;
  transition: color 0.25s ease;
}

.banner--slide-copy .banner-slide-nav__chip:hover .banner-slide-nav__num,
.banner--slide-copy .banner-slide-nav__chip.is-active .banner-slide-nav__num {
  color: #181726;
}

/*
 * The active number sits inside the brand bracket — the same [ ] mark as the
 * logo, in logo cyan. Decorative accent only: the active state is also
 * carried by number color, the track, and aria-current.
 */
.banner--slide-copy .banner-slide-nav__chip::before,
.banner--slide-copy .banner-slide-nav__chip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7px;
  border: 2px solid #15a7de;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.banner--slide-copy .banner-slide-nav__chip::before {
  left: 0;
  border-right: 0;
  border-radius: 3px 0 0 3px;
  transform: translateX(5px);
}

.banner--slide-copy .banner-slide-nav__chip::after {
  right: 0;
  border-left: 0;
  border-radius: 0 3px 3px 0;
  transform: translateX(-5px);
}

.banner--slide-copy .banner-slide-nav__chip.is-active::before,
.banner--slide-copy .banner-slide-nav__chip.is-active::after {
  opacity: 1;
  transform: translateX(0);
}

/*
 * The track fills over the real autoplay dwell (--hero-dwell is set from
 * slick's own autoplaySpeed by the JS, so a config change can't desync it).
 */
.banner--slide-copy .banner-slide-nav__track {
  display: block;
  width: 0;
  height: 3px;
  border-radius: 2px;
  background: #dfe3ec;
  overflow: hidden;
  transition: width 0.3s ease;
}

.banner--slide-copy .banner-slide-nav__chip.is-active .banner-slide-nav__track {
  width: 64px;
}

.banner--slide-copy .banner-slide-nav__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: #181726;
  transform: scaleX(0);
  transform-origin: left center;
}

.banner--slide-copy .banner-slide-nav__chip.is-active .banner-slide-nav__fill {
  animation: coldtainer-hero-fill var(--hero-dwell, 5000ms) linear forwards;
}

.banner--slide-copy .banner-slide-nav.is-paused .banner-slide-nav__fill {
  animation-play-state: paused;
}

@keyframes coldtainer-hero-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (max-width: 992px) {
  .banner--slide-copy .banner-slide-nav {
    margin-top: 24px;
  }
}

/* ------------------------------------------------------------------ *
 *  Photo panel — inset edge, seam scrim, cut-out treatment (split layout)
 * ------------------------------------------------------------------ */

@media (min-width: 993px) {
  /*
   * Finished bottom edge. The bundle's `.banner .right{margin:0 -15px -4px}`
   * tucks the photo 4px UNDER the blue band that follows, so the two sections
   * crash into each other. Lifting the panel 34px turns that seam into a
   * deliberate white reveal — the band below starts on its own line. 34 sits
   * in this file's existing rhythm (34px subtitle margin, 36px rail gap).
   * Longhand margin-bottom ONLY: the bundle's margin-right calc(-50vw+650px)
   * right-bleed at wide viewports must survive, so never reset the shorthand.
   * Same (0,2,0) specificity as the bundle rule; this file loads after, wins.
   */
  .banner--slide-copy .right {
    margin-bottom: 34px;
  }

  /*
   * slick's own .slick-list already clips (overflow:hidden), so it is the one
   * box that can round the photo's corners without touching .slick-track.
   * 16px echoes the brand bracket's corner radius at panel scale. Bottom
   * corners only: the top edge stays flush under the header chrome, and the
   * left edge keeps dissolving through the seam scrim below — a radius there
   * is invisible at top-left and the scrim already finishes bottom-left on
   * light slides. Desktop only; under 993px the sections stack edge-to-edge
   * like every other section pair on the site.
   */
  .banner--slide-copy .right .slick-list {
    border-radius: 0 0 16px 16px;
  }

  /*
   * Soft white scrim on the photo's left edge so the panel emerges from the
   * page instead of butting against the white column. Sits at z-index:1 —
   * above the background photo, below the cut-out/caption layer (z 2).
   */
  .banner--slide-copy .right .item::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 130px;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.38) 45%,
      rgba(255, 255, 255, 0) 100%
    );
    z-index: 1;
    pointer-events: none;
  }

  /* Bundle bottom-anchors the cut-out; centered presents the product. */
  .banner--slide-copy .right .item .item-inner {
    justify-content: center;
  }
}

/*
 * A transparent cut-out with no shadow floats; the soft double shadow
 * grounds it against light photos (the F1020 is white on a pale van).
 */
.banner--slide-copy .right .item-inner img {
  filter: drop-shadow(0 24px 28px rgba(24, 23, 38, 0.28))
    drop-shadow(0 4px 8px rgba(24, 23, 38, 0.12));
}

/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .banner--slide-copy .banner-copy,
  .banner--slide-copy .banner-slide-nav,
  .banner--slide-copy .banner-slide-nav__track,
  .banner--slide-copy .banner-slide-nav__chip::before,
  .banner--slide-copy .banner-slide-nav__chip::after {
    transition: none;
  }

  /* Static full bar still marks the current slide without motion. */
  .banner--slide-copy .banner-slide-nav__fill {
    animation: none !important;
    transform: scaleX(1);
  }
}