/*
 * Post Type Carousel block - structural layout. Background/text color
 * is set inline from field values, same as cta-grid/style.css.
 * Slide spacing follows Embla's documented recipe (negative margin on the
 * container + matching padding on each slide) rather than native flexbox
 * `gap`, since that's what Embla's own size calculations expect.
 */

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

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

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

/*
 * Stacks eyebrow/heading/supporting-text vertically, same as query-loop's/
 * stats'/text-columns' __header - previously row-flex with no direction
 * set, which only ever worked by accident with a single child (eyebrow OR
 * heading, never both at once in practice) and would have laid the new
 * Supporting Text field out beside the heading instead of below it.
 */
.wp-block-prontoblocks-post-carousel__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.wp-block-prontoblocks-post-carousel__header-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wp-block-prontoblocks-post-carousel__eyebrow {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.65;
}

.wp-block-prontoblocks-post-carousel__heading {
  margin: 0;
}

.wp-block-prontoblocks-post-carousel__supporting-text {
  margin: 0;
}

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

.wp-block-prontoblocks-post-carousel__viewport {
  overflow: hidden;
}

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

/*
 * Desktop column count (1-6) comes from the Columns field via
 * --prontoblocks-post-carousel-columns; slides scroll one at a time
 * regardless of how many are visible. Mobile/tablet stay at a fixed 1/2
 * columns regardless of that setting - deliberately not wired to a field,
 * unlike Desktop's Columns. query-loop/cta-grid/icon-grid/page-nav-grid
 * follow the same "fixed mobile/tablet, configurable desktop" shape but
 * are fixed at 1/3, not 1/2 - post-carousel intentionally diverges here.
 *
 * Each tier divides 100% by (visible count + --prontoblocks-post-carousel-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.
 */
.wp-block-prontoblocks-post-carousel__slide {
  flex: 0 0 calc(100% / (1 + var(--prontoblocks-post-carousel-peek, 0.33)));
  min-width: 0;
  box-sizing: border-box;
  padding-left: var(--prontoblocks-post-carousel-gap, 1rem);
}

@media (width >= 768px) {
  .wp-block-prontoblocks-post-carousel__slide {
    flex: 0 0 calc(100% / (2 + var(--prontoblocks-post-carousel-peek, 0.33)));
  }
}

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

.wp-block-prontoblocks-post-carousel__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 1.5rem;
  box-sizing: border-box;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

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

.wp-block-prontoblocks-post-carousel__image {
  position: relative;
}

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

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

.wp-block-prontoblocks-post-carousel__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

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

/*
 * Overlaid on an arbitrary featured image rather than the block's own
 * background, so terms get a fixed dark chip + light text here instead of
 * inheriting the block's Text Colour field - that keeps them legible
 * regardless of what's in the photo underneath.
 */
.wp-block-prontoblocks-post-carousel__terms--over-image {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  z-index: 1;
}

.wp-block-prontoblocks-post-carousel__terms--over-image .wp-block-prontoblocks-post-carousel__term {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

.wp-block-prontoblocks-post-carousel__title {
  margin: 0;
}

.wp-block-prontoblocks-post-carousel__date {
  margin: 0;
  font-size: 0.8125rem;
  opacity: 0.65;
}

.wp-block-prontoblocks-post-carousel__excerpt {
  margin: 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 cta-grid/icon-grid/
 * callout-text'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-post-carousel :where(p, h1, h2, h3, h4, h5, h6) {
  color: var(--prontoblocks-post-carousel-text-color, inherit);
}

.wp-block-prontoblocks-post-carousel__prev,
.wp-block-prontoblocks-post-carousel__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-post-carousel__prev {
  left: 0;
}

.wp-block-prontoblocks-post-carousel__next {
  right: 0;
}

.wp-block-prontoblocks-post-carousel__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 media-text's dots.
 */
.wp-block-prontoblocks-post-carousel__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-post-carousel__dot.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-prontoblocks-post-carousel__item {
    transition: none;
  }
}

/*
 * Two Posts layout - a static 2-column grid reusing the exact same
 * __item/__image/__content/__title card markup and styling as Carousel
 * slides (see prontoblocks_post_carousel_render_card() in template.php),
 * just without the __slide/viewport/Embla scroll chrome around it.
 */
.wp-block-prontoblocks-post-carousel__two {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--prontoblocks-post-carousel-gap, 1rem);
}

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

/*
 * Single Featured Post layout - image and content sit side by side rather
 * than stacked, unlike the grid/carousel card. Featured Image Position
 * (left/right) swaps which track the image lands in via `order`, same
 * technique as featured-text's Supporting Image Position.
 */
.wp-block-prontoblocks-post-carousel__featured-link {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 2rem;
  color: inherit;
  text-decoration: none;
}

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

.wp-block-prontoblocks-post-carousel__featured--image-right .wp-block-prontoblocks-post-carousel__featured-image {
  order: 1;
}

.wp-block-prontoblocks-post-carousel__featured-image {
  position: relative;
}

.wp-block-prontoblocks-post-carousel__featured-image-img {
  display: block;
  width: 100%;
  height: auto;
}

.wp-block-prontoblocks-post-carousel__featured-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.wp-block-prontoblocks-post-carousel__featured-title {
  margin: 0;
}

/*
 * Display Author (Single Featured Post layout only) - avatar comes from
 * WordPress core's get_avatar() (Gravatar, or a locally-set avatar if
 * another plugin filters it), not an ACF field. Replaces the plain __date
 * paragraph when both Display Author and Display Date are on, so the
 * publish date isn't shown twice - see template.php.
 */
.wp-block-prontoblocks-post-carousel__featured-author {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.wp-block-prontoblocks-post-carousel__featured-author-avatar {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.wp-block-prontoblocks-post-carousel__featured-author-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.wp-block-prontoblocks-post-carousel__featured-author-name {
  font-weight: 600;
}

.wp-block-prontoblocks-post-carousel__featured-author-date {
  font-size: 0.8125rem;
  opacity: 0.65;
}