img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}

img.wp-smiley, img.emoji {
		display: inline !important;
		border: none !important;
		box-shadow: none !important;
		height: 1em !important;
		width: 1em !important;
		margin: 0 0.07em !important;
		vertical-align: -0.1em !important;
		background: none !important;
		padding: 0 !important;
	}

:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}:root .has-text-align-center{text-align:center}:root .has-text-align-left{text-align:left}:root .has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{word-wrap:normal!important;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-break:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style^=border-color],[style*=";border-color"],[style*="; border-color"]){border-style:solid}html :where([style^=border-top-color],[style*=";border-top-color"],[style*="; border-top-color"]){border-top-style:solid}html :where([style^=border-right-color],[style*=";border-right-color"],[style*="; border-right-color"]){border-right-style:solid}html :where([style^=border-bottom-color],[style*=";border-bottom-color"],[style*="; border-bottom-color"]){border-bottom-style:solid}html :where([style^=border-left-color],[style*=";border-left-color"],[style*="; border-left-color"]){border-left-style:solid}html :where([style^=border-width],[style*=";border-width"],[style*="; border-width"]){border-style:solid}html :where([style^=border-top-width],[style*=";border-top-width"],[style*="; border-top-width"]){border-top-style:solid}html :where([style^=border-right-width],[style*=";border-right-width"],[style*="; border-right-width"]){border-right-style:solid}html :where([style^=border-bottom-width],[style*=";border-bottom-width"],[style*="; border-bottom-width"]){border-bottom-style:solid}html :where([style^=border-left-width],[style*=";border-left-width"],[style*="; border-left-width"]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}}

.wp-block-group{box-sizing:border-box}:where(.wp-block-group.wp-block-group-is-layout-constrained){position:relative}

/*
 * Callout Text block - structural layout, plus the color/padding custom
 * properties below (colors constrained to the theme.json palette, padding
 * to the theme's spacing scale, same approach as the other blocks).
 *
 * The outer wrapper's own wide/normal/full width is handled by the theme's
 * `.entry-content > *` rules (see assets/scss/_layout.scss), same as every
 * other top-level block. The inner grid mirrors that same wide/normal/full
 * sizing independently, using the theme's content-size/wide-size custom
 * properties, so the 12-column grid tracks whichever alignment is chosen
 * even though the section background (this wrapper) is free to go full-bleed.
 *
 * 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-callout-text {
  background-color: var(--prontoblocks-callout-text-bg-color, transparent);
  color: var(--prontoblocks-callout-text-text-color, inherit);
}

.wp-block-prontoblocks-callout-text__grid {
  max-width: var(--wp--style--global--content-size, 800px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--wp--preset--spacing--6, 1.5rem);
}

.wp-block-prontoblocks-callout-text.alignwide .wp-block-prontoblocks-callout-text__grid {
  max-width: var(--wp--style--global--wide-size, 1432px);
}

.wp-block-prontoblocks-callout-text.alignfull .wp-block-prontoblocks-callout-text__grid {
  max-width: none;
}

/*
 * __header (Eyebrow/Section Title, Single & Two Column layouts) shares the
 * same grid-column placement as __content, driven by the same Column
 * Span/Offset custom properties (set on __grid itself in template.php, so
 * both children inherit them) - keeps the heading area aligned with the
 * content below it instead of always spanning the full 12 columns. Both
 * are grid items of __grid with no explicit grid-row, so __header
 * naturally lands in its own row above __content via auto-placement (they
 * request the same column range, which can't fit on one row), using
 * __grid's own gap for the spacing between them.
 */
.wp-block-prontoblocks-callout-text__content,
.wp-block-prontoblocks-callout-text__header {
  grid-column: calc(var(--prontoblocks-callout-text-offset, 0) + 1) / span var(--prontoblocks-callout-text-span, 12);
}

/*
 * Two Column and Eyebrow & Heading Aside both split the content area itself
 * (not the outer 12-col grid) into two fr-sized tracks driven by the Column
 * Split Ratio field (see template.php) - the first track holds either a
 * second content column or the heading-column (eyebrow + title) depending
 * on Layout. Stacks to a single column at the block's Mobile Breakpoint via
 * the media query in template.php's inline <style>.
 */
.wp-block-prontoblocks-callout-text__content--split {
  display: grid;
  grid-template-columns: var(--prontoblocks-callout-text-split-left, 1fr) var(--prontoblocks-callout-text-split-right, 1fr);
  gap: var(--wp--preset--spacing--6, 1.5rem);
}

