/*
 * Text / Icon Cards block - structural layout. Split layout (text + card
 * grid) mirrors media-text; the card grid/icon rules mirror icon-grid.
 * Background/text/title colors and padding are set inline from field
 * values; icon size comes from a --icon-{size} modifier class.
 */

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

.wp-block-prontoblocks-text-icon-cards__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 2rem;
}

.wp-block-prontoblocks-text-icon-cards--contain .wp-block-prontoblocks-text-icon-cards__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-text-icon-cards--text-right .wp-block-prontoblocks-text-icon-cards__text {
  order: 1;
}

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

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

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

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

.wp-block-prontoblocks-text-icon-cards__eyebrow {
  margin: 0 0 0.5rem;
}

.wp-block-prontoblocks-text-icon-cards__heading {
  margin: 0 0 1rem;
}

.wp-block-prontoblocks-text-icon-cards__body :last-child {
  margin-bottom: 0;
}

.wp-block-prontoblocks-text-icon-cards__cta {
  margin-top: 1.5rem;
}

/*
 * 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 (same issue documented in icon-grid/style.css). :where()
 * keeps this at a single class' specificity.
 */
.wp-block-prontoblocks-text-icon-cards__text :where(p, h1, h2, h3, h4, h5, h6, li, blockquote) {
  color: var(--prontoblocks-text-icon-cards-text-color, inherit);
}

.wp-block-prontoblocks-text-icon-cards__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--prontoblocks-text-icon-cards-gap, 2rem);
  row-gap: var(--prontoblocks-text-icon-cards-row-gap, var(--prontoblocks-text-icon-cards-gap, 2rem));
}

@media (width >= 600px) {
  .wp-block-prontoblocks-text-icon-cards__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width >= 1024px) {
  .wp-block-prontoblocks-text-icon-cards__cards {
    grid-template-columns: repeat(var(--prontoblocks-text-icon-cards-columns, 2), minmax(0, 1fr));
  }
}

.wp-block-prontoblocks-text-icon-cards__card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
}

/*
 * Card Text Alignment (default Center, matching the block's original fixed
 * behavior) drives both the flex column's cross-axis alignment (icon
 * position) and the text-align of the title/body together, via a modifier
 * class on the block wrapper.
 */
.wp-block-prontoblocks-text-icon-cards--card-align-left .wp-block-prontoblocks-text-icon-cards__card {
  align-items: flex-start;
  text-align: left;
}

.wp-block-prontoblocks-text-icon-cards--card-align-center .wp-block-prontoblocks-text-icon-cards__card {
  align-items: center;
  text-align: center;
}

.wp-block-prontoblocks-text-icon-cards--card-align-right .wp-block-prontoblocks-text-icon-cards__card {
  align-items: flex-end;
  text-align: right;
}

.wp-block-prontoblocks-text-icon-cards__icon {
  width: 48px;
  height: auto;
}

/*
 * SVG icons are masked to the Card Text Colour field (see template.php)
 * instead of rendered as an <img>, since an <img src="icon.svg"> can't be
 * recolored with CSS. The SVG's alpha shape becomes the mask;
 * background-color fills it. Only applies when a card text color is set -
 * otherwise SVGs render as a normal <img> and keep their native colors.
 * Same approach as icon-grid.
 */
.wp-block-prontoblocks-text-icon-cards__icon--mask {
  background-color: var(--prontoblocks-text-icon-cards-card-icon-color, currentColor);
  aspect-ratio: 1 / 1;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.wp-block-prontoblocks-text-icon-cards__card-title {
  margin: 0;
  color: var(--prontoblocks-text-icon-cards-card-title-color, var(--prontoblocks-text-icon-cards-card-text-color, inherit));
}

/*
 * Grayscale only visibly affects raster <img> icons and native-color SVGs.
 * Masked SVG icons (see the mask rule above) already render as a single
 * flat background-color fill, so a grayscale filter is a no-op on them.
 */
.wp-block-prontoblocks-text-icon-cards--grayscale .wp-block-prontoblocks-text-icon-cards__icon {
  filter: grayscale(1);
}

/*
 * Icon Shape rounds the corners of raster <img> icons. Like grayscale
 * above, this has no visible effect on masked SVG icons: border-radius
 * clips a box's own background/content, but a masked icon's box has no
 * fill outside the SVG's own mask shape for the radius to clip.
 */
.wp-block-prontoblocks-text-icon-cards--icon-shape-rounded .wp-block-prontoblocks-text-icon-cards__icon {
  border-radius: 12px;
}

/*
 * Circle forces a 1/1 box so non-square source images don't render as an
 * oval once border-radius turns the corners all the way round; object-fit
 * crops rather than squashing the image to fit. The masked SVG variant is
 * already square (see .wp-block-prontoblocks-text-icon-cards__icon--mask
 * above) so this is a no-op for it.
 */
.wp-block-prontoblocks-text-icon-cards--icon-shape-circle .wp-block-prontoblocks-text-icon-cards__icon {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}

.wp-block-prontoblocks-text-icon-cards--icon-small .wp-block-prontoblocks-text-icon-cards__icon {
  width: 32px;
}

.wp-block-prontoblocks-text-icon-cards--icon-medium .wp-block-prontoblocks-text-icon-cards__icon {
  width: 48px;
}

.wp-block-prontoblocks-text-icon-cards--icon-large .wp-block-prontoblocks-text-icon-cards__icon {
  width: 64px;
}

.wp-block-prontoblocks-text-icon-cards--icon-xl .wp-block-prontoblocks-text-icon-cards__icon {
  width: 96px;
}

.wp-block-prontoblocks-text-icon-cards--icon-xxl .wp-block-prontoblocks-text-icon-cards__icon {
  width: 160px;
}

.wp-block-prontoblocks-text-icon-cards--icon-xxxl .wp-block-prontoblocks-text-icon-cards__icon {
  width: 240px;
}

.wp-block-prontoblocks-text-icon-cards__card-body :last-child {
  margin-bottom: 0;
}

.wp-block-prontoblocks-text-icon-cards__cards :where(p, h1, h2, h4, h5, h6, li, blockquote) {
  color: var(--prontoblocks-text-icon-cards-card-text-color, inherit);
}

/*
 * Text Beside Cards only switches to two columns from 1024px up, and not
 * inside the ACF block editor's own (narrower) preview chrome - same guard
 * used by callout-text/text-cards, so the split isn't squeezed into the
 * sidebar-width preview. Text Above Cards (--layout-stacked) keeps __inner
 * single-column at every width, so the card grid below just spans full
 * width instead.
 */
@media (width >= 1024px) {
  .wp-block-prontoblocks-text-icon-cards--layout-split:not(.acf-block-preview.wp-block-prontoblocks-text-icon-cards) .wp-block-prontoblocks-text-icon-cards__inner {
    grid-template-columns: 1fr 1fr;
  }
}