/* Opinions: the proof right after the prices, and nothing else. Words are quoted as written on
   Oferteo; each card leads with the service, then the stars, the words and who said them.
   The content width comes from the shared section gutter, so the cards line up with the services
   at every screen width.
   Behind the white cards lies a photo of a finished hallway with a tidy switchboard, under a navy
   tint. The photo is pinned to the screen and the section is a window onto it: it stays still
   while the page scrolls past. clip-path does that without background-attachment, which phones
   ignore; a fixed child is clipped to the section box. */
.mm-reviews {
  background: #0b1526;
  clip-path: inset(0);
  color: #fff;
  isolation: isolate;
  margin-block: 0 !important;
  padding-block: clamp(4rem, 7vw, 6.5rem);
  position: relative;
}

.mm-reviews__backdrop {
  background: #0b1526 url("../../images/opinie-tlo-1280.webp") center / cover no-repeat;
  inset: 0;
  position: fixed;
  z-index: -1;
}

.mm-reviews__backdrop::after {
  background: linear-gradient(180deg, rgb(9 18 34 / 86%), rgb(9 18 34 / 80%) 45%, rgb(9 18 34 / 88%));
  content: "";
  inset: 0;
  position: absolute;
}

/* Portrait screens see only a quarter of the wide photo; slide it so the switchboard on the left
   stays in the frame instead of the bare hallway wall in the middle. */
@media (max-width: 1023px) {
  .mm-reviews__backdrop {
    background-position: 10% center;
  }
}

@media (min-width: 1300px) {
  .mm-reviews__backdrop {
    background-image: url("../../images/opinie-tlo-1920.webp");
  }
}

@media (min-width: 2000px) {
  .mm-reviews__backdrop {
    background-image: url("../../images/opinie-tlo-2560.webp");
  }
}

.mm-reviews__inner {
  position: relative;
}

.mm-reviews__inner {
  padding-inline: var(--mm-section-gutter);
}

.mm-reviews__head {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  justify-content: space-between;
  margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}

.mm-reviews__signal {
  background: #f4c542;
  border-radius: 999px;
  display: block;
  height: 4px;
  margin-bottom: 1.2rem;
  width: 56px;
}

.mm-reviews__title {
  color: #fff;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(2.6rem, 4.4vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 0;
}

.mm-reviews__title-accent {
  color: #f4c542;
}

/* The score as in the hero: logo, 5,0, stars, how long it has been collected. It links to the
   profile, so the claim is one click from its source. */
.mm-reviews__summary {
  align-items: center;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 10px;
  color: #101827;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  padding: 0.7rem 1.1rem;
  text-decoration: none;
  transition: border-color 140ms ease-out;
}

.mm-reviews__summary:hover {
  border-color: #f4c542;
}

.mm-reviews__logo {
  display: block;
  height: 24px;
  width: auto;
}

.mm-reviews__score {
  color: #4b5563;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
}

.mm-reviews__score strong {
  color: #101827;
  font-size: 1.6rem;
  font-weight: 800;
  margin-right: 0.15rem;
}

.mm-reviews__note {
  color: #4b5563;
  font-size: 0.92rem;
}

.mm-reviews__stars,
.mm-review__stars {
  display: inline-flex;
  gap: 2px;
}

.mm-reviews__stars svg,
.mm-review__stars svg {
  fill: #f2b300;
  height: 18px;
  width: 18px;
}

.mm-reviews__list {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.mm-review {
  display: flex;
  min-width: 0;
}

.mm-review__figure {
  background: #fff;
  border: 1px solid #fff;
  border-radius: 10px;
  color: #101827;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0;
  padding: clamp(1.2rem, 1.8vw, 1.5rem);
}

/* The service leads, in the same duotone icons as the situation tiles above. */
.mm-review__service {
  align-items: center;
  display: flex;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  gap: 0.6rem;
  line-height: 1.15;
  margin: 0;
}

.mm-review__icon {
  fill: none;
  flex: none;
  height: 36px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
  width: 36px;
}

.mm-review__stars {
  margin: 0;
}

.mm-review__quote {
  flex: 1;
  margin: 0;
}

.mm-review__quote p {
  color: #1f2937;
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
}

.mm-review__author {
  align-items: center;
  display: flex;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.1rem;
  justify-content: space-between;
}

.mm-review__source {
  display: block;
  height: 18px;
  opacity: 0.85;
  width: auto;
}

/* Slider dots exist only on phones, where the list scrolls sideways. */
.mm-reviews__dots {
  display: none;
}

@media (max-width: 1023px) {
  .mm-reviews__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phones: a slider. One card at a time with the next one peeking in, dots underneath. */
@media (max-width: 700px) {
  .mm-reviews__summary {
    width: 100%;
  }

  .mm-reviews__list {
    gap: 0.9rem;
    grid-auto-columns: 86%;
    grid-auto-flow: column;
    grid-template-columns: none;
    margin-inline: calc(var(--mm-section-gutter) * -1);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0.25rem var(--mm-section-gutter) 0.5rem;
    scroll-padding-inline: var(--mm-section-gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .mm-reviews__list::-webkit-scrollbar {
    display: none;
  }

  .mm-review {
    scroll-snap-align: start;
  }

  .mm-reviews__dots {
    display: flex;
    gap: 0;
    justify-content: center;
    margin-top: 0.5rem;
  }

  /* The visible dot is 8 px; the button around it is 24 px so a thumb can hit it. */
  .mm-reviews__dot {
    background: rgb(255 255 255 / 38%);
    background-clip: content-box;
    border: 0;
    border-radius: 999px;
    height: 24px;
    padding: 8px;
    transition: background-color 160ms ease-out, width 160ms ease-out;
    width: 24px;
  }

  .mm-reviews__dot[aria-current="true"] {
    background: #f4c542;
    background-clip: content-box;
    width: 38px;
  }

  .mm-reviews__dot:focus-visible {
    outline: 3px solid #f4c542;
    outline-offset: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-reviews__summary,
  .mm-reviews__dot {
    transition: none;
  }

  /* No moving window: the photo simply covers the section. */
  .mm-reviews__backdrop {
    position: absolute;
  }
}