/*
 * FMM StoryBrand section patterns. Structure only.
 *
 * Every colour comes from the coach's palette through the token bridge
 * (--color-*) with a fallback to the raw Nexter slot (--nxt-global-color-N)
 * and finally a neutral. There is deliberately no brand hue anywhere in this
 * file, so the palette-swap test must show zero residue.
 *
 * Slot contract (Nexter Global Color Palette, set on day 1 of the challenge):
 *   1 primary        headline accent on the dark ground
 *   2 secondary      ink; text on primary/accent buttons
 *   3 accent         button fill
 *   4 accent_on_light accent that passes contrast on paper
 *   5 ground         page background
 *   6 surface        raised cards / alternate section
 *   7 text           body text on the ground
 *   8 paper          light surface / text on accent
 */

.fmm-sb {
  --sb-primary: var(--color-primary, var(--nxt-global-color-1, #2b2b2b));
  --sb-ink:     var(--color-secondary, var(--nxt-global-color-2, #111111));
  --sb-accent:  var(--color-accent, var(--nxt-global-color-3, #2b2b2b));
  --sb-accent-on-light: var(--color-on-light, var(--nxt-global-color-4, #2b2b2b));
  --sb-ground:  var(--color-dark, var(--nxt-global-color-5, #ffffff));
  --sb-surface: var(--color-light, var(--nxt-global-color-6, #f4f4f4));
  --sb-text:    var(--color-text, var(--nxt-global-color-7, #222222));
  --sb-paper:   var(--nxt-global-color-8, #ffffff);
  --sb-py:      var(--section-py, 4.5rem);
  --sb-gap:     var(--space-6, 1.5rem);
  --sb-radius:  var(--radius-lg, 6px);
  --sb-measure: 62ch;

  padding: var(--sb-py) var(--container-px, 1.5rem);
  background: var(--sb-ground);
  color: var(--sb-text);
  position: relative;
}
.fmm-sb.fmm-sb--surface { background: var(--sb-surface); }
.fmm-sb.fmm-sb--paper   { background: var(--sb-paper); color: var(--sb-ink); }
.fmm-sb.fmm-sb--paper .fmm-sb__title { color: var(--sb-ink); }
.fmm-sb.fmm-sb--paper .fmm-sb__eyebrow { color: var(--sb-accent-on-light); }

/* constrained groups centre themselves; keep the measure sane inside */
.fmm-sb > .wp-block-group,
.fmm-sb > * { max-width: var(--container-max, 1200px); margin-left: auto; margin-right: auto; }

.fmm-sb__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sb-primary);
  margin: 0 0 var(--space-3, 0.75rem);
}
.fmm-sb__title {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  margin: 0 0 var(--space-5, 1.25rem);
  color: var(--sb-text);
}
.fmm-sb-header .fmm-sb__title { font-size: clamp(2.5rem, 6vw, 4.5rem); }
.fmm-sb__title em { font-style: normal; color: var(--sb-primary); }
.fmm-sb__lead {
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: var(--sb-measure);
  margin: 0 0 var(--space-8, 2rem);
}
.fmm-sb--center { text-align: center; }
.fmm-sb--center .fmm-sb__lead,
.fmm-sb--center .fmm-sb__title { margin-left: auto; margin-right: auto; }

/* buttons: core/buttons, no colour literals */
.fmm-sb .wp-block-buttons { gap: var(--space-4, 1rem); }
.fmm-sb .wp-block-button__link {
  background: var(--sb-accent);
  color: var(--sb-ink);
  border: 2px solid var(--sb-accent);
  border-radius: var(--sb-radius);
  padding: 0.9rem 1.6rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
}
.fmm-sb .wp-block-button__link:hover { transform: translateY(-1px); filter: brightness(1.08); }
.fmm-sb .wp-block-button.is-style-outline .wp-block-button__link,
.fmm-sb .fmm-sb__btn-secondary .wp-block-button__link {
  background: transparent;
  color: var(--sb-text);
  border-color: currentColor;
}
.fmm-sb--paper .wp-block-button.is-style-outline .wp-block-button__link,
.fmm-sb--paper .fmm-sb__btn-secondary .wp-block-button__link { color: var(--sb-ink); }
.fmm-sb__transitional { margin-top: var(--space-4, 1rem); }
.fmm-sb__transitional a { color: var(--sb-primary); text-underline-offset: 3px; }
.fmm-sb--paper .fmm-sb__transitional a { color: var(--sb-accent-on-light); }

/* value stack (header) and 3-up cards */
.fmm-sb__value-stack { margin-top: var(--space-8, 2rem); }
.fmm-sb__value-item {
  padding-left: 1.75rem;
  position: relative;
  font-weight: 600;
}
.fmm-sb__value-item::before {
  content: "";
  position: absolute; left: 0; top: 0.35em;
  width: 0.55em; height: 0.9em;
  border-right: 3px solid var(--sb-primary);
  border-bottom: 3px solid var(--sb-primary);
  transform: rotate(45deg) translate(-2px, -2px);
}
.fmm-sb--paper .fmm-sb__value-item::before { border-color: var(--sb-accent-on-light); }

.fmm-sb__cards { margin-top: var(--space-8, 2rem); }
.fmm-sb__card {
  background: var(--sb-surface);
  border: 1px solid color-mix(in srgb, var(--sb-text) 12%, transparent);
  border-radius: var(--sb-radius);
  padding: var(--space-8, 2rem);
  height: 100%;
}
.fmm-sb--surface .fmm-sb__card { background: var(--sb-ground); }
.fmm-sb--paper .fmm-sb__card { background: var(--sb-paper); color: var(--sb-ink); }
.fmm-sb__card h3 { margin: 0 0 var(--space-3, 0.75rem); font-size: 1.3rem; }
.fmm-sb__card p { margin: 0; }

/* stakes */
.fmm-sb-stakes .fmm-sb__lead { font-size: 1.2rem; }
.fmm-sb__stakes-list { max-width: var(--sb-measure); padding-left: 1.25rem; margin: 0 0 var(--space-8, 2rem); }
.fmm-sb__stakes-list li { margin-bottom: var(--space-3, 0.75rem); }
.fmm-sb__stakes-list li::marker { color: var(--sb-primary); }

/* guide: statement left, proof right */
.fmm-sb__proof { list-style: none; padding: 0; margin: 0; }
.fmm-sb__proof li {
  padding: var(--space-4, 1rem) 0;
  border-top: 1px solid color-mix(in srgb, var(--sb-text) 15%, transparent);
  font-weight: 600;
}
.fmm-sb__proof li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--sb-text) 15%, transparent); }

/* plan: numbered steps via counters */
.fmm-sb__steps { counter-reset: fmm-step; margin-top: var(--space-8, 2rem); }
.fmm-sb__step { counter-increment: fmm-step; }
.fmm-sb__step h3::before {
  content: counter(fmm-step, decimal-leading-zero);
  display: block;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--sb-primary);
  margin-bottom: var(--space-3, 0.75rem);
}
.fmm-sb--paper .fmm-sb__step h3::before { color: var(--sb-accent-on-light); }

/* explanatory paragraph */
.fmm-sb-explanatory .fmm-sb__body { max-width: var(--sb-measure); font-size: 1.05rem; line-height: 1.75; }
.fmm-sb-explanatory .fmm-sb__body p { margin: 0 0 var(--space-5, 1.25rem); }

/* lead generator */
.fmm-sb__lead-cover {
  aspect-ratio: 3 / 4;
  max-width: 320px;
  display: flex; align-items: flex-end;
  padding: var(--space-6, 1.5rem);
  border-radius: var(--sb-radius);
  background: var(--sb-surface);
  border: 1px solid color-mix(in srgb, var(--sb-text) 12%, transparent);
  box-shadow: 0 20px 40px -20px color-mix(in srgb, var(--sb-ink) 60%, transparent);
}
.fmm-sb__lead-cover h3 { margin: 0; font-size: 1.6rem; line-height: 1.1; }
.fmm-sb--paper .fmm-sb__lead-cover { background: var(--sb-ground); color: var(--sb-text); }

/* responsive */
@media (max-width: 781px) {
  .fmm-sb { --sb-py: var(--section-py-md, 3.5rem); }
  .fmm-sb-header .fmm-sb__title { font-size: clamp(2.2rem, 9vw, 3rem); }
}
@media (max-width: 600px) {
  .fmm-sb { --sb-py: var(--section-py-sm, 2.5rem); }
  .fmm-sb .wp-block-buttons { flex-direction: column; }
  .fmm-sb .wp-block-button, .fmm-sb .wp-block-button__link { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .fmm-sb .wp-block-button__link { transition: none; }
}