/* ============================================================
   CAMPAIGN-LAYOUTS.CSS: ARI v2 Theme
   ============================================================
   Styles for the campaign pattern sections registered in
   inc/campaign-patterns.php (Call to action, Key figures,
   Highlighted quote) and for core buttons inside campaign
   content. Loaded on single campaigns and in the campaign
   editor canvas, so sections look the same in both.

   Selectors avoid depending on .prog-body (absent in the
   editor) and are specific enough to beat the generic
   .prog-body p / a rules and core's default button style.
   Logical properties keep everything mirrored in Arabic.
   Breakpoint rules live in responsive.css.
   ============================================================ */

/* ── Buttons ───────────────────────────────────────────────── */
:where(.prog-body, .editor-styles-wrapper) .wp-block-button .wp-block-button__link {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 0;
  background: var(--ari-color-accent-strong);
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background 160ms ease;
}

:where(.prog-body, .editor-styles-wrapper) .wp-block-button .wp-block-button__link:hover,
:where(.prog-body, .editor-styles-wrapper) .wp-block-button .wp-block-button__link:focus-visible {
  background: var(--ari-color-dark, var(--ari-ink));
  color: #fff;
}

:where(.prog-body, .editor-styles-wrapper) .wp-block-button .wp-block-button__link:focus-visible {
  outline: 2px solid var(--ari-color-accent);
  outline-offset: 3px;
}

/* ── Call to action ────────────────────────────────────────── */
.wp-block-group.campaign-cta {
  margin-block: var(--ari-space-6, 2rem);
  padding: var(--ari-space-6, 2rem);
  background: var(--ari-color-surface, var(--ari-off-white));
  border-inline-start: 4px solid var(--ari-color-accent);
  border-radius: 0;
  --ari-text-accent: var(--ari-ink);
}

/* Classic themes get an extra .wp-block-group__inner-container wrapper. */
.wp-block-group.campaign-cta > :first-child,
.wp-block-group.campaign-cta > .wp-block-group__inner-container > :first-child {
  margin-block-start: 0;
}

.wp-block-group.campaign-cta > :last-child,
.wp-block-group.campaign-cta > .wp-block-group__inner-container > :last-child {
  margin-block-end: 0;
}

.wp-block-group.campaign-cta .wp-block-buttons {
  margin-block-start: var(--ari-space-4, 1rem);
}

/* ── Key figures ───────────────────────────────────────────── */
.wp-block-columns.campaign-figures {
  gap: var(--ari-space-5, 1.5rem);
  margin-block: var(--ari-space-6, 2rem);
}

.wp-block-columns.campaign-figures .wp-block-column {
  padding-block-start: var(--ari-space-3, 0.75rem);
  border-block-start: 3px solid var(--ari-color-accent);
}

.campaign-figures .campaign-figures__number {
  margin: 0 0 var(--ari-space-1, 0.25rem);
  font-family: var(--font-role-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ari-text-accent);
  text-align: start;
}

.campaign-figures .campaign-figures__label {
  margin: 0;
  font-size: var(--ari-text-sm, 0.875rem);
  line-height: 1.5;
  color: var(--ari-color-text-muted, var(--ari-warm-grey));
  text-align: start;
}

/* ── Highlighted quote ─────────────────────────────────────── */
.wp-block-quote.campaign-quote {
  margin: var(--ari-space-6, 2rem) 0;
  padding: 0;
  padding-inline-start: var(--ari-space-5, 1.5rem);
  border: 0;
  border-inline-start: 4px solid var(--ari-color-accent);
}

.wp-block-quote.campaign-quote p {
  margin: 0;
  font-family: var(--font-role-display);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ari-color-text, var(--ari-ink));
  text-align: start;
}

.wp-block-quote.campaign-quote p.campaign-quote__source {
  margin-block-start: var(--ari-space-3, 0.75rem);
  font-family: inherit;
  font-size: var(--ari-text-sm, 0.875rem);
  font-weight: 400;
  color: var(--ari-color-text-muted, var(--ari-warm-grey));
}

/* Arabic: looser leading for the large display text. */
html[lang^="ar"] .wp-block-quote.campaign-quote p {
  line-height: var(--ari-leading-h3-arabic, 1.5);
}

/* ── Campaign lead (block style "Campaign lead") ───────────── */
:where(.prog-body, .editor-styles-wrapper) .wp-block-heading.is-style-ari-lead {
  max-width: 26ch;
  margin-block: var(--ari-space-6, 2rem) var(--ari-space-4, 1rem);
  font-family: var(--font-role-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ari-ink, #1a1714);
}

:where(.prog-body, .editor-styles-wrapper) .wp-block-paragraph.is-style-ari-lead,
:where(.prog-body, .editor-styles-wrapper) p.is-style-ari-lead {
  max-width: 46ch;
  margin-block-end: var(--ari-space-7, 3rem);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.5;
  color: var(--ari-warm-grey, #605a54);
}

html[lang^="ar"] :where(.prog-body, .editor-styles-wrapper) .wp-block-heading.is-style-ari-lead {
  letter-spacing: 0;
  line-height: var(--ari-leading-h2-arabic, 1.25);
}

html[lang^="ar"] :where(.prog-body, .editor-styles-wrapper) p.is-style-ari-lead {
  line-height: var(--ari-leading-body-arabic, 1.8);
}

/* ── Campaign section rhythm ───────────────────────────────── */
/* One heading size for every section, whichever block draws it. */
.single-campaign .prog-body > h2.wp-block-heading:not(.is-style-ari-lead),
.single-campaign .prog-body .ari-cards__heading,
.single-campaign .prog-body .campaign-timeline__heading,
.single-campaign .prog-body .ari-people-grid__heading {
  margin-block-end: var(--ari-space-4, 1rem);
  font-family: var(--font-role-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ari-ink, #1a1714);
}

/* More air between sections than inside them; a heading stays close to its block. */
.single-campaign .prog-body > * + :is(section, div, aside, h2) {
  margin-block-start: clamp(3rem, 5vw, 4.5rem);
}

.single-campaign .prog-body > h2 + * {
  margin-block-start: 0;
}