/* =====================================================================================================================
   Recensioni reali sulle pagine italiane (SEO Italia, TO). Solo la carica /it (inicio_it) e le schede /it/modelli/* (show_it).
   Componente: web/componentes/opinioni_it/recensioni.blade.php · JS: js/web/opinioni-it.js.

   Diseño 2.0 (15-sep): bocadillo con el logotipo real de la plataforma, estrellas y una comilla; debajo, el avatar con la
   inicial, el nombre y la fecha (la Community de matrimonio.com, mejorada). Mosaico en columnas en PC. Variables de v2.
   ===================================================================================================================== */

.oit {
    --oit-oro: #F5A524;
    --oit-testo: #3F3F46;
    --oit-sombra: drop-shadow(0 1px 1px rgba(24, 24, 24, 0.05)) drop-shadow(0 10px 22px rgba(24, 24, 24, 0.08));
    margin-top: 8px;
}

/* ─── Resumen de la ficha: «11 recensioni reali, pubblicate su» + los tres logos ─────────────────────────────────────── */

.oit__riepilogo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 16px;
    margin: 0 auto 36px;
}

.oit__riepilogo-testo {
    font-family: var(--v2-font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--v2-dark);
}

.oit__riepilogo-loghi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.oit__riepilogo-loghi li {
    margin: 0;
}

.oit__chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px 9px 16px;
    background: var(--v2-white);
    border-radius: 100px;
    box-shadow: 0 1px 2px rgba(24, 24, 24, 0.05), 0 4px 14px rgba(24, 24, 24, 0.06);
    text-decoration: none;
    transition: box-shadow 0.2s ease;
}

.oit__chip:hover,
.oit__chip:focus-visible {
    box-shadow: 0 1px 2px rgba(24, 24, 24, 0.06), 0 8px 20px rgba(24, 24, 24, 0.1);
    text-decoration: none;
}

.oit__chip .oit__logo {
    height: 18px;
}

.oit__chip .oit__logo--trustpilot {
    height: 19px;
}

.oit__chip-n {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background: var(--v2-brand-light);
    font-family: var(--v2-font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--v2-brand-hover);
}

/* ─── La lista: una columna en móvil, mosaico de 2 y 3 columnas ──────────────────────────────────────────────────────── */

.oit__lista {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    max-width: 1120px;
    columns: 1;
}

@media (min-width: 768px) {
    .oit__lista {
        columns: 2;
        column-gap: 24px;
    }
}

@media (min-width: 1100px) {
    .oit__lista {
        columns: 3;
        column-gap: 28px;
    }
}

.oit__item {
    margin: 0;
    padding: 0 0 28px;
    break-inside: avoid;
    page-break-inside: avoid;
}

@media (max-width: 767px) {
    .oit.is-plegato .oit__item--extra {
        display: none;
    }
}

.oit__recensione {
    margin: 0;
    text-align: left;
}

/* ─── El bocadillo ───────────────────────────────────────────────────────────────────────────────────────────────────── */

.oit__fumetto {
    position: relative;
    margin: 0;
    padding: 22px 22px 20px;
    background: var(--v2-white);
    border: 0;
    border-radius: 20px;
    filter: var(--oit-sombra);
    quotes: none;
}

/* Pico del bocadillo, hacia el avatar. */
.oit__fumetto::after {
    content: "";
    position: absolute;
    left: 30px;
    bottom: -8px;
    width: 18px;
    height: 18px;
    background: var(--v2-white);
    border-radius: 0 0 5px 0;
    transform: rotate(45deg);
}

.oit__testa {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--v2-border);
}

/* Tres clases: un estilo global de imágenes de v2 le ganaba a una sola y el logo salía a su tamaño natural (15-sep). */
.oit .oit__testa .oit__logo {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    height: 20px;
    max-width: 128px;
    object-fit: contain;
    object-position: left center;
}

.oit .oit__testa .oit__logo--trustpilot {
    height: 24px;
}

.oit .oit__testa .oit__logo--bodasnet {
    height: 19px;
}

.oit .oit__testa .oit__logo--google {
    height: 21px;
}

.oit .oit__chip .oit__logo {
    display: block;
    width: auto;
    height: 18px;
    max-width: 120px;
    object-fit: contain;
}

.oit .oit__chip .oit__logo--trustpilot {
    height: 21px;
}

