/* Reviews Carousel — section styles
   The photo column and the sideways-scrolling quote cards.
   Loads with the Tour Ceylon +94 theme. Depends on the shared styles
   snippet for the section shell, the container and the small pieces.
   -------------------------------------------------------------------- */

.tc94-reviews { overflow: hidden; }

.tc94-reviews__layout {
  display: grid;
  gap: var(--wp--preset--spacing--80);
  align-items: center;
}

@media (min-width: 64rem) {
  .tc94-reviews__layout {
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
      gap: var(--wp--preset--spacing--100);
      
      align-items: stretch;
    }
}

.tc94-reviews__media {
  position: relative;
  margin: 0;
  border-radius: var(--wp--custom--radius--md);
  overflow: hidden;
  box-shadow: var(--wp--custom--shadow--lg);
  aspect-ratio: 4 / 3;
}

@media (min-width: 64rem) {
  .tc94-reviews__media {
      
      --tc94-reviews-bleed: max(var(--wp--custom--gutter), (100vw - var(--wp--custom--layout--container-max)) / 2);
      margin-left: calc(var(--tc94-reviews-bleed) * -1);
      width: calc(100% + var(--tc94-reviews-bleed));
      
      aspect-ratio: auto;
      min-height: 30rem;
      border-radius: 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0;
    }
}

.tc94-reviews__media img { width: 100%; height: 100%; object-fit: cover; }

.tc94-reviews__media figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--custom--color--on-dark);
  background: linear-gradient(to top, rgba(20, 26, 32, 0.85), transparent);
}

.tc94-reviews__body { min-width: 0; }

.tc94-reviews__head { margin-bottom: var(--wp--preset--spacing--70); }

.tc94-reviews__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  margin-top: var(--wp--preset--spacing--50);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--custom--color--text-muted);
}

.tc94-carousel { position: relative; }

.tc94-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  margin-inline: calc(var(--wp--custom--gutter) * -1);
  padding-inline: var(--wp--custom--gutter);
}

.tc94-carousel__viewport::-webkit-scrollbar { display: none; }

.tc94-carousel__track {
  display: flex;
  gap: var(--wp--preset--spacing--50);
  padding: 0;
  margin: 0;
  list-style: none;
}

.tc94-carousel__slide {
  flex: 0 0 min(100%, 25rem);
  scroll-snap-align: start;
  display: flex;
}

.tc94-carousel__controls {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--40);
  margin-top: var(--wp--preset--spacing--60);
}

.tc94-carousel__btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius--circle);
  background-color: var(--wp--preset--color--base);
  color: var(--wp--custom--color--text);
  cursor: pointer;
  transition: background-color var(--tc94-transition-base),
              border-color var(--tc94-transition-base),
              color var(--tc94-transition-base),
              opacity var(--tc94-transition-base);
}

.tc94-carousel__btn:hover:not(:disabled) {
  background-color: var(--wp--preset--color--surface-dark);
  border-color: var(--wp--preset--color--surface-dark);
  color: var(--wp--custom--color--on-dark);
}

.tc94-carousel__btn:disabled { opacity: 0.35; cursor: default; }

.tc94-carousel__dots {
  display: flex;
  gap: var(--wp--preset--spacing--20);
  margin-left: auto;
}

.tc94-carousel__dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: var(--wp--custom--radius--circle);
  background-color: var(--wp--preset--color--line-strong);
  cursor: pointer;
  transition: background-color var(--tc94-transition-base), width var(--tc94-transition-base);
}

/* An 8px dot is an 8px tap target - below every accessibility minimum, and the
   reason a thumb lands between two of them. The dot itself stays 8px so the
   design is unchanged; an invisible overlay carries the tap instead. Each
   overlay reaches half the gap to either side, so neighbouring targets meet
   exactly: no overlap to make a boundary tap ambiguous, and no dead strip
   between them. Holds at both widths, 8px idle and 22px active. */
.tc94-carousel__dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + var(--wp--preset--spacing--20));
  height: 24px;
  transform: translate(-50%, -50%);
}

.tc94-carousel__dot[aria-current="true"] {
  background-color: var(--wp--preset--color--accent);
  width: 22px;
  border-radius: var(--wp--custom--radius--pill);
}

.tc94-quote-card {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--50);
  width: 100%;
  padding: var(--wp--preset--spacing--70);
  background-color: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--md);
  box-shadow: var(--wp--custom--shadow--sm);
}

.tc94-quote-card__icon {
  width: var(--wp--custom--icon--size-xl);
  height: var(--wp--custom--icon--size-xl);
  color: var(--wp--custom--alpha--gold-35);
  fill: currentColor;
}

.tc94-quote-card blockquote {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--semibold);
  line-height: var(--wp--custom--leading--snug);
  letter-spacing: var(--wp--custom--tracking--snug);
  color: var(--wp--custom--color--text);
  margin: 0;
}

.tc94-quote-card__foot {
  margin-top: auto;
  padding-top: var(--wp--preset--spacing--50);
  border-top: 1px solid var(--wp--preset--color--line);
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
}

.tc94-quote-card__name {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--custom--color--text);
}

.tc94-quote-card__source {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--custom--color--text-subtle);
}