/*
 * CTA — block style for core/group (call-to-action band).
 * Reuse unit: block style. Consumes ONLY token CSS vars (no raw hex/px).
 *
 * A full-width solid-colour band: centred heading + lead copy + buttons.
 * No photo — use the Hero for photo backgrounds.
 *
 * Two variants:
 *   wpdl-cta-brand  — brand green bg, light text (primary CTA on light pages)
 *   wpdl-cta-dark   — near-black bg, off-white text (high-contrast closing section)
 *
 * Ordering: base → brand variant → dark variant → inner layout →
 *           typography → button overrides → states.
 *
 * Tokens read:
 *   semantic.color.bg.brand / inverse · semantic.color.text.inverse
 *   semantic.color.border.brand · semantic.color.interactive.focus
 *   semantic.typography.heading-2.* · semantic.typography.body.*
 *   space.7 / space.13 · duration.base · easing.default
 */

/* --- Base ----------------------------------------------------------------- */

.wp-block-group.is-style-wpdl-cta-brand,
.wp-block-group.is-style-wpdl-cta-dark {
  padding-inline: var(--wp--custom--space--7);
  text-align: center;

  /* Vertical padding is buyer-editable via the Dimensions "Spacious" preset
     (spacingSizes 70) applied in the pattern markup — not hardcoded here. */
}

/* Background for both variants is set in block attribute (Section Ownership Rule). */

/* --- Inner container ------------------------------------------------------- */

.wp-block-group.is-style-wpdl-cta-brand > *,
.wp-block-group.is-style-wpdl-cta-dark > * {
  max-inline-size: 44rem;
  margin-inline: auto;
}

/* --- Heading --------------------------------------------------------------- */

.wp-block-group.is-style-wpdl-cta-brand > .wp-block-heading,
.wp-block-group.is-style-wpdl-cta-dark > .wp-block-heading {
  font-family: var(--wp--custom--semantic--typography--heading-2--font-family);
  font-size: var(--wp--custom--semantic--typography--heading-2--font-size);
  font-weight: var(--wp--custom--semantic--typography--heading-2--font-weight);
  line-height: var(--wp--custom--semantic--typography--heading-2--line-height);
  letter-spacing: var(--wp--custom--semantic--typography--heading-2--letter-spacing);
  color: var(--wp--custom--semantic--color--text--inverse);
  margin-block: 0 var(--wp--custom--space--4);
}

/* --- Lead copy ------------------------------------------------------------- */

.wp-block-group.is-style-wpdl-cta-brand > .wp-block-paragraph,
.wp-block-group.is-style-wpdl-cta-dark > .wp-block-paragraph {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: var(--wp--custom--semantic--typography--body--font-size);
  font-weight: var(--wp--custom--semantic--typography--body--font-weight);
  line-height: var(--wp--custom--semantic--typography--body--line-height);
  color: var(--wp--custom--semantic--color--text--inverse);
  opacity: 0.85;
  margin-block: 0 var(--wp--custom--space--7);
}

/* --- Buttons row ----------------------------------------------------------- */

.wp-block-group.is-style-wpdl-cta-brand > .wp-block-buttons,
.wp-block-group.is-style-wpdl-cta-dark > .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--custom--space--4);
  justify-content: center;
}

/* Ghost button inside a dark/brand band needs white text — override token. */
.wp-block-group.is-style-wpdl-cta-brand > .wp-block-buttons .wp-block-button.is-style-wpdl-ghost > .wp-block-button__link,
.wp-block-group.is-style-wpdl-cta-dark > .wp-block-buttons .wp-block-button.is-style-wpdl-ghost > .wp-block-button__link {
  color: var(--wp--custom--semantic--color--text--inverse);
  opacity: 0.8;
}

.wp-block-group.is-style-wpdl-cta-brand > .wp-block-buttons .wp-block-button.is-style-wpdl-ghost > .wp-block-button__link:hover,
.wp-block-group.is-style-wpdl-cta-dark > .wp-block-buttons .wp-block-button.is-style-wpdl-ghost > .wp-block-button__link:hover {
  opacity: 1;
}

/* --- Focus ring ------------------------------------------------------------ */

.wp-block-group.is-style-wpdl-cta-brand :focus-visible,
.wp-block-group.is-style-wpdl-cta-dark :focus-visible {
  outline: 0.1875rem solid var(--wp--custom--semantic--color--focus--ring);
  outline-offset: 0.125rem;
}