/* ==================================================================
   Offer — kwizzbit/offer (whole-file segment)
   Faithful slice of /HTML/offer.html. Globals (reset/body/font-face/:root)
   dropped; tokens canonical (theme.json). Full-bleed via the .kwb-segment wrapper.
   ================================================================== */

.cc-offer{
  --cc-offer--bg:            #E03B2B;
  --cc-offer--eyebrow-color: #FEF06E;
}

    .cc-offer {
      background: var(--cc-offer--bg);
      padding-block: 3rem;
    }
    /* Align the offer's inner content to the same 1200px grid as the
       pricing header above it, so "Plans that power every playstyle"
       and the offer copy share the same left edge. */
    .cc-offer .container {
      max-width: 1200px;
      padding-inline: clamp(1rem, 4vw, 3rem);
    }

    .cc-offer__inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2rem;
      opacity: 0;
      transform: translateY(32px);
      transition:
        opacity   600ms var(--wp--custom--motion--ease-out),
        transform 600ms var(--wp--custom--motion--ease-out);
    }

    .cc-offer.is-visible .cc-offer__inner {
      opacity: 1;
      transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {
      .cc-offer__inner {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    /* ── Left content ──────────────────────────────────── */
    .cc-offer__content {
      flex: 1 1 auto;
      max-width: 100%;
    }

    .cc-offer__eyebrow {
      font-family: 'Pixelar', monospace;
      font-weight: 400;
      font-size: 1rem; /* 16px */
      line-height: 1;
      letter-spacing: 0.06em;
      color: var(--cc-offer--eyebrow-color);
      text-transform: uppercase;
      margin-bottom: 0.4375rem; /* 7px */
    }

    .cc-offer__title {
      font-family: var(--wp--preset--font-family--display);
      font-weight: 400;
      font-size: 3.25rem; /* tablet size — preferred */
      line-height: 0.923;
      letter-spacing: -0.10764em;
      color: var(--wp--preset--color--white);
      margin-bottom: 1.125rem;
    }

    /* £180 — faded, no CSS strikethrough; SVG arrow overlays it instead */
    .cc-offer__price-was {
      position: relative;
      color: #FB684F;
    }

    /* Arrow — sits centred over £180, scales with the text */
    .cc-offer__price-was-arrow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -35%);
      width: 125%;
      height: auto;
      pointer-events: none;
      display: block;
      animation: arrow-float 4s ease-in-out infinite;
    }

    /* Tablet: base styles apply (stacked layout) — widen arrow 10% */
    @media (min-width: 641px) {
      .cc-offer__price-was-arrow {
        width: 135%;
      }
    }

    .cc-offer__price-now {
      color: var(--wp--preset--color--white);
    }

    @keyframes arrow-float {
      0%   { transform: translate(-50%, -35%); }
      50%  { transform: translate(-44%, -35%); }
      100% { transform: translate(-50%, -35%); }
    }

    @media (prefers-reduced-motion: reduce) {
      .cc-offer__price-was-arrow { animation: none; }
    }

    /* Title + eyebrow breaks — hidden at desktop/tablet, shown only on mobile */
    .cc-offer__title-break,
    .cc-offer__eyebrow-break { display: none; }

    .cc-offer__lead {
      font-family: var(--wp--preset--font-family--body);
      font-weight: 500;
      font-size: 0.9375rem; /* 15px — --wp--preset--font-size--nav */
      line-height: 1.412;
      color: rgba(255, 255, 255, 0.90);
    }

    .cc-offer__lead strong {
      font-weight: 700;
    }

    /* ── Right CTA ─────────────────────────────────────── */
    .cc-offer__cta-wrap {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.625rem;
    }

    /* Button — reuses btn--secondary */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--wp--preset--font-family--body);
      font-weight: 700;
      font-size: 0.875rem;
      line-height: 1;
      color: var(--wp--preset--color--white);
      text-decoration: none;
      border: none;
      cursor: pointer;
      min-height: 44px;
      padding-inline: 1.0625rem;
      border-radius: 0;
      white-space: nowrap;
      transition:
        background var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
        transform   var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
    }

    .btn--secondary {
      background: var(--wp--preset--gradient--btn-secondary);
    }

    @media (hover: hover) {
      .btn--secondary:hover {
        background: var(--wp--preset--gradient--btn-secondary-hover);
        transform: translateY(-1px);
      }
    }

    .btn:focus-visible {
      outline: 2px solid var(--wp--preset--color--white);
      outline-offset: 3px;
    }

    .cc-offer__cta-caption {
      font-family: var(--wp--preset--font-family--body);
      font-weight: 500; /* Roobert Medium */
      font-size: 0.8125rem; /* 13px */
      line-height: 1;
      color: rgba(255, 255, 255, 0.65);
      text-align: center;
      width: 100%; /* fills CTA column width so centering is relative to button */
    }

    /* ═══════════════════════════════════════════════════
       MOBILE  ≤640px
    ═══════════════════════════════════════════════════ */
    @media (max-width: 640px) {
      .cc-offer { padding-block: 2.5rem; }

      .cc-offer__eyebrow {
        font-size: 1rem; /* 16px */
      }

      .cc-offer__title {
        font-size: clamp(2.25rem, 10.5vw, 3rem);
        line-height: 0.95;
        margin-bottom: 1rem;
        max-width: none;
      }

      /* Show the forced breaks on mobile */
      .cc-offer__title-break,
      .cc-offer__eyebrow-break { display: inline; }

      /* Smaller arrow on mobile, tail proportionally a touch longer */
      .cc-offer__price-was-arrow {
        width: 120%;
        transform: translate(-50%, -30%);
      }

      .cc-offer__price-was-arrow line,
      .cc-offer__price-was-arrow polyline {
        stroke-width: 3;
      }

      .cc-offer__lead {
        font-size: 1rem;
        max-width: calc(min(300px, 88vw) - 40px); /* ~40px narrower than default */
      }

      .cc-offer__cta-wrap {
        width: 100%;
        align-items: flex-start;
      }

      /* Button fills the column so caption can centre beneath it */
      .cc-offer__cta-wrap .btn {
        width: 100%;
        min-height: 48px;
        padding-inline: 1.25rem;
        justify-content: center;
      }

      /* Caption centres under the full-width button */
      .cc-offer__cta-caption {
        width: 100%;
        text-align: center;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .btn { transition: none; }
    }