/*
 * Icon Grid block - structural layout. Background/text/title color and
 * padding are set inline from field values; icon size comes from a
 * --icon-{size} modifier class. Desktop column count (2-6) comes from the
 * Columns field via --prontoblocks-icon-grid-columns; items wrap to
 * additional rows once that's exceeded. Mobile/tablet stay at a fixed
 * 1/3 columns regardless of that setting.
 */

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

.wp-block-prontoblocks-icon-grid__inner {
  width: 100%;
}

.wp-block-prontoblocks-icon-grid--contain .wp-block-prontoblocks-icon-grid__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-icon-grid__header {
  margin-bottom: 2rem;
}

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

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

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

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

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

.wp-block-prontoblocks-icon-grid__subtitle {
  margin: 0;
}

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

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

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

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

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

/*
 * SVG icons are masked to the 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 text color is set - otherwise SVGs render as a
 * normal <img> and keep their native colors.
 */
.wp-block-prontoblocks-icon-grid__icon--mask {
  background-color: var(--prontoblocks-icon-grid-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-icon-grid__item-title {
  margin: 0;
  color: var(--prontoblocks-icon-grid-title-color, var(--prontoblocks-icon-grid-text-color, inherit));
}

/*
 * Grayscale only visibly affects raster <img> icons and native-color SVGs.
 * Masked SVG icons (see the mask rule below) already render as a single
 * flat background-color fill, so a grayscale filter is a no-op on them.
 */
.wp-block-prontoblocks-icon-grid--grayscale .wp-block-prontoblocks-icon-grid__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-icon-grid--icon-shape-rounded .wp-block-prontoblocks-icon-grid__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-icon-grid__icon--mask above)
 * so this is a no-op for it.
 */
.wp-block-prontoblocks-icon-grid--icon-shape-circle .wp-block-prontoblocks-icon-grid__icon {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}

.wp-block-prontoblocks-icon-grid--icon-small .wp-block-prontoblocks-icon-grid__icon {
  width: 32px;
}

.wp-block-prontoblocks-icon-grid--icon-medium .wp-block-prontoblocks-icon-grid__icon {
  width: 48px;
}

.wp-block-prontoblocks-icon-grid--icon-large .wp-block-prontoblocks-icon-grid__icon {
  width: 64px;
}

.wp-block-prontoblocks-icon-grid--icon-xl .wp-block-prontoblocks-icon-grid__icon {
  width: 96px;
}

.wp-block-prontoblocks-icon-grid--icon-xxl .wp-block-prontoblocks-icon-grid__icon {
  width: 160px;
}

.wp-block-prontoblocks-icon-grid--icon-xxxl .wp-block-prontoblocks-icon-grid__icon {
  width: 240px;
}

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

/*
 * 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 callout-text/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. Covers the heading/subheading and body text. h3 is deliberately
 * excluded - it's only ever used for .wp-block-prontoblocks-icon-grid__item-title,
 * which has its own Title Colour rule above; including it here would tie its
 * specificity with that rule and let this one win on source order instead.
 */
.wp-block-prontoblocks-icon-grid :where(p, h1, h2, h4, h5, h6, li, blockquote) {
  color: var(--prontoblocks-icon-grid-text-color, inherit);
}