/* =====================================================================
   Recensioni Google - carosello HouseTech
   Tutto circoscritto sotto .ht-rec: non tocca nient'altro della pagina.
   ===================================================================== */

.ht-rec {
    --ht-viola: #6f1787;
    --ht-viola-chiaro: rgba(111, 23, 135, 0.1);
    --ht-testo: #1d1d1f;
    --ht-grigio: #6b6b70;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ht-testo);
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 4px;
}

/* ------------------------------------------------------------- testata */

.ht-rec__testa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-bottom: 22px;
}

.ht-rec__voto {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ht-rec__numero {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ht-viola);
}

.ht-rec__conta {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--ht-grigio);
}

.ht-rec__conta strong { color: var(--ht-testo); }

.ht-rec__link {
    margin-left: auto;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ht-viola);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
    white-space: nowrap;
}

.ht-rec__link:hover { border-bottom-color: var(--ht-viola); }

/* ------------------------------------------------------------- stelle */

.ht-rec .ht-stelle {
    display: inline-flex;
    gap: 2px;
    line-height: 0;
}

.ht-rec .ht-stella {
    width: 17px;
    height: 17px;
    fill: #f5a623;
    flex: none;
}

.ht-rec .ht-stella--vuota { fill: #dcdce0; }

/* ------------------------------------------------------------ giostra */

.ht-rec__giostra {
    position: relative;
}

.ht-rec__pista {
    list-style: none;
    margin: 0;
    padding: 4px 2px 14px;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Niente scroll-behavior qui: lo scorrimento morbido lo chiede il
       JavaScript sulle frecce. Dichiararlo anche in CSS lo rende
       ridondante e, se l'animazione non parte, la pista non si muove
       affatto invece di saltare alla scheda successiva. */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(111, 23, 135, 0.25) transparent;
}

.ht-rec__pista::-webkit-scrollbar { height: 6px; }
.ht-rec__pista::-webkit-scrollbar-track { background: transparent; }
.ht-rec__pista::-webkit-scrollbar-thumb {
    background: rgba(111, 23, 135, 0.22);
    border-radius: 99px;
}

.ht-rec__pista:focus-visible {
    outline: 2px solid var(--ht-viola);
    outline-offset: 4px;
    border-radius: 12px;
}

.ht-rec__card {
    flex: 0 0 auto;
    width: min(340px, 82vw);
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid var(--ht-viola-chiaro);
    border-radius: 16px;
    padding: 20px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ht-rec__testo {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #3b3b40;
    flex: 1 1 auto;
    /* Le schede si allineano alla piu alta: senza un limite, una sola
       recensione lunga gonfia tutte le altre lasciandole mezze vuote.
       Il testo integrale resta nell'HTML, quindi Google e i motori AI
       lo leggono per intero: qui limitiamo solo cosa si vede. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
}

.ht-rec__testo::before { content: '\201C'; }
.ht-rec__testo::after  { content: '\201D'; }

.ht-rec__autore {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-top: 13px;
    border-top: 1px solid rgba(111, 23, 135, 0.08);
}

.ht-rec__iniziale {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.9375rem;
    color: #fff;
    background: linear-gradient(135deg, #9B2490, #3A2E8C);
}

.ht-rec__nome {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
}

.ht-rec__data {
    display: block;
    font-size: 0.75rem;
    color: var(--ht-grigio);
}

/* ------------------------------------------------------------ frecce */

.ht-rec__freccia {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--ht-viola-chiaro);
    background: #fff;
    color: var(--ht-viola);
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: opacity 0.15s ease, background-color 0.15s ease;
    padding: 0;
}

.ht-rec__freccia svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ht-rec__freccia:hover:not(:disabled) { background: #faf6fb; }

.ht-rec__freccia:disabled {
    opacity: 0;
    pointer-events: none;
}

.ht-rec__freccia--sx { left: -14px; }
.ht-rec__freccia--dx { right: -14px; }

/* ------------------------------------------------------------ mobile */

@media (max-width: 768px) {
    .ht-rec__testa { gap: 6px 14px; }
    .ht-rec__numero { font-size: 1.75rem; }
    .ht-rec__link {
        margin-left: 0;
        flex-basis: 100%;
    }
    /* su telefono si scorre col dito: le frecce sono solo ingombro */
    .ht-rec__freccia { display: none; }
    .ht-rec__pista {
        padding-left: 0;
        padding-right: 0;
        scroll-padding-left: 0;
    }
    .ht-rec__card { width: min(300px, 84vw); }
}

@media (prefers-reduced-motion: reduce) {
    .ht-rec__pista { scroll-behavior: auto; }
}