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