.wp-block-prontoblocks-callout-text__content--align-left,
.wp-block-prontoblocks-callout-text__header--align-left {
  text-align: left;
}

.wp-block-prontoblocks-callout-text__content--align-center,
.wp-block-prontoblocks-callout-text__header--align-center {
  text-align: center;
}

.wp-block-prontoblocks-callout-text__content--align-right,
.wp-block-prontoblocks-callout-text__header--align-right {
  text-align: right;
}

/*
 * The theme's base typography (assets/scss/_typography.scss) sets `color`
 * directly on `p`, which wins over inheritance from an ancestor regardless
 * of the ancestor's own specificity. `:where()` keeps this override at a
 * single class' specificity so it still beats the bare element selector
 * without outranking anything more specific added later. The __header rule
 * covers the Eyebrow/Section Title when rendered above __grid (Single/Two
 * Column layouts); when Eyebrow & Heading Aside moves them into
 * __heading-column instead, that's a descendant of __content so the first
 * selector already covers it.
 */
.wp-block-prontoblocks-callout-text__content :where(p, h1, h2, h3, h4, h5, h6, li, blockquote),
.wp-block-prontoblocks-callout-text__header :where(p, h1, h2, h3, h4, h5, h6) {
  color: var(--prontoblocks-callout-text-text-color, inherit);
}

/*
 * 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);
}

/*
 * 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);
}

/*
 * Media/Text block - structural layout, plus the background color below.
 * The color picker field is constrained to the theme.json palette (same
 * approach as the hero block), so it's set here rather than left to the
 * theme; other colors/typography remain the theme's responsibility.
 *
 * 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-media-text {
  background-color: var(--prontoblocks-media-text-bg-color, transparent);
}

.wp-block-prontoblocks-media-text[data-wp-interactive] {
  transition: background-color 0.4s ease;
}

.wp-block-prontoblocks-media-text__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 2rem;
  max-width: var(--prontoblocks-media-text-max-width, none);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--prontoblocks-media-text-inline-padding, 0px);
}

.wp-block-prontoblocks-media-text--media-right .wp-block-prontoblocks-media-text__media {
  order: 1;
}

.wp-block-prontoblocks-media-text__media {
  position: relative;
}

.wp-block-prontoblocks-media-text__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--prontoblocks-media-text-overlay-color, transparent);
  mix-blend-mode: var(--prontoblocks-media-text-overlay-blend-mode, normal);
}

.wp-block-prontoblocks-media-text__media-heading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  color: var(--prontoblocks-media-text-slide-text-color, #fff);
  pointer-events: none;
}

.wp-block-prontoblocks-media-text__media-heading .wp-block-prontoblocks-media-text__heading {
  margin: 0;
}

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

.wp-block-prontoblocks-media-text__media-heading .wp-block-prontoblocks-media-text__eyebrow {
  margin: 0 0 0.25rem;
}

.wp-block-prontoblocks-media-text[data-wp-interactive] .wp-block-prontoblocks-media-text__media-heading {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.wp-block-prontoblocks-media-text[data-wp-interactive] .wp-block-prontoblocks-media-text__media-heading.is-active {
  opacity: 1;
}

.wp-block-prontoblocks-media-text__image,
.wp-block-prontoblocks-media-text__video {
  display: block;
  width: 100%;
  height: auto;
}

.wp-block-prontoblocks-media-text__embed {
  position: relative;
  aspect-ratio: 4 / 3;
}

.wp-block-prontoblocks-media-text__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.wp-block-prontoblocks-media-text[data-wp-interactive] .wp-block-prontoblocks-media-text__content {
  position: relative;
}

.wp-block-prontoblocks-media-text[data-wp-interactive] .wp-block-prontoblocks-media-text__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(16px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  pointer-events: none;
}

.wp-block-prontoblocks-media-text[data-wp-interactive] .wp-block-prontoblocks-media-text__slide.is-active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

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

@media (prefers-reduced-motion: reduce) {
  .wp-block-prontoblocks-media-text,
  .wp-block-prontoblocks-media-text[data-wp-interactive] .wp-block-prontoblocks-media-text__media-slide,
  .wp-block-prontoblocks-media-text[data-wp-interactive] .wp-block-prontoblocks-media-text__slide,
  .wp-block-prontoblocks-media-text[data-wp-interactive] .wp-block-prontoblocks-media-text__media-heading,
  .wp-block-prontoblocks-media-text__nav,
  .wp-block-prontoblocks-media-text__dots {
    transition: none;
  }
}

.wp-block-prontoblocks-media-text__nav {
  display: flex;
  gap: 1rem;
  transition: color 0.4s ease;
}

.wp-block-prontoblocks-media-text__dots {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  transition: color 0.4s ease;
}

/*
 * Native <button> elements don't reliably inherit `color` from an ancestor
 * across browsers, so `background: currentColor`/text glyph color below
 * would otherwise ignore the wp-style--color bound on __nav/__dots (see
 * template.php) and just show the browser's default button color.
 */
