/*
 * Callout Text block - structural layout, plus the color/padding custom
 * properties below (colors constrained to the theme.json palette, padding
 * to the theme's spacing scale, same approach as the other blocks).
 *
 * The outer wrapper's own wide/normal/full width is handled by the theme's
 * `.entry-content > *` rules (see assets/scss/_layout.scss), same as every
 * other top-level block. The inner grid mirrors that same wide/normal/full
 * sizing independently, using the theme's content-size/wide-size custom
 * properties, so the 12-column grid tracks whichever alignment is chosen
 * even though the section background (this wrapper) is free to go full-bleed.
 *
 * Responsive top/bottom padding is handled by the shared
 * .wp-block-prontoblocks-section rule in assets/css/blocks.css - this block
 * only needs the wrapper class from prontoblocks_get_block_wrapper() for that.
 */

.wp-block-prontoblocks-callout-text {
  background-color: var(--prontoblocks-callout-text-bg-color, transparent);
  color: var(--prontoblocks-callout-text-text-color, inherit);
}

.wp-block-prontoblocks-callout-text__grid {
  max-width: var(--wp--style--global--content-size, 800px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--wp--preset--spacing--6, 1.5rem);
}

.wp-block-prontoblocks-callout-text.alignwide .wp-block-prontoblocks-callout-text__grid {
  max-width: var(--wp--style--global--wide-size, 1432px);
}

.wp-block-prontoblocks-callout-text.alignfull .wp-block-prontoblocks-callout-text__grid {
  max-width: none;
}

/*
 * __header (Eyebrow/Section Title, Single & Two Column layouts) shares the
 * same grid-column placement as __content, driven by the same Column
 * Span/Offset custom properties (set on __grid itself in template.php, so
 * both children inherit them) - keeps the heading area aligned with the
 * content below it instead of always spanning the full 12 columns. Both
 * are grid items of __grid with no explicit grid-row, so __header
 * naturally lands in its own row above __content via auto-placement (they
 * request the same column range, which can't fit on one row), using
 * __grid's own gap for the spacing between them.
 */
.wp-block-prontoblocks-callout-text__content,
.wp-block-prontoblocks-callout-text__header {
  grid-column: calc(var(--prontoblocks-callout-text-offset, 0) + 1) / span var(--prontoblocks-callout-text-span, 12);
}

/*
 * Two Column and Eyebrow & Heading Aside both split the content area itself
 * (not the outer 12-col grid) into two fr-sized tracks driven by the Column
 * Split Ratio field (see template.php) - the first track holds either a
 * second content column or the heading-column (eyebrow + title) depending
 * on Layout. Stacks to a single column at the block's Mobile Breakpoint via
 * the media query in template.php's inline <style>.
 */
.wp-block-prontoblocks-callout-text__content--split {
  display: grid;
  grid-template-columns: var(--prontoblocks-callout-text-split-left, 1fr) var(--prontoblocks-callout-text-split-right, 1fr);
  gap: var(--wp--preset--spacing--6, 1.5rem);
}

.wp-block-prontoblocks-callout-text__content--align-left,
.wp-block-prontoblocks-callout-text__header--align-left {
  text-align: left;
}

.wp-block-prontoblocks-callout-text__content--align-center,
.wp-block-prontoblocks-callout-text__header--align-center {
  text-align: center;
}

.wp-block-prontoblocks-callout-text__content--align-right,
.wp-block-prontoblocks-callout-text__header--align-right {
  text-align: right;
}

/*
 * The theme's base typography (assets/scss/_typography.scss) sets `color`
 * directly on `p`, which wins over inheritance from an ancestor regardless
 * of the ancestor's own specificity. `:where()` keeps this override at a
 * single class' specificity so it still beats the bare element selector
 * without outranking anything more specific added later. The __header rule
 * covers the Eyebrow/Section Title when rendered above __grid (Single/Two
 * Column layouts); when Eyebrow & Heading Aside moves them into
 * __heading-column instead, that's a descendant of __content so the first
 * selector already covers it.
 */
.wp-block-prontoblocks-callout-text__content :where(p, h1, h2, h3, h4, h5, h6, li, blockquote),
.wp-block-prontoblocks-callout-text__header :where(p, h1, h2, h3, h4, h5, h6) {
  color: var(--prontoblocks-callout-text-text-color, inherit);
}