/* =========================================================
   BLOK: OPINIE KLIENTÓW
   ========================================================= */

.on-reviews {
  position: relative;
  overflow: hidden;

  padding-block: clamp(4.75rem, 7vw, 6.75rem);

  background:
    radial-gradient(
      circle at 50% 5%,
      rgba(211, 179, 106, 0.05),
      transparent 34rem
    ),
    var(--color-surface);
}


/* =========================================================
   DEKORACJE TŁA
   ========================================================= */

.on-reviews::before,
.on-reviews::after {
  position: absolute;

  width: 22rem;
  height: 1px;

  content: "";
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(211, 179, 106, 0.24),
      transparent
    );
}

.on-reviews::before {
  top: 3rem;
  left: -5rem;

  transform: rotate(-25deg);
}

.on-reviews::after {
  right: -5rem;
  bottom: 3rem;

  transform: rotate(-25deg);
}


/* =========================================================
   NAGŁÓWEK
   ========================================================= */

.on-reviews__header {
  position: relative;
  z-index: 2;

  width: min(100%, 52rem);

  margin:
    0 auto
    clamp(3rem, 5vw, 4rem);

  text-align: center;
}

.on-reviews__header .section-eyebrow {
  display: block;

  margin-bottom: 0.9rem;

  color: var(--color-accent);

  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.on-reviews__title {
  max-width: 48rem;

  margin: 0 auto;

  color: var(--color-text);

  font-size: clamp(2.25rem, 3.8vw, 3.5rem);
  font-weight: 700;
  line-height: 1.08;

  letter-spacing: -0.04em;

  text-wrap: balance;
}

.on-reviews__intro {
  max-width: 42rem;

  margin: 1.15rem auto 0;

  color: var(--color-text-muted);

  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.7;

  text-wrap: balance;
}


/* =========================================================
   WRAPPER TRUSTINDEX
   ========================================================= */

.on-reviews__widget {
  position: relative;
  z-index: 2;

  width: 100%;
}

.on-reviews__widget .ti-widget {
  width: 100% !important;

  color: var(--color-text) !important;
  font-family: var(--font-body) !important;

  background: transparent !important;
}

.on-reviews__widget .ti-widget-container {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
}


/* =========================================================
   GRID
   DESKTOP: 8 OPINII — 4 × 2
   ========================================================= */

.on-reviews__widget
.on-reviews__grid-ready {
  display: grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap: 1rem !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;
}


/* =========================================================
   POJEDYNCZA OPINIA
   ========================================================= */

.on-reviews__widget .ti-review-item {
  box-sizing: border-box !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;

  transform: none;
}

.on-reviews__widget
.ti-review-item
> .ti-inner {
  position: relative;

  box-sizing: border-box !important;

  display: flex;
  flex-direction: column;

  width: 100% !important;
  height: 100% !important;

  min-height: 14.5rem;

  overflow: hidden;

  padding: 1.35rem !important;

  color: var(--color-text) !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.085) !important;

  border-radius:
    var(--radius-medium) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.024),
      transparent 60%
    ),
    var(--color-background) !important;

  box-shadow:
    0 0.75rem 2rem
    rgba(0, 0, 0, 0.09) !important;

  transition:
    transform
      450ms
      cubic-bezier(0.22, 1, 0.36, 1),

    border-color
      350ms
      ease,

    box-shadow
      450ms
      cubic-bezier(0.22, 1, 0.36, 1)
      !important;
}


/* =========================================================
   ZŁOTY DETAL KARTY
   ========================================================= */

.on-reviews__widget
.ti-review-item
> .ti-inner::before {
  position: absolute;

  top: -1px;
  right: 1.5rem;
  left: 1.5rem;

  height: 1px;

  content: "";
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(211, 179, 106, 0.75),
      transparent
    );

  opacity: 0;

  transform:
    scaleX(0.55);

  transform-origin:
    center;

  transition:
    opacity
      350ms
      ease,

    transform
      500ms
      cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) {

  .on-reviews__widget
  .ti-review-item:hover
  > .ti-inner {
    border-color:
      rgba(211, 179, 106, 0.36) !important;

    box-shadow:
      0 1.4rem 3rem
        rgba(0, 0, 0, 0.19),

      0 0 2rem
        rgba(211, 179, 106, 0.025)
        !important;

    transform:
      translateY(-0.3rem);
  }


  .on-reviews__widget
  .ti-review-item:hover
  > .ti-inner::before {
    opacity: 1;

    transform:
      scaleX(1);
  }

}


/* =========================================================
   AVATAR
   ========================================================= */

.on-reviews__widget .ti-profile-img,
.on-reviews__widget .ti-profile-img img {
  border-radius:
    50% !important;
}


/* =========================================================
   NAZWA AUTORA
   ========================================================= */

