/* ============================================================
   carousel-feedback.css
   The testimonials / feedback carousel (index.html · #feedback).
   Extracted from style.css and renamed for a clean separation:
       .feedback-carousel  →  .carousel-feedback
       .feedback-*         →  .carousel-feedback__*
   Pairs with carousel-feedback.js. LINK AFTER style.css so the
   shared tokens (--fs-feedback, colours, spacing) are available.
   ============================================================ */

/* ==================== FEEDBACK CAROUSEL (INTRO VARIANT) ==================== */
.intro.carousel-feedback { position:relative; margin:var(--space-xs) auto; margin-top:var(--space-xs);  padding:1rem 0 1rem;
  text-align:center; font-family:var(--ff-heading); color:var(--color-text); box-sizing:border-box;
  display:block; flex-direction:column; align-items:center; justify-content:center; background: transparent; }

/* Narrow inner "sheet" */
.intro.carousel-feedback .carousel-feedback__inner {
  position: relative; margin: 0 auto;  width: min(560px, 92%);
  max-width: 100%;

  /* reduce the top padding so the quote doesn't start too low */
  padding: 1rem 1.5rem 1.1rem;

  background: linear-gradient(
    to right,
    rgba(255,255,255,0.5),
    rgba(255,255,255,0.7),
    rgba(255,255,255,0.9)
  );
  border-radius: 4px;
  box-sizing: border-box; }

/* Track layout */
.intro.carousel-feedback .carousel-feedback__track{
  display: grid;
   min-height: clamp(8rem, 18vw, 8rem); /* stable card height across quotes */
}
/* Feedback items */
/* Each slide fills the card height, whole content hugs the bottom */
.intro.carousel-feedback .carousel-feedback__item{
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;

  display: flex;
  flex-direction: column;

  /* KEY CHANGE: push the whole content to the bottom */
  justify-content: flex-end;

  height: 100%;

  /* create "empty space" above for short quotes */
  padding-top: clamp(0.25rem, 0.8vw, 0.9rem);
}

.intro.carousel-feedback .carousel-feedback__item.is-active{
  opacity: 1;
  pointer-events: auto;
}

.intro.carousel-feedback .carousel-feedback__text{
  font-family: var(--ff-base);
  font-size: var(--fs-feedback);
  line-height: 1.35;
  letter-spacing: 0.01em;
  margin: 0;                 /* IMPORTANT */
}

/* Author stays close to the quote, but still at the bottom area */
.intro.carousel-feedback .carousel-feedback__author{
  margin: 0;                 /* IMPORTANT */
  padding-top: var(--space-s);
  font-size: var(--fs-body);
  color: var(--color-text);
}

/* ===================================
   ARROW BUTTONS – ICON-ONLY INTERACTION
   =================================== */

.intro.carousel-feedback .carousel-feedback__arrow {
  font-family: var(--ff-accent); position: absolute; top: 50%; transform: translateY(-50%);
  border: none; background: transparent;
  color: var(--color-bridge); cursor: pointer; padding: 0; font-size: 5rem; line-height: 1; width: 2rem; height: 2rem;
  display: inline-flex;
  align-items: center; justify-content: center; transition: transform 0.15s ease, font-size 0.15s ease; }

/* Positioning */
.intro.carousel-feedback .carousel-feedback__arrow--prev { left: -2.5rem; }
.intro.carousel-feedback .carousel-feedback__arrow--next { right: -2.5rem; }

/* Hover: ONLY icon reacts */
.intro.carousel-feedback .carousel-feedback__arrow:hover,
.intro.carousel-feedback .carousel-feedback__arrow:focus-visible{
  transform: translateY(-50%) scale(1.06); color: var(--color-yellow-hover); font-size: 6rem;
  outline: none;
}

/* Active (click) feedback */
.intro.carousel-feedback .carousel-feedback__arrow:active { transform: translateY(-50%) scale(0.95); }

/* ===========================
   DOTS – BRIDGE GREEN STATES
   =========================== */

.intro.carousel-feedback .carousel-feedback__dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; margin-bottom: 0.5rem;}

.intro.carousel-feedback .carousel-feedback__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 0px solid rgba(124,149,134, 0.7);
  background: rgba(124,149,134, 0.5); cursor: pointer; padding: 0; line-height: 0; transition:
  background-color 0.2s ease, transform 0.1s ease, border-color 0.2s ease; }

