/**
 * Approfondimenti — stili articolo single-post.
 * Dipende da: variables.css + design-system.css.
 * Caricato solo su is_singular('post') in categoria approfondimenti
 * e su category-approfondimenti.php.
 */

/* ==========================================================================
   LAYOUT — 2 colonne (1fr / 320px) da --bp-lg
   ========================================================================== */

.fcm-article-wrap {
    /* --fcm-navbar-height la scrive hero-navbar.js su :root (altezza reale della navbar
       fixed, 139px desktop); i fallback sotto sono la misura del 2026-09-17. */
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    max-width: 1200px;
    margin: var(--spacing-xxl) auto;
    padding: 0 var(--spacing-md);
    /* NIENTE overflow:hidden qui: rendeva il wrap scroll-container della sidebar sticky,
       che restava ferma (mai sticky) e partiva 100px sotto la meta bar. Il clip anti
       menu off-canvas su mobile sta su html/body (sotto). */
}

/* Fix overflow orizzontale mobile: il menu off-canvas della navbar (position:fixed dentro
   .hero-navbar che ha un transform -> ne diventa il containing block) sporge a destra e
   genera scroll. Su mobile non c'è sidebar sticky da rompere, quindi clip sicuro a root. */
@media (max-width: 1023px) {
    html,
    body { overflow-x: hidden; }
}

/* Mobile: sidebar (TOC) PRIMA del contenuto */
@media (max-width: 1023px) {
    .fcm-article-sidebar { order: -1; }
}

@media (min-width: 1024px) {
    .fcm-article-wrap {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: var(--spacing-xxl);
    }
}

.fcm-article-main {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.fcm-article-main img,
.fcm-article-main iframe,
.fcm-article-main table,
.fcm-article-main pre {
    max-width: 100%;
    overflow-x: auto;
}
.fcm-article-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

@media (min-width: 1024px) {
    .fcm-article-sidebar {
        position: sticky;
        top: calc(var(--fcm-navbar-height, 139px) + var(--spacing-lg));
        align-self: start;
        max-height: calc(100vh - var(--fcm-navbar-height, 139px) - var(--spacing-xl));
        overflow-y: auto;
    }
}

/* ==========================================================================
   META BAR (byline + reviewer + date + reading time + trust badges)
   ========================================================================== */

.fcm-article-meta-bar {
    background: var(--color-faded, #f7f7fb);
    border-radius: var(--radius-lg, 12px);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    display: grid;
    gap: var(--spacing-md);
}
/* Da tablet: autore e revisore affiancati, date e badge sotto a tutta larghezza.
   Erano 4 righe impilate (244px) con meta' box vuota a destra. */
@media (min-width: 768px) {
    .fcm-article-meta-bar {
        grid-template-columns: 1fr 1fr;
        column-gap: var(--spacing-lg);
        align-items: start;
    }
    .fcm-article-meta-bar__dates,
    .fcm-trust-badges { grid-column: 1 / -1; }
}

.fcm-author-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.fcm-author-card__photo {
    width: 48px; height: 48px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    flex-shrink: 0;
    border: 2px solid var(--color-surface, #fff);
    box-shadow: 0 2px 8px rgba(33, 31, 84, 0.12);
}

.fcm-author-card__role {
    color: var(--color-text-muted, #555);
    font-size: var(--font-size-sm);
}

.fcm-article-meta-bar__dates {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}
/* icona + testo distanziati (erano attaccati) */
.fcm-article-meta-bar__dates span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fcm-article-meta-bar__dates i { color: var(--color-primary); }

.fcm-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.fcm-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primary-faded); /* era primary-light navy = testo navy su navy (illeggibile) */
    color: var(--color-primary);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 600;
}
.fcm-trust-badge i { color: var(--color-primary); }

/* ==========================================================================
   TOC sidebar
   ========================================================================== */

.fcm-toc {
    background: #fff;
    border: 1px solid var(--color-border, #e5e5ec);
    border-radius: var(--radius-md, 8px);
    padding: var(--spacing-md);
}
.fcm-toc__title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-sm);
}
.fcm-toc__list { list-style: none; padding: 0; margin: 0; }
.fcm-toc__item a {
    display: block;
    padding: 6px 0;
    color: var(--color-text);
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: 10px;
    font-size: var(--font-size-sm);
}
.fcm-toc__item a:hover { color: var(--color-primary); }
.fcm-toc__item--active a {
    border-left-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
}

/* Mobile: collapsible <details> (solo quando il partial rende davvero un <details>;
   sul <nav> desktop-UA a viewport stretto la freccia era fuorviante) */
details.fcm-toc .fcm-toc__title { cursor: pointer; list-style: none; }
details.fcm-toc .fcm-toc__title::-webkit-details-marker { display: none; }
details.fcm-toc[open] .fcm-toc__title::after { content: " ▴"; }
details.fcm-toc:not([open]) .fcm-toc__title::after { content: " ▾"; }
details.fcm-toc[open] .fcm-toc__title { margin-bottom: var(--spacing-sm); }
details.fcm-toc:not([open]) .fcm-toc__title { margin-bottom: 0; }

/* ==========================================================================
   CITATION INLINE + REFERENCES
   ========================================================================== */

.fcm-citation-ref {
    font-size: 0.7em;
    vertical-align: super;
    line-height: 1;
}
.fcm-citation-ref a {
    color: var(--color-primary);
    text-decoration: none;
    padding: 0 2px;
}
.fcm-citation-ref a:hover { text-decoration: underline; }

.fcm-references {
    background: var(--color-faded);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    margin: var(--spacing-xl) 0;
}
.fcm-references__title {
    font-size: var(--font-size-md);
    margin: 0 0 var(--spacing-md);
}
.fcm-references__list {
    list-style: decimal inside;
    margin: 0;
    padding: 0;
}
.fcm-references__list li {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}
.fcm-references__back {
    margin-left: 6px;
    color: var(--color-text-muted);
    text-decoration: none;
}
.fcm-references__back:hover { color: var(--color-primary); }

/* ==========================================================================
   DISCLAIMER BOX
   ========================================================================== */

.fcm-disclaimer {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    background: var(--color-primary-faded);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}
.fcm-disclaimer__icon { color: var(--color-primary); font-size: 22px; line-height: 1.5; flex-shrink: 0; }
.fcm-disclaimer__title { margin: 0 0 var(--spacing-xs); }
.fcm-disclaimer__meta { color: var(--color-text-muted); margin: var(--spacing-xs) 0; }
.fcm-disclaimer__link { margin: var(--spacing-xs) 0 0; }

/* ==========================================================================
   BIO CARDS (autore + reviewer)
   ========================================================================== */

.fcm-bio-cards {
    display: grid;
    gap: var(--spacing-md);
    margin: var(--spacing-xl) 0;
}
/* Bio cards: sempre impilate (1 colonna), mai affiancate */
.fcm-bio-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
}
.fcm-bio-card__photo {
    width: 96px; height: 96px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.fcm-bio-card__label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    font-weight: 700;
    margin: 0 0 4px;
}
.fcm-bio-card__name { font-size: var(--font-size-md); margin: 0 0 4px; }
.fcm-bio-card__role { color: var(--color-text-muted); margin: 0 0 var(--spacing-xs); }
.fcm-bio-card__link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--font-size-sm);
}