.on-reviews__widget .ti-name,
.on-reviews__widget
.ti-review-header
.ti-profile-details
.ti-name {
  color:
    var(--color-text) !important;

  font-family:
    var(--font-heading) !important;

  font-weight:
    700 !important;
}


/* =========================================================
   DATA
   ========================================================= */

.on-reviews__widget .ti-date {
  color:
    var(--color-text-muted) !important;

  font-size:
    0.75rem !important;

  line-height:
    1.4 !important;
}


/* =========================================================
   TEKST OPINII
   ========================================================= */

.on-reviews__widget .ti-review-text,
.on-reviews__widget .ti-review-content {
  color:
    var(--color-text-muted) !important;

  font-size:
    0.875rem !important;

  line-height:
    1.65 !important;
}


/* =========================================================
   "CZYTAJ WIĘCEJ" W POJEDYNCZEJ OPINII
   ========================================================= */

/*
   Tego NIE usuwamy.
   To rozwija tekst pojedynczej opinii.
*/

.on-reviews__widget .ti-read-more {
  color:
    rgba(244, 242, 237, 0.58) !important;

  font-size:
    0.8rem !important;

  font-weight:
    500 !important;

  transition:
    color 250ms ease !important;
}

.on-reviews__widget .ti-read-more:hover {
  color:
    var(--color-accent) !important;
}


/* =========================================================
   GWIAZDKI
   ========================================================= */

.on-reviews__widget .ti-stars {
  margin-top:
    0.65rem !important;

  margin-bottom:
    0.75rem !important;
}


/* =========================================================
   ELEMENTY TRUSTINDEX
   ========================================================= */

.on-reviews__widget .ti-header {
  color:
    var(--color-text) !important;

  background:
    transparent !important;
}

.on-reviews__widget .ti-next,
.on-reviews__widget .ti-prev {
  color:
    var(--color-accent) !important;

  border-color:
    rgba(211, 179, 106, 0.4) !important;

  background:
    var(--color-background) !important;
}


/* =========================================================
   UKRYTE OPINIE
   ========================================================= */

/*
   Klasa ustawiana przez view.js.
*/

.on-reviews__widget
.ti-review-item.on-reviews__review-hidden {
  display: none !important;
}


/* =========================================================
   USUNIĘCIE "POKAŻ WIĘCEJ" TRUSTINDEX
   ========================================================= */

/*
   JS fizycznie usuwa przycisk z DOM.
   CSS jest dodatkowym zabezpieczeniem.
*/

.on-reviews__widget .ti-load-more,
.on-reviews__widget .ti-load-more-reviews,
.on-reviews__widget .ti-load-more-reviews-button,
.on-reviews__widget .ti-more-reviews,
.on-reviews__widget .ti-show-more,

.on-reviews__widget
[class*="load-more"],

.on-reviews__widget
[class*="load_more"],

.on-reviews__widget
[class*="show-more"],

.on-reviews__widget
[class*="show_more"] {
  display: none !important;
}


/* =========================================================
   NASZ PRZYCISK GOOGLE
   ========================================================= */

.on-reviews__footer {
  position: relative;
  z-index: 2;

  display: flex;
  justify-content: center;

  margin-top:
    clamp(2.5rem, 4vw, 3.25rem);
}

.on-reviews__button {
  min-width:
    min(100%, 18rem);
}


/* =========================================================
   KOMUNIKAT W EDYTORZE
   ========================================================= */

.on-reviews__message {
  padding: 2rem;

  color:
    var(--color-text-muted);

  text-align: center;

  border:
    1px dashed
    var(--color-border);

  border-radius:
    var(--radius-medium);
}


/* =========================================================
   ANIMACJE — STAN POCZĄTKOWY
   ========================================================= */

/*
   Bez JS treść pozostaje widoczna.

   Dopiero view.js dodaje klasę .is-animated.
*/

.on-reviews.is-animated
.on-reviews__header
.section-eyebrow,

.on-reviews.is-animated
.on-reviews__title,

.on-reviews.is-animated
.on-reviews__intro,

.on-reviews.is-animated
.ti-review-item:not(
  .on-reviews__review-hidden
),

.on-reviews.is-animated
.on-reviews__footer {
  opacity: 0;
}


/* =========================================================
   ANIMACJA EYEBROW
   ========================================================= */

.on-reviews.is-animated.is-visible
.on-reviews__header
.section-eyebrow {
  animation:
    reviewsFadeUp
    600ms
    cubic-bezier(0.22, 1, 0.36, 1)
    50ms
    forwards;
}


/* =========================================================
   ANIMACJA TYTUŁU
   ========================================================= */

.on-reviews.is-animated.is-visible
.on-reviews__title {
  animation:
    reviewsTitleIn
    800ms
    cubic-bezier(0.22, 1, 0.36, 1)
    120ms
    forwards;
}


