/* ============================================================================
 * Feature Band V2
 * A FULL-BLEED background image (edge to edge, NOT capped at 1440) with a
 * content BOX overlaying it (eyebrow + Teko heading + numbered steps + two
 * buttons) plus an optional tall side photo. The X gutter lives on the INNER
 * so the bg stays full-bleed; only the inner content caps at 1440.
 * Desktop-first; step down at 1024 / 768.
 * ========================================================================== */

/* ── Brand tokens (scoped) — source of truth: design-system.md ───────────── */
.aew-fbv2 {
  --aew-cards:             var(--e-global-color-aew-cards, #FFFFFF);
  --aew-background:        var(--e-global-color-aew-background, #F4F4F4);
  --aew-lines:             var(--e-global-color-aew-lines, #DDDDDD);
  --aew-misc-accent:       var(--e-global-color-aew-misc-accent, #666666);
  --aew-secondary-cards:   var(--e-global-color-aew-secondary-cards, #EEEEEE);
  --aew-secondary-bg:      var(--e-global-color-aew-secondary-bg, #333333);
  --aew-secondary-accent:  var(--e-global-color-aew-secondary-accent, #555555);
  --aew-text:              var(--e-global-color-aew-text, #1A1A1A);
  --aew-cta:               var(--e-global-color-aew-cta, #444444);
  --aew-cta-hover:         var(--e-global-color-aew-cta-hover, #2B2B2B);
}

/* Strip Elementor's column / container padding so the band is full-bleed. The
   widget's own inner wrapper re-applies the max-width + responsive X padding. */
.elementor-column
  > .elementor-element-populated:has(.elementor-widget-agency-feature-band-v2),
.e-con:has(> .e-con-inner > .elementor-widget-agency-feature-band-v2),
.e-con:has(.elementor-widget-agency-feature-band-v2) {
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  padding: 0 !important;
}

/* Defeat Elementor's boxed section width so the background image goes truly
   edge-to-edge. The inner wrapper keeps its own max-width + gutter, so only the
   image becomes full-bleed. The `html` prefix raises specificity to beat the
   theme's global `html .elementor-section-boxed > .elementor-container {max-width:1440}`
   rule (style.css) which otherwise clamps the band to 1440 on product pages. */
html .elementor-section:has(.elementor-widget-agency-feature-band-v2),
html .elementor-section:has(.elementor-widget-agency-feature-band-v2) > .elementor-container,
html .elementor-section.elementor-section-boxed:has(.elementor-widget-agency-feature-band-v2) > .elementor-container,
html .e-con:has(.elementor-widget-agency-feature-band-v2) {
  max-width: 100% !important;
  width: 100% !important;
}

/* ── Full-bleed band ─────────────────────────────────────────────────────── */
.aew-fbv2 {
  position: relative;
  width: 100%;
  background-color: var(--aew-secondary-bg);
  background-image: var(--aew-fbv2-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Parallax: use `cover` so the image ALWAYS fills the full width (no side gaps
   exposing the green bg) — the previous `auto 160%` only guaranteed height, so on
   wide viewports the image was narrower than the band and the background colour
   showed on the sides. `cover` scales by width on wide screens, leaving vertical
   overflow for feature-band-v2.js to pan via background-position-y. */
.aew-fbv2--parallax {
  background-size: cover;
  transition: background-position 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .aew-fbv2--parallax {
    background-size: cover;
    background-position: center center !important;
    transition: none;
  }
}

.aew-fbv2 *,
.aew-fbv2 *::before,
.aew-fbv2 *::after {
  box-sizing: border-box;
}

/* Optional overlay tint over the image for legibility. */
.aew-fbv2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--aew-fbv2-overlay, transparent);
  pointer-events: none;
}

/* ── Inner wrapper: true 1440 content cap + 40px X gutter; owns Y padding ─── */
.aew-fbv2__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 40px;
}

/* ── Row: content box + optional side photo ──────────────────────────────── */
/* The grid IS the floating white card: box (copy) + photo together inside one
   rounded container, centred over the bg image with breathing room around it
   (the section's Y padding shows the image above/below). */
.aew-fbv2__grid {
  display: flex;
  align-items: stretch;
  gap: var(--aew-fbv2-card-gap, 16px);
  background: var(--aew-fbv2-card-bg, #FFFFFF);
  border-radius: var(--aew-fbv2-card-radius, 24px);
  padding: var(--aew-fbv2-card-pad, 16px);
  /* NOTE: the real width comes from the `card_max_width` control (default
     1200px) — Elementor generates a per-instance rule that beats anything
     here. This is only the no-control fallback. Product templates are set to
     60%, other pages 75%, via the control. */
  max-width: var(--aew-fbv2-card-maxw, 75%);
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── Content box (the copy half of the card) ──────────────────────────────── */
/* Copy keeps its 42% flex share when a side photo is present (photo ≈58%),
   but is no longer hard-capped — copy-only bands span the full card. */
.aew-fbv2__box {
  position: relative;
  flex: 0 0 var(--aew-fbv2-copy-width, 42%);
  max-width: 100%;
  width: 100%;
  background: var(--aew-fbv2-box-bg, transparent);
  border-radius: 0;
  /* inner padding so the copy isn't jammed against the card edge */
  padding: var(--aew-fbv2-box-pad, 32px 24px 32px 32px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

/* Copy-only band (no side photo): let the copy take the whole card. */
.aew-fbv2__grid > .aew-fbv2__box:only-child {
  flex: 1 1 100%;
  max-width: 100%;
}

/* ── Eyebrow (Playfair Display Bold 20px / 100%) ─────────────────────────── */
.aew-fbv2__eyebrow {
  margin: 0;
  color: var(--aew-fbv2-eyebrow, var(--aew-cta));
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Heading (Teko SemiBold 56px / 90%) ──────────────────────────────────── */
/* Prefixed with .aew-fbv2 so the colour beats the kit's .elementor-kit-N
   h1..h6 rule (0,1,1); a bare class would be (0,1,0) and lose (gotcha #20). */
.aew-fbv2 .aew-fbv2__heading {
  margin: 0;
  /* dark text on the white card (brand forest green) — override per-instance */
  color: var(--aew-fbv2-heading, var(--aew-secondary-bg));
  font-family: var(--aew-teko);
  font-weight: 600;
  font-size: 56px;
  line-height: 0.9;
  text-transform: uppercase;
}

/* ── Steps stack ─────────────────────────────────────────────────────────── */
.aew-fbv2__steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.aew-fbv2__step {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aew-fbv2 .aew-fbv2__step-title {
  margin: 0;
  color: var(--aew-fbv2-step-title, var(--aew-text));
  font-family: var(--aew-teko);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
}

.aew-fbv2__step-text {
  margin: 0;
  color: var(--aew-fbv2-step-text, var(--e-global-color-aew-misc-accent, #666666));
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
}

/* ── Buttons row ─────────────────────────────────────────────────────────── */
.aew-fbv2__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

/* ── Centered content (content_align = center) ───────────────────────────────
   Centers the heading, eyebrow, steps and buttons within the box. */
.aew-fbv2--center .aew-fbv2__box { align-items: center; text-align: center; }
.aew-fbv2--center .aew-fbv2__steps,
.aew-fbv2--center .aew-fbv2__step { align-items: center; }
.aew-fbv2--center .aew-fbv2__buttons { justify-content: center; }

/* Button base — design-system: Teko SemiBold 20px / 85%, pad 20/24/16, radius 8. */
.aew-fbv2__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  text-align: center;
  font-family: var(--aew-teko);
  font-weight: 600;
  font-size: 20px;
  line-height: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 20px 24px 16px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Primary (solid). The --aew-fbv2-pri-* vars are set inline by render() from
   the resolved editor values (hex or global colour); the design-system token is
   the fallback when a slot is not overridden (§6.8). */
.aew-fbv2__btn--primary {
  background-color: var(--aew-fbv2-pri-bg, var(--aew-cta));
  color: var(--aew-fbv2-pri-text, #FFFFFF);
  border-color: var(--aew-fbv2-pri-bg, var(--aew-cta));
}

.aew-fbv2__btn--primary:hover,
.aew-fbv2__btn--primary:focus-visible {
  background-color: var(--aew-fbv2-pri-bg-hover, var(--aew-cta-hover));
  color: var(--aew-fbv2-pri-text-hover, #FFFFFF);
  border-color: var(--aew-fbv2-pri-bg-hover, var(--aew-cta-hover));
}

/* Secondary (phone) — white outline for legibility over the dark image
   (design-system B3 exception); fills white on hover with dark text. */
.aew-fbv2__btn--secondary {
  background-color: transparent;
  /* gold outline+text on the white card (override per-instance) */
  color: var(--aew-fbv2-sec-color, var(--aew-cta));
  border-color: var(--aew-fbv2-sec-color, var(--aew-cta));
}

.aew-fbv2__btn--secondary:hover,
.aew-fbv2__btn--secondary:focus-visible {
  background-color: var(--aew-fbv2-sec-bg-hover, var(--aew-cta));
  color: var(--aew-fbv2-sec-text-hover, #FFFFFF);
  border-color: var(--aew-fbv2-sec-bg-hover, var(--aew-cta));
}

.aew-fbv2__btn-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
}

/* ── Side photo ──────────────────────────────────────────────────────────── */
.aew-fbv2__media {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}

.aew-fbv2__photo {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  border-radius: 16px;  /* inner photo radius inside the white card */
  display: block;
}

/* ── Responsive: tablet / small desktop (≤1024px) ────────────────────────── */
@media (max-width: 1024px) {
  .aew-fbv2__inner { padding: 64px 40px; }
  .aew-fbv2__grid { gap: 32px; }
  .aew-fbv2 .aew-fbv2__heading { font-size: 48px; }
  .aew-fbv2__photo { min-height: 360px; }
}

/* ── Responsive: mobile (≤768px) — stack box then photo ──────────────────── */
@media (max-width: 768px) {
  .aew-fbv2__inner { padding: 40px 16px; }
  .aew-fbv2__grid {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    max-width: 100%; /* mobile: the control's mobile default (100%) matches */
  }
  .aew-fbv2__box { max-width: none; width: 100%; }
  .aew-fbv2 .aew-fbv2__heading { font-size: 40px; }
  .aew-fbv2 .aew-fbv2__step-title { font-size: 22px; }
  .aew-fbv2__step-text { font-size: 14px; }
  .aew-fbv2__buttons { flex-direction: column; align-items: stretch; }
  .aew-fbv2__btn { width: 100%; font-size: 18px; padding: 18px 24px 16px; }
  .aew-fbv2__photo { min-height: 280px; }
}