/*
 * Testimonials block - structural layout. Background/text color
 * is set inline from field values, same as page-nav-grid/style.css. The
 * __item (quote + author) markup is shared across all three layouts; Single
 * and Two Up are static, the carousel layout reuses post-carousel's Embla
 * viewport/container/slide structure (see post-carousel/style.css).
 */

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

.wp-block-prontoblocks-testimonials__inner {
  position: relative;
  width: 100%;
}

.wp-block-prontoblocks-testimonials--contain .wp-block-prontoblocks-testimonials__inner {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--8, 24px);
}

.wp-block-prontoblocks-testimonials__header {
  margin-bottom: 2rem;
}

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

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

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

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

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

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

/*
 * Shared item (quote + author) markup, used by all three layouts. Plain
 * items (no Background Image set) stay a simple flowing text block; adding
 * an image switches on the --has-image modifier below, which turns the item
 * into a full-bleed photo card with a frosted gradient accent in one corner
 * (__item-overlay below), same treatment as media-text's Gradient Media
 * Overlay (see media-text/style.css).
 */

.wp-block-prontoblocks-testimonials__item {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
  box-sizing: border-box;
}

.wp-block-prontoblocks-testimonials__item--has-image {
  position: relative;
  justify-content: flex-end;
  min-height: 320px;
  padding: 1.5rem;
  border-radius: 12px;
  overflow: hidden;
  color: #fff;
}

/*
 * Fills the card behind the content - a real <img> (with srcset/sizes for
 * responsive loading, see prontoblocks_testimonials_render_item() in
 * template.php) rather than a CSS background-image, which can't be made
 * responsive the same way.
 */
