/* =============================================================
   block-styles.css
   ----------------------------------------------------------------
   Bridges WordPress block-style class hooks (is-style-*) to the
   semantic class names already defined in components.css. This
   keeps components.css as the canonical, framework-free source
   while letting editors pick variants from the block inspector.
   ============================================================= */


/* ---------- Group → card variants ---------- */

.wp-block-group.is-style-card-cream,
.wp-block-group.is-style-card-gold,
.wp-block-group.is-style-card-dark {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-default);
  padding: var(--space-5);
  transition: transform var(--dur-normal) var(--ease-standard),
              box-shadow var(--dur-normal) var(--ease-standard);
}
.wp-block-group.is-style-card-cream { background: var(--bg-surface); }
.wp-block-group.is-style-card-gold  { background: var(--bg-surface-gold); border-color: var(--gold-200); }
.wp-block-group.is-style-card-dark  { background: var(--bg-surface-dark); color: var(--text-on-dark); border-color: var(--ink-600); }
.wp-block-group.is-style-card-dark :where(h1, h2, h3, h4, h5, h6, p) { color: var(--text-on-dark); }


/* ---------- Group → callout variants ---------- */

.wp-block-group.is-style-callout-tip,
.wp-block-group.is-style-callout-info {
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-block: var(--space-5);
}
.wp-block-group.is-style-callout-tip {
  background: var(--bg-surface-gold);
  border-left: 4px solid var(--accent-secondary);
  color: var(--text-on-gold);
}
.wp-block-group.is-style-callout-info {
  background: var(--bg-surface-warm);
  border-left: 4px solid var(--accent-primary);
}


/* ---------- Quote → pull-quote festa variant ---------- */

.wp-block-quote.is-style-pullquote-festa {
  border-left: 0;
  border-top: 2px solid var(--accent-primary);
  border-bottom: 2px solid var(--accent-primary);
  padding-block: var(--space-6);
  margin-block: var(--space-7);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-30);
  line-height: 1.3;
  text-align: center;
}
.wp-block-quote.is-style-pullquote-festa cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--text-muted);
}


/* ---------- Button variants ---------- */

.wp-block-button.is-style-primary-festa .wp-block-button__link {
  background: var(--ink-700);
  color: var(--text-on-dark);
  border: 1px solid var(--ink-700);
}
.wp-block-button.is-style-primary-festa .wp-block-button__link:hover {
  background: var(--festa-600);
  border-color: var(--festa-600);
}

.wp-block-button.is-style-secondary-outlined .wp-block-button__link {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--ink-700);
}
.wp-block-button.is-style-secondary-outlined .wp-block-button__link:hover {
  background: var(--ink-700);
  color: var(--text-on-dark);
}

.wp-block-button.is-style-tertiary-text .wp-block-button__link {
  background: transparent;
  color: var(--text-primary);
  border: 0;
  padding-inline: 0;
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 0.18em;
}
.wp-block-button.is-style-tertiary-text .wp-block-button__link:hover {
  color: var(--link-hover);
  background: transparent;
}


/* ---------- Paragraph variants ---------- */

p.is-style-eyebrow,
p.is-style-eyebrow-olive {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  margin-block-end: var(--space-3);
  line-height: var(--lh-ui);
}
p.is-style-eyebrow       { color: var(--accent-primary); }
p.is-style-eyebrow-olive { color: var(--accent-nature); }

p.is-style-lead {
  font-size: var(--fs-20);
  line-height: 1.55;
  color: var(--text-secondary);
}