/* ============================================
   community.css — like, commenti e "You Might Also Like"
   Versione 2, 31 ottobre 2026. Caricato dopo reviews.css in 14 articoli
   e 32 recensioni.

   Il markup nelle pagine HTML è quello di sempre: js/reviews.js lo
   arricchisce al caricamento (card del like, avatar, ordinamento, form
   di scrittura in cima). Le classi nuove stanno qui.

   Rispetto alla v1 (filetti e maiuscoletti da stampa antica) è un
   linguaggio più contemporaneo: superfici morbide, angoli arrotondati,
   cremisi per il cuore. Restano il nero, l'oro e il Garamond del sito.

   Rollback alla v1: ricopiare css/community.css e js/reviews.js da
   rollback-like-commenti-v1-2026-10-31/ (fuori da public/).
   ============================================ */

.like-container,
.comments-section,
.rel-posts {
    --cm-surface: rgba(255, 255, 255, 0.028);
    --cm-surface-2: rgba(255, 255, 255, 0.05);
    --cm-border: rgba(232, 213, 163, 0.11);
    --cm-border-strong: rgba(201, 162, 39, 0.4);
    --cm-gold: var(--secondary-color, #c9a227);
    --cm-crimson: #b8323f;
    --cm-radius: 16px;
    /* Le pagine recensione centrano il testo: qui si torna a sinistra
       e a tutta larghezza. */
    box-sizing: border-box;
    width: 100%;
    text-align: left;
}

/* ============================================
   LIKE — card con testo a sinistra, cuore e Share a destra
   ============================================ */
.like-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin: 3rem 0 2.25rem;
    padding: 1.25rem 1.5rem;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(201, 162, 39, 0.09), transparent 55%),
        radial-gradient(120% 140% at 100% 100%, rgba(184, 50, 63, 0.08), transparent 55%),
        var(--cm-surface);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
}

/* Nelle recensioni il contenitore (.review-header, flex in colonna) ha
   già 40px di gap tra i blocchi: i margini qui si sommerebbero. */
.review-header > .like-container,
.review-header > .rel-posts,
.review-header > .comments-section {
    margin-top: 0;
    margin-bottom: 0;
}

.like-copy {
    min-width: 0;
}

.like-prompt {
    margin: 0;
    color: var(--text-color);
    font-family: var(--font-primary, inherit);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.25;
}

.like-caption {
    margin: 0.2rem 0 0;
    color: var(--info-color);
    font-size: 0.98rem;
    opacity: 0.75;
}

.like-actions {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

/* Cuore e numero senza riquadro intorno: il tondo del cuore basta */
.like-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 999px;
    color: var(--text-color);
    font-family: var(--font-primary, inherit);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}

.like-button:hover {
    background: none;
    transform: none;
}

.like-button:hover .heart {
    background: rgba(184, 50, 63, 0.24);
}

.like-button:focus-visible,
.like-share:focus-visible {
    outline: 2px solid var(--cm-gold);
    outline-offset: 3px;
}

/* background e bordo a zero anche qui: reviews.css ne mette di suoi */
.like-button.liked {
    background: none;
    border-color: transparent;
    color: #f3d0d3;
}

.like-button .heart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(184, 50, 63, 0.14);
    color: #e57a84;
    animation: none;
    transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.like-button.liked .heart {
    background: radial-gradient(circle at 32% 28%, #e05866, var(--cm-crimson) 55%, #7d1a26);
    color: #fff;
    box-shadow: none;
}

.like-button .heart svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}

.like-button.liked .heart svg {
    fill: currentColor;
}

.like-button:hover .heart svg {
    transform: scale(1.08);
}

.like-button:active .heart svg {
    transform: scale(0.85);
}

.like-button.like-burst .heart svg {
    animation: likePop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}

/* Scintille: le crea js/reviews.js, ognuna con il suo angolo in --a */
.like-spark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: var(--cm-gold);
    pointer-events: none;
    animation: likeSpark 0.65s ease-out forwards;
}

