/*
  Module:      solver-references
  Version:     1.8.0
  Updated:     2026-08-12
  Description: Testimonial carousel on brand background — quote cards with scroll-snap track and prev/next buttons
  Dependencies: Custom properties (--srf-*) set on .solver-references from module.html; global --solver-* tokens from theme-overrides.css

  Changelog:
  1.8.0 (2026-08-25) — Under-glidingen tilbake (Davids presisering): sticky kort
        i sporet, kortene glir under den HVITE flaten — ingen lapper/kanter/farget
        bakgrunn i det hele tatt, kun myk nøytral dybdeskygge
  1.7.1 (2026-08-25) — Spor-kortreglene skopet til __track (den faste kolonnen er
        selv en __card og arvet feil bredde)
  1.7.0 (2026-08-25) — Låst Google-kort står i EGEN kolonne ved siden av sporet
        (ingen under-gliding/lapper/vollgrav); unlock-brytepunktene stabler kortet
        over sporet i stedet
  1.6.1 (2026-08-25) — Hjørnebitene borte: avrundet «vollgrav» i seksjonsfargen
        (22 px spread-skygge m/ radius) rundt det låste kortet i stedet for notch-fyll
  1.6.0 (2026-08-25) — Hjørnelappen bak det låste Google-kortet males kun i
        hjørne-utsparingene (avrundet clip — ikke firkant over passerende kort);
        pilene ruller nøyaktig ett kort per klikk
  1.5.0 (2026-08-21) — Kompakt kortvariant
  1.4.0 (2026-08-21) — (kun standardinnhold) Fem nye kundereferanser fra
        Google-omtaler i default-listen
  1.3.0 (2026-08-12) — Låsingen slippes på små skjermer (--unlock-600/-980 fra
        feltet): kortet blir et vanlig kort i sporet igjen
  1.2.4 (2026-08-04) — Ekte årsak fikset: hjørneblinkene var kortet bak som
        slapp gjennom det låste kortets avrundede hjørne-utsnitt. Firkantet
        lapp i seksjonsfargen (::before) + gjenopptegnet kortflate (::after)
        bak innholdet fyller utsnittene; clip-path/lag-promotering fra
        1.2.2–1.2.3 fjernet (angrep feil årsak)
  1.2.3 (2026-08-04) — clip-path-avrunding på kortene i pinned-sporet
        (composite-tids-klipping — border-radius alene flikret fortsatt)
  1.2.2 (2026-08-04) — Kortene i pinned-sporet ligger på eget composite-lag
        (translateZ(0)) så hjørneavrundingen ikke blinker hvitt under det
        sticky Google-kortet
  1.2.1 (2026-08-04) — Ingen hover/pointer på Google-kortet
  1.2.0 (2026-08-04) — Google-kort (sticky locked-variant m/ kant-skygge,
        stjerner, hover-løft) og gull kursiv em i sitater
  1.1.1 (2026-08-04) — Full typography var-driven here (scope_css dead at
        render made the heading invisible on navy)
  1.1.0 (2026-08-03) — (no changes here) Anker-ID in fields/html
  1.0.0 (2026-07-10) — Initial release
*/

/* ============ Root / width modes ============ */

.solver-references {
  position: relative;
  overflow: hidden;
}

/* Full-width mode breaks out of any constraining page container (dnd row
   max-width) so the background truly reaches the viewport edges */
.solver-references--width-full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.solver-references--width-fixed {
  max-width: var(--srf-module-width);
}

.solver-references--width-percent {
  width: var(--srf-module-width);
}

.solver-references--width-fixed.solver-references--module-left,
.solver-references--width-percent.solver-references--module-left {
  margin-right: auto;
}

.solver-references--width-fixed.solver-references--module-center,
.solver-references--width-percent.solver-references--module-center {
  margin-left: auto;
  margin-right: auto;
}

.solver-references--width-fixed.solver-references--module-right,
.solver-references--width-percent.solver-references--module-right {
  margin-left: auto;
}

/* ============ Section background layers ============ */

