/*
 * Stats block - structural layout. Background/text color is
 * set inline from field values, same approach as cta-grid/icon-grid. The
 * three Columns (Desktop/Tablet/Mobile) fields drive --prontoblocks-stats-
 * columns via the inline <style> block in template.php rather than the
 * fixed 1/3 mobile/tablet fallback used elsewhere, since this block exposes
 * all three breakpoints as fields.
 */

.wp-block-prontoblocks-stats {
  color: var(--prontoblocks-stats-text-color, inherit);
}

/*
 * Background Colour lives here (not on the outer wrapper above) so it's
 * scoped to the same element as Contain Content Width's max-width - unlike
 * every other block in this plugin, where Contain Content Width's own
 * instructions promise the background still fills full-bleed while only the
 * content is constrained, here the background gets clipped to that
 * contained width too, since __inner is what both properties apply to.
 */
.wp-block-prontoblocks-stats__inner {
  width: 100%;
  background-color: var(--prontoblocks-stats-bg-color, transparent);
}

.wp-block-prontoblocks-stats--contain .wp-block-prontoblocks-stats__inner {
  max-width: var(--wp--style--global--wide-size, 1432px);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--8, 24px);
}

.wp-block-prontoblocks-stats__header {
  margin-bottom: 2rem;
}

.wp-block-prontoblocks-stats__header--align-left {
  text-align: left;
}

.wp-block-prontoblocks-stats__header--align-center {
  text-align: center;
}

.wp-block-prontoblocks-stats__header--align-right {
  text-align: right;
}

.wp-block-prontoblocks-stats__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.wp-block-prontoblocks-stats__title {
  margin: 0 0 0.5rem;
}

.wp-block-prontoblocks-stats__subtitle {
  margin: 0;
}

/*
 * Large with Image layout - Feature (image + text) and the stats Grid sit
 * side by side, sized by the Feature Column Split Ratio field (see
 * template.php). Same shape as featured-text's __supporting split, stacked
 * to a single column below 768px (that block's default Mobile Breakpoint) -
 * this block has no configurable breakpoint field of its own.
 */
.wp-block-prontoblocks-stats__layout {
  display: grid;
  grid-template-columns: var(--prontoblocks-stats-split-left, 1fr) var(--prontoblocks-stats-split-right, 1fr);
  align-items: center;
  gap: var(--wp--preset--spacing--6, 1.5rem);
}

@media (width < 768px) {
  .wp-block-prontoblocks-stats__layout {
    grid-template-columns: 1fr;
  }
}

.wp-block-prontoblocks-stats__feature {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--4, 1rem);
}

.wp-block-prontoblocks-stats__feature--image-right {
  order: 1;
}

.wp-block-prontoblocks-stats__feature-image {
  position: relative;
}

.wp-block-prontoblocks-stats__feature-image img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * Gradient Image Overlay - same effect as media-text's __gradient_overlay
 * (hardcoded blue, blur, and fade mask), including the fixed inset/
 * border-radius, since Feature Image is a rounded card here too (unlike
 * hero's full-bleed __gradient_overlay, which drops the inset/radius for
 * that reason). Enabled via the Enable Gradient Image Overlay field.
 *
 * Angle/mask are mirrored from media-text's original (-68deg instead of
 * 68deg, mask fading to top left instead of top right) so the visible
 * portion of the effect anchors in the image's bottom-right corner rather
 * than bottom-left - deliberately fixed to the right side, no direction
 * field.
 */
.wp-block-prontoblocks-stats__feature-gradient-overlay {
  position: absolute;
  inset: 24px;
  background: linear-gradient(-68deg, rgba(0, 114, 206, 1) 0%, rgba(0, 114, 206, 1) 66%, rgba(0, 114, 206, 0) 100%);
  backdrop-filter: blur(8px);
  mask-image: linear-gradient(to top left, black 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top left, black 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
  border-radius: 8px;
}

/*
 * Style as Quote / Testimonial - a simple typographic treatment (no new
 * dependency): italic, larger text, and a currentColor accent border so it
 * reads distinctly from the block's other copy.
 */
.wp-block-prontoblocks-stats__feature-content--quote {
  font-size: 1.125rem;
  font-style: italic;
}

/*
 * Cite field - only rendered when Style as Quote / Testimonial is on (see
 * template.php). Not italic, unlike its --quote parent, so it reads as an
 * attribution rather than more quoted text.
 */
.wp-block-prontoblocks-stats__feature-cite {
  display: block;
  margin-top: var(--wp--preset--spacing--2, 0.5rem);
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
}

.wp-block-prontoblocks-stats__feature-cite::before {
  content: '\2014\00A0';
}

/*
 * Applied to a <span> wrapped around editor-selected text via the Feature
 * Text field's "Style" toolbar dropdown (see prontoblocks_wysiwyg_style_formats()
 * in prontoblocks.php) - lets an editor call out a word/phrase within the
 * quote, e.g. a name or figure.
 */
.wp-block-prontoblocks-stats__highlight {
  background-color: color-mix(in srgb, currentColor 15%, transparent);
  font-weight: 700;
}

/*
 * Desktop/Tablet/Mobile column counts (1-6 each) come from the Columns
 * fields via --prontoblocks-stats-columns, set per breakpoint in
 * template.php's inline <style> block. Stats wrap to additional rows once
 * that count is exceeded.
 */
.wp-block-prontoblocks-stats__grid {
  display: grid;
  grid-template-columns: repeat(var(--prontoblocks-stats-columns, 1), minmax(0, 1fr));
  column-gap: var(--prontoblocks-stats-gap, 2rem);
  row-gap: var(--prontoblocks-stats-row-gap, var(--prontoblocks-stats-gap, 2rem));
}

.wp-block-prontoblocks-stats__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
}

/*
 * Stat Text Alignment - modifier class lives on __grid (see template.php)
 * rather than repeated per __item, same approach as the header's
 * --align-{value} classes.
 */
.wp-block-prontoblocks-stats__grid--align-center .wp-block-prontoblocks-stats__item {
  align-items: center;
  text-align: center;
}

.wp-block-prontoblocks-stats__grid--align-right .wp-block-prontoblocks-stats__item {
  align-items: flex-end;
  text-align: right;
}

.wp-block-prontoblocks-stats__measurement {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
}

.wp-block-prontoblocks-stats__detail {
  font-size: 1rem;
}

/*
 * The theme's base typography sets `color` directly on `p`/heading elements,
 * which wins over inheritance from an ancestor regardless of the ancestor's
 * own specificity (see the identical override in cta-grid/icon-grid's
 * style.css). :where() keeps this at a single class' specificity so it
 * still beats the bare element selector without outranking anything more
 * specific added later.
 */
.wp-block-prontoblocks-stats :where(p, h1, h2, h4, h5, h6, li, blockquote, cite) {
  color: var(--prontoblocks-stats-text-color, inherit);
}