/* Salons — Figma 10040:3843
   Content starts at x=140 at 1728 (4px left of the 144px gutter) and the track bleeds off the right edge.
   --salons-l is that left edge; on wide screens it follows the centred 1440px container. */
.salons {
  --salons-l: calc(max(var(--gutter), (100% - 1440px) / 2) - 4px);
  padding: clamp(48px, calc(100 / 1728 * 100vw), 100px) 0 clamp(48px, calc(100 / 1728 * 100vw), 100px);
}
@media (max-width: 899px) { .salons { --salons-l: var(--gutter); } }

.salons-glow { position: absolute; left: 143px; top: 354px; width: 616px; height: 613px; pointer-events: none; }
.salons-glow img { position: absolute; left: -81.17%; top: -81.57%; width: 262.34%; height: 263.14%; }
.salons-glow img.is-phone { display: none; }

.salons-inner { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: clamp(32px, calc(92 / 1728 * 100vw), 92px); }
.salons-title { padding: 0 var(--gutter) 0 var(--salons-l); font-size: clamp(36px, calc(54.74 / 1728 * 100vw), 54.74px); color: var(--text-primary); }
.salons-title-accent { color: var(--text-success); }

.salons-body { display: flex; flex-direction: column; align-items: stretch; gap: clamp(20px, calc(52 / 1728 * 100vw), 52px); }