.wp-block-prontoblocks-media-text__prev,
.wp-block-prontoblocks-media-text__next,
.wp-block-prontoblocks-media-text__dot {
  color: inherit;
}

.wp-block-prontoblocks-media-text__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  cursor: pointer;
}

.wp-block-prontoblocks-media-text__dot.is-active {
  opacity: 1;
}

@media (width >= 1024px) {
  .wp-block-prontoblocks-media-text:not(.acf-block-preview.wp-block-prontoblocks-media-text) .wp-block-prontoblocks-media-text__inner {
    grid-template-columns: var(--prontoblocks-media-text-col-1, 1fr) var(--prontoblocks-media-text-col-2, 1fr);
  }
  .wp-block-prontoblocks-media-text__embed {
    top: 50%;
    transform: translateY(-50%);
  }

  .wp-block-prontoblocks-media-text__media--per-slide {
    position: relative;
    aspect-ratio: 4 / 3;
  }

  .wp-block-prontoblocks-media-text[data-wp-interactive] .wp-block-prontoblocks-media-text__media-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }

  .wp-block-prontoblocks-media-text[data-wp-interactive] .wp-block-prontoblocks-media-text__media-slide.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  .wp-block-prontoblocks-media-text__media-slide .wp-block-prontoblocks-media-text__image,
  .wp-block-prontoblocks-media-text__media-slide .wp-block-prontoblocks-media-text__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .wp-block-prontoblocks-media-text__media-slide--natural .wp-block-prontoblocks-media-text__image,
  .wp-block-prontoblocks-media-text__media-slide--natural .wp-block-prontoblocks-media-text__video {
    object-fit: contain;
  }

  /*
   * Aspect Ratio: None drops the fixed-ratio box (the aspect-ratio: auto
   * inline style set from template.php already handles that) but the box's
   * height would otherwise collapse to 0, since its only children are
   * absolutely positioned by the rules above and don't contribute to auto
   * height. Switching this slide back to normal flow fixes that; since it's
   * no longer stacked with the other slides, it swaps the opacity cross-fade
   * for a display toggle instead - the same trade-off already made for the
   * <1024px breakpoint below, which drops the fixed-ratio box entirely.
   */
  .wp-block-prontoblocks-media-text[data-wp-interactive]
    .wp-block-prontoblocks-media-text__media-slide.wp-block-prontoblocks-media-text__media-slide--auto-ratio {
    position: static;
  }

  .wp-block-prontoblocks-media-text[data-wp-interactive]
    .wp-block-prontoblocks-media-text__media-slide.wp-block-prontoblocks-media-text__media-slide--auto-ratio:not(.is-active) {
    display: none;
  }

  .wp-block-prontoblocks-media-text__media-slide--auto-ratio .wp-block-prontoblocks-media-text__image,
  .wp-block-prontoblocks-media-text__media-slide--auto-ratio .wp-block-prontoblocks-media-text__video {
    position: static;
    height: auto;
    object-fit: unset;
  }
}

/*
 * Below 1024px, the media pane drops the fixed aspect-ratio/crop treatment
 * in favor of natural image flow (see the unconditional __image/__video
 * rule above). The `!important` is required because the aspect-ratio value
 * above is otherwise set via an inline `style` attribute (PHP on render,
 * and the Interactivity API on slide change for carousels) - inline styles
 * outrank plain media-query rules, so only `!important` can override them.
 */
@media (width < 1024px) {
  .wp-block-prontoblocks-media-text__media--per-slide {
    aspect-ratio: auto !important;
  }

  .wp-block-prontoblocks-media-text[data-wp-interactive] .wp-block-prontoblocks-media-text__media-slide:not(.is-active) {
    display: none;
  }
}

:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--chalkboard: #0d453c;--wp--preset--color--moss: #daf8d3;--wp--preset--color--brick: #c44536;--wp--preset--color--coast: #1552ea;--wp--preset--color--neon-green: #54fca8;--wp--preset--color--midnight: #191970;--wp--preset--color--canvas: #f0eee6;--wp--preset--color--linen: #fafafa;--wp--preset--color--asphalt: #131715;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--font-size--xs: 0.75rem;--wp--preset--font-size--sm: 0.875rem;--wp--preset--font-size--base: 1rem;--wp--preset--font-size--lg: 1.125rem;--wp--preset--font-size--xl: 1.25rem;--wp--preset--font-size--2-xl: 1.5rem;--wp--preset--font-size--3-xl: 1.875rem;--wp--preset--font-size--4-xl: 2.5rem;--wp--preset--font-size--5-xl: 3rem;--wp--preset--font-size--6-xl: 3.75rem;--wp--preset--font-family--sans: "Manrope", sans-serif;--wp--preset--font-family--mono: "Roboto Mono", monospace;--wp--preset--font-family--headings: "tussilago", sans-serif;--wp--preset--spacing--20: 5rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--spacing--1: 0.25rem;--wp--preset--spacing--2: 0.5rem;--wp--preset--spacing--3: 0.75rem;--wp--preset--spacing--4: 1rem;--wp--preset--spacing--5: 1.25rem;--wp--preset--spacing--6: 1.5rem;--wp--preset--spacing--8: 2rem;--wp--preset--spacing--10: 2.5rem;--wp--preset--spacing--12: 3rem;--wp--preset--spacing--16: 4rem;--wp--preset--spacing--24: 6rem;--wp--preset--spacing--32: 8rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}.wp-block-button{--wp--preset--dimension--25: 25%;--wp--preset--dimension--50: 50%;--wp--preset--dimension--75: 75%;--wp--preset--dimension--100: 100%;}:root { --wp--style--global--content-size: 900px;--wp--style--global--wide-size: 1432px; }:where(body) { margin: 0; }.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{background-color: var(--wp--preset--color--linen);color: var(--wp--preset--color--asphalt);font-family: var(--wp--preset--font-family--sans);font-size: var(--wp--preset--font-size--base);line-height: 1.6;--wp--style--root--padding-top: 0px;--wp--style--root--padding-right: 0px;--wp--style--root--padding-bottom: 0px;--wp--style--root--padding-left: 0px;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-chalkboard-color{color: var(--wp--preset--color--chalkboard) !important;}.has-moss-color{color: var(--wp--preset--color--moss) !important;}.has-brick-color{color: var(--wp--preset--color--brick) !important;}.has-coast-color{color: var(--wp--preset--color--coast) !important;}.has-neon-green-color{color: var(--wp--preset--color--neon-green) !important;}.has-midnight-color{color: var(--wp--preset--color--midnight) !important;}.has-canvas-color{color: var(--wp--preset--color--canvas) !important;}.has-linen-color{color: var(--wp--preset--color--linen) !important;}.has-asphalt-color{color: var(--wp--preset--color--asphalt) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-chalkboard-background-color{background-color: var(--wp--preset--color--chalkboard) !important;}.has-moss-background-color{background-color: var(--wp--preset--color--moss) !important;}.has-brick-background-color{background-color: var(--wp--preset--color--brick) !important;}.has-coast-background-color{background-color: var(--wp--preset--color--coast) !important;}.has-neon-green-background-color{background-color: var(--wp--preset--color--neon-green) !important;}.has-midnight-background-color{background-color: var(--wp--preset--color--midnight) !important;}.has-canvas-background-color{background-color: var(--wp--preset--color--canvas) !important;}.has-linen-background-color{background-color: var(--wp--preset--color--linen) !important;}.has-asphalt-background-color{background-color: var(--wp--preset--color--asphalt) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-chalkboard-border-color{border-color: var(--wp--preset--color--chalkboard) !important;}.has-moss-border-color{border-color: var(--wp--preset--color--moss) !important;}.has-brick-border-color{border-color: var(--wp--preset--color--brick) !important;}.has-coast-border-color{border-color: var(--wp--preset--color--coast) !important;}.has-neon-green-border-color{border-color: var(--wp--preset--color--neon-green) !important;}.has-midnight-border-color{border-color: var(--wp--preset--color--midnight) !important;}.has-canvas-border-color{border-color: var(--wp--preset--color--canvas) !important;}.has-linen-border-color{border-color: var(--wp--preset--color--linen) !important;}.has-asphalt-border-color{border-color: var(--wp--preset--color--asphalt) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}.has-xs-font-size{font-size: var(--wp--preset--font-size--xs) !important;}.has-sm-font-size{font-size: var(--wp--preset--font-size--sm) !important;}.has-base-font-size{font-size: var(--wp--preset--font-size--base) !important;}.has-lg-font-size{font-size: var(--wp--preset--font-size--lg) !important;}.has-xl-font-size{font-size: var(--wp--preset--font-size--xl) !important;}.has-2-xl-font-size{font-size: var(--wp--preset--font-size--2-xl) !important;}.has-3-xl-font-size{font-size: var(--wp--preset--font-size--3-xl) !important;}.has-4-xl-font-size{font-size: var(--wp--preset--font-size--4-xl) !important;}.has-5-xl-font-size{font-size: var(--wp--preset--font-size--5-xl) !important;}.has-6-xl-font-size{font-size: var(--wp--preset--font-size--6-xl) !important;}.has-sans-font-family{font-family: var(--wp--preset--font-family--sans) !important;}.has-mono-font-family{font-family: var(--wp--preset--font-family--mono) !important;}.has-headings-font-family{font-family: var(--wp--preset--font-family--headings) !important;}