/* =========================================================
   ANIMACJA OPISU
   ========================================================= */

.on-reviews.is-animated.is-visible
.on-reviews__intro {
  animation:
    reviewsFadeUp
    750ms
    cubic-bezier(0.22, 1, 0.36, 1)
    220ms
    forwards;
}


/* =========================================================
   ANIMACJA KART
   ========================================================= */

.on-reviews.is-animated.is-visible
.ti-review-item:not(
  .on-reviews__review-hidden
) {
  animation:
    reviewsCardIn
    750ms
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;

  animation-delay:
    calc(
      300ms +
      (
        var(--review-index, 0) *
        70ms
      )
    );
}


/* =========================================================
   ANIMACJA PRZYCISKU GOOGLE
   ========================================================= */

.on-reviews.is-animated.is-visible
.on-reviews__footer {
  animation:
    reviewsFadeUp
    700ms
    cubic-bezier(0.22, 1, 0.36, 1)
    900ms
    forwards;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes reviewsFadeUp {

  from {
    opacity: 0;

    transform:
      translateY(1rem);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


@keyframes reviewsTitleIn {

  from {
    opacity: 0;

    transform:
      translateY(1.2rem)
      scale(0.985);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}


@keyframes reviewsCardIn {

  from {
    opacity: 0;

    transform:
      translateY(1.4rem)
      scale(0.985);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}


/* =========================================================
   TABLET
   MAKSYMALNIE 4 OPINIE — 2 × 2
   ========================================================= */

@media (max-width: 61.99rem) {

  .on-reviews {
    padding-block: 5rem;
  }


  .on-reviews__header {
    width:
      min(100%, 44rem);

    margin-bottom:
      3rem;
  }


  .on-reviews__title {
    font-size:
      clamp(2.1rem, 5vw, 3rem);
  }


  .on-reviews__widget
  .on-reviews__grid-ready {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }


  .on-reviews__widget
  .ti-review-item
  > .ti-inner {
    min-height: 13.5rem;
  }

}


/* =========================================================
   TELEFON
   MAKSYMALNIE 3 OPINIE — 1 × 3
   ========================================================= */

@media (max-width: 39.99rem) {

  .on-reviews {
    padding-block: 4rem;
  }


  .on-reviews::before,
  .on-reviews::after {
    display: none;
  }


  .on-reviews__header {
    width: 100%;

    margin-bottom: 2.5rem;

    text-align: left;
  }


  .on-reviews__header
  .section-eyebrow {
    margin-bottom: 0.7rem;

    font-size: 0.72rem;

    letter-spacing: 0.11em;
  }


  .on-reviews__title {
    max-width: 24rem;

    margin-left: 0;

    font-size:
      clamp(2rem, 9vw, 2.6rem);

    line-height: 1.08;
  }


  .on-reviews__intro {
    max-width: none;

    margin-top: 1rem;
    margin-left: 0;

    font-size: 0.92rem;
  }


  .on-reviews__widget
  .on-reviews__grid-ready {
    grid-template-columns:
      1fr !important;

    gap:
      0.9rem !important;
  }


  .on-reviews__widget
  .ti-review-item
  > .ti-inner {
    min-height: 0;

    padding:
      1.35rem !important;
  }


  /*
   * Nie potrzebujemy desktopowego hovera
   * na ekranach dotykowych.
   */

  .on-reviews__widget
  .ti-review-item:hover
  > .ti-inner {
    transform: none;
  }


  .on-reviews__footer {
    margin-top: 2rem;
  }


  /*
   * Zostaje tylko ten przycisk:
   * "Zobacz więcej opinii w Google".
   */

  .on-reviews__button {
    width: 100%;
    min-width: 0;
  }

}


/* =========================================================
   BARDZO MAŁY TELEFON
   ========================================================= */

@media (max-width: 27.99rem) {

  .on-reviews {
    padding-block: 3.5rem;
  }


  .on-reviews__title {
    font-size:
      clamp(1.9rem, 10vw, 2.35rem);
  }


  .on-reviews__widget
  .ti-review-item
  > .ti-inner {
    padding:
      1.2rem !important;
  }

}


/* =========================================================
   PREFERS REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .on-reviews.is-animated
  .on-reviews__header
  .section-eyebrow,

  .on-reviews.is-animated
  .on-reviews__title,

  .on-reviews.is-animated
  .on-reviews__intro,

  .on-reviews.is-animated
  .ti-review-item,

  .on-reviews.is-animated
  .on-reviews__footer {
    opacity: 1;

    animation: none;
  }


  .on-reviews__widget
  .ti-review-item
  > .ti-inner,

  .on-reviews__widget
  .ti-review-item
  > .ti-inner::before {
    transition: none !important;
  }


  .on-reviews__widget
  .ti-review-item:hover
  > .ti-inner {
    transform: none;
  }

}