.oit__voto {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.oit__stelle {
    position: relative;
    display: inline-block;
    width: 84px;
    height: 15px;
    line-height: 0;
}

.oit__stelle svg {
    display: block;
    width: 84px;
    height: 15px;
    max-width: none;
}

.oit__stelle-vuote {
    fill: #EAE3E3;
}

.oit__stelle-piene {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    fill: var(--oit-oro);
}

.oit__voto-num {
    font-family: var(--v2-font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--v2-dark);
}

.oit__titolo {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    font-family: var(--v2-font-heading);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--v2-dark);
}

/* Texto largo: 5 líneas y «Leggi tutta». El texto entero está en el HTML. */
.oit__testo {
    position: relative;
    z-index: 1;
    max-height: calc(1.65em * 5);
    overflow: hidden;
    font-family: var(--v2-font-body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--oit-testo);
}

.oit__testo p {
    margin: 0 0 0.55em;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.oit__testo p:last-child {
    margin-bottom: 0;
}

.oit__testo.is-lungo:not(.is-aperto)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.6em;
    background: linear-gradient(rgba(255, 255, 255, 0), var(--v2-white) 85%);
    pointer-events: none;
}

.oit__testo.is-aperto {
    max-height: none;
}

.oit__espandi {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 8px 0 0;
    padding: 4px 0;
    background: none;
    border: 0;
    font-family: var(--v2-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-brand-hover);
    cursor: pointer;
}

.oit__espandi[hidden] {
    display: none;
}

.oit__espandi svg {
    transition: transform 0.2s ease;
}

.oit__espandi[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* ─── Quién la escribió ──────────────────────────────────────────────────────────────────────────────────────────────── */

.oit__autore {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 0 18px;
    position: relative;
    padding-right: 44px;
}

/* Comilla decorativa: en la fila del autor, a la derecha, donde nunca pisa texto (dentro del bocadillo tapaba
   las reseñas sin título, 15-sep). */
.oit__autore::after {
    content: "\201C";
    position: absolute;
    right: 4px;
    top: -4px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 64px;
    line-height: 1;
    color: var(--v2-brand);
    opacity: 0.22;
    pointer-events: none;
}

.oit__avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--v2-font-heading);
    font-size: 18px;
    font-weight: 600;
    box-shadow: 0 0 0 3px var(--v2-white);
}

.oit__avatar--0 { background: #FBE3E3; color: #B04343; }
.oit__avatar--1 { background: #E2EDF8; color: #2D62A0; }
.oit__avatar--2 { background: #E1F2E8; color: #2B744D; }
.oit__avatar--3 { background: #F6EBD7; color: #87601A; }
.oit__avatar--4 { background: #ECE5F7; color: #62489A; }

.oit__chi {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.oit__nome {
    font-family: var(--v2-font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--v2-dark);
}

.oit__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    font-family: var(--v2-font-body);
    font-size: 13px;
    line-height: 1.45;
    color: var(--v2-muted);
}

.oit__fonte {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--v2-muted);
    text-decoration: underline;
    text-decoration-color: rgba(224, 99, 99, 0.55);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.oit__fonte:hover,
.oit__fonte:focus-visible {
    color: var(--v2-brand-hover);
    text-decoration-color: var(--v2-brand-hover);
}

/* ─── «Mostra tutte le 11 recensioni» (solo móvil) ───────────────────────────────────────────────────────────────────── */

.oit__mostra {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px auto 0;
    padding: 13px 22px;
    background: var(--v2-white);
    border: 0;
    border-radius: 100px;
    box-shadow: 0 1px 2px rgba(24, 24, 24, 0.05), 0 6px 18px rgba(24, 24, 24, 0.08);
    font-family: var(--v2-font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--v2-dark);
    cursor: pointer;
}

.oit__mostra[hidden] {
    display: none;
}

@media (min-width: 768px) {
    .oit__mostra {
        display: none;
    }
}

/* ─── /it: bajo las tres plataformas, dentro del bloque de opiniones ─────────────────────────────────────────────────── */

.oit-landing__label {
    margin-top: 44px;
}

.v2-testimonials .oit-landing__nota {
    margin: -8px auto 28px;
    max-width: 600px;
    text-align: center;
    font-family: var(--v2-font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--v2-muted);
}