/* ==========================================================================
   PureManCare — Carosello recensioni prodotto WooCommerce
   Markup: mu-plugins/pmc-reviews-carousel.php ([pmc_reviews_carousel])

   Riproduce la card del Grid Layout 176 (il layout del us_post_carousel di
   testimonial che questo shortcode sostituisce): fill a gradiente verticale,
   radius 24px, padding 24px, bordo a gradiente da .pmc-gradient-border
   (css/components/grid-gradient-border.css), avatar 46px, nome in italic sul
   font dei titoli, stelle #FFD631, testo bianco 14px.

   Layout griglia/slider (larghezze, gap, dots) restano del tema: il markup usa
   le classi .w-grid / .w-grid-list.owl-carousel / .w-grid-item di Impreza.
   ========================================================================== */

.pmc-reviews-carousel .w-grid-item-h {
  height: 100%;
}

.pmc-review-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: 24px;
  border-radius: 24px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 100%
  );
  color: #fff;
}

/* --- testa: avatar + nome + stelle --- */

.pmc-review-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.pmc-review-card__avatar {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

/* Fallback quando gli avatar sono disattivati: iniziale del nome */
.pmc-review-card__avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  font-family: var(--h1-font-family);
  font-size: 18px;
  font-style: italic;
  line-height: 1;
}

.pmc-review-card__meta {
  min-width: 0;
}

.pmc-review-card__author {
  margin: 0;
  color: #fff;
  font-family: var(--h1-font-family);
  font-style: italic;
}

/* --- stelle --- */

.pmc-review-card__rating {
  display: flex;
  align-items: center;
  gap: 2px;
  color: #ffd631;
}

.pmc-review-card__star {
  width: 13px;
  height: 13px;
  fill: currentColor;
  opacity: 0.25;
}

.pmc-review-card__star.is-on {
  opacity: 1;
}

/* --- testo recensione --- */

.pmc-review-card__text {
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
}

.pmc-review-card__text > *:first-child {
  margin-top: 0;
}

.pmc-review-card__text > *:last-child {
  margin-bottom: 0;
}

/* Recensioni lunghe: la card non deve alzare tutta la riga (owl con
   autoHeight:false dà a tutte le card l'altezza della più alta). */
.pmc-review-card__text p {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- link al prodotto recensito --- */

/* Selettore lungo (.pmc-review-card a.pmc-review-card__product) per battere
   `.no-touch a:hover{color:var(--color-content-link-hover)}` del tema, che ha
   specificità più alta di una singola classe con :hover e all'hover tingeva il
   link col colore link del tema. */
.pmc-review-card a.pmc-review-card__product,
.pmc-review-card a.pmc-review-card__product:visited {
  margin-top: auto;
  padding-top: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  line-height: 1.3;
  text-decoration: none;
}

/* All'hover solo bianco + sottolineato, nient'altro. */
.pmc-review-card a.pmc-review-card__product:hover,
.pmc-review-card a.pmc-review-card__product:focus,
.pmc-review-card a.pmc-review-card__product:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ---- Sfumatura ai due lati ----
   owl taglia le card di lato con l'overflow di .owl-stage-outer: sui bordi si
   vedeva una linea netta sulla card mezza fuori. La larghezza della sfumatura
   arriva dallo shortcode: `--pmc-rc-fade` / `--pmc-rc-fade-mobile` sono stampate
   inline sul wrapper dagli attributi `fade` e `fade_mobile` (default 32px/16px).

   È una maschera, non un overlay del colore di sfondo: la riga del blocco 153
   ha un gradiente navy (#41476F → #262A42) e una tinta unita sopra si
   staccherebbe. Con la maschera lo sfondo, qualunque sia, si vede attraverso.
   .owl-stage-outer lo crea owl a runtime: senza JS non c'è maschera e non c'è
   nemmeno il taglio, quindi non serve fallback. */
.pmc-reviews-carousel .owl-stage-outer {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--pmc-rc-fade, 32px),
    #000 calc(100% - var(--pmc-rc-fade, 32px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--pmc-rc-fade, 32px),
    #000 calc(100% - var(--pmc-rc-fade, 32px)),
    transparent 100%
  );
}

@media (max-width: 600px) {
  /* La maschera è riscritta con la variabile mobile invece di ridefinire
     --pmc-rc-fade: quella è inline sull'elemento e vincerebbe sulla media query. */
  .pmc-reviews-carousel .owl-stage-outer {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--pmc-rc-fade-mobile, 16px),
      #000 calc(100% - var(--pmc-rc-fade-mobile, 16px)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--pmc-rc-fade-mobile, 16px),
      #000 calc(100% - var(--pmc-rc-fade-mobile, 16px)),
      transparent 100%
    );
  }
}