/* Business testimonials on the home page (Josh, 27 October 2026). Markup:
   components/sections/BusinessTestimonials.tsx (cards) and
   components/site/BusinessTestimonialsSlider.tsx (slider).

   Each card rebuilds one artwork from the comms set. The artwork is 2000 x 1406
   and every size below comes from it: `.bt-card_art` is a size container, so
   1cqw is 1% of the artwork's width, i.e. 20 artwork pixels. The quote box
   starts at x 363 (18.15cqw), the quote text is ~54px (2.7cqw) on a 64px line
   (3.2cqw), and so on. */

.section_business-testimonials {
  overflow-x: clip; /* the full-width slider is 100vw, which counts a desktop scrollbar */
  --bt-lime: #8bff00;  /* the artwork's bubble green, a touch greener than --lemon */
  --bt-paper: #fdf8e4; /* the artwork's quote box and web address */
  --bt-ink: #1d1700;
}

.business-testimonials_heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 3.5rem;
  text-align: center;
}

.business-testimonials_heading .heading-style-h2 {
  max-width: 24ch;
  margin: 0;
  color: var(--black);
  text-wrap: balance;
}

/* ---- Slider: one card centred, part of the one before and after showing ---- */

.bt-slider_track {
  position: relative; /* cards' offsetLeft is measured against the track */
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Full screen width, so the neighbours run off the screen edges instead of
     being cut at the page margin. */
  margin-inline: calc(50% - 50vw);
}

/* The three copies that make the loop sit in the track as if they were one row. */
.bt-slider_copy {
  display: contents;
}

.bt-slider_track::-webkit-scrollbar {
  display: none;
}

.bt-slider_track:focus-visible {
  outline: 2px solid #4d65ff;
  outline-offset: 4px;
}

.bt-slider_controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.75rem;
}

.bt-slider_dots {
  display: flex;
  gap: 6px;
}

.bt-slider_dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(29, 23, 0, .2);
  transition: background-color .3s cubic-bezier(.23, 1, .32, 1), width .3s cubic-bezier(.23, 1, .32, 1);
}

.bt-slider_dot[data-active] {
  width: 24px;
  border-radius: 4px;
  background-color: var(--black);
}

/* Same round arrows as the "Made for businesses" slider, dark for the cream page. */
.bt-slider_arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--black);
  color: var(--white);
  cursor: pointer;
  transition: opacity .3s cubic-bezier(.23, 1, .32, 1);
  touch-action: manipulation;
}

.bt-slider_arrow:focus:not(:focus-visible) {
  outline: none;
}

/* ---- Card: one artwork ---- */

.bt-card {
  flex: 0 0 min(60%, 780px);
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  scroll-snap-align: center;
  transition: opacity .4s cubic-bezier(.23, 1, .32, 1);
}

/* The cards either side step back once the slider knows which one is centred. */
.bt-slider_track:has(.bt-card[data-current]) .bt-card:not([data-current]) {
  opacity: .6;
}

/* Side cards are clickable; the outer copies are inert, so the pointer is set
   on the track and the centred card opts out. */
.bt-slider_track:has(.bt-card[data-current]) {
  cursor: pointer;
}

.bt-card[data-current] {
  cursor: auto;
}

.bt-card_art {
  /* Layout of the "tall" designs (long quote); the "short" ones override. */
  --logo-top: 10.85cqw;   /* y 217 */
  --quote-gap: 2.7cqw;    /* logo bottom 350 -> box top 404 */
  --quote-min: 0px;
  --source-gap: 3.85cqw;  /* box bottom 1093 -> address 1174 */
  --quote-pad: 5.6cqw 5.75cqw 6.4cqw; /* text starts at x 478; glyphs sit a little high in the box */
  --bubble-drop: -.15cqw; /* bubble bottom 354 vs logo bottom 350 */
  --name-pad-end: 2.7cqw;

  container-type: inline-size;
  width: 100%;
  background-color: var(--bt-ink);
  background-position: center;
  background-size: cover;
}

/* Inside the container, so its cqw are the artwork's (an element's own padding
   would resolve against the next container up). */
.bt-card_layout {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  aspect-ratio: 2000 / 1406;
  padding: var(--logo-top) 18.15cqw 0;
}

.bt-card[data-background="muva-tall"] .bt-card_art {
  background-image: url("/images/testimonials/muva-tall.webp");
}