.like-spark:nth-child(odd) {
    background: #e05866;
}

@keyframes likePop {
    0% { transform: scale(0.5); }
    55% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes likeSpark {
    0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; }
    100% { transform: rotate(var(--a)) translateY(-30px) scale(0.2); opacity: 0; }
}

.like-count {
    display: inline-block;
    min-width: 1.5ch;
    font-variant-numeric: lining-nums tabular-nums;
    text-align: left;
}

.like-count.is-bumped {
    animation: countBump 0.35s ease-out;
}

@keyframes countBump {
    0% { transform: translateY(0); }
    40% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}

/* "Likes": resta per gli screen reader, non si vede */
.like-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Share: solo l'icona, senza bordo. La scritta resta per gli screen
   reader e ricompare solo per dire "Link copied". */
.like-share {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 2.5rem;
    height: 2.5rem;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 999px;
    color: var(--info-color);
    font-family: var(--font-primary, inherit);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}

.like-share i {
    font-size: 1.1rem;
}

.like-share span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.like-share.is-done span {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
}

.like-share:hover,
.like-share.is-done {
    color: var(--cm-gold);
}

/* Commenti: fumetto + numero, apre e chiude la sezione sotto la card */
.like-comments {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0;
    background: none;
    border: 0;
    color: var(--info-color);
    font-family: var(--font-primary, inherit);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}

.like-comments i {
    font-size: 1.2rem;
}

.like-comments-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.like-comments:hover,
.like-comments.is-open {
    color: var(--cm-gold);
}

.like-comments:focus-visible {
    outline: 2px solid var(--cm-gold);
    outline-offset: 3px;
}

.comments-section.is-folded {
    display: none;
}

/* Aperti, i commenti stanno subito sotto la card dei like */
.like-container + .comments-section {
    margin-top: 1.25rem;
    margin-bottom: 2.5rem;
}

/* ============================================
   YOU MIGHT ALSO LIKE — righe compatte: copertina piccola se c'è,
   solo testo se non c'è. Niente più riquadri vuoti col filetto.
   ============================================ */
.rel-posts {
    margin: 2.5rem 0 0;
    padding-top: 0;
    border-top: 0;
}

.rel-posts-title {
    margin: 0 0 1rem;
    color: var(--text-color);
    font-family: var(--font-primary, inherit);
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.25;
}

.rel-posts-intro {
    margin: -0.4rem 0 1rem;
    color: var(--info-color);
    font-style: italic;
    line-height: 1.6;
    opacity: 0.85;
}

.related-cards {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
    margin-top: 0;
}

.rel-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    min-height: 0;
    padding: 0.85rem 1rem;
    overflow: hidden;
    background: var(--cm-surface);
    border: 1px solid var(--cm-border);
    border-radius: 14px;
    color: var(--text-color);
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

/* Freccia a destra: dice "è un link" anche senza immagine */
.rel-card::after {
    content: "\2192";
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--cm-gold);
    font-size: 1.2rem;
    opacity: 0.55;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.rel-card:hover {
    background: var(--cm-surface-2);
    border-color: var(--cm-border-strong);
    transform: translateY(-2px);
}

.rel-card:hover::after {
    opacity: 1;
    transform: translateX(3px);
}

.rel-card:focus-visible {
    outline: 2px solid var(--cm-gold);
    outline-offset: 3px;
}

.rel-card-media {
    display: block;
    flex: 0 0 56px;
    width: 56px;
    height: 84px;
    max-width: none;
    padding: 0;
    overflow: hidden;
    background: var(--primary-color);
    border: 0;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.rel-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}

/* Senza immagine il riquadro non serve: resta la riga di testo */
.rel-card-media--plate {
    display: none;
}

.rel-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    padding: 0;
}