.is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}:root :where(p.has-background){padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}p.has-text-align-left[style*="writing-mode:vertical-lr"],p.has-text-align-right[style*="writing-mode:vertical-rl"]{rotate:180deg}

/*
 * Taxonomy Term Grid block - structural layout. Desktop column count (1-6)
 * comes from the Columns field via --prontoblocks-term-grid-columns; cards
 * wrap to additional rows once that's exceeded. Mobile/tablet stay at a
 * fixed 1/3 columns regardless of that setting - same responsive pattern as
 * query-loop's __list.
 */

.wp-block-prontoblocks-term-grid__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

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

.wp-block-prontoblocks-term-grid__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
}

.wp-block-prontoblocks-term-grid__title {
  margin: 0;
}

.wp-block-prontoblocks-term-grid__description :last-child {
  margin-bottom: 0;
}

.wp-block-prontoblocks-term-grid__button {
  margin-top: auto;
  align-self: flex-start;
}

/*
 * 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;
  }
}

.wp-elements-1 a:where(:not(.wp-element-button)){color:var(--wp--preset--color--canvas);}

h1:where(.wp-block-heading).has-background,h2:where(.wp-block-heading).has-background,h3:where(.wp-block-heading).has-background,h4:where(.wp-block-heading).has-background,h5:where(.wp-block-heading).has-background,h6:where(.wp-block-heading).has-background{padding:1.25em 2.375em}h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h1.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h2.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h2.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h3.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h3.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h4.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h4.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h5.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h5.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h6.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h6.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]){rotate:180deg}

/*
 * Contact Cards block - structural layout only. Background is set inline
 * from field values, same as every other block; typography (font,
 * uppercase, letter-spacing, link underlines) is left to the theme, same
 * approach as text-cards/icon-grid.
 *
 * 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-contact-cards {
  background-color: var(--prontoblocks-contact-cards-bg-color, transparent);
}

.wp-block-prontoblocks-contact-cards__inner {
  width: 100%;
}

.wp-block-prontoblocks-contact-cards--contain .wp-block-prontoblocks-contact-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-contact-cards__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: var(--wp--preset--spacing--8, 2rem);
}

.wp-block-prontoblocks-contact-cards__header-title {
  margin: 0;
}

.wp-block-prontoblocks-contact-cards__header-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/*
 * Desktop column count (1-4) comes from the Columns field via
 * --prontoblocks-contact-cards-columns; cards wrap to additional rows once
 * that's exceeded. Mobile/tablet stay at a fixed 1/2 columns regardless of
 * that setting - same responsive pattern as icon-grid/cta-grid's grids.
 */
.wp-block-prontoblocks-contact-cards__cards {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--prontoblocks-contact-cards-gap, 2rem);
  row-gap: var(--prontoblocks-contact-cards-row-gap, var(--prontoblocks-contact-cards-gap, 2rem));
  align-items: start;
}

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

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

/*
 * The accent bar reads the Accent Colour field via a custom property, with
 * currentColor as a sane fallback so a card without one set still gets a
 * visible bar rather than an invisible transparent one.
 */
.wp-block-prontoblocks-contact-cards__card {
  border-top: 4px solid var(--prontoblocks-contact-cards-accent-color, currentColor);
  padding-top: 1.5rem;
}

.wp-block-prontoblocks-contact-cards__card-brands {
  margin: 0 0 0.75rem;
}

.wp-block-prontoblocks-contact-cards__card-title {
  margin: 0 0 0.75rem;
}

.wp-block-prontoblocks-contact-cards__card-address {
  margin: 0 0 1.5rem;
}

