/* =============================================================================
 * WEPRO Content Engine — section styles
 *
 * Mobile-first. All values use Avada/wepro-design-tokens variables with safe
 * fallbacks. No proprietary palette here — sections render in whatever the
 * theme provides.
 *
 * Cascade plan (low → high):
 *   1. Avada theme defaults (Body Typography, h1-h6 typography, --awb-color-N)
 *   2. --wdt-* design tokens (wepro-design-tokens plugin)
 *   3. --wsk-content-* element vars (this file)
 *   4. Per-section inline style="--wsk-content-<id>-accent: r,g,b" (from
 *      ContentSettings storage, emitted on the <section> wrapper)
 *
 * Phase 0 design language (Enerblock-inspired, font-agnostic):
 *   - Fluid clamp() typography (no breakpoint jumps)
 *   - Eyebrow pretitle + heading + content vertical rhythm
 *   - RGB-triplet accent tokens for alpha layering
 *   - Background variants (neutral / accent / inverse)
 *   - Three breakpoints documented but enforced via @media min-width
 *   - Reveal-on-scroll via [data-wepro-animation="fade_up"|"line_mask"]
 * ========================================================================== */

:root {
  /* Breakpoints (informational — CSS @media uses literal values below) */
  --wsk-bp-sm: 640px;
  --wsk-bp-md: 1024px;
  --wsk-bp-lg: 1280px;

  /* Engine-wide tokens */
  --wsk-content-gap: clamp(1.5rem, 3vw, 2.5rem);
  --wsk-content-max-width: 100%;
  --wsk-content-radius: 0;
  --wsk-content-ease: cubic-bezier(0.53, 0, 0, 1);
  --wsk-content-duration: 480ms;

  /* Card standardization tokens — ensure ALL card-type sections share
   * identical chrome (padding / radius / shadow). Override on :root or
   * .wcl-layout level to tune per-brand. */
  --wsk-card-pad:    clamp(20px, 2.4vw, 28px);
  --wsk-card-radius: 14px;
  --wsk-card-shadow:
    0 1px 2px rgba(20, 18, 12, 0.04),
    0 8px 24px rgba(20, 18, 12, 0.05);

  /* Accent fallback chain — RGB triplets for alpha layering.
   * Per-section override comes via inline style="--wsk-content-<id>-accent: r,g,b". */
  --wsk-content-accent-rgb: 39, 109, 188;

  /* Neutral surfaces */
  --wsk-content-surface: var(--wdt-color-surface, var(--awb-color-2, #f6f8fa));
  --wsk-content-border: var(--wdt-color-border, rgba(0, 0, 0, 0.08));
  --wsk-content-text: var(--wdt-color-text, var(--awb-color-8, #1a1a1a));
  --wsk-content-text-muted: var(--wdt-color-text-muted, rgba(0, 0, 0, 0.6));
}

/* =============================================================================
 * Base <section> wrapper
 * ========================================================================== */

.wepro-content-section {
  /* Section spacing is controlled by the WCL stack gap (main-stack +
   * sidebar-stack both use flex `gap`), not by per-section margin.
   * The prior `margin: 24px 0` on every section doubled the gap on
   * desktop (margin 24px + flex gap 20-32px = 44-56px between
   * sections) and produced a 24px gap on mobile where the main-stack
   * had no gap of its own. Phase 6.1 fix. */
  margin: 0;
  font-family: inherit;
  color: var(--wdt-color-text, var(--awb-color-8, #222));
}

/* Main-stack at mobile — give it the same flex gap behavior the
 * desktop @media block does, so removing the per-section margin
 * doesn't collapse sections into each other below 1024px. */
.wcl-main-stack {
  display: flex;
  flex-direction: column;
  gap: var(--wsk-content-row-gap-mobile, clamp(16px, 3vw, 24px));
  min-width: 0;
}

/* Radius variants — set via data-wepro-radius on the wrapper */
.wepro-content-section[data-wepro-radius="4"]    { border-radius: 4px;  }
.wepro-content-section[data-wepro-radius="8"]    { border-radius: 8px;  }
.wepro-content-section[data-wepro-radius="pill"] { border-radius: 999px; }

/* Background variants */
.wepro-content-section[data-wepro-bg="neutral"] {
  background: var(--wsk-content-surface);
  padding: clamp(1rem, 2.5vw, 2rem);
}
.wepro-content-section[data-wepro-bg="accent"] {
  background: rgb(var(--wsk-content-accent-rgb) / 0.06);
  padding: clamp(1rem, 2.5vw, 2rem);
}
.wepro-content-section[data-wepro-bg="inverse"] {
  background: var(--wsk-content-text);
  color: var(--awb-color-1, #fff);
  padding: clamp(1rem, 2.5vw, 2rem);
}
.wepro-content-section[data-wepro-bg="inverse"] a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.wepro-content-section[data-wepro-bg="inverse"] a:hover {
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.wepro-content-section[data-wepro-bg="inverse"] a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  text-decoration-thickness: 2px;
}

/* Legacy h2/h3 inside sections (per-section blocks below override where needed) */

.wepro-content-section h2,
.wepro-content-section h3 {
  font-family: inherit;
  color: var(--wdt-color-text, var(--awb-color-8, #222));
  margin: 0 0 12px;
}

/* Lock the fluid type rhythm with !important so Avada's compiled h2 / h3
 * typography rules (Theme Options → Typography) can't override our clamp().
 * Specificity (0,1,1) already beats Avada's bare `h2` (0,0,1) declarations,
 * but Avada may inject per-page utility rules higher than our specificity.
 *
 * Phase 6.1 Item 8 — editorial serif (Cormorant Garamond) applied to bare
 * body h2/h3 tags inside any content section. Author-written headings via
 * Avada Live Builder come through as bare <h2> (no class), so the bare-tag
 * selector here is what drives the luxury pass for real-page content. */
.wepro-content-section h2 {
  font-family: var(--wsk-lux-serif, 'Cormorant Garamond', 'Playfair Display', Georgia, serif) !important;
  font-weight: 500 !important;
  font-size: clamp(1.65rem, 3vw, 2.4rem) !important;
  line-height: 1.18 !important;
  letter-spacing: var(--wsk-lux-tracking-title, -0.015em) !important;
  color: var(--wdt-color-text, var(--awb-color-8, #14120c)) !important;
}

.wepro-content-section h3 {
  font-family: var(--wsk-lux-serif, 'Cormorant Garamond', 'Playfair Display', Georgia, serif) !important;
  font-weight: 500 !important;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.01em !important;
  color: var(--wdt-color-text, var(--awb-color-8, #14120c)) !important;
}

@media (max-width: 767px) {
  .wepro-content-section h2 {
    font-size: clamp(1.5rem, 6vw, 1.85rem) !important;
    line-height: 1.2 !important;
  }
  .wepro-content-section h3 {
    font-size: clamp(1.25rem, 5vw, 1.5rem) !important;
    line-height: 1.25 !important;
  }
}

/* =============================================================================
 * Phase 6.1 Item 8 — Section header luxury design language
 * Editorial serif (Cormorant Garamond — established project convention via
 * concierge-hero / hero-blur / post-grid-luxury / showcase-scroll), tight
 * tracking, refined weight; gold eyebrow + magazine numeral rhythm.
 * Specificity (0,2,0) beats Avada's bare `h2` and Theme-Options h2 rules.
 * ========================================================================== */

/* --- Tunable design tokens (sites can override at :root) --- */
:root {
  --wsk-lux-gold:        #B89968;
  --wsk-lux-gold-deep:   #8A6F45;
  --wsk-lux-hairline:    rgba(184, 153, 104, 0.45);
  --wsk-lux-serif:       'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --wsk-lux-tracking-eyebrow: 0.22em;
  --wsk-lux-tracking-title:  -0.015em;
}

/* Header layout: stack with refined rhythm */
.wepro-content-section .wepro-content-section__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 1.2vw, 14px);
  margin: 0 0 clamp(16px, 2vw, 22px);
}

/* Index numeral — magazine-style luxury counter (01, 02, …) */
.wepro-content-section .wepro-content-section__index {
  font-family: var(--wsk-lux-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  letter-spacing: 0.04em;
  color: var(--wsk-lux-gold-deep);
  line-height: 1;
}

/* Eyebrow — small-caps, gold, tracked. Sits above the section title. */
.wepro-content-section .wepro-content-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: inherit; /* Inter / Figtree / system sans */
  font-weight: 600;
  font-size: clamp(0.7rem, 0.7vw + 0.55rem, 0.78rem);
  letter-spacing: var(--wsk-lux-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--wsk-lux-gold-deep);
  line-height: 1;
}

/* Hairline rule preceding the eyebrow label (32px gold tick) */
.wepro-content-section .wepro-content-section__eyebrow-mark {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--wsk-lux-hairline);
  flex-shrink: 0;
}

/* Section title — editorial serif, refined weight, tight tracking.
 * Specificity (0,2,0) beats Avada bare h2 (0,0,1). The !important on
 * font-family stays defensive against Theme-Options Typography rules
 * that inject `font-family: ... !important` per page. */
.wepro-content-section .wepro-content-section__title {
  font-family: var(--wsk-lux-serif) !important;
  font-weight: 500;
  letter-spacing: var(--wsk-lux-tracking-title);
  line-height: 1.18 !important;
  color: var(--wdt-color-text, var(--awb-color-8, #14120c));
  margin: 0;
}

/* Per-tag size — h2 dominant, h3/h4 step down preserving rhythm */
h2.wepro-content-section__title {
  font-size: clamp(1.65rem, 3vw, 2.4rem) !important;
}
h3.wepro-content-section__title {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem) !important;
}
h4.wepro-content-section__title {
  font-size: clamp(1.2rem, 1.6vw, 1.45rem) !important;
  letter-spacing: -0.005em;
}

/* Sidebar context — luxury rail uses tighter, smaller heading. The
 * sidebar already has its own gilded surface; the heading shouldn't
 * compete. */
.wcl-section[data-wcl-col="sidebar"] .wepro-content-section__title,
.wcl-sidebar-stack .wepro-content-section__title {
  font-size: clamp(1.1rem, 1.4vw, 1.3rem) !important;
  letter-spacing: -0.005em;
}
.wcl-section[data-wcl-col="sidebar"] .wepro-content-section__eyebrow,
.wcl-sidebar-stack .wepro-content-section__eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
}

/* Mobile — tighten header gap + title size for compact viewports */
@media (max-width: 767px) {
  .wepro-content-section .wepro-content-section__header {
    gap: 8px;
    margin-bottom: 14px;
  }
  h2.wepro-content-section__title {
    font-size: clamp(1.5rem, 6vw, 1.85rem) !important;
    line-height: 1.2 !important;
  }
  .wepro-content-section .wepro-content-section__eyebrow {
    gap: 10px;
  }
  .wepro-content-section .wepro-content-section__eyebrow-mark {
    width: 22px;
  }
}

/* =============================================================================
 * AEO Answer — TLDR block at top of post
 * Premium card: surface fill, hairline border, soft luxury shadow, 14px radius.
 * Glass-edge top highlight (1px gradient) — site can override --wsk-aeo-edge
 * at :root to tint the highlight to its brand accent (e.g. champagne).
 * ========================================================================== */
.wepro-content-section--aeo_answer {
  position: relative;
  background: var(--wdt-color-surface, var(--awb-color-2, #ffffff));
  border: 1px solid var(--wdt-color-border, rgba(20, 18, 12, 0.08));
  border-radius: var(--wsk-card-radius, 14px);
  padding: var(--wsk-card-pad, clamp(20px, 2.4vw, 28px));
  margin: 0 0 clamp(28px, 3vw, 32px);
  font-size: clamp(1.125rem, 0.8vw + 0.95rem, 1.25rem);
  line-height: 1.55;
  color: var(--wdt-color-text, var(--awb-color-8, inherit));
  box-shadow: var(--wsk-card-shadow, 0 1px 2px rgba(20, 18, 12, 0.04), 0 8px 24px rgba(20, 18, 12, 0.05));
}

.wepro-content-section--aeo_answer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(
    --wsk-aeo-edge,
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.9) 8%,
      rgba(255, 255, 255, 0.4) 92%,
      transparent 100%
    )
  );
  border-radius: 14px 14px 0 0;
  pointer-events: none;
}

.wepro-content-section--aeo_answer__label {
  display: inline-block;
  position: relative;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wdt-color-accent, var(--awb-color-4, #b89968));
  margin-bottom: 14px;
  padding-bottom: 8px;
}

.wepro-content-section--aeo_answer__label::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

/* =============================================================================
 * Reveal animations — CSS-only, JS-optional.
 *
 * Earlier pattern: opacity:0 initial + JS IntersectionObserver adds .is-in-view.
 * Problem: when reveal.js fails to enqueue (Avada Dynamic_JS bundling timing
 * regression observed 2026-05-22), every section with data-wepro-animation
 * stayed permanently invisible. Content visibility cannot depend on JS.
 *
 * Current pattern: CSS @keyframes with animation-fill-mode:both runs once on
 * first paint. Element starts hidden, animates to visible, stays visible.
 * If reveal.js DOES load and adds .is-in-view later, that's a no-op
 * (already at end state).
 * ========================================================================== */

@keyframes wepro-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes wepro-line-mask {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.wepro-content-section[data-wepro-animation="fade_up"] {
  animation: wepro-fade-up 0.6s var(--wsk-content-ease) both;
}

.wepro-content-section[data-wepro-animation="line_mask"] {
  animation: wepro-line-mask 0.7s var(--wsk-content-ease) both;
}

/* Respect prefers-reduced-motion — skip the keyframe entirely. */
@media (prefers-reduced-motion: reduce) {
  .wepro-content-section[data-wepro-animation] {
    animation: none;
  }
}

/* =============================================================================
 * Default body element styles inside any section
 * (overridable per-section in the body-styling blocks below)
 * ========================================================================== */

.wepro-content-section ol,
.wepro-content-section ul {
  margin: 0 0 16px 1.4em;
  padding: 0;
}

.wepro-content-section li {
  margin: 0 0 8px;
  line-height: 1.55;
}

/* =============================================================================
 * Term Definition card — editorial dictionary-style, no card chrome
 * ========================================================================== */
.wepro-content-section--term_definition {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 0 clamp(20px, 2.4vw, 28px);
}
.wepro-content-section--term_definition__phonetic {
  font-style: italic;
  color: var(--wdt-color-text-muted, var(--awb-color-7, #8a857c));
  margin-bottom: 10px;
  font-size: 0.95em;
}
.wepro-content-section--term_definition__definition {
  font-size: inherit;
  line-height: 1.65;
  margin-bottom: 14px;
  color: var(--wdt-color-text, var(--awb-color-8, inherit));
}
.wepro-content-section--term_definition__definition p {
  margin: 0 0 0.65em;
}
.wepro-content-section--term_definition__definition p:last-child {
  margin-bottom: 0;
}
.wepro-content-section--term_definition__meta {
  font-size: 0.875rem;
  color: var(--wdt-color-text-muted, var(--awb-color-7, #8a857c));
  margin-top: 10px;
}

/* =============================================================================
 * Key Facts — editorial spec-sheet (single column, label-left/value-right,
 * hairline-between-rows). Reads like a Baumeister datasheet, not a feature row.
 * Transparent surface — the rhythm of dividers carries the structure.
 * ========================================================================== */
.wepro-content-section--key_facts {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 clamp(28px, 3vw, 32px);
  position: relative;
}
/* Champagne hairline at the top — establishes the editorial spec-sheet anchor
 * without injecting hardcoded text (which would break i18n). The section's
 * own title (rendered by VSTT / Avada element wrapper) stays above the card. */
.wepro-content-section--key_facts::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--wdt-color-accent, var(--awb-color-4, #b89968));
  margin-bottom: 14px;
}
.wepro-content-section--key_facts__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--wdt-color-border, rgba(20, 18, 12, 0.08));
}
.wepro-content-section--key_facts__item:last-child {
  border-bottom: 0;
}
.wepro-content-section--key_facts__label {
  flex: 0 0 auto;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wdt-color-text-muted, var(--awb-color-7, #8a857c));
}
.wepro-content-section--key_facts__value {
  flex: 1 1 auto;
  text-align: right;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--wdt-color-text, var(--awb-color-8, #1a1816));
  font-variant-numeric: tabular-nums;
}

/* Hide the disconnected section title above this card — the ::before eyebrow
 * inside the card carries that label, single point of identification. */
.wepro-content-section--key_facts > .wsk-section-title,
.wcl-section--key_facts .wsk-section-title {
  display: none;
}

/* =============================================================================
 * HowTo Steps — numbered vertical timeline; outlined champagne numeral
 * ========================================================================== */
.wepro-content-section--howto_steps__list {
  list-style: none;
  counter-reset: howto-step;
  /* margin-left + padding-left forced to 0 with !important to beat
   * Avada's `.post-content ol` rule (specificity 0,1,1, sets ~1.5em
   * margin-left = 25.2px at inherited font size). Without these the
   * OL gets indented and the cards render narrower than the parent
   * column — visible on BOTH desktop and mobile. */
  margin: 0 0 clamp(28px, 3vw, 32px) 0 !important;
  padding: 0 !important;
}
.wepro-content-section--howto_steps__item {
  counter-increment: howto-step;
  position: relative;
  padding: var(--wsk-card-pad, clamp(20px, 2.4vw, 28px));
  padding-left: clamp(64px, 7vw, 76px);
  background: var(--wdt-color-surface, var(--awb-color-1, #ffffff));
  border: 1px solid var(--wdt-color-border, rgba(20, 18, 12, 0.08));
  border-radius: var(--wsk-card-radius, 14px);
  margin: 0 0 14px;
  box-shadow: var(--wsk-card-shadow, 0 1px 2px rgba(20, 18, 12, 0.03));
}
.wepro-content-section--howto_steps__item::before {
  content: counter(howto-step);
  position: absolute;
  top: clamp(20px, 2.4vw, 28px);
  left: clamp(20px, 2.4vw, 28px);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--wdt-color-accent, var(--awb-color-4, #b89968));
  color: var(--wdt-color-accent, var(--awb-color-4, #b89968));
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.wepro-content-section--howto_steps__name {
  font-weight: 600;
  font-size: 1.0625rem;
  margin: 0 0 6px;
  color: var(--wdt-color-text, var(--awb-color-8, #1a1816));
  letter-spacing: -0.005em;
}
.wepro-content-section--howto_steps__text {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--wdt-color-text-secondary, var(--awb-color-7, #4a4843));
}

/* =============================================================================
 * Comparison Table — editorial; no card chrome; champagne bottom-border header
 * ========================================================================== */
.wepro-content-section--comparison_table__wrap {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 0 clamp(28px, 3vw, 32px);
  -webkit-overflow-scrolling: touch;
  /* Phase 6.0 post-ship polish (2026-05-22): previous scroll-hint
   * `linear-gradient` produced a faint vertical edge on the right side of
   * the comparison table — visible as a gray border. The table now fits
   * the main column (min-width: 480px) on desktop, and mobile collapses
   * to stacked cards (no horizontal scroll), so the hint affordance is
   * vestigial. Removed; no replacement border. */
  background: none;
}
.wepro-content-section--comparison_table__table {
  width: 100%;
  min-width: 560px; /* prevents columns from squeezing too narrow on mobile */
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.wepro-content-section--comparison_table__table th,
.wepro-content-section--comparison_table__table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--wdt-color-border, rgba(20, 18, 12, 0.08));
  vertical-align: top;
}
.wepro-content-section--comparison_table__table thead th {
  background: transparent;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wdt-color-text-secondary, var(--awb-color-7, #4a4843));
  border-bottom: 1px solid var(--wdt-color-accent, var(--awb-color-4, #b89968));
  padding-bottom: 12px;
}
.wepro-content-section--comparison_table__table tbody tr:last-child td {
  border-bottom: 0;
}
.wepro-content-section--comparison_table__winner {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--wdt-color-accent, var(--awb-color-4, #b89968));
  color: var(--wdt-color-accent, var(--awb-color-4, #b89968));
  border-radius: 999px;
}
/* Mobile comparison table (Phase 5.3, 2026-05-22): collapse the matrix into
 * one stacked CARD per axis (Criterion). Subject labels surface via
 * ::before { content: attr(data-subject); } on each <td>, so no DOM
 * duplication is needed. Forces zero horizontal scroll. Phase 5.1's
 * 560px min-width table + sticky first-column + scroll wrapper are all
 * overridden here. Desktop matrix layout (>= 768px) stays unchanged. */
@media (max-width: 767px) {
  .wepro-content-section--comparison_table__wrap {
    overflow: visible;
    background: none;
    margin: 0 0 clamp(20px, 3vw, 28px);
  }
  .wepro-content-section--comparison_table__table {
    display: block;
    min-width: 0;
    width: 100%;
    border: 0;
  }
  .wepro-content-section--comparison_table__table thead {
    /* Column headers don't fit on mobile; surface their text via data-subject */
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  .wepro-content-section--comparison_table__table tbody,
  .wepro-content-section--comparison_table__table tr {
    display: block;
    width: 100%;
  }
  .wepro-content-section--comparison_table__table tr {
    margin: 0 0 14px;
    padding: 14px 16px;
    background: var(--wdt-color-surface, var(--awb-color-1, #ffffff));
    border: 1px solid var(--wdt-color-border, rgba(20, 18, 12, 0.08));
    border-radius: 12px;
  }
  .wepro-content-section--comparison_table__table tr:last-child {
    margin-bottom: 0;
  }
  .wepro-content-section--comparison_table__table th,
  .wepro-content-section--comparison_table__table td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }
  .wepro-content-section--comparison_table__table th[scope="row"] {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 10px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--wdt-color-border, rgba(20, 18, 12, 0.08));
  }
  .wepro-content-section--comparison_table__table td {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    border-bottom: 1px solid var(--wdt-color-border-soft, rgba(20, 18, 12, 0.04));
    overflow-wrap: anywhere;
  }
  .wepro-content-section--comparison_table__table td:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .wepro-content-section--comparison_table__table td::before {
    content: attr(data-subject);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wdt-color-text-secondary, var(--awb-color-7, #4a4843));
  }
  .wepro-content-section--comparison_table__winner {
    /* Badge sits inline next to axis on desktop; on mobile drop to its own line */
    display: inline-block;
    margin-left: 0;
    margin-top: 4px;
  }
}

/* =============================================================================
 * Service Details (WSF 9-block) — minimal wrapper; defers to WSF's own CSS
 * ========================================================================== */
.wepro-content-section--service_details {
  margin: 0 0 28px;
}

/* =============================================================================
 * FAQs — refined accordion; champagne chevron; hairline card; ARIA-aware
 * ========================================================================== */
.wepro-content-section--faqs {
  margin: 0 0 clamp(28px, 3vw, 32px);
}
.wepro-content-section--faqs__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wepro-content-section--faqs__item {
  border: 1px solid var(--wdt-color-border, rgba(20, 18, 12, 0.08));
  border-radius: var(--wsk-card-radius, 14px);
  overflow: hidden;
  background: var(--wdt-color-surface, var(--awb-color-1, #ffffff));
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wepro-content-section--faqs__item:hover {
  border-color: var(--wdt-color-accent, var(--awb-color-4, #b89968));
}
.wepro-content-section--faqs__item[data-open="1"] {
  box-shadow: 0 1px 2px rgba(20, 18, 12, 0.04), 0 8px 24px rgba(20, 18, 12, 0.05);
}
.wepro-content-section--faqs__question {
  appearance: none;
  background: none;
  border: 0;
  padding: clamp(18px, 2vw, 22px) clamp(48px, 5vw, 60px) clamp(18px, 2vw, 22px) clamp(20px, 2.4vw, 24px);
  width: 100%;
  text-align: left;
  font-size: clamp(1rem, 0.6vw + 0.88rem, 1.125rem);
  font-weight: 500;
  cursor: pointer;
  color: var(--wdt-color-text, var(--awb-color-8, #1a1816));
  position: relative;
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.wepro-content-section--faqs__question:focus-visible {
  outline: 2px solid var(--wdt-color-accent, var(--awb-color-4, #b89968));
  outline-offset: -2px;
}
.wepro-content-section--faqs__question::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: clamp(20px, 2.4vw, 24px);
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  transition: transform 0.25s ease, color 0.25s ease;
  color: var(--wdt-color-accent, var(--awb-color-4, #b89968));
}
.wepro-content-section--faqs__item[data-open="1"] .wepro-content-section--faqs__question::after {
  content: '−';
}
.wepro-content-section--faqs__answer {
  overflow: hidden;
  height: 0;
  transition: height 0.3s ease;
}
.wepro-content-section--faqs__answer-inner {
  padding: 0 clamp(20px, 2.4vw, 24px) clamp(18px, 2vw, 22px);
  line-height: 1.65;
  color: var(--wdt-color-text-secondary, var(--awb-color-7, #4a4843));
}

/* =============================================================================
 * Pricing
 * ========================================================================== */
.wepro-content-section--pricing {
  margin: 0 0 16px;
}

/* =============================================================================
 * TOC, Related, Glossary, Author/Meister, Contact, Hours, Rating, Reviews,
 * Social, Legal — placeholder rules; wrappers inherit defaults
 * ========================================================================== */
.wepro-content-section--toc,
.wepro-content-section--glossary_autolink,
.wepro-content-section--related_entries,
.wepro-content-section--author_meister,
.wepro-content-section--contact_card,
.wepro-content-section--hours_card,
.wepro-content-section--rating_bar,
.wepro-content-section--featured_reviews,
.wepro-content-section--social_icons,
.wepro-content-section--legal_links {
  margin: 0 0 24px;
}

@media (max-width: 640px) {
  .wepro-content-section--key_facts {
    grid-template-columns: 1fr;
  }
  .wepro-content-section--howto_steps__item {
    padding-left: 52px;
  }
  .wepro-content-section--howto_steps__item::before {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wepro-content-section--faqs__answer,
  .wepro-content-section--faqs__question::after {
    transition: none;
  }
}

/* =============================================================================
 * Phase 5 (1.9.0, 2026-05-22) — 2-column responsive layout structure ONLY.
 *
 * Adds no per-section chrome — sister plugins (Hub, weprocta, WSF, dictionary)
 * paint their own inner cards/typography/spacing as they did before. This
 * layer ONLY provides the 2-col main+sidebar grid that ContentEngine::
 * render_two_col_layout() emits via <div class="wcl-layout"> wrapper.
 *
 * Per-section luxury polish (if/when desired) belongs in each section's
 * NATIVE plugin CSS file, surgical, one section at a time — never as a
 * generic stacked layer over existing CSS.
 * ========================================================================== */

/* Mobile / fallback: single-column flow. Cards stack at the layout gap; the
 * sidebar stack (when present) just behaves as another flex item with its own
 * internal gap rhythm. */
.wcl-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 40px);
  max-width: 1280px;
  margin-inline: auto;
  /* No horizontal padding — the Avada column/container that wraps this grid
   * is the source of truth for inline gutter. Adding padding here would
   * double-pad on every CPT layout. Removed 2026-05-24 (v1.15.1). */
}

.wcl-layout[data-wcl-variant="one_col"] {
  max-width: 880px;
}

.wcl-section {
  margin: 0;
  padding: 0;
}

/* Sidebar stack — single grid child wrapping every data-wcl-col="sidebar"
 * section so we can stick the WRAPPER (not individual cards) on desktop and
 * avoid per-card stacking-context overlap. On mobile this is just a flex
 * column. (Fix 2, 2026-05-22.) */
.wcl-sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: var(--wsk-content-sidebar-gap, 16px);
  margin: 0;
  padding: 0;
}

/* Phase 5.2 layout shape (Fix 6 + Fix 7, 2026-05-22): real <main> + <aside>
 * wrappers as the ONLY two column children of the grid (plus optional
 * full-width breakouts). Phase 5.1's "loose grid children + 999-row spanning
 * sidebar + internal scrollbar" replaced because:
 *   - spanning row + auto row flow produced 1000px empty gaps in main column
 *   - internal max-height + overflow-y: auto produced an unwanted scrollbar
 *     inside the sidebar
 * Sidebar sticks on the wrapper, no scrollbar, no max-height.
 */
@media (min-width: 1024px) {
  .wcl-layout[data-wcl-variant="auto"],
  .wcl-layout[data-wcl-variant="two_col"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--wsk-content-sidebar-width, 320px);
    column-gap: clamp(28px, 3.5vw, 48px);
    row-gap: var(--wsk-content-row-gap, clamp(20px, 3vw, 32px));
    align-items: start;
  }
  .wcl-layout > .wcl-main-stack {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: var(--wsk-content-row-gap, clamp(20px, 3vw, 32px));
    min-width: 0;
  }
  .wcl-layout > .wcl-sidebar-stack {
    grid-column: 2;
    position: sticky;
    top: var(--wsk-content-sticky-offset, 100px);
    align-self: start;
    /* Explicit "off" for the Phase 5.1 properties: no internal scroll,
     * no max-height, no row-spanning. */
    max-height: none;
    overflow: visible;
  }
  .wcl-layout > .wcl-section[data-wcl-col="full"] {
    grid-column: 1 / -1;
  }
  /* Opt-out: sites that prefer natural flow can flip stickiness off by setting
   * data-wcl-sticky="no" on the .wcl-layout wrapper. */
  .wcl-layout[data-wcl-sticky="no"] > .wcl-sidebar-stack {
    position: static;
  }
}

@media (min-width: 768px) {
  .wcl-layout[data-wcl-variant="two_col"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--wsk-content-sidebar-width, 320px);
    column-gap: clamp(28px, 3.5vw, 48px);
    row-gap: var(--wsk-content-row-gap, clamp(20px, 3vw, 32px));
    align-items: start;
  }
}

@media print {
  .wcl-layout { display: block; max-width: none; padding: 0; }
  .wcl-sidebar-stack { position: static; }
}

/* =============================================================================
 * Sidebar context overrides — sister-plugin cards rendered in 340px column
 * need different layout/density than their main-column defaults. The starter-
 * kit owns the data-wcl-col contract, so the layout adapter lives here, not
 * in each sister plugin (keeps Hub/weprocta/Dictionary CSS layout-agnostic).
 * ========================================================================== */

/* ── Hub expert-box: compact trust-badge variant ──
 * Main column = full editorial card (96px portrait, bio, contact).
 * Sidebar = stacked compact card (88px portrait, eyebrow + hairline,
 * name + title, divider, "View full profile →" link). No bio, no contact —
 * those compete with the trust-anchor purpose at narrow widths. */
.wcl-section[data-wcl-col="sidebar"] .wch-expert-box {
  padding: clamp(20px, 2.4vw, 24px);
  text-align: center;
}
.wcl-section[data-wcl-col="sidebar"] .wch-expert-box__inner {
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.wcl-section[data-wcl-col="sidebar"] .wch-expert-box__photo img {
  width: 88px;
  height: 88px;
}
.wcl-section[data-wcl-col="sidebar"] .wch-expert-box__info {
  width: 100%;
  text-align: center;
}
.wcl-section[data-wcl-col="sidebar"] .wch-expert-box__label {
  position: relative;
  display: inline-block;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  margin: 0 0 0.6rem;
  padding-bottom: 8px;
}
.wcl-section[data-wcl-col="sidebar"] .wch-expert-box__label::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.wcl-section[data-wcl-col="sidebar"] .wch-expert-box__name {
  display: block;
  font-size: 1.0625rem;
  line-height: 1.25;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
.wcl-section[data-wcl-col="sidebar"] .wch-expert-box__title {
  font-size: 0.8125rem;
  margin-top: 4px;
}
.wcl-section[data-wcl-col="sidebar"] .wch-expert-box__bio,
.wcl-section[data-wcl-col="sidebar"] .wch-expert-box__contact {
  display: none;
}
.wcl-section[data-wcl-col="sidebar"] .wch-expert-box__profile-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--wdt-color-border, rgba(20, 18, 12, 0.08));
  color: var(--wdt-color-accent, var(--awb-color-4, #b89968));
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.wcl-section[data-wcl-col="sidebar"] .wch-expert-box__profile-link:hover {
  color: var(--wdt-color-accent-deep, var(--awb-color-5, #8e7437));
}

/* ─────────────────────────────────────────────────────────────────
   Mobile (≤767px) — profile card switches from stacked-centered to
   horizontal: portrait LEFT (64px) + info block RIGHT (eyebrow +
   name + title, all left-aligned), with "Profil ansehen →" as a
   full-width row below. Saves ~120px of vertical space on phones
   where the sidebar stacks BELOW main content and has room to spread
   horizontally. Applies to both the data-wcl-col="sidebar" selector
   (when explicitly placed in sidebar slot) AND the .wcl-sidebar-stack
   path (auto-stack on mobile).
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .wcl-section[data-wcl-col="sidebar"] .wch-expert-box,
  .wcl-sidebar-stack > .wcl-section .wch-expert-box {
    text-align: left;
  }
  .wcl-section[data-wcl-col="sidebar"] .wch-expert-box__inner,
  .wcl-sidebar-stack > .wcl-section .wch-expert-box__inner {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .wcl-section[data-wcl-col="sidebar"] .wch-expert-box__photo,
  .wcl-sidebar-stack > .wcl-section .wch-expert-box__photo {
    flex-shrink: 0;
  }
  .wcl-section[data-wcl-col="sidebar"] .wch-expert-box__photo img,
  .wcl-sidebar-stack > .wcl-section .wch-expert-box__photo img {
    width: 64px;
    height: 64px;
  }
  .wcl-section[data-wcl-col="sidebar"] .wch-expert-box__info,
  .wcl-sidebar-stack > .wcl-section .wch-expert-box__info {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
  }
  .wcl-section[data-wcl-col="sidebar"] .wch-expert-box__label,
  .wcl-sidebar-stack > .wcl-section .wch-expert-box__label {
    display: block;
    margin: 0 0 4px;
    padding-bottom: 0;
  }
  .wcl-section[data-wcl-col="sidebar"] .wch-expert-box__label::after,
  .wcl-sidebar-stack > .wcl-section .wch-expert-box__label::after {
    /* Hide the gold underline tick — the horizontal layout doesn't need it. */
    display: none;
  }
  .wcl-section[data-wcl-col="sidebar"] .wch-expert-box__profile-link,
  .wcl-sidebar-stack > .wcl-section .wch-expert-box__profile-link {
    width: 100%;
    justify-content: flex-start;
    margin-top: 12px;
    padding-top: 12px;
  }

  /* Tighten the card padding at mobile so the horizontal layout sits
   * compactly. Desktop keeps the airier 20-24px. */
  .wcl-section[data-wcl-col="sidebar"] .wch-expert-box,
  .wcl-sidebar-stack > .wcl-section .wch-expert-box {
    padding: 14px;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Pricing card — wraps PricingSection's [wpd_price] output so the
   sidebar always shows a framed card with a "Preis" label instead
   of naked "Auf Anfrage" text. The skip-on-body-shortcode rule in
   PricingSection::render() guarantees this never double-renders
   when the editor placed [wpd_price] inline in post_content.
   ───────────────────────────────────────────────────────────────── */
.wcl-pricing-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--wsk-content-card-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--wsk-content-card-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--wsk-content-card-radius, 12px);
}
.wcl-pricing-card__label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.wcl-pricing-card__value {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.wcl-pricing-card__value a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =============================================================================
 * Phase 5.3 — Mobile responsive baseline (2026-05-22)
 *
 * Functional repair only. Stops viewport horizontal-overflow on 390px / 430px
 * devices and prevents H2/H3 cropping inside WEPRO output. Visual / luxury
 * heading style belongs in the design phase that follows; this is the neutral
 * baseline that lets us hand off a usable mobile build first.
 *
 * Conservative scope: targets ONLY content INSIDE the WEPRO layout
 * (`.wcl-layout`, `.wcl-main-stack`, `.wsk-wepro-content__body`,
 * `.wepro-content-section`). Avada theme typography and other plugins'
 * heading rules stay untouched.
 * ========================================================================== */
@media (max-width: 767px) {
  /* Outer layout: kill any inherited padding that pushes inner content past
   * the viewport edge, and force the wrapper to never overflow horizontally. */
  .wcl-layout,
  .wcl-main-stack {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  /* Typography baseline — headings inside the body + sections. Aggressive
   * clamps so 36-44px desktop headings drop to readable, non-cropping mobile
   * sizes. overflow-wrap: anywhere catches very long compound German nouns
   * (Eu-Bauproduktenverordnung, Glasfertigungstechnik, etc.) that otherwise
   * push the column wider than the viewport. */
  /* Phase 6.1.0b mobile heading rescale (2026-05-22): user flagged H2 too
   * big at 390px after the mobile padding tightening. Previous Phase 5.3
   * baseline targeted 28-38px H2 which felt heavy in tighter body cards.
   * New editorial-luxury mobile scale: H1 ~24-30px, H2 ~22-26px, H3 ~18-21px,
   * H4 ~16-18px. Still uses clamp() so it scales smoothly to tablet, but the
   * mobile MAX caps are pulled down ~30%. line-height tightened slightly. */
  .wcl-main-stack h1,
  .wsk-wepro-content__body h1,
  .wepro-content-section h1 {
    font-size: clamp(1.6rem, 5.5vw, 1.95rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .wcl-main-stack h2,
  .wsk-wepro-content__body h2,
  .wepro-content-section h2 {
    font-size: clamp(1.4rem, 5vw, 1.7rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .wcl-main-stack h3,
  .wsk-wepro-content__body h3,
  .wepro-content-section h3 {
    font-size: clamp(1.15rem, 4vw, 1.35rem);
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .wcl-main-stack h4,
  .wsk-wepro-content__body h4,
  .wepro-content-section h4 {
    font-size: clamp(1rem, 3.5vw, 1.15rem);
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  /* Long body links and inline code shouldn't trigger horizontal scroll. */
  .wcl-main-stack a,
  .wsk-wepro-content__body a,
  .wepro-content-section a {
    overflow-wrap: anywhere;
  }

  /* Generic widget overflow guard — every WEPRO section card stays inside
   * the viewport even when its content has long unbreakable strings. */
  .wepro-content-section {
    max-width: 100%;
    min-width: 0;
  }
  .wepro-content-section > * {
    max-width: 100%;
    min-width: 0;
  }

  /* Per-widget overflow fixes (the 8 named in Phase 5.3 spec) ---------- */

  /* key_facts: label/value pair rows can wrap on tight widths */
  .wepro-content-section--key_facts {
    overflow: hidden;
  }
  .wepro-content-section--key_facts dl,
  .wepro-content-section--key_facts ul,
  .wepro-content-section--key_facts ol {
    margin-left: 0;
    padding-left: 0;
  }
  .wepro-content-section--key_facts dt,
  .wepro-content-section--key_facts dd {
    overflow-wrap: anywhere;
  }

  /* pricing: card already responsive via flex; ensure value text wraps */
  .wcl-pricing-card,
  .wepro-content-section--pricing {
    max-width: 100%;
  }
  .wcl-pricing-card__value {
    overflow-wrap: anywhere;
  }

  /* author_meister: photo + text card; let inner blocks wrap properly */
  .wepro-content-section--author_meister {
    overflow: hidden;
  }
  .wepro-content-section--author_meister * {
    min-width: 0;
    max-width: 100%;
  }

  /* contact_card: tel/email anchors are notorious for forcing horizontal
   * scroll because they're one long unbreakable token. */
  .wepro-content-section--contact_card,
  .wepro-content-section--contact_card a {
    overflow-wrap: anywhere;
  }

  /* service_details: the WSF 9-block aggregator — protect every nested block */
  .wepro-content-section--service_details {
    overflow: hidden;
  }
  .wepro-content-section--service_details img,
  .wepro-content-section--service_details video,
  .wepro-content-section--service_details iframe {
    max-width: 100%;
    height: auto;
  }

  /* faqs: accordion items can have long answer text; wrap aggressively */
  .wepro-content-section--faqs {
    overflow: hidden;
  }
  .wepro-content-section--faqs * {
    overflow-wrap: anywhere;
  }

  /* howto_steps: numbered steps can have long German step titles */
  .wepro-content-section--howto_steps {
    overflow: hidden;
  }
  .wepro-content-section--howto_steps__name,
  .wepro-content-section--howto_steps__text {
    overflow-wrap: anywhere;
  }
  /* Cards should match the full column width of post-body / service_details
   * sections. Phase 5.3 added padding-left: 1.25rem here as a generic list
   * indent, but the cards are visually-bordered blocks (not bulleted list
   * items) and the numbered circle is INSIDE each card via float — so the
   * outer list indent only made cards look narrower + asymmetric (left-
   * indented but right-flush) vs normal content sections. */
  .wepro-content-section--howto_steps__list {
    padding-left: 0;
    margin-left: 0;
  }

  /* Post body coming from the editor (Avada Builder / Gutenberg / classic):
   * tables, pre, code, embeds — all common horizontal-overflow culprits */
  .wcl-section--post-body img,
  .wsk-wepro-content__body img,
  .wcl-section--post-body video,
  .wsk-wepro-content__body video {
    max-width: 100%;
    height: auto;
  }
  .wcl-section--post-body pre,
  .wsk-wepro-content__body pre,
  .wcl-section--post-body code,
  .wsk-wepro-content__body code {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }
  /* Avada-builder tables and editor tables that aren't the comparison_table:
   * allow inner horizontal scroll instead of pushing the page wider */
  .wcl-section--post-body > table,
  .wsk-wepro-content__body > table,
  .wcl-section--post-body figure.wp-block-table,
  .wsk-wepro-content__body figure.wp-block-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =============================================================================
 * Phase 6.0 — Sidebar rail + H2/H3 baseline + comparison polish (2026-05-22)
 *
 * Three combined fixes:
 *   Fix 10: Sidebar rail shared rhythm (mobile + desktop) with inner-widget
 *           normalization to prevent double-card chrome
 *   Fix 14: Restrained editorial H2/H3 baseline (not luxury, not marketing)
 *   Fix 15: Comparison table desktop visual polish (mobile cards unchanged)
 *
 * Phase 6.0 = clean / German / responsive / non-duplicated. Full luxury
 * design language ships in Phase 6.1.
 * ========================================================================== */

/* ── Fix 10: Sidebar rail — shared rhythm at every viewport ─────────────
 *
 * Two-layer rule (per Codex review):
 *   Layer A: shared rhythm on `.wcl-sidebar-stack > .wcl-section`
 *            (padding + border + radius + surface — the "family")
 *   Layer B: inner-widget normalization — null out the embedded
 *            border/padding/background on `.wcl-pricing-card`,
 *            `.wch-expert-box`, contact card so they inherit the outer
 *            rhythm instead of double-framing.
 */
.wcl-sidebar-stack > .wcl-section {
  padding: clamp(16px, 2vw, 20px);
  background: var(--wsk-content-card-bg, rgba(255, 255, 255, 0.96));
  border: 1px solid var(--wsk-content-card-border, rgba(20, 18, 12, 0.08));
  border-radius: var(--wsk-content-card-radius, 12px);
  box-shadow: 0 1px 3px rgba(20, 18, 12, 0.02);
}

/* Layer C — Phase 6.1 Sidebar Widget System (Codex spec, 2026-05-22):
 * "all sidebar widgets must share one luxury visual language."
 * Many content sections add their own padding + background via
 * `data-wepro-bg="neutral"` (author_meister, contact_card, etc.) — when
 * rendered inside a `.wcl-sidebar-stack` wrapper that ALREADY provides the
 * card chrome (padding + bg + border + radius from Layer A above), the
 * inner bg-neutral rule double-pads and competes for surface color.
 * Strip the inner chrome so the OUTER sidebar wrapper is the only frame.
 * This unifies every sidebar widget under one consistent luxury system. */
.wcl-sidebar-stack > .wcl-section .wepro-content-section,
.wcl-sidebar-stack > .wcl-section .wepro-content-section[data-wepro-bg],
.wcl-sidebar-stack > .wcl-section .wepro-content-section[data-wepro-radius] {
  background: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

/* Layer B — inner-widget normalization to prevent double-frame */
.wcl-sidebar-stack > .wcl-section .wcl-pricing-card {
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.wcl-sidebar-stack > .wcl-section .wch-expert-box {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.wcl-sidebar-stack > .wcl-section .wch-expert-box__inner {
  padding: 0;
}
/* Compact author portrait in sidebar (overrides earlier 88px tightening) */
.wcl-sidebar-stack > .wcl-section .wch-expert-box__photo img {
  max-width: 64px;
  height: auto;
}

/* Vertical rhythm between cards stays controlled by .wcl-sidebar-stack
 * own `gap` (set in the Phase 5.2 block — var(--wsk-content-sidebar-gap)). */

/* ── Fix 14: Editorial H2/H3 baseline (restrained, not luxury) ──────────
 *
 * Scoped INSIDE `.wcl-main-stack`, `.wsk-wepro-content__body`,
 * `.wepro-content-section` only — Avada theme typography stays untouched.
 * Smaller than current site defaults, better vertical spacing, optional
 * thin accent line on H2 only.
 */
@media (min-width: 768px) {
  .wcl-main-stack h2,
  .wsk-wepro-content__body h2,
  .wepro-content-section h2 {
    font-size: clamp(1.6rem, 2.2vw, 2rem);
    line-height: 1.25;
    margin: 1.8em 0 0.5em;
    font-weight: 600;
  }
  .wcl-main-stack h3,
  .wsk-wepro-content__body h3,
  .wepro-content-section h3 {
    font-size: clamp(1.25rem, 1.6vw, 1.45rem);
    line-height: 1.3;
    margin: 1.4em 0 0.4em;
    font-weight: 600;
  }
  /* Thin accent line ONLY on H2 in the post body (skip section headings
   * that already have their own eyebrow chrome to avoid double accent). */
  .wcl-section--post-body h2,
  .wsk-wepro-content__body h2 {
    border-left: 2px solid var(--wdt-color-accent, var(--awb-color-4, #b89968));
    padding-left: 0.6em;
  }
  /* First heading inside the body shouldn't push the 1.8em top margin
   * (it would create a visible gap between body start and first H2). */
  .wcl-section--post-body > *:first-child,
  .wsk-wepro-content__body > *:first-child {
    margin-top: 0;
  }
}

/* ── Fix 15: Comparison table desktop polish ────────────────────────────
 *
 * Desktop matrix: thinner separators, lighter accent, slightly tighter
 * cells. Mobile stacked cards (Phase 5.3) unchanged.
 */
@media (min-width: 768px) {
  .wepro-content-section--comparison_table__table {
    /* Slightly narrower min-width so it fits the 2-col main column without
     * triggering the horizontal-scroll affordance just below desktop. */
    min-width: 480px;
  }
  .wepro-content-section--comparison_table__table th,
  .wepro-content-section--comparison_table__table td {
    /* Tighter cells for elegant density */
    padding: 12px 14px;
    border-bottom: 1px solid rgba(20, 18, 12, 0.05);
  }
  .wepro-content-section--comparison_table__table thead th {
    /* Softer accent under the header row — eyebrow style without shouting */
    border-bottom: 1px solid var(--wdt-color-accent-soft, rgba(184, 153, 104, 0.4));
    padding-bottom: 10px;
  }
  .wepro-content-section--comparison_table__table tbody tr:first-child td,
  .wepro-content-section--comparison_table__table tbody tr:first-child th {
    padding-top: 14px;
  }
}

/* =============================================================================
 * Phase 6.0b — Pre-ship visual cleanup (2026-05-22)
 *
 * After browser review:
 *   - Floating weprocta-ww WhatsApp widget overlapped sidebar links + content
 *     → add safe-area bottom padding on .wcl-layout so content never sits
 *       inside the widget's viewport zone
 *   - Raw .wpd-cta-block inline HTML (26 author-pasted blocks across the
 *     site) lacked responsive guards / professional spacing → normalize via
 *     scoped CSS without touching the author-typed inline styles (which we
 *     can't safely strip post-bulk-edit)
 *   - Border-overflow guard: box-sizing + max-width on every card/section
 *     descendant so nested wch-* / weprocta-* inner styles can't escape
 *     their container
 *   - Sidebar polish pass: tighter author portrait, no double frame on
 *     hours / contact / pricing
 * ========================================================================== */

/* ── Floating widget safe-area clearance ──────────────────────────────
 * weprocta-ww (WhatsApp bubble) is position:fixed at bottom-right of the
 * viewport. Without clearance, sidebar/main last cards can sit underneath
 * it. Padding the .wcl-layout bottom pushes content above the widget zone
 * uniformly across all CPTs. */
.wcl-layout {
  padding-block-end: clamp(96px, 12vh, 144px);
}
@media (max-width: 767px) {
  .wcl-layout {
    /* Mobile widget is smaller (~4.5em → ~72px). Padding can shrink too. */
    padding-block-end: clamp(80px, 10vh, 112px);
  }
}

/* ── Raw .wpd-cta-block normalization ──────────────────────────────────
 * 26 author-pasted blocks across the site use the same inline-styled
 * pattern:
 *   <div class="wpd-cta-block" style="margin:32px 0 24px;padding:24px;
 *      background:#f8f8f8;border:1px solid #e2e2e2"> ... </div>
 *
 * The inline styles can't be stripped without rewriting 26 posts (out of
 * scope). Use scoped CSS to neutralize the harshest parts AND add
 * responsive / button-wrap guards. !important is required to beat the
 * inline style attributes (since they're more specific than any selector).
 * Phase 6.1 design pass can replace these blocks with native weprocta CTA
 * elements; this rule keeps them legible in the meantime. */
.wepro-content-section .wpd-cta-block,
.wcl-section--post-body .wpd-cta-block,
.wsk-wepro-content__body .wpd-cta-block {
  background: var(--wsk-cta-soft-bg, rgba(247, 247, 245, 0.6)) !important;
  border: 1px solid var(--wsk-cta-soft-border, rgba(20, 18, 12, 0.08)) !important;
  border-radius: var(--wsk-content-card-radius, 12px) !important;
  padding: clamp(16px, 2vw, 22px) !important;
  margin: clamp(20px, 3vw, 28px) 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
  overflow: hidden;
}
.wepro-content-section .wpd-cta-block * {
  max-width: 100%;
  box-sizing: border-box;
}
/* Inline anchors / buttons inside the CTA blocks: wrap on mobile so they
 * don't overflow the card horizontally */
.wepro-content-section .wpd-cta-block a,
.wcl-section--post-body .wpd-cta-block a {
  overflow-wrap: anywhere;
  word-break: normal;
}
/* If an editor used inline color (e.g. harsh red/pink button), soften via
 * a hover safety net but DON'T override the editor's intent for emergency
 * CTAs — only attenuate when no link role is present (= decorative box) */
.wepro-content-section .wpd-cta-block > p:first-child {
  margin-top: 0 !important;
}
.wepro-content-section .wpd-cta-block > p:last-child {
  margin-bottom: 0 !important;
}

/* ── Border-overflow guard for every section/card descendant ───────────
 * Defends against nested wch-* / weprocta-* / vstt-* widgets emitting a
 * child element with width:Npx that escapes a narrow sidebar card. */
.wcl-section,
.wcl-section *,
.wcl-sidebar-stack,
.wcl-sidebar-stack * {
  box-sizing: border-box;
  max-width: 100%;
}
.wcl-section img,
.wcl-section video,
.wcl-section iframe,
.wcl-section svg {
  height: auto;
}

/* ── Sidebar polish: ensure all cards align to same edge ───────────────
 * Outer frame from Phase 6.0 already sets padding/border/radius; this
 * adds an explicit width:100% on every direct article child so they all
 * occupy the same column width regardless of inner content (e.g. an
 * inner widget that defaults to width:auto wouldn't stretch). */
.wcl-sidebar-stack > .wcl-section {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── Mobile final responsive guard: prevent layout from forcing a
 * horizontal scroll if any descendant overflows ─────────────────────── */
@media (max-width: 767px) {
  .wcl-layout,
  .wcl-main-stack,
  .wcl-sidebar-stack {
    overflow-x: clip;
  }
}

/* ─────────────────────────────────────────────────────────────────
 * Phase 6.0c (post-browser-review refinements, 2026-05-22)
 *
 * Browser pass turned up four follow-ups not visible to curl:
 *   (1) author/expert card bottom gap was huge (52px+) because
 *       .wch-expert-box defaults `margin: 2rem 0` and Phase 6.0
 *       only null'd its padding, not its margin
 *   (2) comparison table thead border extended past the right edge
 *       on desktop (per-th border-bottom + col padding artefact)
 *   (3) /vergleiche/ body prose ("Kurzantwort: Floatglas …") looked
 *       orphaned next to the structured comparison_table section —
 *       no chrome, just naked paragraph text
 *   (4) Hub expert-box internal margins added more vertical air
 *       between name/title/profile-link than necessary in sidebar
 * ───────────────────────────────────────────────────────────────── */

/* (1) + (4) — Hub expert-box density in sidebar context
 * Phase 6.0 null'd padding + border + background. Now also null the
 * outer 2rem margin (the visible bottom-of-card gap) and tighten the
 * internal name/title/profile-link rhythm. Keeps the card readable
 * but removes the floating-in-empty-space look from the screenshot. */
.wcl-sidebar-stack > .wcl-section .wch-expert-box {
  margin: 0;
}
.wcl-sidebar-stack > .wcl-section .wch-expert-box__bio,
.wcl-sidebar-stack > .wcl-section .wch-expert-box__contact {
  margin-top: 0.5rem;
}
.wcl-sidebar-stack > .wcl-section .wch-expert-box__profile-link {
  margin: 0.75rem 0 0;
  padding-bottom: 0;
}
.wcl-sidebar-stack > .wcl-section .wch-expert-box__title {
  margin-top: 0.15rem;
}
/* Inner sep line directly above profile-link can be tight too */
.wcl-sidebar-stack > .wcl-section .wch-expert-box__sep {
  margin: 0.6rem 0;
}

/* (2) — Comparison table thead border: move the gold accent to a
 * single bottom border on the FIRST tbody row instead of per-th, so
 * the line aligns to the table's natural inside-edge instead of
 * extending past the last column cell's right padding. */
.wepro-content-section--comparison_table__table thead th {
  border-bottom: 0; /* Cancel Phase 6.0 per-th rule that bled out */
}
.wepro-content-section--comparison_table__table tbody tr:first-child td,
.wepro-content-section--comparison_table__table tbody tr:first-child th {
  border-top: 1px solid var(--wdt-color-accent-soft, rgba(184, 153, 104, 0.4));
}

/* ─────────────────────────────────────────────────────────────────
 * Phase 6.1.0 — Sidebar rail editorial / Awwwards luxury pass
 * (2026-05-22, post-1.11.0 polish, user-confirmed scope)
 *
 * Promotes the sidebar from utility-grade Phase 6.0 baseline to a
 * coherent editorial trust rail. Applies to all 4 typical sidebar
 * cards as one family:
 *   1. .wepro-content-section--key_facts    (label/value rows)
 *   2. .wch-expert-box                       (author/Meister)
 *   3. .wch-contact                          (phone/email/whatsapp/address)
 *   4. .wcl-pricing-card                     (PREIS + value)
 *
 * Design vocabulary:
 *   - Hairline dividers between rows (rgba(20,18,12,0.06))
 *   - Generous whitespace
 *   - Uppercase tracked eyebrows (11px / .12em)
 *   - Gold accent strictly on icons + eyebrow underlines + link arrows
 *   - Refined typographic hierarchy per card
 *   - No box shadow on individual cards (the outer .wcl-section frame
 *     from Phase 6.0 already carries the surface treatment)
 *
 * Mobile preserves the same family (single-column stack).
 * ───────────────────────────────────────────────────────────────── */

/* Outer rail rhythm — refine the Phase 6.0 baseline */
.wcl-sidebar-stack > .wcl-section {
  padding: clamp(22px, 2.4vw, 28px);
  background: var(--wsk-content-card-bg, #ffffff);
  border: 1px solid rgba(20, 18, 12, 0.07);
  border-radius: 14px;
  box-shadow: none;
}

/* ── Shared eyebrow pattern (re-used by all 4 cards) ─────────────── */
.wcl-sidebar-stack .wepro-content-section--key_facts > .wepro-content-section--key_facts__title,
.wcl-sidebar-stack .wch-expert-box__label,
.wcl-sidebar-stack .wcl-pricing-card__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wdt-color-text-secondary, var(--awb-color-7, #6b6864));
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--wdt-color-accent, var(--awb-color-4, #b89968));
}

/* ── (1) KeyFactsSection — refined label/value rows ──────────────── */
.wcl-sidebar-stack .wepro-content-section--key_facts__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(20, 18, 12, 0.06);
}
.wcl-sidebar-stack .wepro-content-section--key_facts__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.wcl-sidebar-stack .wepro-content-section--key_facts__item:first-of-type {
  padding-top: 0;
}
.wcl-sidebar-stack .wepro-content-section--key_facts__label {
  font-size: 14px;
  font-weight: 400;
  color: var(--wdt-color-text, #1a1a1a);
  flex-shrink: 0;
}
.wcl-sidebar-stack .wepro-content-section--key_facts__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--wdt-color-text, #1a1a1a);
  text-align: right;
  overflow-wrap: anywhere;
}

/* ── (2) Hub expert-box — Meister card with refined hierarchy ────── */
.wcl-sidebar-stack .wch-expert-box__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}
.wcl-sidebar-stack .wch-expert-box__photo {
  margin: 0 0 18px;
}
.wcl-sidebar-stack .wch-expert-box__photo img {
  width: 84px;
  height: 84px;
  max-width: 84px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(0.15) contrast(1.02);
}
.wcl-sidebar-stack .wch-expert-box__info {
  width: 100%;
}
/* The eyebrow ("IHR GLASERMEISTER IN BERLIN") inherits the shared pattern */
.wcl-sidebar-stack .wch-expert-box__name,
.wcl-sidebar-stack a.wch-expert-box__name {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--wdt-color-text, #1a1a1a);
  text-decoration: none;
  margin: 0;
  line-height: 1.3;
}
.wcl-sidebar-stack a.wch-expert-box__name:hover {
  color: var(--wdt-color-accent, var(--awb-color-4, #b89968));
}
.wcl-sidebar-stack .wch-expert-box__title {
  font-size: 13px;
  font-style: italic;
  color: var(--wdt-color-text-secondary, var(--awb-color-7, #6b6864));
  margin: 4px 0 0;
}
.wcl-sidebar-stack .wch-expert-box__sep {
  width: 32px;
  height: 1px;
  border: 0;
  background: var(--wdt-color-accent, var(--awb-color-4, #b89968));
  margin: 18px auto;
  opacity: 0.6;
}
.wcl-sidebar-stack .wch-expert-box__profile-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--wdt-color-accent, var(--awb-color-4, #b89968));
  text-decoration: none;
  margin: 0;
  padding: 0;
  border: 0;
  transition: gap 0.2s ease, color 0.2s ease;
}
.wcl-sidebar-stack .wch-expert-box__profile-link:hover {
  gap: 10px;
  color: var(--wdt-color-accent-deep, var(--awb-color-5, #8e7437));
}

/* ── (3) Hub contact — phone/email/whatsapp/address row stack ────── */
.wcl-sidebar-stack .wch-contact {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
.wcl-sidebar-stack .wch-contact__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(20, 18, 12, 0.06);
  font-size: 14px;
  line-height: 1.45;
  color: var(--wdt-color-text, #1a1a1a);
}
.wcl-sidebar-stack .wch-contact__item:first-child {
  padding-top: 0;
}
.wcl-sidebar-stack .wch-contact__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.wcl-sidebar-stack .wch-contact__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--wdt-color-accent, var(--awb-color-4, #b89968));
  opacity: 0.85;
}
.wcl-sidebar-stack .wch-contact__item a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 18, 12, 0.12);
  padding-bottom: 1px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.wcl-sidebar-stack .wch-contact__item a:hover {
  color: var(--wdt-color-accent, var(--awb-color-4, #b89968));
  border-bottom-color: var(--wdt-color-accent, var(--awb-color-4, #b89968));
}
/* Address — multi-line, no underline (it's not a link target by default) */
.wcl-sidebar-stack .wch-contact__item--address {
  align-items: flex-start;
}

/* ── (4) Pricing card — eyebrow + display value ──────────────────── */
.wcl-sidebar-stack .wcl-pricing-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
.wcl-sidebar-stack .wcl-pricing-card__value {
  display: block;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--wdt-color-text, #1a1a1a);
}
.wcl-sidebar-stack .wcl-pricing-card__value a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--wdt-color-accent, var(--awb-color-4, #b89968));
  padding-bottom: 2px;
  transition: color 0.2s ease;
}
.wcl-sidebar-stack .wcl-pricing-card__value a:hover {
  color: var(--wdt-color-accent, var(--awb-color-4, #b89968));
}

/* ── Mobile: same family, no sticky, full-width cards ────────────── */
@media (max-width: 1023.98px) {
  .wcl-sidebar-stack > .wcl-section {
    padding: clamp(20px, 4vw, 24px);
  }
}

/* ─────────────────────────────────────────────────────────────────
 * Phase 6.1.0a — Mobile padding tightening (2026-05-22)
 *
 * User browser-flagged on mobile (~390px viewport): body card had
 * ~80px+ of side eat (layout 40px + body card 40px), leaving body
 * text columns squished to ~310px. HowTo step cards even tighter
 * (~64px left for numbered circle + 20px right + 80px layer = 164px
 * eat → ~226px text). Numbered circle felt oversized for small
 * viewport. Tightens uniformly across all card-bearing surfaces.
 *
 * Two breakpoints: 767px (general mobile) + 480px (true small mobile).
 * 70ch reading max-width on body content uncapped on mobile so the
 * available width is actually used.
 * ───────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Layout itself — no inline padding (Avada column owns the gutter).
   * Removed 2026-05-24 (v1.15.1). */
  /* Body chrome cards (post-body + service_details) — tighter padding */
  .wcl-section.wcl-section--post-body,
  .wcl-section.wcl-section--service_details {
    padding: clamp(14px, 3vw, 18px);
  }
  /* Body inner: uncap 70ch reading max-width — let mobile use full width */
  .wcl-section.wcl-section--post-body .wsk-wepro-content__body,
  .wcl-section.wcl-section--service_details .wepro-content-section--service_details {
    max-width: none;
  }
  /* Sidebar cards — tighter padding (4 sidebar card variants share this) */
  .wcl-sidebar-stack > .wcl-section {
    padding: clamp(16px, 3.5vw, 20px);
  }
  /* HowTo step cards — Phase 6.1.0c (2026-05-22, user-chosen "inline
   * with title only" pattern): drop the 46px left carve-out; instead
   * float the numbered circle into the upper-left of the card and let
   * the title wrap to its right. Body text gets `clear: left` so it
   * always starts BELOW the floated circle and uses the full card
   * width. Net effect: ~30px reading-width gain on every body line. */
  .wepro-content-section--howto_steps__item {
    padding: clamp(14px, 3vw, 18px);
  }
  .wepro-content-section--howto_steps__item::before {
    position: static;
    float: left;
    margin: 3px 10px 0 0;
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .wepro-content-section--howto_steps__name {
    /* Title wraps to the right of the floated circle on first line(s),
     * extends to full width if it overruns the circle's height. */
    margin-top: 0;
  }
  .wepro-content-section--howto_steps__text {
    /* Body always clears the float — full card width. */
    clear: left;
    margin-top: 8px;
  }
}

@media (max-width: 480px) {
  /* True small mobile — final tightening pass for cramped viewports.
   * .wcl-layout no longer carries inline padding (Avada column handles it).
   * Removed 2026-05-24 (v1.15.1). */
  .wcl-section.wcl-section--post-body,
  .wcl-section.wcl-section--service_details {
    padding: 14px;
  }
  .wcl-sidebar-stack > .wcl-section {
    padding: 16px;
  }
  .wepro-content-section--howto_steps__item {
    padding: 14px;
  }
  .wepro-content-section--howto_steps__item::before {
    margin-right: 8px;
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
}

/* Phase 6.1.0d (.wpd-cta-block editorial-soft mobile) was REVERTED before
 * 1.11.1 ship per user directive: starter-kit should not CSS-override
 * author-pasted manual content (the .wpd-cta-block instances are author-
 * authored, not starter-kit-generated). Per-article CTA disposition is
 * tracked as Phase 6.1 backlog item #3 — handled at the content layer
 * (or via a future dedicated WEPRO CTA section), not as a blanket CSS
 * override from this plugin. */

/* (3) — Body prose chrome on body-providing sections
 * Without this rule the body article is naked paragraphs with no surface
 * treatment, while every neighboring WEPRO section sits inside a card.
 * Adds the same soft surface used by the pricing/sidebar cards so the
 * body reads as part of the same family. Editorial body keeps a generous
 * internal max-width for reading line-length.
 *
 * Targets BOTH variants of body delivery:
 *   - .wcl-section--post-body : virtual section for article/faq/education/
 *     comparison/term/about CPTs (no body-provider section)
 *   - .wcl-section--service_details : the body-provider for service /
 *     wpd_product where ServiceDetailsSection renders the post body
 *
 * Phase 6.1 may swap the surface for the luxury palette. */
.wcl-section.wcl-section--post-body,
.wcl-section.wcl-section--service_details {
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--wsk-content-card-bg, rgba(255, 255, 255, 0.96));
  border: 1px solid var(--wsk-content-card-border, rgba(20, 18, 12, 0.08));
  border-radius: var(--wsk-content-card-radius, 12px);
  box-shadow: 0 1px 3px rgba(20, 18, 12, 0.02);
}
.wcl-section.wcl-section--post-body .wsk-wepro-content__body,
.wcl-section.wcl-section--service_details .wepro-content-section--service_details {
  max-width: 70ch;
  margin-inline: auto;
}

/* Body H2/H3 accent on BOTH body-delivery variants — Phase 6.0 originally
 * only targeted .wcl-section--post-body H2, leaving service / wpd_product
 * headings without the gold-accent treatment. Extend to service_details
 * so headings inside the service body get the same vertical accent line. */
@media (min-width: 768px) {
  .wcl-section--post-body h2,
  .wcl-section--service_details h2,
  .wsk-wepro-content__body h2,
  .wepro-content-section--service_details__full h2 {
    border-left: 2px solid var(--wdt-color-accent, var(--awb-color-4, #b89968));
    padding-left: 0.6em;
  }
  .wcl-section--post-body > *:first-child,
  .wcl-section--service_details > *:first-child,
  .wsk-wepro-content__body > *:first-child,
  .wepro-content-section--service_details__full > *:first-child {
    margin-top: 0;
  }
}

/* =============================================================================
 * QUOTE CTA — Phase 6.2 v1.5 (2026-05-22) — Sidebar widget rail vocabulary
 * Belongs to the sidebar luxury rail family (same chrome as Author, Hours,
 * Contact, Pricing cards). Slightly slimmer per Codex spec but visually one
 * with the rail: same surface + border + radius, sans-serif uppercase
 * tracked label, gold hairline underline + gold arrow as the action accents.
 * No serif italic, no border-only "magazine block" — the card chrome IS the
 * frame.
 * ========================================================================== */

/* Card chrome is inherited from .wcl-sidebar-stack > .wcl-section base
 * (clamp 16-20px padding on mobile, 22-28px desktop, 14px radius, hairline
 * border, neutral surface). We just tighten padding slightly — Codex spec
 * allows "slimmer but must belong". */
.wcl-section.wcl-section--quote_cta {
  /* Override only padding — keep all other sidebar-card chrome (border,
   * radius, surface, no shadow). Slimmer = action element, but still in
   * the same family. */
  padding: clamp(16px, 2vw, 20px);
}

.wsk-quote-cta {
  display: block;
}

.wsk-quote-cta__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;

  /* Sans-serif uppercase tracked — same family as sidebar Author name + the
   * other sidebar widget labels. NO serif, NO italic (Codex spec). */
  font-family: inherit;
  font-size: 0.8125rem;             /* 13px — same scale as Author title */
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--wdt-color-text, var(--awb-color-8, #14120c)) !important;
  text-decoration: none !important;
  cursor: pointer;
}

/* Animated gold underline under the label — static at rest (signals
 * action affordance), retracts to the right on hover. Matches the
 * gold-accent system used on sidebar eyebrows and the Author profile-link. */
.wsk-quote-cta__label {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 4px;
  background-image: linear-gradient(
    var(--wdt-color-accent, #b89968),
    var(--wdt-color-accent, #b89968)
  );
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
              background-position 0s 0.5s;
}

.wsk-quote-cta__btn:hover .wsk-quote-cta__label,
.wsk-quote-cta__btn:focus-visible .wsk-quote-cta__label {
  background-size: 0% 1px;
  background-position: 100% 100%;
  transition: background-size 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              background-position 0s;
}

.wsk-quote-cta__arrow {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  align-self: center;
  color: var(--wdt-color-accent, #b89968); /* matches the underline accent */
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              color 0.4s ease;
}
.wsk-quote-cta__btn:hover .wsk-quote-cta__arrow,
.wsk-quote-cta__btn:focus-visible .wsk-quote-cta__arrow {
  transform: translateX(4px);
  color: var(--wdt-color-accent-deep, #8a6f45);
}

.wsk-quote-cta__btn:focus-visible {
  outline: 1px solid var(--wdt-color-accent, #b89968);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .wsk-quote-cta__label,
  .wsk-quote-cta__arrow { transition: none; }
}

@media (max-width: 767px) {
  .wcl-section.wcl-section--quote_cta {
    padding: clamp(14px, 3vw, 18px);
  }
  .wsk-quote-cta__btn {
    font-size: 0.75rem;             /* 12px — still legible at .16em tracking */
  }
}

/* =============================================================================
 * Phase 6.2 — three new content-section wrappers (2026-05-22)
 *   - route_map         : wraps [company_map] / [vstt_map] / [partner_route_map]
 *   - share_buttons     : wraps [wepro_share]
 *   - freshness_signal  : INTERNAL pill (ev_last_reviewed + ev_freshness_score)
 * ========================================================================== */

/* Route map — full-width container; the wrapped shortcode brings its own
 * iframe / canvas dimensions. Just ensure no horizontal overflow. */
.wepro-content-section--route_map {
  max-width: 100%;
  overflow: hidden;
}
.wepro-content-section--route_map iframe,
.wepro-content-section--route_map img,
.wepro-content-section--route_map canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Share buttons — flex row that wraps on narrow viewports so no horizontal
 * scroll appears when the share plugin emits many icons. */
.wepro-content-section--share_buttons {
  /* The wrapped [wepro_share] markup decides its own visual treatment;
   * just provide layout guard-rails. */
}
.wepro-content-section--share_buttons > * {
  max-width: 100%;
}

/* Freshness signal — compact gold-accent pill row. INTERNAL render emits
 * .wsk-freshness with .wsk-freshness__item children separated by a thin
 * mid-dot separator. */
.wsk-freshness {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--wdt-color-accent, #b89968) 5%, transparent);
  border: 1px solid var(--wdt-color-border, rgba(184, 153, 104, 0.25));
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--wdt-color-text-secondary, var(--awb-color-7, #4a4843));
}
.wsk-freshness__item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.wsk-freshness__label {
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  color: var(--wdt-color-accent-deep, var(--awb-color-5, #8a6f45));
}
.wsk-freshness__value {
  font-weight: 600;
  color: var(--wdt-color-text, var(--awb-color-8, #14120c));
  font-variant-numeric: tabular-nums;
}
.wsk-freshness__sep {
  color: var(--wdt-color-border, rgba(184, 153, 104, 0.4));
  font-weight: 400;
  align-self: center;
}

@media (max-width: 480px) {
  .wsk-freshness {
    padding: 7px 12px;
    font-size: 0.75rem;
    gap: 6px 10px;
  }
  .wsk-freshness__label {
    font-size: 0.625rem;
  }
}