.rel-card-type {
    color: var(--cm-gold);
    font-family: var(--font-sc, inherit);
    font-size: 0.8rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.12em;
    line-height: 1.2;
}

.rel-card-title {
    color: var(--text-color);
    font-family: var(--font-primary, inherit);
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.25;
    transition: color 0.2s ease;
}

.rel-card:hover .rel-card-title {
    color: var(--cm-gold);
}

.rel-card-excerpt {
    display: -webkit-box;
    overflow: hidden;
    color: var(--info-color);
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.85;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (min-width: 640px) {
    .related-cards--2,
    .related-cards--3,
    .related-cards--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .rel-card-media {
        flex-basis: 64px;
        width: 64px;
        height: 96px;
    }
}

/* ============================================
   COMMENTI
   ============================================ */
.comments-section {
    margin-top: 3.5rem;
    padding-top: 0;
    border-top: 0;
}

.comments-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.comments-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--text-color);
    font-family: var(--font-primary, inherit);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
}

.comments-count {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem 0.25rem;
    background: rgba(201, 162, 39, 0.14);
    border-radius: 999px;
    color: var(--cm-gold);
    font-size: 0.95rem;
    font-variant-numeric: lining-nums tabular-nums;
    line-height: 1.1;
}

.comments-count[hidden],
.comments-sort[hidden] {
    display: none;
}

/* Ordinamento: interruttore a due posizioni */
.comments-sort {
    display: inline-flex;
    padding: 3px;
    background: var(--cm-surface);
    border: 1px solid var(--cm-border);
    border-radius: 999px;
}

.comments-sort button {
    padding: 0.3rem 0.85rem 0.35rem;
    background: none;
    border: 0;
    border-radius: 999px;
    color: var(--info-color);
    font-family: var(--font-primary, inherit);
    font-size: 0.92rem;
    cursor: pointer;
    opacity: 0.75;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.comments-sort button[aria-pressed="true"] {
    background: rgba(201, 162, 39, 0.16);
    color: var(--cm-gold);
    opacity: 1;
}

.comments-sort button:focus-visible {
    outline: 2px solid var(--cm-gold);
    outline-offset: 1px;
}

/* ---------- Avatar ---------- */
.comment-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: #3a3328;
    color: #f3e7c9;
    font-family: var(--font-display, var(--font-serif, serif));
    font-size: 1.2rem;
    line-height: 1;
    user-select: none;
}

/* Sei toni scuri presi dal mondo del sito: ruggine, cremisi, viola
   livido, verde palude, blu notte, ocra. Il JS sceglie in base al nome. */