.wp-block-prontoblocks-testimonials__image-container {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.wp-block-prontoblocks-testimonials__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wp-block-prontoblocks-testimonials__item-overlay {
  position: absolute;
  inset: 24px;
  pointer-events: none;
  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 right, 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 right, black 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
  border-radius: 8px;
}

.wp-block-prontoblocks-testimonials__item-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

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

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

/*
 * Applied to a <span> wrapped around editor-selected text via the Quote
 * field's "Style" toolbar dropdown (see prontoblocks_wysiwyg_style_formats()
 * in prontoblocks.php) - lets an editor call out a word/phrase within the
 * quote. Uses currentColor so it automatically adapts to white text on
 * --has-image photo cards as well as the block's own Text Colour field.
 */
.wp-block-prontoblocks-testimonials__highlight {
  background-color: color-mix(in srgb, currentColor 15%, transparent);
  font-weight: 700;
}

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

.wp-block-prontoblocks-testimonials__author-name {
  margin: 0;
  font-weight: 600;
}

.wp-block-prontoblocks-testimonials__author-title {
  margin: 0;
  font-size: 0.875rem;
  opacity: 0.75;
}

/*
 * --has-image items set `color: #fff` on the item itself, but the block-wide
 * text color rule at the bottom of this file targets p/heading elements
 * directly and ties with it on specificity (both a single class) - so
 * without this, source order would decide the winner. Targeting the actual
 * elements here (rather than :where()) gives this a higher specificity than
 * that rule, so light text on a photo card is guaranteed regardless of the
 * Text Colour field or rule order.
 */
.wp-block-prontoblocks-testimonials__item--has-image p,
.wp-block-prontoblocks-testimonials__item--has-image h1,
.wp-block-prontoblocks-testimonials__item--has-image h2,
.wp-block-prontoblocks-testimonials__item--has-image h3,
.wp-block-prontoblocks-testimonials__item--has-image h4,
.wp-block-prontoblocks-testimonials__item--has-image h5,
.wp-block-prontoblocks-testimonials__item--has-image h6,
.wp-block-prontoblocks-testimonials__item--has-image blockquote {
  color: #fff;
}

/* Single layout - one centered, larger quote */

.wp-block-prontoblocks-testimonials__single {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.wp-block-prontoblocks-testimonials__single .wp-block-prontoblocks-testimonials__quote {
  font-size: 1.25rem;
}

/* Two Up layout - always at most 2 columns, never a 3rd desktop tier */

.wp-block-prontoblocks-testimonials__two-up {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--prontoblocks-testimonials-gap, 2rem);
}

@media (width >= 600px) {
  .wp-block-prontoblocks-testimonials__two-up {
    grid-template-columns: 1fr 1fr;
  }
}

/*
 * 3+ Carousel layout - same Embla recipe as post-carousel/style.css
 * (negative margin on the container + matching padding on each slide, rather
 * than native flexbox `gap`, since that's what Embla's size calculations
 * expect). Desktop column count (3-6) comes from the Columns field via
 * --prontoblocks-testimonials-columns; mobile/tablet stay at a fixed 1/3
 * columns regardless of that setting.
 */

.wp-block-prontoblocks-testimonials__viewport {
  overflow: hidden;
}

.wp-block-prontoblocks-testimonials__container {
  display: flex;
  margin-left: calc(var(--prontoblocks-testimonials-gap, 1rem) * -1);
}

/*
 * Mobile (below 600px) shows exactly one full-width slide with no peek -
 * a partial second card felt cramped at phone widths. 600px+ and 1024px+
 * still divide 100% by (visible count + --prontoblocks-testimonials-peek)
 * rather than an even split, so the last slide's-width fraction is left over
 * as a peek of the next slide at the trailing edge instead of filling the
 * viewport exactly - a visual hint that there's more to scroll to. Embla's
 * default containScroll: 'trimSnaps' (src/view.js doesn't override it) keeps
 * the final slide flush against the end once there's nothing left to peek.
 * Same recipe as post-carousel/style.css.
 */
.wp-block-prontoblocks-testimonials__slide {
  flex: 0 0 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-left: var(--prontoblocks-testimonials-gap, 1rem);
}

@media (width >= 768px) {
  .wp-block-prontoblocks-testimonials__slide {
    flex: 0 0 calc(100% / (var(--prontoblocks-testimonials-columns, 3) + var(--prontoblocks-testimonials-peek, 0.33)));
  }
}

@media (width >= 1024px) {
  .wp-block-prontoblocks-testimonials__slide {
    flex: 0 0 calc(100% / (var(--prontoblocks-testimonials-columns, 3) + var(--prontoblocks-testimonials-peek, 0.33)));
  }
}

/* Plain (no Background Image) slides still get breathing room; --has-image
   items already carry their own padding above. */
.wp-block-prontoblocks-testimonials__slide .wp-block-prontoblocks-testimonials__item:not(.wp-block-prontoblocks-testimonials__item--has-image) {
  padding: 1.5rem;
}

.wp-block-prontoblocks-testimonials__see-all {
  flex-shrink: 0;
  color: inherit;
  text-decoration: underline;
  white-space: nowrap;
}

.wp-block-prontoblocks-testimonials__prev,
.wp-block-prontoblocks-testimonials__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 2rem;
  line-height: 1;
  padding: 0.5rem;
}

.wp-block-prontoblocks-testimonials__prev {
  left: 0;
}

.wp-block-prontoblocks-testimonials__next {
  right: 0;
}

.wp-block-prontoblocks-testimonials__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

/*
 * Native <button> elements don't reliably inherit `color` from an ancestor
 * across browsers, so `background: currentColor` below would otherwise
 * ignore the block's Text Colour field - same fix as post-carousel's dots.
 */
.wp-block-prontoblocks-testimonials__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: currentColor;
  color: inherit;
  opacity: 0.3;
  cursor: pointer;
}

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

/*
 * 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 icon-grid/page-nav-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-testimonials :where(p, h1, h2, h4, h5, h6, li, blockquote) {
  color: var(--prontoblocks-testimonials-text-color, inherit);
}