.wp-block-prontoblocks-contact-cards__card-phones {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
  margin-bottom: 1.5rem;
  border-top: 1px solid currentColor;
}

.wp-block-prontoblocks-contact-cards__card-phone-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.wp-block-prontoblocks-contact-cards__card-hours {
  margin-bottom: 1.5rem;
}

.wp-block-prontoblocks-contact-cards__card-hours-label {
  display: block;
  margin-bottom: 0.5rem;
}

.wp-block-prontoblocks-contact-cards__card-hours-row {
  margin: 0;
}

.wp-block-prontoblocks-contact-cards__card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid currentColor;
}

.wp-block-prontoblocks-contact-cards__fine-print {
  margin: var(--wp--preset--spacing--8, 2rem) 0 0;
}

/*
 * Text Cards block - structural layout. 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/padding are set
 * inline from field values, same as every other block.
 */

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

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

.wp-block-prontoblocks-text-cards--contain .wp-block-prontoblocks-text-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 uses, 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-text-cards--layout-split:not(.acf-block-preview.wp-block-prontoblocks-text-cards) .wp-block-prontoblocks-text-cards__inner {
    grid-template-columns: var(--prontoblocks-text-cards-split-left, 1fr) var(--prontoblocks-text-cards-split-right, 1fr);
    align-items: start;
  }
}

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

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

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

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

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

.wp-block-prontoblocks-text-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-icon-cards/style.css). :where() keeps this override at a single
 * class' specificity.
 */
.wp-block-prontoblocks-text-cards__text :where(p, h1, h2, h3, h4, h5, h6, li, blockquote) {
  color: var(--prontoblocks-text-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-text-cards--layout-split .wp-block-prontoblocks-text-cards__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--prontoblocks-text-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-icon-cards' card grids -
 * fixed at 1 column on mobile and 3 on tablet, then the configured Columns
 * field from 1024px up.
 */
.wp-block-prontoblocks-text-cards--layout-stacked .wp-block-prontoblocks-text-cards__cards {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--prontoblocks-text-cards-gap, 2rem);
  row-gap: var(--prontoblocks-text-cards-row-gap, var(--prontoblocks-text-cards-gap, 2rem));
}

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

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

/*
 * Glass Blur Effect gives each card an actual visible box - the cards have
 * no background/padding/border by default (they're just stacked 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-text-cards--glass-cards .wp-block-prontoblocks-text-cards__card {
  padding: var(--prontoblocks-text-cards-glass-padding, 1.5rem);
  border-radius: var(--prontoblocks-text-cards-glass-radius, 12px);
  background: var(--prontoblocks-text-cards-glass-bg, rgba(255, 255, 255, 0.12));
  border: 1px solid var(--prontoblocks-text-cards-glass-border, rgba(255, 255, 255, 0.2));
  backdrop-filter: blur(var(--prontoblocks-text-cards-glass-blur, 16px));
  -webkit-backdrop-filter: blur(var(--prontoblocks-text-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-text-cards__card-number {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

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

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

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

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

.wp-block-prontoblocks-text-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-text-cards__card-button--text {
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  text-decoration: underline;
}

.wp-elements-1 a:where(:not(.wp-element-button)){color:var(--wp--preset--color--linen);}.wp-elements-2 a:where(:not(.wp-element-button)){color:var(--wp--preset--color--asphalt);}.wp-elements-3 a:where(:not(.wp-element-button)){color:var(--wp--preset--color--asphalt);}

/*
 * FAQ block - structural layout, plus the background/text color below
 * (colors constrained to the theme.json palette via the color picker
 * fields, same approach as every other block). Color Theme is deliberately
 * NOT styled here - it only adds a --theme-{value} modifier class for the
 * theme's own stylesheet to target, same convention as text-columns.
 */

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

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

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

.wp-block-prontoblocks-faq__header {
  margin-bottom: 2rem;
  max-width: 720px;
}

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

.wp-block-prontoblocks-faq__header--align-center {
  text-align: center;
  margin-inline: auto;
}

.wp-block-prontoblocks-faq__header--align-right {
  text-align: right;
  margin-inline: auto 0;
}

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

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

.wp-block-prontoblocks-faq__list {
  max-width: 800px;
}

.wp-block-prontoblocks-faq--contain .wp-block-prontoblocks-faq__list,
.wp-block-prontoblocks-faq__header--align-center + .wp-block-prontoblocks-faq__list {
  margin-inline: auto;
}

.wp-block-prontoblocks-faq__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.wp-block-prontoblocks-faq__item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

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

.wp-block-prontoblocks-faq__question-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 0;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.wp-block-prontoblocks-faq__icon {
  display: flex;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.wp-block-prontoblocks-faq__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-in-out;
}

/*
 * Down chevron by default (closed); rotates to point up once open - same
 * "rotate the closed-state icon" approach as a plus/minus toggle, just with
 * a chevron instead.
 */
.wp-block-prontoblocks-faq__item.is-open .wp-block-prontoblocks-faq__icon svg {
  transform: rotate(180deg);
}

/*
 * Slide open/closed via the grid-template-rows 0fr -> 1fr technique - this
 * animates to the answer's actual (dynamic) content height without any JS
 * measuring, unlike a height/max-height transition. __answer is the grid
 * container; __answer-inner clips the content while collapsed (a 0fr row
 * still lays out its content at full height internally, so something has to
 * hide the overflow) and carries min-height: 0 so it can actually shrink
 * below its content's intrinsic size.
 */
.wp-block-prontoblocks-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease-in-out;
}

