/* =========================================================
   AMORA – Reviews Carousel (Scoped)
   Desktop: Vertical | Mobile: Horizontal
   Overlay: active clear, prev/next blurred
   FIX: arrows clickable (stacking context + pointer events)
========================================================= */

.amora-reviews-carousel{
  --amora-gold:#F1BF50;
  --amora-brown:#3C1F1A;
  --paper:#F6F1EC;
  --ink:#2D2926;
  --muted:#7A6F67;
  --shadow: 0 18px 45px rgba(0,0,0,.10);
  --radius: 14px;

  position: relative;
  width: 100%;
  max-width: 100%;
  color: var(--ink);
  font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

.amora-reviews-carousel,
.amora-reviews-carousel *{
  box-sizing: border-box;
}

.amora-reviews-carousel.amora-wrap{
  width: 100%;
  max-width: 100%;
  margin: 40px 0;
  position: relative;
}

.amora-reviews-carousel .amora-title{
  margin: 0 0 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--amora-brown);
  font-size: clamp(18px, 2.2vw, 22px);
}

/* Stage: lock overflow to prevent spill + create stacking context */
.amora-reviews-carousel .amora-stage{
  position: relative;
  width: 100%;
  max-width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  padding: 22px 18px;
}

/* Swiper container (scoped) */
.amora-reviews-carousel .amora-swiper{
  width: 100%;
  height: 540px;       /* desktop default (vertical) */
  overflow: visible;   /* allow peek; stage clips */
  position: relative;
  z-index: 1;
}

/* =========================================================
   Overlay effect (reviews ONLY)
   NOTE: transform/filter create stacking contexts => fixed below
========================================================= */
.amora-reviews-carousel .swiper-slide{
  display: flex;
  align-items: center;
  justify-content: center;

  transition: transform .35s ease, opacity .35s ease, filter .35s ease;
  opacity: .28;
  filter: blur(1.6px);
  transform: scale(.965);
}

.amora-reviews-carousel .swiper-slide-prev,
.amora-reviews-carousel .swiper-slide-next{
  opacity: .45;
  filter: blur(1.1px);
  transform: scale(.98);
}

.amora-reviews-carousel .swiper-slide-active{
  opacity: 1;
  filter: none;
  transform: scale(1);
  z-index: 3;
}

/* Card */
.amora-reviews-carousel .review-card{
  width: min(860px, 100%);
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(20px, 3vw, 42px);
  position: relative;
  overflow: hidden;
}

.amora-reviews-carousel .review-card:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(60,31,26,.10);
  pointer-events:none;
}

.amora-reviews-carousel .review-quote{
  margin: 0;
  font-size: clamp(18px, 2.2vw, 30px);
  line-height: 1.45;
  color: var(--ink);
  padding-right: 56px; /* space for quote icon */
}

.amora-reviews-carousel .quote-mark{
  position:absolute;
  right: 18px;
  bottom: 18px;
  width: 42px;
  height: 42px;
  fill: rgba(60,31,26,.20);
}

/* Footer */
.amora-reviews-carousel .review-footer{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-top: 18px;
}

.amora-reviews-carousel .avatar{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: rgba(241,191,80,.28);
  display:grid;
  place-items:center;
  overflow:hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(60,31,26,.12);
}

.amora-reviews-carousel .avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:none; /* JS will show when URL exists */
}

.amora-reviews-carousel .avatar .initials{
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(60,31,26,.85);
}

.amora-reviews-carousel .review-person{ min-width: 0; }

.amora-reviews-carousel .review-name{
  margin:0;
  font-weight: 700;
  color: var(--amora-brown);
}

.amora-reviews-carousel .review-meta{
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(45,41,38,.55);
}

/* =========================================================
   NAV + PAGINATION (scoped)
   FIX CLICK: z-index + pointer-events strategy
========================================================= */

/* Nav overlay always above slides */
.amora-reviews-carousel .amora-nav{
  position:absolute;
  inset: 0;
  z-index: 50;          /* ✅ above swiper & slides */
  pointer-events: none; /* container ignores clicks */
}

/* Buttons clickable */
.amora-reviews-carousel .amora-btn{
  pointer-events: auto;
  z-index: 60;

  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(60,31,26,.18);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow: 0 10px 25px rgba(0,0,0,.10);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.amora-reviews-carousel .amora-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.9);
  border-color: rgba(60,31,26,.28);
}

.amora-reviews-carousel .amora-btn svg{
  width: 18px;
  height: 18px;
  fill: var(--amora-brown);
  opacity: .9;
}

/* IMPORTANT:
   Slides/cards can capture clicks because of transform/filter stacking.
   We disable pointer-events on slides by default, enable only on active slide.
   This guarantees arrows always clickable. */
.amora-reviews-carousel .swiper-slide,
.amora-reviews-carousel .review-card{
  pointer-events: none;
}
.amora-reviews-carousel .swiper-slide-active,
.amora-reviews-carousel .swiper-slide-active *{
  pointer-events: auto;
}

/* Pagination */
.amora-reviews-carousel .amora-pagination{
  position: relative;
  margin-top: 14px;
  text-align: center;
  z-index: 40;
}

.amora-reviews-carousel .swiper-pagination-bullet{
  width: 7px;
  height: 7px;
  opacity: .28;
  background: rgba(60,31,26,.45);
  margin: 0 6px !important;
}
.amora-reviews-carousel .swiper-pagination-bullet-active{
  opacity: 1;
  background: var(--amora-brown);
}

/* -------- Mobile: Horizontal mode -------- */
@media (max-width: 849px){
  .amora-reviews-carousel .amora-swiper{ height: auto; }

  /* arrows left/right INSIDE stage */
  .amora-reviews-carousel .btn-prev{
    position:absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  .amora-reviews-carousel .btn-next{
    position:absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* -------- Desktop: Vertical mode -------- */
@media (min-width: 850px){
  .amora-reviews-carousel .amora-stage{
    padding: 28px 58px;  /* room for vertical dots on right */
  }

  /* dots vertical right side */
  .amora-reviews-carousel .amora-pagination{
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    text-align: center;
  }
  .amora-reviews-carousel .swiper-pagination-bullet{
    display:block;
    margin: 10px 0 !important;
  }

  /* arrows top/bottom */
  .amora-reviews-carousel .btn-prev{
    position:absolute;
    left: 50%;
    top: 14px;
    transform: translateX(-50%);
  }
  .amora-reviews-carousel .btn-next{
    position:absolute;
    left: 50%;
    right: auto;
    bottom: 14px;
    top: auto;
    transform: translateX(-50%);
  }
}

/* Small screens fine tuning */
@media (max-width: 520px){
  .amora-reviews-carousel .amora-stage{ padding: 18px 12px; }
  .amora-reviews-carousel .review-quote{ padding-right: 42px; }
  .amora-reviews-carousel .quote-mark{ width: 34px; height: 34px; }
}