/* ── Trustpilot widget strip (template-parts/trustpilot-widgets.php) ──────
   Image exports of real Trustpilot reviews, at the foot of the Anmeldelser
   page. The page above it already has a photo marquee and a card grid, so
   this block stays deliberately quiet: hairlines, one faint green wash, and
   a single accent — the green edge on each card, which is what tells you at
   a glance that this proof came from Trustpilot and not from us.          */

/* The band starts flush against the stats bar's hairline — no margin of its own
   and no second rule of its own, so the hairline reads as its top edge rather
   than as a line floating in a gap. The gap under the stats is dropped by
   --flush, which page-anmeldelser.php only adds when this section renders. */
.dp-reviews-stats--flush {
  margin-bottom: 0;
}

.dp-tpw {
  --dp-tpw-green: #00b67a;
  --dp-tpw-gap: 1.25rem;
  position: relative;
  margin-top: 0;
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(2.25rem, 4vw, 3rem);
  /* The wash is stopped well short of the edges so the block reads as a band
     inside the page rather than a full-width section. */
  background: radial-gradient(120% 80% at 50% 0%, rgba(0, 182, 122, 0.05) 0%, transparent 62%);
}

.dp-tpw__inner {
  position: relative;
}

/* ── Heading: the logo is the title ──────────────────────────────────── */
.dp-tpw__head {
  text-align: center;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* Set in the page's own display face, a size down from the h1 above — this is
   a section inside Anmeldelser, not a second page heading. */
.dp-tpw__title {
  margin: 0 0 0.5rem;
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--dp-text);
}

.dp-tpw__lead {
  margin: 0 auto;
  max-width: 30rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--dp-text-soft);
}

/* ── Track ───────────────────────────────────────────────────────────── */
.dp-tpw__viewport {
  position: relative;
}

/* --dp-tpw-count is set inline from PHP. A fixed column count beats auto-fit
   here: with one or two widgets, auto-fit would stretch a single screenshot
   across the full 1200px row. */
.dp-tpw__track {
  display: grid;
  grid-template-columns: repeat(var(--dp-tpw-count, 3), minmax(0, 1fr));
  /* Cards keep their own screenshot's shape, so a row can run to different
     heights. Top-aligned rather than stretched: stretching would either crop
     the shorter shots or leave white under them, and aligning the tops keeps
     the green edges on one line. */
  align-items: start;
  gap: var(--dp-tpw-gap);
  max-width: calc(var(--dp-tpw-count, 3) * 380px + (var(--dp-tpw-count, 3) - 1) * var(--dp-tpw-gap));
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.dp-tpw__item {
  min-width: 0;
}

/* The card is the screenshot — no frame around it, no white margin inside it.
   Anything else reads as a picture of a review pinned to a card, rather than
   as the review. */
.dp-tpw__card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--dp-shadow-soft);
  text-decoration: none;
  line-height: 0;
}

/* The one accent in the block, sitting on the screenshot rather than framing
   it. Above the image so the corners follow the card's radius. */
.dp-tpw__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 3px;
  background: var(--dp-tpw-green);
}

a.dp-tpw__card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.dp-tpw__card:hover,
a.dp-tpw__card:focus-visible {
  box-shadow: var(--dp-shadow-medium);
  transform: translateY(-2px);
}

/* Fills the card. --dp-tpw-ratio is set inline from PHP on each item, from that
   screenshot's own dimensions, so every export is shown whole — no crop, no
   letterbox, whatever shape the next upload happens to be. object-fit only has
   anything to do at the clamp, where a wildly out-of-band file is pulled back
   into range; anchored to the top, because that is where the stars and the
   opening line of a review are. */
.dp-tpw__img {
  display: block;
  width: 100%;
  aspect-ratio: var(--dp-tpw-ratio, 4 / 3);
  object-fit: cover;
  object-position: 50% 0;
  background: #fff;
}

/* ── Scrolling strip ─────────────────────────────────────────────────────
   On at every width past three cards (--carousel), and on phones as soon as
   there is more than one (--multi, in the mobile block below) — a phone row
   is one card wide, so three stacked cards is most of a screen.

   Deliberately no full-bleed: pulling the track to the screen edges needs
   100vw, which includes the desktop scrollbar and would push the document
   wider than the viewport. Cards scroll inside the content width instead. */
.dp-tpw--carousel .dp-tpw__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Cards lift on hover; without the padding the shadow gets clipped. */
  padding-block: 6px 10px;
  overscroll-behavior-x: contain;
}

.dp-tpw--carousel .dp-tpw__viewport::-webkit-scrollbar {
  display: none;
}

/* No width:max-content — the track has to stay viewport-width so the items'
   percentage widths resolve against it. They overflow it, which is exactly
   what the scrolling viewport is for. */
.dp-tpw--carousel .dp-tpw__track {
  display: flex;
  align-items: flex-start;
  max-width: none;
}

.dp-tpw--carousel .dp-tpw__item {
  flex: 0 0 auto;
  /* Three per view, sized off the viewport rather than the track so the
     widths hold whatever the card count is. */
  width: calc((100% - var(--dp-tpw-gap) * 2) / 3);
  scroll-snap-align: start;
}

.dp-tpw__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.75rem;
}

.dp-tpw__controls[hidden] {
  display: none;
}

.dp-tpw__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--dp-border);
  border-radius: 50%;
  background: #fff;
  color: var(--dp-text);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.dp-tpw__nav svg {
  width: 18px;
  height: 18px;
}

.dp-tpw__nav:hover:not(:disabled) {
  border-color: var(--dp-tpw-green);
  color: var(--dp-tpw-green);
}

.dp-tpw__nav:disabled {
  opacity: 0.32;
  cursor: default;
}

/* Dashes rather than dots: they read as pages of a strip, and they stay
   legible at the 3-per-view widths where a dot would be a speck. */
.dp-tpw__dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dp-tpw__dot {
  width: 20px;
  height: 3px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: var(--dp-border);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}

.dp-tpw__dot[aria-current="true"] {
  width: 30px;
  background: var(--dp-tpw-green);
}

@media (max-width: 1023px) {
  .dp-tpw--carousel .dp-tpw__item {
    width: calc((var(--dp-width) - var(--dp-tpw-gap)) / 2);
  }
}

@media (max-width: 640px) {
  .dp-tpw {
    --dp-tpw-gap: 0.875rem;
  }

  /* A single widget still gets the plain, full-width layout. */
  .dp-tpw__track {
    grid-template-columns: 1fr;
    max-width: none;
  }

  /* Everything past one scrolls, not just the four-and-up case. */
  .dp-tpw--multi .dp-tpw__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-block: 6px 10px;
    overscroll-behavior-x: contain;
  }

  .dp-tpw--multi .dp-tpw__viewport::-webkit-scrollbar {
    display: none;
  }

  .dp-tpw--multi .dp-tpw__track {
    display: flex;
    align-items: flex-start;
  }

  /* Peek: the sliver of the next card is what says "there is more". */
  .dp-tpw--multi .dp-tpw__item {
    flex: 0 0 auto;
    width: min(78vw, 320px);
    scroll-snap-align: start;
  }

  .dp-tpw__nav {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dp-tpw--carousel .dp-tpw__viewport,
  .dp-tpw--multi .dp-tpw__viewport {
    scroll-behavior: auto;
  }

  a.dp-tpw__card {
    transition: none;
  }

  a.dp-tpw__card:hover,
  a.dp-tpw__card:focus-visible {
    transform: none;
  }
}