.wp-block-prontoblocks-faq__item.is-open .wp-block-prontoblocks-faq__answer {
  grid-template-rows: 1fr;
}

.wp-block-prontoblocks-faq__answer-inner {
  overflow: hidden;
  min-height: 0;
}

.wp-block-prontoblocks-faq__answer-text {
  margin: 0;
  padding-bottom: 1.25rem;
}

/*
 * 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 text-columns/style.css and
 * featured-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.
 */
.wp-block-prontoblocks-faq :where(p, h1, h2, h3, h4, h5, h6, li, blockquote) {
  color: var(--prontoblocks-faq-text-color, inherit);
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-prontoblocks-faq__icon svg,
  .wp-block-prontoblocks-faq__answer {
    transition: none;
  }
}

/*
 * 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;
}

/*
 * 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);
}

.wp-elements-1 a:where(:not(.wp-element-button)){color:var(--wp--preset--color--linen);}.wp-elements-2 a:where(:not(.wp-element-button)){color:var(--wp--preset--color--canvas);}.wp-elements-3 a:where(:not(.wp-element-button)){color:var(--wp--preset--color--canvas);}

.wp-elements-1 a:where(:not(.wp-element-button)){color:var(--wp--preset--color--linen);}.wp-elements-2 a:where(:not(.wp-element-button)){color:var(--wp--preset--color--moss);}

/*
 * Logo Grid block - structural layout, plus the greyscale filter below.
 * Columns and gap are set inline from field values (pulled from the theme's
 * spacing scale); colors are the theme's responsibility. Responsive
 * top/bottom padding is handled by the shared .wp-block-prontoblocks-section
 * rule in assets/css/blocks.css.
 */

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

.wp-block-prontoblocks-logo-grid__eyebrow--align-left,
.wp-block-prontoblocks-logo-grid__title--align-left {
  text-align: left;
}

.wp-block-prontoblocks-logo-grid__eyebrow--align-center,
.wp-block-prontoblocks-logo-grid__title--align-center {
  text-align: center;
}

.wp-block-prontoblocks-logo-grid__eyebrow--align-right,
.wp-block-prontoblocks-logo-grid__title--align-right {
  text-align: right;
}

.wp-block-prontoblocks-logo-grid__title {
  margin: 0 0 2rem;
}

.wp-block-prontoblocks-logo-grid__list {
  display: grid;
  grid-template-columns: repeat(var(--prontoblocks-logo-grid-columns, 4), minmax(0, 1fr));
  gap: var(--prontoblocks-logo-grid-gap, 1rem);
  align-items: center;
}

.wp-block-prontoblocks-logo-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wp-block-prontoblocks-logo-grid__image {
  max-width: 100%;
  height: auto;
}

.wp-block-prontoblocks-logo-grid--greyscale .wp-block-prontoblocks-logo-grid__image {
  filter: grayscale(100%);
}

/*
 * Post Type Grid block - structural layout. Desktop column count (2-6)
 * comes from the Columns field via --prontoblocks-query-loop-columns; cards
 * wrap to additional rows once that's exceeded. Mobile/tablet stay at a
 * fixed 1/3 columns regardless of that setting - same responsive pattern
 * as icon-grid's __list.
 */

.wp-block-prontoblocks-query-loop__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (width >= 768px) {
  .wp-block-prontoblocks-query-loop__list {
    grid-template-columns: repeat(var(--prontoblocks-query-loop-columns, 3), minmax(0, 1fr));
  }
}

