/* ==========================================================================
   Block: Project gallery carousel
   --------------------------------------------------------------------------
   .swiper-wrapper and .swiper-slide keep Swiper's own default class names
   (rather than the site's awx- prefix) because Swiper looks for those exact
   names to find its slides unless told otherwise, and the JS config in
   main.js does not override them.
   ========================================================================== */

.awx-gallery-carousel__header {
  /* No max-width here — see the identical comment on .awx-card-grid__header. */
  margin-bottom: var(--awx-space-lg);
  text-align: center;
}

.awx-gallery-carousel__body {
  margin-inline: auto;
}

.awx-gallery-carousel__actions {
  margin-top: var(--awx-space-md);
}

/* ---- Stage ---------------------------------------------------------------- */

.awx-gallery-carousel__stage {
  /* Swiper reads overflow from its own markup, but this keeps the layout
     sane before the library has initialised (e.g. JavaScript disabled). */
  overflow: hidden;
}

/* Gap between slides is padding, not a Swiper spaceBetween option: the
   config in main.js is deliberately the exact object given in the build
   brief, and padding does not interfere with how Swiper measures slide
   width in 'auto' mode the way a competing CSS margin could.

   The selector is the compound .swiper-slide.awx-gallery-carousel__slide,
   not just the block's own class, on purpose: Swiper's bundled CSS sets a
   bare .swiper-slide { width: 100% } (slidesPerView: 'auto' never gets an
   inline width from Swiper's JS the way a numeric slidesPerView would, so
   the page's CSS is the only thing sizing it). That rule and a bare
   .awx-gallery-carousel__slide selector have equal specificity, and
   Swiper's stylesheet is enqueued through a separate mechanism
   (awx_conditional_assets in functions.php) from this block's own
   auto-enqueued style with no dependency declared between them — so which
   one wins is load-order luck, not something to rely on. The compound
   selector has higher specificity than Swiper's bare one and wins
   regardless of order. */
.swiper-slide.awx-gallery-carousel__slide {
  width: 80vw;
  height: auto;
  padding-inline: 0.75rem;
  transition: transform var(--awx-transition), opacity var(--awx-transition);
}

@media (min-width: 48rem) {
  .swiper-slide.awx-gallery-carousel__slide {
    width: 620px;
  }
}

/* Swiper applies swiper-slide-active to whichever slide centeredSlides has
   brought to the middle — full scale there, everything else scaled down
   and dimmed. This, not any JavaScript, is what makes the caption below
   read as belonging to the centred slide, and what gives the carousel its
   Cover Flow feel (partial, smaller neighbours bleeding off both edges). */
.swiper-slide.awx-gallery-carousel__slide.swiper-slide-active {
  transform: scale(1);
  opacity: 1;
}

.swiper-slide.awx-gallery-carousel__slide:not(.swiper-slide-active) {
  transform: scale(0.8);
  opacity: 0.55;
}

.awx-gallery-carousel__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: var(--awx-rule) solid var(--surface-rule);
}

.awx-gallery-carousel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Caption ---------------------------------------------------------------- */

.awx-gallery-carousel__caption {
  margin-top: var(--awx-space-sm);
  text-align: center;
  opacity: 0;
  transition: opacity var(--awx-transition);
}

.swiper-slide-active .awx-gallery-carousel__caption {
  opacity: 1;
}

.awx-gallery-carousel__client {
  margin: 0;
  color: var(--surface-heading);
  font-family: var(--awx-font-display);
  font-size: var(--awx-step-0);
  font-weight: 700;
  text-transform: uppercase;
}

.awx-gallery-carousel__product {
  margin: 0.25em 0 0;
  color: var(--surface-accent);
  font-size: var(--awx-step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- Controls ---------------------------------------------------------------- */

.awx-gallery-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--awx-space-md);
  margin-top: var(--awx-space-lg);
}

.awx-gallery-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: var(--awx-rule) solid var(--surface-rule);
  border-radius: 999px;
  color: var(--surface-heading);
  cursor: pointer;
  transition: border-color var(--awx-transition), color var(--awx-transition);
}

.awx-gallery-carousel__arrow:hover {
  border-color: var(--surface-accent);
  color: var(--surface-accent);
}

.awx-gallery-carousel__arrow svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* awx_arrow_svg() always points right, so the previous button flips it
   rather than needing a second, mirror-image SVG maintained separately. */
.awx-gallery-carousel__arrow--prev svg {
  transform: scaleX(-1);
}

.awx-gallery-carousel__dots {
  display: flex;
  gap: 0.5rem;
}

/* Swiper's pagination module generates these two class names itself inside
   the dots container above — not a build-step scoping concern, since this
   theme has no CSS preprocessor in front of it, just plain stylesheets. */
.awx-gallery-carousel__dots .swiper-pagination-bullet {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--surface-rule);
  opacity: 1;
  border-radius: 999px;
  cursor: pointer;
}

.awx-gallery-carousel__dots .swiper-pagination-bullet-active {
  background: var(--surface-accent);
}