/* Stili di templates/_main/about.html */
/* ---- Hero: banner semplice, coerente con lo stile bootstrap-vanilla
   del resto del sito (vedi _biblio/bibliography.html) ---- */
.about-hero{
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}
.about-hero h1{ font-size: 2.1rem; font-weight: 600; }

.eyebrow{
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--bs-primary);
}

/* ---- Indice del fascicolo (TOC sidebar) ---- */
.fascicolo{
    position: sticky; top: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.fascicolo-header{
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    border-radius: 0.5rem 0.5rem 0 0;
    padding: .85rem 1rem .6rem;
}
.fascicolo ul{ padding: .4rem 0; margin: 0; }
.toc-link{
    display: flex; align-items: baseline; gap: .6rem;
    padding: .45rem 1rem; text-decoration: none;
    color: var(--bs-gray-700); font-size: var(--fs-sm);
    border-left: 2px solid transparent;
    transition: all .15s;
}
.toc-link .toc-num{ font-size: var(--fs-xs); color: var(--bs-gray-500); }
.toc-link:hover{ background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.toc-link.toc-active{
    border-left-color: var(--bs-primary);
    color: var(--bs-body-color);
    font-weight: 600;
    background: var(--bs-tertiary-bg);
}
.toc-link.toc-active .toc-num{ color: var(--bs-primary); }

.about-content h2{ scroll-margin-top: 1.5rem; }
.about-copy{ max-width: 46rem; color: var(--bs-gray-700); }
.about-text{ color: var(--bs-gray-700); }

.about-section-subtitle{
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.about-content h3.section-enphasys{
    font-weight: 700;
    color: var(--bs-primary);
    margin: 1.75rem 0 .5rem;
    scroll-margin-top: 1.5rem;
}

/* ---- TOC: sotto-voci annidate sotto una sezione ---- */
.fascicolo li > ul{ list-style: none; margin: 0; padding: 0; }
.toc-sublink{
    padding-left: 2.1rem;
    font-size: var(--fs-xs);
    color: var(--bs-secondary-color);
}
.toc-sublink:hover{ color: var(--bs-body-color); }

/* ---- Team: due colonne, foto con angoli "da scheda anagrafica" ---- */
.team-member{
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    border-top: 1px solid var(--bs-border-color);
    padding-top: 1.25rem;
    height: 100%;
}
.team-photo{
    position: relative;
    width: 84px; height: 84px;
    flex-shrink: 0;
}
.team-photo-img{
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.team-photo::before, .team-photo::after{
    content: ""; position: absolute; width: 10px; height: 10px;
}
.team-photo::before{ top: -4px; left: -4px; border-top: 2px solid var(--bs-primary); border-left: 2px solid var(--bs-primary); }
.team-photo::after{ bottom: -4px; right: -4px; border-bottom: 2px solid var(--bs-primary); border-right: 2px solid var(--bs-primary); }

.team-name{ font-weight: 600; font-size: var(--fs-md); margin-bottom: .15rem; }
.team-role{
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bs-secondary-color);
}
.team-desc{
    font-size: var(--fs-sm);
    color: var(--bs-gray-700);
    margin: .5rem 0 .5rem;
}

/* ---- Collaborazioni: elenco compatto, senza foto ---- */
.collab-item{
    border-top: 1px solid var(--bs-border-color);
    padding-top: .75rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.collab-name{
    font-weight: 600;
    font-size: var(--fs-md);
    margin-bottom: .1rem;
}
.collab-inst{
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-secondary-color);
}
.collab-role{
    font-size: var(--fs-xs);
    font-style: italic;
    color: var(--bs-secondary-color);
    margin-top: .15rem;
}
.collab-note{
    font-size: var(--fs-xs);
    color: var(--bs-secondary-color);
    margin-top: .2rem;
}
.collab-sites{
    margin-top: auto;
    padding-top: .6rem;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}
.site-badge{
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
    border-radius: 999px;
    padding: .15rem .55rem;
}
.site-badge.development{
    color: #b45309;
    background: color-mix(in srgb, #f59e0b 15%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
}

/* ---- Partners: un progetto per riga, logo + testo, su due colonne.
   Diversamente dai loghi enti (griglia, box grande), qui il logo è
   piccolo e allineato a sinistra del testo, come una riga di elenco. ---- */
.partner-list{
    margin-top: .5rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
}
.partner-row{
    display: flex;
    align-items: center;
    gap: 1.25rem;
    border-top: 1px solid var(--bs-border-color);
    padding: 1rem 0;
}
/* prima riga della griglia (2 celle) senza bordo superiore */
.partner-row:nth-child(-n+2){ border-top: none; padding-top: 0; }
@media (max-width: 767.98px){
    .partner-list{ grid-template-columns: 1fr; }
    .partner-row:nth-child(2){ border-top: 1px solid var(--bs-border-color); padding-top: 1rem; }
    .partner-row:first-child{ border-top: none; padding-top: 0; }
}
.partner-row-logo{
    width: 68px; height: 68px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.partner-row-logo-img{
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    filter: grayscale(15%);
    transition: filter .15s ease;
}
.partner-row-logo-img:hover{ filter: grayscale(0%); }
.partner-row-logo-empty{
    width: 100%; height: 100%;
    border: 1px dashed var(--bs-border-color);
    border-radius: 4px;
}
.partner-row-body{ flex: 1 1 auto; min-width: 0; }
.partner-row-title{
    font-weight: 600;
    font-size: var(--fs-md);
    color: var(--bs-body-color);
}
.partner-row-title a{ color: inherit; text-decoration: none; }
.partner-row-title a:hover{ color: var(--bs-primary); text-decoration: underline; }
.partner-row-acronym{
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
    border-radius: 999px;
    padding: .1rem .5rem;
    margin-left: .5rem;
}
.partner-row-meta{
    margin-top: .35rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}
.partner-row-note{
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-primary) 25%, transparent);
    border-radius: 4px;
    padding: .2rem .6rem;
}
.partner-row-pi{
    font-size: var(--fs-xs);
    color: var(--bs-secondary-color);
}
.partner-row-badge{
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-gray-500);
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ---- Banner (DB Version) ---- */
.funding-banner{
    border-left: 3px solid var(--bs-primary);
    background: var(--bs-tertiary-bg);
}

/* ---- Finanziamento: righe come Partners ma senza logo per riga;
   i loghi degli enti, più grandi, in fascia sotto. ---- */
.funding-logos{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem 2.5rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}
.funding-logo-img{
    height: 64px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
}

/* ---- How to Cite: tab + output box ---- */
.cite-panel{
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    padding: 1.5rem;
}
.cite-tabs{ display: flex; gap: .35rem; flex-wrap: wrap; }
.cite-tab{
    background: transparent; border: 1px solid var(--bs-border-color);
    color: var(--bs-gray-700); font-size: var(--fs-xs); font-weight: 500;
    padding: .35rem .75rem; border-radius: 4px; cursor: pointer;
}
.cite-tab:hover{ border-color: var(--bs-primary); color: var(--bs-body-color); }
.cite-tab.active{ background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.cite-output{
    background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem;
    padding: 1rem 1.25rem; font-size: var(--fs-sm); color: var(--bs-gray-700);
    line-height: 1.6; white-space: pre-wrap; min-height: 70px; margin-top: 1rem;
}
.cite-output.mono{ font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: var(--fs-xs); }
.cite-actions{ display: flex; gap: .5rem; margin-top: .75rem; }
.cite-action-btn{
    background: transparent; border: 1px solid var(--bs-border-color); color: var(--bs-gray-700);
    font-size: var(--fs-xs); font-weight: 500; padding: .35rem .85rem; border-radius: 4px; cursor: pointer;
}
.cite-action-btn:hover{ border-color: var(--bs-primary); color: var(--bs-primary); }
.cite-action-btn.copied{ border-color: var(--bs-success); color: var(--bs-success); }