.intro.carousel-feedback .carousel-feedback__dot.is-active { background-color: var(--color-bridge); border-color: var(--color-bridge); }

.intro.carousel-feedback .carousel-feedback__dot:hover,
.intro.carousel-feedback .carousel-feedback__dot:focus-visible { transform: scale(1.1); outline: none; }

/* ===========================
   RESPONSIVE
   =========================== */

/* <= 1024px */
@media (max-width: 1024px){
  .intro.carousel-feedback .carousel-feedback__arrow{
    top: 60%;
  }
  .intro.carousel-feedback .carousel-feedback__arrow--prev{ left: -0.45rem; }
  .intro.carousel-feedback .carousel-feedback__arrow--next{ right: -0.45rem; }
}

/* <= 900px */
@media (max-width: 900px){
  .intro.carousel-feedback .carousel-feedback__inner{ width:100%; max-width:100%; padding:1.25rem 1.25rem 1.5rem; }
  .intro.carousel-feedback .carousel-feedback__arrow--prev{ left:0.25rem; }
  .intro.carousel-feedback .carousel-feedback__arrow--next{ right:0.25rem; }
}

/* <= 600px */
@media (max-width: 600px){
  .intro.carousel-feedback .carousel-feedback__arrow{ max-width:100%; font-size:1.8rem; top:80%; }

  .intro.carousel-feedback .carousel-feedback__arrow:hover,
  .intro.carousel-feedback .carousel-feedback__arrow:focus-visible{
    transform: translateY(-50%) scale(1.06);
    color: var(--color-yellow-hover);
    font-size: 2.2rem;
    outline: none;
  }
}

/* ===========================
   FEEDBACK PADDING – TABLETS (iPad)
   =========================== */

/* iPad mini / Air (portrait, 601–900px): the <=900 rule pulls the arrows
   inside the now full-width sheet, but the base 5rem font makes them huge.
   Bring them to the iPad scale/position (matches the @1024 "iPad" look). */
@media (min-width: 601px) and (max-width: 900px){
  .intro.carousel-feedback .carousel-feedback__arrow{ font-size: 2.6rem; top: 60%; }
  .intro.carousel-feedback .carousel-feedback__arrow:hover,
  .intro.carousel-feedback .carousel-feedback__arrow:focus-visible{ font-size: 3rem; }
}

@media (max-width: 1024px) {

  /* Nested inside #about, so it inherits a second layer of section
     width/padding and ends up narrow. On tablet/phone let it fill the
     parent intro block entirely (desktop keeps the framed sheet). */
  .intro.carousel-feedback{
    width: 100%;
    max-width: 100%;
  }
  .intro.carousel-feedback .carousel-feedback__inner{
    width: 100%;
    max-width: 100%;
  }

  /* Inner sheet: significantly reduce vertical padding */
  .intro.carousel-feedback .carousel-feedback__inner{
    padding-top: 0.6rem;
    padding-bottom: 0.7rem;
  }

  /* Slide content: reduce artificial top breathing room */
  .intro.carousel-feedback .carousel-feedback__item{
    padding-top: clamp(0.2rem, 0.6vw, 0.6rem);
  }

  /* Optional: tighten dots spacing slightly */
  .intro.carousel-feedback .carousel-feedback__dots{
    margin-top: 0.35rem;
    margin-bottom: 0.35rem;
  }
}

/* ===========================
   PHONES — make the feedback block larger / more prominent
   Overrides the <=1024px padding reduction above (loads later).
   =========================== */
@media (max-width: 600px){
  .intro.carousel-feedback .carousel-feedback__inner{
    max-width:100%; padding: 1.5rem 1.25rem 1.75rem;
  }
  .intro.carousel-feedback .carousel-feedback__track{
    min-height: clamp(11rem, 44vw, 15rem);
  }
  .intro.carousel-feedback .carousel-feedback__item{
    padding-top: clamp(0.5rem, 3vw, 1.2rem);
  }
  .intro.carousel-feedback .carousel-feedback__text{
    font-size: calc(var(--fs-feedback) * 1.06);
    line-height: 1.4;
  }
}