.wp-block-prontoblocks-query-loop__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  color: inherit;
  text-decoration: none;
}

a.wp-block-prontoblocks-query-loop__item {
  transition: border-color 0.2s ease;
}

a.wp-block-prontoblocks-query-loop__item:hover,
a.wp-block-prontoblocks-query-loop__item:focus-visible {
  border-color: rgba(0, 0, 0, 0.3);
}

.wp-block-prontoblocks-query-loop__image {
  overflow: hidden;
  border-radius: 4px;
}

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

.wp-block-prontoblocks-query-loop__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

/*
 * Horizontal card layout - image beside the content instead of above it.
 * Collapses back to the default stacked layout below 480px, since a
 * side-by-side image/text pairing gets cramped on small phones.
 */
@media (width >= 480px) {
  .wp-block-prontoblocks-query-loop__list--horizontal .wp-block-prontoblocks-query-loop__item {
    flex-direction: row;
    align-items: flex-start;
  }

  .wp-block-prontoblocks-query-loop__list--horizontal .wp-block-prontoblocks-query-loop__image {
    flex: 0 0 50%;
  }

  .wp-block-prontoblocks-query-loop__list--horizontal .wp-block-prontoblocks-query-loop__image-img {
    height: 100%;
    object-fit: cover;
  }
}

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

.wp-block-prontoblocks-query-loop__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0 0 0.5rem;
}

.wp-block-prontoblocks-query-loop__term {
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
}

.wp-block-prontoblocks-query-loop__fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wp-block-prontoblocks-query-loop__field {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.wp-block-prontoblocks-query-loop__field-label {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.65;
}

.wp-block-prontoblocks-query-loop__field-value :last-child {
  margin-bottom: 0;
}

/*
 * No button chrome defined here on purpose - the theme hooks
 * .wp-block-prontoblocks-*__button elements per block (see _hero.scss/
 * _ctaGrid.scss/_termGrid.scss), same convention as cta-grid/text-cards/
 * feature-cards' own __button elements. Used by the team-member content
 * partial - see blocks/query-loop/partials/content-team-member.php.
 */
.wp-block-prontoblocks-query-loop__cta {
  margin-top: 0.5rem;
}

/*
 * Video block - structural layout, plus the overlay/text colors below.
 * Those are set here (not left to the theme) because the color picker
 * fields are constrained to the theme.json palette, same approach used
 * for the hero block.
 *
 * The full-bleed media/overlay layers below are `position: absolute; inset: 0`
 * against __inner (not the block root) on purpose: an absolutely positioned
 * element's containing block is its nearest positioned ancestor's PADDING
 * box, so inset:0 fills straight to that ancestor's border edge regardless
 * of its own padding. Since responsive Padding Top/Bottom now lives on the
 * block root via the shared .wp-block-prontoblocks-section rule in
 * assets/css/blocks.css, the media layers would ignore that padding entirely
 * if they were positioned against the root - __inner exists so the padding
 * creates real visible space instead of being filled straight over.
 */

.wp-block-prontoblocks-video__inner {
  position: relative;
  overflow: hidden;
}

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

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

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

.wp-block-prontoblocks-video__inner--full {
  min-height: max(980px, 90vh);
}

.wp-block-prontoblocks-video__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #000;
}

.wp-block-prontoblocks-video__poster,
.wp-block-prontoblocks-video__video,
.wp-block-prontoblocks-video__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
}

/*
 * The poster sits behind the video/iframe by default paint order, but once
 * the video/iframe has a real source it should occlude the poster - simplest
 * is to just let it paint on top, which it does as the later sibling.
 */

.wp-block-prontoblocks-video__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 24px;
  border: 0;
  cursor: pointer;
  background-color: var(--prontoblocks-video-overlay-color, rgba(0, 0, 0, 0.4));
  transition: opacity 0.3s ease;
}

.wp-block-prontoblocks-video__overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.wp-block-prontoblocks-video__content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  color: var(--prontoblocks-video-text-color, #fff);
}

.wp-block-prontoblocks-video__content--align-left {
  align-items: flex-start;
  text-align: left;
}

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

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

.wp-block-prontoblocks-video__eyebrow {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wp-block-prontoblocks-video__title {
  display: block;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
}

.wp-block-prontoblocks-video__subheading {
  display: block;
  font-size: 1.125rem;
  line-height: 1.5;
}

.wp-block-prontoblocks-video__play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-top: 0.5rem;
}

.wp-block-prontoblocks-video__play-icon svg {
  width: 100%;
  height: 100%;
}