/*
 * Feature Cards block - forked from text-cards, plus the card Image and
 * Feature First Card rules below. Text Beside Cards (--layout-split)
 * mirrors text-icon-cards' two-column split, sized by the Column Split
 * Ratio field instead of a fixed 1fr 1fr. Text Above Cards (--layout-
 * stacked) stacks both sections full width, with the card grid itself
 * mirroring icon-grid's Columns/gap approach. Background is set inline from
 * field values, same as every other block.
 *
 * 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-feature-cards {
  background-color: var(--prontoblocks-feature-cards-bg-color, transparent);
}

.wp-block-prontoblocks-feature-cards__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--8, 2rem);
}

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

/*
 * 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
 * text-icon-cards/text-cards use, so the split isn't squeezed into the
 * sidebar-width preview. Column widths come from the Column Split Ratio
 * field (see template.php), which already accounts for Text Position when
 * deciding which fr value is first vs second - no CSS order swap needed
 * here.
 */
@media (width >= 1024px) {
  .wp-block-prontoblocks-feature-cards--layout-split:not(.acf-block-preview.wp-block-prontoblocks-feature-cards) .wp-block-prontoblocks-feature-cards__inner {
    grid-template-columns: var(--prontoblocks-feature-cards-split-left, 1fr) var(--prontoblocks-feature-cards-split-right, 1fr);
    align-items: start;
  }
}

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

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

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

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

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

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

/*
 * Text Beside Cards: cards stack vertically in their own column, using the
 * Row Gap field as the vertical gap between them.
 */
.wp-block-prontoblocks-feature-cards--layout-split .wp-block-prontoblocks-feature-cards__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--prontoblocks-feature-cards-row-gap, var(--wp--preset--spacing--6, 1.5rem));
}

/*
 * Text Above Cards: cards flow horizontally, wrapping to additional rows.
 * Same responsive step pattern as icon-grid/text-cards' card grids - fixed
 * at 1 column on mobile and 2 on tablet, then the configured Columns field
 * from 1024px up.
 */
.wp-block-prontoblocks-feature-cards--layout-stacked .wp-block-prontoblocks-feature-cards__cards {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--prontoblocks-feature-cards-gap, 2rem);
  row-gap: var(--prontoblocks-feature-cards-row-gap, var(--prontoblocks-feature-cards-gap, 2rem));
}

@media (width >= 600px) {
  .wp-block-prontoblocks-feature-cards--layout-stacked .wp-block-prontoblocks-feature-cards__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/*
 * Feature First Card spans every column of the __cards grid itself - not
 * the __inner text/cards split above. Only rendered on the first card (see
 * template.php) and only when Layout is Text Above Cards, where __cards is
 * actually a multi-column grid; Text Beside Cards' __cards is already a
 * single 1fr track, so the class would be a harmless no-op there even if
 * present, but the field is gated to stacked layout anyway.
 */
.wp-block-prontoblocks-feature-cards__card--featured {
  grid-column: 1 / -1;
}

.wp-block-prontoblocks-feature-cards__card-image {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

/*
 * Glass Blur Effect gives each card an actual visible box - the cards have
 * no background/padding/border by default (they're just a stacked image +
 * title + body text), so this is the only styling that turns them into
 * panels. backdrop-filter blurs whatever sits behind the card (the block's
 * own background image/color, or page content behind it), which the
 * semi-transparent background tints. Exposed as custom properties so a
 * theme can override the tint/blur/radius per site without touching this
 * file, same as other one-off visual toggles in this plugin.
 */
.wp-block-prontoblocks-feature-cards--glass-cards .wp-block-prontoblocks-feature-cards__card {
  padding: var(--prontoblocks-feature-cards-glass-padding, 1.5rem);
  border-radius: var(--prontoblocks-feature-cards-glass-radius, 12px);
  background: var(--prontoblocks-feature-cards-glass-bg, rgba(255, 255, 255, 0.12));
  border: 1px solid var(--prontoblocks-feature-cards-glass-border, rgba(255, 255, 255, 0.2));
  backdrop-filter: blur(var(--prontoblocks-feature-cards-glass-blur, 16px));
  -webkit-backdrop-filter: blur(var(--prontoblocks-feature-cards-glass-blur, 16px));
}

/*
 * Display as List: structural only (the short rule + number above the
 * title) - font, size, and color for the number are left to the theme, same
 * as every other text element in this block (see __eyebrow/__heading).
 */
.wp-block-prontoblocks-feature-cards__card-number {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.wp-block-prontoblocks-feature-cards__card-number-rule {
  display: block;
  width: 2.5rem;
  height: 2px;
  background-color: currentColor;
}

.wp-block-prontoblocks-feature-cards__card-eyebrow {
  margin: 0 0 0.5rem;
}

.wp-block-prontoblocks-feature-cards__card-title {
  margin: 0 0 0.5rem;
}

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

.wp-block-prontoblocks-feature-cards__card-cta {
  margin-top: 1.5rem;
}

/*
 * Link Style only distinguishes Text from the default Button visually - a
 * plain underlined inline link vs whatever button chrome the theme applies
 * to __card-button--button (the theme hooks .wp-block-prontoblocks-*__button
 * elements per block - see _hero.scss/_ctaGrid.scss/_termGrid.scss - so a
 * theme adding an equivalent rule for __card-button--button gets the same
 * button look as this block's other CTAs). --text intentionally overrides
 * any such button chrome back to a plain link.
 */
.wp-block-prontoblocks-feature-cards__card-button--text {
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  text-decoration: underline;
}