/* ==========================================================================
   SIDEBAR — Related entities (pathologies / body_parts / therapies)
   ========================================================================== */

.fcm-sidebar-related {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}
.fcm-sidebar-related__title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-sm);
}
.fcm-sidebar-related ul { list-style: none; padding: 0; margin: 0; }
.fcm-sidebar-related li { margin-bottom: 6px; }
.fcm-sidebar-related a {
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--font-size-sm);
}
.fcm-sidebar-related a:hover { color: var(--color-primary); }
.fcm-sidebar-related a::before { content: "→ "; color: var(--color-primary); }

/* Link inline nel corpo articolo — accento blu + underline per distinguerli dal
   testo navy (hybrid: bottoni navy pieni, link con accento). */
.fcm-article-body a {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 0.07em;
    transition: color 150ms ease;
}
.fcm-article-body a:hover {
    color: var(--color-link-hover);
}

/* ==========================================================================
   ARTICLE BODY — tipografia, misura, tabelle (allineate al design system)
   ========================================================================== */

.fcm-article-body {
    font-size: var(--font-size-md);
    line-height: 1.75;
    color: var(--color-text);
}
/* Misura leggibile (~70ch) sugli elementi di testo; tabelle/figure restano a tutta colonna */
.fcm-article-body > p,
.fcm-article-body > ul,
.fcm-article-body > ol,
.fcm-article-body > h2,
.fcm-article-body > h3,
.fcm-article-body > h4,
.fcm-article-body > blockquote {
    max-width: 68ch;
}
.fcm-article-body > p { margin: 0 0 var(--spacing-md); }
.fcm-article-body > h2 { margin: var(--spacing-xxl) 0 var(--spacing-sm); }
.fcm-article-body > h3 { margin: var(--spacing-xl) 0 var(--spacing-xs); }
.fcm-article-body ul,
.fcm-article-body ol { padding-left: 1.4em; margin: 0 0 var(--spacing-md); }
.fcm-article-body li { margin-bottom: var(--spacing-xs); }