/* Carousel arrows */
.salons-nav { display: flex; align-items: center; gap: 10.353px; padding-left: var(--salons-l); }
.salons-arrow, .salons-mini-arrow { cursor: pointer; font: inherit; color: inherit; -webkit-appearance: none; appearance: none; }
.salons-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 12.37px; border-radius: 123.7px;
  background: rgba(255,255,255,0.4); border: 1.294px solid var(--border-default);
}
.salons-arrow img, .salons-mini-arrow img { flex: none; }
.salons-arrow.is-next, .salons-mini-arrow.is-next { transform: scaleX(-1); }
.salons-arrow:hover, .salons-mini-arrow:hover { background: #fff; }
.salons-arrow:focus-visible, .salons-mini-arrow:focus-visible, .salons-track:focus-visible { outline: 2px solid var(--brand-dark-green); outline-offset: 2px; }

/* Track — real horizontal scroller with snap; starts at the content edge, bleeds off the right */
.salons-track {
  position: relative;
  display: flex; align-items: center; gap: 15px; width: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-left: var(--salons-l);
  padding: 0 var(--gutter) 0 var(--salons-l);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.salons-track::-webkit-scrollbar { display: none; }
.salons-group { display: flex; align-items: stretch; gap: 24px; flex: none; border-radius: 20px; }
.salons-card, .salons-photo { scroll-snap-align: start; }

/* Testimonial card */
.salons-card {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 32px;
  flex: none; width: min(415px, 85vw); padding: 16px; border-radius: 10px;
  border: 1px solid var(--border-default); background: rgba(250,250,250,0.4);
  line-height: normal;
}

.salons-card-head { display: flex; align-items: center; width: 100%; }
.salons-group.is-padded .salons-card-head { justify-content: space-between; } /* last card carries the small arrows */
/* Agent pills — same component as the stats section pills (icon + label, matching colours) */
.salons-tag {
  display: inline-flex; align-items: center; justify-content: center; gap: 4.368px;
  padding: 8px 12px; border-radius: 1000px; font-family: var(--font-body);
  font-size: 17.944px; line-height: 24.674px; white-space: nowrap;
}
.salons-tag img { width: 20.257px; height: 20.257px; flex: none; }
.salons-tag.display { line-height: normal; }
.salons-tag.is-growth { background: var(--bg-brand); color: var(--text-success); }
.salons-tag.is-receptionist { background: var(--cc-purple); color: #613492; }
.salons-tag.is-manager { background: var(--cal-violet); color: #2e4ba0; }

.salons-mini-nav { display: flex; align-items: center; gap: 8px; }
.salons-mini-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 9.559px; border-radius: 95.586px;
  background: #fff; border: 1px solid var(--border-default);
}

.salons-salon { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.salons-name { font-size: 54.74px; line-height: normal; color: var(--text-primary); }
.salons-place { font-size: 18px; color: var(--text-secondary); }

/* "First 30 days" over the two numbers, in the agent's colour */
.salons-results { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.salons-period { font-size: 15.28px; color: var(--text-success); }
.salons-card.is-receptionist .salons-period { color: #613492; }
.salons-card.is-manager .salons-period { color: #2e4ba0; }

.salons-stats { display: flex; align-items: center; gap: 43px; width: 100%; }
.salons-stat { display: flex; flex-direction: column; gap: 8px; }
.salons-stat.is-bookings { width: 127px; }
.salons-stat.is-value { width: 146px; }
.salons-stat-label { font-size: 18px; color: var(--text-secondary); }
.salons-stat-value { font-size: 50px; color: var(--text-success); white-space: nowrap; }
.salons-card.is-receptionist .salons-stat-value { color: #613492; }
.salons-card.is-manager .salons-stat-value { color: #2e4ba0; } /* matches the Operator pill */
.salons-vrule { display: flex; align-items: center; justify-content: center; width: 0; height: 75px; flex: none; }
.salons-vrule img { flex: none; transform: rotate(90deg); }

/* Photo — 397×436 (Figma 10119:7691), filled, never stretched */
.salons-photo { position: relative; flex: none; width: min(397px, 85vw); aspect-ratio: 397 / 436; border-radius: 10px; overflow: hidden; }
.salons-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.salons-photo.is-darlo img { object-position: center top; } /* keep Katrina's head in */
.salons-photo.is-nolabel img { object-position: center 17%; }

/* Body text in Inter (Shane: Inter everywhere, no Helvetica) */
.salons-place, .salons-stat-label, .salons-period { font-family: var(--font-body); }

/* Mobile — Figma 10108:4077 (402 wide): each photo sits on top of its quote card as one 290px card,
   smaller type, small arrows. js/salons.js shrinks the photo so title → card bottom fits one phone screen. */
@media (max-width: 899px) {
  .salons { padding: 56px 0; }
  .salons-glow { left: 91px; top: 333px; width: 363px; height: 361px; }
  .salons-glow img { display: none; }
  .salons-glow img.is-phone { display: block; left: -137.74%; top: -138.5%; width: 375.48%; height: 377%; }
  .salons-inner, .salons-body { gap: 24px; }
  .salons-title { font-size: min(27.58px, 7.3vw); } /* stays on two lines down to 360px */
  .salons-title-accent { display: block; }

  .salons-nav { gap: 8px; }
  .salons-arrow { width: 34px; height: 34px; padding: 9.559px; border-radius: 95.586px; border-width: 1px; }
  .salons-arrow img { width: 22.941px; height: 22.941px; }
  .salons-mini-nav { display: none; }

  .salons-track { align-items: stretch; gap: 8px; }
  .salons-group, .salons-group.is-padded { flex-direction: column; gap: 0; width: 290px; scroll-snap-align: start; }
  .salons-card, .salons-photo { scroll-snap-align: none; }

  /* The whole card (photo + text) is one Liquid Glass card with the grey border all round (Shane feedback).
     `body` prefix beats glass.css, which would otherwise give only the text part a near-white border. */
  body .salons-group {
    overflow: hidden; border: 1px solid var(--border-default); border-radius: 10px;
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, 0.85),
      inset -1px -1px 0 rgba(255, 255, 255, 0.25),
      0 6px 24px rgba(42, 42, 60, 0.06);
  }
  body .salons-card { border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* Photo on top: 290×252; crop keeps the Figma framing if js shrinks the height. */
  .salons-photo {
    order: -1; width: 100%; height: var(--salons-photo-h, 252px); aspect-ratio: auto;
    border-radius: 0; border-bottom: 1px solid var(--border-default);
  }
  .salons-photo.is-darlo img { object-position: center 3%; }
  .salons-photo.is-jiggs img { object-position: center 5%; }
  .salons-photo.is-nolabel img { object-position: center 7%; }

  .salons-card, .salons-card.is-receptionist, .salons-card.is-manager {
    flex: 1 0 auto; width: 100%; gap: 36px; justify-content: space-between;
    background: rgba(250,250,250,0.5);
  }
  .salons-tag { gap: 4.368px; padding: 8px 12px; font-size: 13.3px; line-height: 24.674px; }
  .salons-tag img { width: 18px; height: 18px; }
  .salons-name { font-size: 39.71px; }
  .salons-place { font-size: 11.08px; }
  .salons-results { gap: 8px; }
  .salons-period { font-size: 11.08px; }
  .salons-stats { gap: 24px; }
  .salons-stat.is-bookings, .salons-stat.is-value { width: 104px; }
  .salons-stat-label { font-size: 13.3px; }
  .salons-stat-value { font-size: 39.71px; }
  .salons-vrule { height: 75px; }
}
/* Short phones: tighter card so less photo has to go. */
@media (max-width: 899px) and (max-height: 760px) {
  .salons-card, .salons-card.is-receptionist, .salons-card.is-manager { gap: 24px; }
  .salons-inner, .salons-body { gap: 16px; }
}