.solver-references__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}

.solver-references__bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.solver-references__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ============ Inner / section head ============ */

.solver-references__inner {
  position: relative;
  z-index: 2;
  max-width: var(--srf-inner-max);
  margin: 0 auto;
  padding: 0 40px;
}

/* Heading left, nav buttons bottom-right, as in the design */
.solver-references__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: var(--srf-head-gap);
}

.solver-references__head-copy {
  max-width: 720px;
}

.solver-references__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--srf-eyebrow);
  margin: 0 0 18px;
}

.solver-references__heading {
  font-family: var(--srf-font-heading);
  font-size: var(--srf-size-heading);
  font-weight: var(--srf-weight-heading, 700);
  font-style: var(--srf-style-heading, normal);
  color: var(--srf-heading-color);
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin: 0;
}

.solver-references__heading em {
  font-style: italic;
  font-weight: 500;
  color: var(--srf-em-color);
}

@media (max-width: 900px) {
  .solver-references__heading {
    font-size: calc(var(--srf-size-heading) * 0.8);
  }
}

/* ============ Google Reviews-kort ============ */

/* locked: sticky at the track's left edge — cards glide under the WHITE card
   face. No painted backdrops, patches or edges: white-on-white merges
   invisibly, and a soft neutral shadow carries the depth separation. */
.solver-references__gcard--locked {
  position: sticky;
  left: 0;
  z-index: 2;
  scroll-snap-align: none;
  box-shadow: 24px 0 46px -26px rgba(10, 14, 40, 0.45);
}
/* snapping must skip past the pinned card's slot */
.solver-references__track--pinned {
  scroll-padding-left: calc((100% - 52px) / 3 + 26px);
}

/* Released on small screens/* Released on small screens/* Released on small screens: a locked card would take the whole left half of
   the track, leaving almost nothing to scroll. The card then behaves like any
   other card — no pinning, no edge shadow, and it snaps into place like the
   rest. The backdrop patches go with it: they only exist to hide cards passing
   underneath a pinned card. The modifier class comes from the module field, so
   the editor decides how far down the lock survives. */
@media (max-width: 600px) {
  .solver-references--unlock-600 .solver-references__gcard--locked {
    position: static;
    z-index: auto;
    scroll-snap-align: start;
    box-shadow: none;
  }
  .solver-references--unlock-600 .solver-references__track--pinned {
    scroll-padding-left: 0;
  }
}

@media (max-width: 980px) {
  .solver-references--unlock-980 .solver-references__gcard--locked {
    position: static;
    z-index: auto;
    scroll-snap-align: start;
    box-shadow: none;
  }
  .solver-references--unlock-980 .solver-references__track--pinned {
    scroll-padding-left: 0;
  }
}

.solver-references__g-top {
  display: flex;
  align-items: center;
  gap: 9px;
}
.solver-references__g-name {
  font-family: var(--srf-font-text);
  font-weight: 600;
  font-size: 16px;
  color: var(--srf-name-color);
}
.solver-references__g-ext {
  margin-left: auto;
  color: #9aa0b5;
}
.solver-references__g-rating {
  font-family: var(--srf-font-text);
  font-size: 46px;
  font-weight: 700;
  color: var(--srf-name-color);
  margin-top: auto;
  line-height: 1;
  letter-spacing: -0.02em;
}
.solver-references__g-stars {
  margin: 16px 0 12px;
  display: block;
}
.solver-references__g-count {
  font-family: var(--srf-font-text);
  font-size: 14.5px;
  color: var(--srf-role-color);
}

/* ============ Nav buttons ============ */

.solver-references__nav {
  display: flex;
  gap: 12px;
  flex: none;
}