/* Tabelle: da HTML grezzo a tabella del design system (bordo, header navy-tint, zebra).
   Il filtro blog-table-scroll.php le avvolge in .fcm-table-scroll: su mobile la tabella
   scorre in orizzontale invece di spezzare le parole della prima colonna ("Pegg-iora"). */
.fcm-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--spacing-lg) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
}
.fcm-table-scroll table { margin: 0; border: 0; min-width: 520px; }
/* scrollbar sottile nei colori del brand (il default grigio di sistema stona sulla tabella) */
.fcm-table-scroll { scrollbar-width: thin; scrollbar-color: var(--color-primary-lightest) transparent; }
.fcm-table-scroll::-webkit-scrollbar { height: 6px; }
.fcm-table-scroll::-webkit-scrollbar-thumb { background: var(--color-primary-lightest); border-radius: 999px; }
.fcm-table-scroll::-webkit-scrollbar-track { background: transparent; }
.fcm-article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-lg) 0;
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: manual;
}
.fcm-article-body tbody td:first-child,
.fcm-article-body tbody th:first-child { white-space: nowrap; }
.fcm-article-body thead th {
    background: var(--color-primary-faded);
    color: var(--color-primary-dark);
    font-weight: 700;
    text-align: left;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 2px solid var(--color-primary-lightest);
}
.fcm-article-body tbody td,
.fcm-article-body tbody th {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
    text-align: left;
}
.fcm-article-body tbody tr:nth-child(even) { background: var(--color-faded); }
.fcm-article-body tbody tr:last-child td,
.fcm-article-body tbody tr:last-child th { border-bottom: none; }
.fcm-article-body tbody td:first-child,
.fcm-article-body tbody th:first-child {
    font-weight: 600;
    color: var(--color-primary-dark);
}

/* Chip tipo-fonte nelle References ([Linea guida], [Review]...) */
.fcm-references__type {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-faded);
    padding: 1px 6px;
    border-radius: 4px;
    margin-right: 2px;
}

/* ==========================================================================
   RELATED CARDS
   Il template single-post usa .fcm-related-item con immagine + tag + h3, piu'
   ricco del componente base del design system (solo titolo+freccia). Senza
   queste regole l'immagine rende a dimensione naturale e il testo non wrappa,
   quindi l'item sfonda orizzontalmente su mobile.
   ========================================================================== */
.fcm-related-item__img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--border-radius-md);
    flex-shrink: 0;
}
/* il testo deve poter riempire e restringersi: altrimenti l'h3 lungo forza
   la larghezza e l'item supera il viewport */
.fcm-related-item > div {
    flex: 1;
    min-width: 0;
}
.fcm-related-item__tag {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
    margin-bottom: 2px;
}
.fcm-related-item h3 {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    line-height: 1.35;
    margin: 0;
    color: var(--color-primary-dark);
}

/* ==========================================================================
   HERO SPLIT (single approfondimento)
   Le immagini in evidenza degli articoli sono orizzontali: il 4/5 verticale del
   split (pensato per i ritratti delle terapie) le tagliava. 4/3 desktop, 16/10 mobile
   come da media query del partial.
   ========================================================================== */
.single-post .internal-hero--split .internal-hero__image {
    aspect-ratio: 4 / 3;
}
@media (max-width: 900px) {
    /* Su mobile l'immagine va SOTTO titolo e sottotitolo (come l'hero patologia): chi
       arriva col dolore legge subito il titolo, l'illustrazione non ruba il primo schermo. */
    .single-post .internal-hero--split .internal-hero__image {
        aspect-ratio: 16 / 9;
        order: 1;
        margin-top: 0; /* il gap della griglia split basta */
    }
}

/* Bio card: ritratto quadrato 96px, taglio dal bordo alto (volto) come nelle card team */
.fcm-bio-card__photo {
    object-position: center top;
    border: 3px solid var(--color-surface, #fff);
    box-shadow: 0 4px 14px rgba(33, 31, 84, 0.14);
}
/* Telefono: foto sopra e testo a tutta larghezza (affiancati lasciavano ~190px di misura) */
@media (max-width: 599px) {
    .fcm-bio-card { flex-direction: column; gap: var(--spacing-sm); }
    .fcm-bio-card__photo { width: 72px; height: 72px; }
}