/*
 * Hero block - structural layout, plus the text/CTA colors below.
 * Those are set here (not left to the theme) because the color picker
 * fields are constrained to the theme.json palette, so values are always
 * one of the theme's own colors.
 */

.wp-block-prontoblocks-hero {
  position: relative;
  --prontoblocks-hero-section-padding: 24px;
  padding: var(--prontoblocks-hero-section-padding);
  background-color: var(--prontoblocks-hero-bg-color, transparent);
}

.wp-block-prontoblocks-hero--small {
  --prontoblocks-hero-min-height: max(320px, 25vh);
  min-height: var(--prontoblocks-hero-min-height);
}

.wp-block-prontoblocks-hero--medium {
  --prontoblocks-hero-min-height: max(480px, 50vh);
  min-height: var(--prontoblocks-hero-min-height);
}

.wp-block-prontoblocks-hero--large {
  --prontoblocks-hero-min-height: max(720px, 75vh);
  min-height: var(--prontoblocks-hero-min-height);
}

.wp-block-prontoblocks-hero--full {
  --prontoblocks-hero-min-height: max(780px, 85vh);
  min-height: var(--prontoblocks-hero-min-height);
}

@media (width > 768px) {
  .wp-block-prontoblocks-hero--full {
    --prontoblocks-hero-min-height: max(980px, 90vh);
    min-height: var(--prontoblocks-hero-min-height);
  }
}

/*
 * The theme's _hero.scss stretches __content-wrapper to fill the section's
 * full height via the outer section's display:flex (default align-items:
 * stretch) - that's what lets its own align-items:center vertically center
 * the text. Its --has-cta-grid override switches the section to
 * display:block instead (needed so the CTA grid stacks below __content
 * rather than sitting beside it as a second flex item), which loses that
 * stretch.
 *
 * min-height (not height, so it can still grow taller if the CTA grid's
 * buttons wrap to more rows than the hero's minimum allows) is set to the
 * active size's --prontoblocks-hero-min-height, minus twice the section's
 * own --prontoblocks-hero-section-padding. The theme resets box-sizing to
 * border-box, so the section's padding is already counted inside its own
 * min-height; copying that value onto __content-wrapper unchanged would
 * make it as tall as the section's full box, then sit inside the section's
 * padding on top of that, overshooting the intended min-height by 2x the
 * padding. Subtracting it here cancels that out. This also self-adjusts
 * for Split layout, where the section's own padding is zeroed (see
 * --layout-split below, which overrides the custom property to 0px) - no
 * separate override needed.
 */
.wp-block-prontoblocks-hero--has-cta-grid .wp-block-prontoblocks-hero__content-wrapper {
  min-height: calc(var(--prontoblocks-hero-min-height, 0px) - (var(--prontoblocks-hero-section-padding, 0px) * 2));
}

.wp-block-prontoblocks-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.wp-block-prontoblocks-hero__content-wrapper {
  align-items: var(--prontoblocks-hero-vertical-align, center);
}

/*
 * Both absolutely positioned (not just the first, normal-flow one) since
 * the video renders its poster image as a sibling img underneath it (kept
 * in the DOM as the fallback for prefers-reduced-motion, see view.js) -
 * without this they'd stack in normal flow instead of overlapping.
 */
.wp-block-prontoblocks-hero__media img,
.wp-block-prontoblocks-hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.wp-block-prontoblocks-hero__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--prontoblocks-hero-overlay-color, transparent);
  mix-blend-mode: var(--prontoblocks-hero-overlay-blend-mode, normal);
}

.wp-block-prontoblocks-hero__content {
  position: relative;
  z-index: 1;
  color: var(--prontoblocks-hero-text-color, inherit);
}

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

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

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

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

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

.wp-block-prontoblocks-hero__button {
  color: var(--prontoblocks-hero-cta-color, currentColor);
}

.wp-block-prontoblocks-hero--layout-split {
  --prontoblocks-hero-section-padding: 0px;
  padding: var(--prontoblocks-hero-section-padding);
  display: grid;
  grid-template-columns: 1fr;
}

.wp-block-prontoblocks-hero--layout-split .wp-block-prontoblocks-hero__media {
  position: relative;
  inset: auto;
}

.wp-block-prontoblocks-hero--layout-split .wp-block-prontoblocks-hero__content-wrapper {
  display: flex;
  align-items: var(--prontoblocks-hero-vertical-align, center);
  padding: 24px;
}

.wp-block-prontoblocks-hero--layout-split.wp-block-prontoblocks-hero--image-right .wp-block-prontoblocks-hero__media {
  order: 1;
}

@media (width >= 1024px) {
  .wp-block-prontoblocks-hero--layout-split:not(.acf-block-preview.wp-block-prontoblocks-hero) {
    grid-template-columns: 1fr 1fr;
  }
}

.wp-block-prontoblocks-hero--layout-two-column .wp-block-prontoblocks-hero__content-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (width >= 1024px) {
  .wp-block-prontoblocks-hero--layout-two-column:not(.acf-block-preview.wp-block-prontoblocks-hero) .wp-block-prontoblocks-hero__content-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

/*
 * CTA Grid is nested inside __content-wrapper, as a sibling of __content,
 * so it's a grid item of the theme's 12-col grid there (see _hero.scss) -
 * its horizontal position/width (matching __content's offset) is handled
 * entirely by the theme via the --align-{left,center,right} modifier class
 * below, mirroring __content's own --align-* pattern. This block only
 * defines the *inner* button layout: how the buttons themselves are
 * arranged once __cta-grid has been placed. Column count (2-5) comes from
 * the Columns field via --prontoblocks-hero-cta-grid-columns; extra
 * buttons wrap to new rows, same approach as icon-grid's Columns field.
 */
.wp-block-prontoblocks-hero__cta-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

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

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

.wp-block-prontoblocks-hero__cta-grid-button {
  text-align: center;
}

/*
 * Icon List - same "sibling of __content inside __content-wrapper" placement
 * as CTA Grid above (see --has-icon-list, mirroring --has-cta-grid), and
 * independent of it: both classes can be present at once so the two
 * sections stack below the content and below each other. Only the inner
 * item grid is defined here; horizontal placement within the theme's
 * 12-col grid is the theme's job (see _hero.scss).
 */
.wp-block-prontoblocks-hero__icon-list {
  position: relative;
  z-index: 1;
  color: var(--prontoblocks-hero-text-color, inherit);
}

.wp-block-prontoblocks-hero__icon-list-header {
  margin-bottom: 1.5rem;
}

.wp-block-prontoblocks-hero__icon-list-header--align-left {
  text-align: left;
}

.wp-block-prontoblocks-hero__icon-list-header--align-center {
  text-align: center;
}

.wp-block-prontoblocks-hero__icon-list-header--align-right {
  text-align: right;
}

.wp-block-prontoblocks-hero__icon-list-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (width >= 600px) {
  .wp-block-prontoblocks-hero__icon-list-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.wp-block-prontoblocks-hero__icon-list-icon {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.wp-block-prontoblocks-hero__icon-list-icon--mask {
  background-color: currentColor;
  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-hero__icon-list-item-title {
  color: var(--prontoblocks-hero-text-color, inherit);
}