.bt-card[data-background="muva-short"] .bt-card_art {
  background-image: url("/images/testimonials/muva-short.webp");
}

.bt-card[data-background="mychinashopper-tall"] .bt-card_art {
  --bubble-drop: .75cqw;  /* this design's bubble sits higher: bottom 336 */
  background-image: url("/images/testimonials/mychinashopper-tall.webp");
}

.bt-card[data-background="mychinashopper-short"] .bt-card_art {
  background-image: url("/images/testimonials/mychinashopper-short.webp");
}

.bt-card[data-background$="-short"] .bt-card_art {
  --logo-top: 15.55cqw;   /* y 311 */
  --quote-gap: 3.35cqw;   /* logo bottom 444 -> box top 511 */
  --quote-min: 23cqw;     /* box 511 -> 970 */
  --source-gap: 4cqw;     /* box bottom 970 -> address 1056 */
  --quote-pad: 4.8cqw 5.75cqw 5.2cqw; /* four lines still fit the fixed box */
  --bubble-drop: -.2cqw;  /* bubble bottom 449 vs logo bottom 444 */
}

.bt-card[data-background="mychinashopper-short"] .bt-card_art {
  --quote-pad: 4.8cqw 4.75cqw 5.2cqw; /* these two designs start the text at x 458 */
}

/* Mychinashopper's designs set the name closer to the bubble's right end. */
.bt-card[data-background^="mychinashopper"] .bt-card_art {
  --name-pad-end: 1.55cqw;
}

.bt-card_sender {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.bt-card_logo {
  flex: none;
  width: 6.65cqw;  /* 133 */
  height: 6.65cqw;
  border-radius: 50%;
}

/* Lime name bubble with its tail at the bottom left. */
.bt-card_name {
  position: relative;
  margin: 0 .05cqw var(--bubble-drop) 0; /* right edge at x 1630 */
  padding: 0 var(--name-pad-end) .4cqw 2.7cqw; /* the name sits a little above the middle */
  border-radius: 2cqw;
  background-color: var(--bt-lime);
  color: var(--bt-ink);
  font-size: 2.77cqw;
  font-weight: 500;
  line-height: 3.55cqw; /* + bottom padding = bubble height 79 */
  white-space: nowrap;
}

.bt-card_name::before {
  content: "";
  position: absolute;
  left: -.55cqw;
  bottom: 0;
  width: 1.6cqw;
  height: 1.3cqw;
  background-color: var(--bt-lime);
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 14% 100%, 0 78%);
  border-bottom-left-radius: .5cqw;
}

.bt-card_quote {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: var(--quote-min);
  margin: var(--quote-gap) 0 0;
  padding: var(--quote-pad);
  border: 0;
  border-radius: 2.5cqw;
  background-color: var(--bt-paper);
  color: var(--bt-ink);
  font-size: 2.7cqw;
  line-height: 3.2cqw;
}

.bt-card_quote p {
  margin: 0;
}

.bt-card_source {
  margin: var(--source-gap) .1cqw 0 0;
  color: var(--bt-paper);
  font-size: 2.12cqw;
  line-height: 1;
  text-align: right;
}

@media screen and (max-width: 991px) {
  .bt-card {
    flex-basis: 74%;
  }
}

/* Phones: the artwork keeps its composition, so the frame is drawn wider than
   the card and its outer strips are cropped. The quote box is 63.7% of the
   frame, so a frame 1/0.68 of the card's width keeps the whole box in view.
   The quote text gets a floor so it stays readable at this size. */
@media screen and (max-width: 767px) {
  .business-testimonials_heading {
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .bt-slider_track {
    gap: .625rem;
  }

  .bt-card {
    flex-basis: 84vw;
    border-radius: 20px;
  }

  .bt-card_art {
    width: calc(100% / .68);
    margin-left: calc((100% - 100% / .68) / 2);
  }

  /* A long quote at the reading size outgrows the artwork's height; keep room
     under the web address when it does. */
  .bt-card_layout {
    padding-bottom: 6cqw;
  }

  .bt-card_quote {
    font-size: max(2.7cqw, 15px);
    line-height: max(3.2cqw, 20px);
  }

  .bt-card_source {
    font-size: max(2.12cqw, 12px);
  }
}