/* =============================================================
   Mini Trustpilot - module.css
   Alt er navngivet med præfikset .mmband.
   ============================================================= */

.mmband {
  --mmband-bg: #EEECE8;
  --mmband-card-bg: #FFFFFF;
  --mmband-ink: #223B40;
  --mmband-star: #00B67A;
  --mmband-muted: #5D7C7C;
  --mmband-card-width: 300px;
  --mmband-gap: 14px;
  background: var(--mmband-bg);
  color: var(--mmband-ink);
  padding: 18px 0 14px;
  overflow: hidden;

  /* Fuld bredde: bryder ud af temaets indholdskolonne, så båndet går
     helt ud til begge kanter, uanset hvor modulet placeres.
     Bredden regnes ud fra dokumentets bredde og ikke 100vw, så en
     lodret scrollbar ikke skaber vandret scroll. */
  width: calc(100% + var(--mmband-bleed) * 2);
  margin-left: calc(var(--mmband-bleed) * -1);
  margin-right: calc(var(--mmband-bleed) * -1);
  --mmband-bleed: calc((100vw - 100%) / 2);
}

.mmband-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.mmband-track {
  display: flex;
  width: max-content;
  animation: mmband-drift var(--mmband-duration, 75s) linear infinite;
  will-change: transform;
}

.mmband-set { display: flex; gap: var(--mmband-gap); padding-right: var(--mmband-gap); }

@keyframes mmband-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.mmband-row:hover .mmband-track,
.mmband-row:focus-within .mmband-track { animation-play-state: paused; }

.mmband-card {
  flex: 0 0 var(--mmband-card-width);
  width: var(--mmband-card-width);
  box-sizing: border-box;
  margin: 0;
  padding: 12px 16px 11px;
  background: var(--mmband-card-bg);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(34, 59, 64, .05), 0 6px 16px rgba(34, 59, 64, .05);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mmband-stars { display: flex; gap: 2px; }
.mmband-star { width: 13px; height: 13px; display: inline-flex; background: #DDE1E1; border-radius: 2px; padding: 1.5px; box-sizing: border-box; }
.mmband-star.is-on { background: var(--mmband-star); }
.mmband-star svg { width: 100%; height: 100%; fill: #FFFFFF; }

.mmband-card__text {
  margin: 0; border: 0; padding: 0;
  font-size: .8125rem; line-height: 1.45; color: var(--mmband-ink); opacity: .84;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mmband-card__meta { margin: 0; font-size: .6875rem; color: var(--mmband-muted); }
.mmband-card__dot { margin: 0 5px; }

.mmband-source { margin: 12px 0 0; text-align: center; font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--mmband-muted); }

@media (max-width: 639px) {
  .mmband { padding: 14px 0 12px; }
  .mmband { --mmband-card-width: 260px; --mmband-gap: 10px; }
  .mmband-card { padding: 11px 14px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .mmband-track { animation: none; }
  .mmband-row {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none; mask-image: none;
    padding-bottom: 6px;
  }
  .mmband-card { scroll-snap-align: start; }
  .mmband-set:nth-child(2) { display: none; }
}

/* Værn: på en skærm med klassisk scrollbar er 100vw bredere end det
   synlige dokument. Uden dette kan fuld bredde give nogle få pixels
   vandret scroll. Reglen rammer kun sider hvor modulet faktisk ligger. */
@supports selector(:has(*)) {
  body:has(.mmband) { overflow-x: clip; }
}