.solver-references__nav-btn {
  width: 50px;
  height: 50px;
  border-radius: var(--srf-nav-radius);
  border: 1.5px solid var(--srf-nav-border);
  background: transparent;
  color: var(--srf-nav-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}

/* theme-overrides.css adds a 1px border to button:hover/:focus (0-1-1) —
   restate the full hover look at 0-2-0 so the button never resizes */
.solver-references__nav-btn:hover,
.solver-references__nav-btn:focus {
  background: var(--srf-nav-hover-bg);
  border: 1.5px solid var(--srf-nav-hover-bg);
  border-radius: var(--srf-nav-radius);
  color: var(--srf-nav-hover-icon);
}

.solver-references__nav-btn:focus-visible {
  outline: 2px solid var(--srf-nav-hover-bg);
  outline-offset: 2px;
}

/* ============ Carousel track ============ */

.solver-references__track {
  display: flex;
  gap: var(--srf-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  /* Hidden scrollbar — the buttons and swipe are the affordance */
  scrollbar-width: none;
}

.solver-references__track::-webkit-scrollbar {
  display: none;
}

.solver-references__track:focus-visible {
  outline: 2px solid var(--srf-nav-hover-bg);
  outline-offset: 4px;
}

/* ============ Quote cards ============ */

.solver-references__card {
  flex: 0 0 calc((100% - (var(--srf-per-view) - 1) * var(--srf-gap)) / var(--srf-per-view));
  scroll-snap-align: start;
  background: var(--srf-card-bg);
  border-radius: var(--srf-card-radius);
  padding: 36px 34px;
  margin: 0; /* blockquote reset */
  display: flex;
  flex-direction: column;
}

.solver-references__qmark {
  font-size: 48px;
  line-height: 0.6;
  height: 24px;
  font-weight: 700;
  color: var(--srf-qmark);
  margin-bottom: 18px;
}

.solver-references__quote em {
  color: var(--srf-em-color, #b78e50);
  font-style: italic;
}

.solver-references__quote {
  font-family: var(--srf-font-text);
  font-size: var(--srf-size-quote);
  color: var(--srf-quote-color);
  font-weight: var(--srf-weight-text, 400);
  font-style: var(--srf-style-text, normal);
  line-height: 1.62;
  margin: 0 0 26px;
  flex: 1;
}

.solver-references__person {
  font-family: var(--srf-font-text);
  font-size: var(--srf-size-name);
  color: var(--srf-name-color);
  font-weight: 700;
  font-style: var(--srf-style-text, normal);
  font-weight: 700;
}

.solver-references__role {
  font-family: var(--srf-font-text);
  font-size: var(--srf-size-role);
  color: var(--srf-role-color);
  font-weight: var(--srf-weight-text, 400);
  font-style: var(--srf-style-text, normal);
  margin-top: 3px;
}

/* compact cards — lower and tighter */
.solver-references--compact .solver-references__card {
  padding: 24px 24px 26px;
}
.solver-references--compact .solver-references__qmark {
  font-size: 36px;
  height: 18px;
  margin-bottom: 12px;
}
.solver-references--compact .solver-references__quote {
  font-size: calc(var(--srf-size-quote) * 0.9);
  line-height: 1.5;
  margin-bottom: 16px;
}
.solver-references--compact .solver-references__role {
  margin-top: 2px;
}

/* ============ Responsive ============ */

@media (max-width: 980px) {
  .solver-references__card {
    flex-basis: calc((100% - var(--srf-gap)) / 2);
  }
}

@media (max-width: 600px) {
  .solver-references__inner {
    padding: 0 24px;
  }

  .solver-references__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .solver-references__card {
    flex-basis: 88%;
  }

  /* Section background video off on small screens by default (data saving) */
  .solver-references__bg-video:not(.solver-references__bg-video--mobile) {
    display: none;
  }
}

/* ============ Reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
  .solver-references__nav-btn {
    transition: none;
  }

  /* JS switches to instant (non-smooth) scrolling as well */
  .solver-references__track {
    scroll-behavior: auto;
  }

  .solver-references__bg-video {
    display: none;
  }
}

@media (max-width: 980px) {
  .solver-references__track--pinned {
    scroll-padding-left: calc((100% - 26px) / 2 + 26px);
  }
}
@media (max-width: 600px) {
  .solver-references__track--pinned {
    scroll-padding-left: calc(86% + 26px);
  }
}