.comment-avatar.tone-0 { background: linear-gradient(135deg, #6e3a22, #4a2516); }
.comment-avatar.tone-1 { background: linear-gradient(135deg, #7a2a34, #4e1a22); }
.comment-avatar.tone-2 { background: linear-gradient(135deg, #4e3762, #33243f); }
.comment-avatar.tone-3 { background: linear-gradient(135deg, #2f5a4f, #1e3b34); }
.comment-avatar.tone-4 { background: linear-gradient(135deg, #34486a, #222f46); }
.comment-avatar.tone-5 { background: linear-gradient(135deg, #6f5a24, #493b17); }

.comment-avatar--author {
    background: radial-gradient(circle at 30% 25%, #e8c766, var(--cm-gold) 55%, #8a6d14);
    color: #1a1408;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
}

/* ---------- Form di scrittura (in cima alla lista) ---------- */
.comment-form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.9rem;
    row-gap: 0.7rem;
    align-items: start;
    margin: 0;
    padding: 1rem 1.1rem;
    background: var(--cm-surface);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.comment-form:focus-within {
    border-color: var(--cm-border-strong);
    box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.07);
}

.comment-form > * {
    grid-column: 2;
}

.comment-form > .composer-avatar {
    grid-column: 1;
    grid-row: 1;
    background: var(--cm-surface-2);
    color: var(--cm-gold);
    font-size: 1rem;
}

.comment-form > .composer-avatar[class*="tone-"] {
    color: #f3e7c9;
    font-size: 1.2rem;
}

.comment-form > .composer-avatar.tone-0 { background: linear-gradient(135deg, #6e3a22, #4a2516); }
.comment-form > .composer-avatar.tone-1 { background: linear-gradient(135deg, #7a2a34, #4e1a22); }
.comment-form > .composer-avatar.tone-2 { background: linear-gradient(135deg, #4e3762, #33243f); }
.comment-form > .composer-avatar.tone-3 { background: linear-gradient(135deg, #2f5a4f, #1e3b34); }
.comment-form > .composer-avatar.tone-4 { background: linear-gradient(135deg, #34486a, #222f46); }
.comment-form > .composer-avatar.tone-5 { background: linear-gradient(135deg, #6f5a24, #493b17); }

/* Titolo ed etichette restano per gli screen reader: il form parla
   con i segnaposto e con la nota in fondo. */
.comment-form-subtitle,
.comment-form-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.comment-form-group {
    margin: 0;
}

/* Prima il testo, poi il nome: si scrive, poi si firma */
.comment-form-group:has(#commentText) { order: 1; }
.comment-form-group:has(#commentName) { order: 2; }
.comment-form-footer { order: 3; }
.comment-form-note { order: 4; }

.comment-form-note {
    margin: 0;
    color: var(--info-color);
    font-size: 0.88rem;
    font-style: italic;
    opacity: 0.6;
}

.comment-form-input,
.comment-form-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.9rem;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--cm-border);
    border-radius: 10px;
    color: var(--text-color);
    font-family: var(--font-primary, inherit);
    font-size: 1.02rem;
    line-height: 1.5;
    transition: border-color 0.2s ease, background-color 0.2s ease, min-height 0.2s ease;
}

.comment-form-input::placeholder,
.comment-form-textarea::placeholder {
    color: var(--info-color);
    opacity: 0.5;
}

.comment-form-input:focus,
.comment-form-textarea:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.38);
    border-color: var(--cm-border-strong);
    box-shadow: none;
}

/* L'area di testo cresce con quello che si scrive, dove il browser lo sa
   fare (field-sizing); altrove resta ridimensionabile a mano. */
.comment-form-textarea {
    min-height: 6.5rem;
    max-height: 28rem;
    resize: vertical;
    field-sizing: content;
}

/* Chiuso: solo avatar e una riga da toccare */
.comment-form.is-collapsed .comment-form-group:has(#commentName),
.comment-form.is-collapsed .comment-form-footer,
.comment-form.is-collapsed .comment-form-note {
    display: none;
}

.comment-form.is-collapsed .comment-form-textarea {
    min-height: 2.6rem;
    max-height: 2.6rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    overflow: hidden;
    resize: none;
    cursor: text;
}

.comment-form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
}

.comment-form-counter {
    color: var(--info-color);
    font-size: 0.88rem;
    font-variant-numeric: lining-nums tabular-nums;
    opacity: 0.6;
}

.comment-form-counter.is-low {
    color: var(--cm-gold);
    opacity: 1;
}

.comment-form-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    padding: 0.6rem 1.35rem;
    background: linear-gradient(135deg, #dcb453, #b8901f);
    border: 0;
    border-radius: 999px;
    color: #17120a;
    font-family: var(--font-primary, inherit);
    font-size: 1rem;
    font-variant-caps: normal;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(201, 162, 39, 0.18);
    transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.comment-form-submit i {
    font-size: 0.85rem;
}

.comment-form-submit:hover {
    background: linear-gradient(135deg, #dcb453, #b8901f);
    filter: brightness(1.08);
    box-shadow: 0 6px 20px rgba(201, 162, 39, 0.28);
    transform: translateY(-1px);
}

.comment-form-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.comment-form-submit:focus-visible {
    outline: 2px solid var(--text-color);
    outline-offset: 3px;
}

/* Honeypot - nascosto alle persone */
.hp-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

/* ---------- Lista ---------- */
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 1.25rem;
}

.comment-card,
.comment-reply {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.9rem;
    align-items: start;
}

.comment-card {
    padding: 1.1rem 1.2rem;
    background: var(--cm-surface);
    border: 1px solid var(--cm-border);
    border-left: 1px solid var(--cm-border);
    border-bottom: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    transition: border-color 0.2s ease;
}

.comment-card:hover {
    border-color: rgba(232, 213, 163, 0.18);
}

.comment-body {
    min-width: 0;
}

.comment-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.2rem 0.55rem;
    margin-bottom: 0.3rem;
}

.comment-author {
    color: var(--text-color);
    font-size: 1.05rem;
    font-weight: 600;
}

.comment-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.12rem 0.55rem 0.15rem;
    background: rgba(201, 162, 39, 0.15);
    border: 0;
    border-radius: 999px;
    color: var(--cm-gold);
    font-family: var(--font-primary, inherit);
    font-size: 0.8rem;
    font-variant-caps: normal;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.3;
}

.comment-date {
    color: var(--info-color);
    font-size: 0.88rem;
    opacity: 0.6;
}

.comment-text {
    max-width: 68ch;
    color: var(--text-color);
    line-height: 1.7;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.comment-actions {
    margin-top: 0.45rem;
}

.reply-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: -0.65rem;
    padding: 0.3rem 0.65rem;
    background: none;
    border: 0;
    border-radius: 999px;
    color: var(--info-color);
    font-family: var(--font-primary, inherit);
    font-size: 0.95rem;
    font-variant-caps: normal;
    letter-spacing: 0;
    cursor: pointer;
    opacity: 0.75;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.reply-toggle-btn i {
    font-size: 0.78rem;
}

.reply-toggle-btn:hover,
.reply-toggle-btn[aria-expanded="true"] {
    background: var(--cm-surface-2);
    color: var(--cm-gold);
    opacity: 1;
}

.reply-toggle-btn:focus-visible,
.reply-cancel:focus-visible {
    outline: 2px solid var(--cm-gold);
    outline-offset: 2px;
}

/* ---------- Risposte ---------- */
.replies-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.85rem;
    padding-left: 0;
    border-left: 0;
}

.comment-reply {
    margin: 0;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.025);
    border-left: 2px solid rgba(232, 213, 163, 0.15);
    border-radius: 4px 12px 12px 4px;
}

.comment-reply--author {
    background: linear-gradient(90deg, rgba(201, 162, 39, 0.09), rgba(201, 162, 39, 0.02));
    border-left-color: var(--cm-gold);
}

.comment-reply .comment-avatar {
    width: 2.1rem;
    height: 2.1rem;
    font-size: 1rem;
}

/* ---------- Form di risposta ---------- */
.reply-form-wrapper {
    margin: 0.85rem 0 0;
}

.reply-form-wrapper[hidden] {
    display: none;
}

.reply-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--cm-border);
    border-radius: 12px;
}

.reply-form .comment-form-input,
.reply-form .comment-form-textarea {
    font-size: 0.97rem;
}

.reply-form .comment-form-textarea {
    min-height: 4.5rem;
}

.reply-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
}

.reply-form-actions .comment-form-submit {
    margin-left: 0;
    padding: 0.5rem 1.1rem;
    font-size: 0.95rem;
}

.reply-cancel {
    padding: 0.45rem 0.9rem;
    background: none;
    border: 1px solid var(--cm-border);
    border-radius: 999px;
    color: var(--info-color);
    font-family: var(--font-primary, inherit);
    font-size: 0.95rem;
    font-variant-caps: normal;
    letter-spacing: 0;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.reply-cancel:hover {
    border-color: var(--cm-border-strong);
    color: var(--cm-gold);
}

/* ---------- Caricamento: card finte con un riflesso che scorre ---------- */
.comments-loading {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0;
}

.comment-skeleton {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    column-gap: 0.9rem;
    padding: 1.1rem 1.2rem;
    background: var(--cm-surface);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
}

.sk-avatar,
.sk-lines span {
    display: block;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
    animation: skShimmer 1.4s linear infinite;
}

.sk-avatar {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
}

.sk-lines span {
    height: 0.7rem;
    margin: 0.35rem 0 0.7rem;
    border-radius: 999px;
}

.sk-lines span:nth-child(1) { width: 28%; }
.sk-lines span:nth-child(2) { width: 92%; }
.sk-lines span:nth-child(3) { width: 60%; margin-bottom: 0.2rem; }

@keyframes skShimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* ---------- Nessun commento ---------- */
.comments-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--info-color);
    border: 1px dashed var(--cm-border);
    border-radius: var(--cm-radius);
}

.comments-empty p {
    margin: 0;
    color: var(--text-color);
    font-size: 1.1rem;
    font-style: normal;
}

.comments-empty .comments-empty-sub {
    margin-top: 0.2rem;
    color: var(--info-color);
    font-size: 0.98rem;
    opacity: 0.7;
}

.comments-empty-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.8rem;
    border-radius: 50%;
    background: rgba(201, 162, 39, 0.1);
    color: var(--cm-gold);
    font-size: 1.2rem;
}

/* ---------- Messaggi (inviato / errore) ---------- */
.comment-message {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.85rem 0 0;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.98rem;
    line-height: 1.5;
    animation: msgIn 0.25s ease-out;
}

.comment-message i {
    margin-top: 0.2rem;
}

.comment-message.success {
    background: rgba(201, 162, 39, 0.1);
    border: 1px solid rgba(201, 162, 39, 0.3);
    color: var(--info-color);
}

.comment-message.success i {
    color: var(--cm-gold);
}

.comment-message.error {
    background: rgba(184, 50, 63, 0.12);
    border: 1px solid rgba(184, 50, 63, 0.45);
    color: #f0b3b9;
}

@keyframes msgIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

/* ============================================
   TELEFONO
   ============================================ */
@media (max-width: 560px) {
    .like-container {
        flex-direction: column;
        align-items: stretch;
        padding: 1.15rem;
        text-align: center;
    }

    .like-actions {
        justify-content: center;
    }

    /* Avatar solo accanto al nome: testo, risposte e form prendono
       tutta la larghezza, invece di una colonna stretta. */
    .comment-card,
    .comment-reply {
        column-gap: 0.7rem;
        align-items: center;
    }

    .comment-card {
        padding: 0.95rem 1rem;
    }

    .comment-body {
        display: contents;
    }

    .comment-body > :not(.comment-header) {
        grid-column: 1 / -1;
    }

    .comment-header {
        margin-bottom: 0;
    }

    .comment-text {
        margin-top: 0.6rem;
    }

    .comment-form {
        padding: 0.85rem;
        column-gap: 0.7rem;
    }

    .comment-form-footer .comment-form-submit {
        justify-content: center;
        width: 100%;
    }

    .rel-card {
        gap: 0.85rem;
        padding: 0.75rem 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .like-button,
    .like-button .heart,
    .like-button .heart svg,
    .like-share,
    .like-comments,
    .rel-card,
    .rel-card::after,
    .rel-card-title,
    .comment-form-submit,
    .comment-form-input,
    .comment-form-textarea {
        transition: none;
    }

    .like-button.like-burst .heart svg,
    .like-spark,
    .like-count.is-bumped,
    .sk-avatar,
    .sk-lines span,
    .comment-message {
        animation: none;
    }

    .like-spark {
        display: none;
    }

    .rel-card:hover,
    .comment-form-submit:hover {
        transform: none;
    }
}