/* ==================================================
   0) RESET + VARIABILI GLOBALI
================================================== */
html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: Arial, Helvetica, sans-serif;
    scrollbar-gutter: stable;
    scrollbar-width: none;
}

:root {
    --bg-main: rgb(245,239,225);
    --bg-article: rgb(250,247,238);

    /* FRECCETTA */
    --freccetta-width: 22px;
    --freccetta-height: 14px;
    --freccetta-thickness: 1.75px;
    --freccetta-line-height: 1.55px;

    /* ==================================================
       LAYOUT GAP UNIFICATO (NUOVO)
       - sinistra contenuto
       - spazio tra contenuto e sidebar
       - destra sidebar
       tutti uguali alla misura “destra container-2”
    ================================================== */
    --layout-gap: 6.25vw;
    --sidebar-w: 20vw;
}


/* ==================================================
   1) HEADER / FOTO / FASCE COLORATE
================================================== */
.titolo > div {
    position: absolute;
    font-weight: bold;
    color: rgba(0,0,0,0.85);
    z-index: 1;
}

.foto {
    position: absolute;
    top: 2vh;
    left: var(--layout-gap);  /* MOD: era 5vw */
    z-index: 10;
}

.zona {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 25vh;
    background-color: rgb(234,227,208);
    z-index: -1;
}

.zona-2 {
    position: absolute;
    top: 25vh;
    width: 100%;
    height: 5vh;
    background-color: rgb(218,208,186);
    z-index: 2;
}


/* ==================================================
   2) MENU ORIZZONTALE
================================================== */
.fila {
    display: flex;
    gap: 10%;
    margin: 0 16.4vh;
    font-size: 14px;
    font-weight: 200;
    color: rgba(0,0,0,0.85);
    white-space: nowrap;
    height: 100%;
    align-items: center;
}

.fila div:nth-child(3) { cursor: pointer; }

.menu-item a {
    display: block;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    padding: 0.5em 0;
    transition: color 0.2s, text-decoration 0.2s;
}

.menu-item a:hover {
    color: #000;
    text-decoration: inherit;
}


/* ==================================================
   3) CAROSELLO
================================================== */
.carousel-rect {
    width: 61.5vw;
    height: 41.55vh;
    left: var(--layout-gap);   /* era 5vw */
    margin-top: 5vh;
    background-color: var(--bg-main);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Header carosello (Current Issue + Search) */
.current-issue-box {
    width: 100%;
    height: 6vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.1vh 2.5vh 0 2.5vh;
    background-color: rgb(218,208,186);
    box-sizing: border-box;
}

.current-issue-box p {
    font-size: 22px;
    font-weight: bold;
    transform: translateX(0.1vw);
    margin: 0;
    line-height: 1.1;
}

.current-issue-box .search-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0;
}

.current-issue-box .search-bar input,
.current-issue-box .search-bar button {
    font-size: 13px;
    padding: 0.5vh;
    border-radius: 2px;
}

.current-issue-box .search-bar input {
    width: 8vw;
    border: 1px solid #000;
}

.current-issue-box .search-bar button {
    width: 4vw;
    background-color: var(--bg-main);
    cursor: pointer;
    border: 1px solid #000;
}

/* Wrapper + lista */
.carousel-wrapper {
    width: 100%;
    flex: 1;
    overflow: hidden;
    position: relative;
    margin-top: 5px;
    padding: 0 41.5px 10px 20px;
    box-sizing: border-box;
}

.carousel {
    display: flex;
    gap: 1vw;
    transition: transform 0.5s ease;
}

.carousel-item {
    flex: 0 0 calc((100% - 40px) / 5);
    text-align: center;
    cursor: pointer;
    position: relative;
}

.carousel-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    margin: 0.5vh auto;
}

.caption {
    font-size: 14px;
    text-align: center;
    margin: 0;
}

/* Bottoni */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    background-color: rgba(200,200,200,0.8);
    border: none;
    cursor: pointer;
    z-index: 10;
    opacity: 0.4;
    padding: 8px 12px;
}

.left-btn { left: 1px; }
.right-btn { right: 1px; }

/* Pilastri laterali */
.carousel-pillar {
    position: absolute;
    top: 6vh;
    width: 1.3vw;
    height: 34.1vh;
    background-color: var(--bg-main);
    z-index: 3;
}

.left-pillar { left: 0; }
.right-pillar { right: 0; }


/* ==================================================
   4) CONTENITORI PRINCIPALI (LAYOUT)
================================================== */
.container{
    position: absolute;                  /* era fixed */
    top: 29vh;
    left: 0;
    width: 100vw;

    height: auto;                        /* era calc(...) */
    min-height: calc(100vh - 29vh);      /* mantiene “piena pagina” se poco contenuto */
    overflow: visible;                   /* era scroll */

    box-sizing: border-box;
    background-color: rgb(250,250,250);
}

/* permette espansione collapsible con layout fluido */
.container.expanded {
    height: auto;
    overflow: visible;
}

.container::-webkit-scrollbar { display: none; }

/* Sidebar */
.container-2 {
    position: absolute;
    top: 5vh;
    right: var(--layout-gap);            /* MOD: era 6.25vw */
    width: var(--sidebar-w);             /* MOD: era 20vw */
    height: calc(100vh - 33.98vh);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    text-align: left;
    background-color: var(--bg-main);
    scrollbar-width: none;
}

/* ==================================================
   5) SIDEBAR / TESTI
================================================== */
.container-2 p {
    font-size: 11px;
    margin: 1.5vh 1vw 1vh 1vw;
    line-height: 1.5;
    text-align: left;
    hyphens: auto;
}

.container-2 p.title {
    font-size: 13px;
    margin: 3.5vh 0 0.75vh 1vw;
    font-weight: bold;
    line-height: 0;
    text-align: left;
}


/* ==================================================
   6) HOME: VOLUMI / TOC / ARTICOLI
================================================== */
.zona-3 {
    max-height: none;
    width: 100vw;
    max-width: none;                     /* MOD: evita vincolo che rompe la simmetria */
    margin: 1vh 0 20px 0;                /* MOD: era 1vh auto 20px 3.8vw */
    display: flex;
    justify-content: flex-start;         /* MOD: era center */
    padding: 0;
    padding-left: var(--layout-gap);     /* MOD: margine sinistro uguale */
    box-sizing: border-box;
}


/* Box volume (contenitore generale TOC) */
.volume-inner {
    min-height: 5vh;
    width: 61.55vw;
    margin: 0.3vh 0 2.13vh 0;            /* MOD: era ... 0.08vw */
    background-color: rgb(218,208,186);
    overflow: visible;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1vh;
    padding: 0 0.8vw 0 1vw;
    flex: 0 0 auto;
}

/* Header (TOC) */
.volume-inner .toggle-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding-top: 0.6vh;
    height: 5vh;
    box-sizing: border-box;
    overflow: hidden;
}

.volume-inner .toggle-header p {
    margin: 0;
    display: flex;
    align-items: center;
    line-height: normal;
    transform: translate(0.3vw, 0.2vh);
}

/* Freccetta HOME */
.volume-inner .toggle-header .freccetta {
    display: inline-block;
    position: relative;
    width: var(--freccetta-width);
    height: 2vh;
    max-height: 100%;
    cursor: pointer;
    transform: translateY(-0.5vh) translateX(-1.25vw);
    margin-top: 1vh;
}

.volume-inner .toggle-header .freccetta::before,
.volume-inner .toggle-header .freccetta::after {
    content: "";
    position: absolute;
    width: var(--freccetta-thickness);
    height: var(--freccetta-height);
    background-color: rgba(0,0,0,0.85);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s ease;
}

.volume-inner .toggle-header .freccetta::before {
    transform: translateX(-50%) rotate(-45deg);
    transform-origin: bottom center;
}

.volume-inner .toggle-header .freccetta::after {
    transform: translateX(-50%) rotate(45deg);
    transform-origin: bottom center;
}

.volume-inner .toggle-header .freccetta.aperto::before,
.volume-inner .toggle-header .freccetta.aperto::after {
    bottom: calc(var(--freccetta-height)/2 - var(--freccetta-line-height)/2);
    left: 0;
    width: var(--freccetta-width);
    height: var(--freccetta-line-height);
    transform: rotate(0deg);
}

/* Contenuto collassabile HOME */
.volume-inner .collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.5s ease;
    padding-left: 1vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.volume-inner .collapsible-content.open {
    max-height: none;
    padding-top: 8px;
    padding-bottom: 2vh;
}

.volume-inner .collapsible-content .home-article:last-child{
    margin-bottom: 1.5vh;
}

/* Testo abstract HOME */
.collapsible-content .testo {
    font-size: 11px;
    font-weight: 500;
    transform: translateX(0.4vw);
    text-align: justify;
    text-justify: inter-word;
    line-height: 1.5;
    padding-top: 1vh;
    padding-right: 1vw;
}

/* Box articolo HOME */
.article-box,
.home-article {
    background-color: rgb(234,227,208);
    width: 58vw;
    padding: 8px 10px;
    margin: 0 0 0.5vh 0;
    transform: translateX(-0.7vw);
}

/* Header articolo HOME */
.volume-inner .home-article .toggle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 0.1vw;
    padding-right: 0.5vw;
    gap: 1vw;
}

.volume-inner .home-article .toggle-header .freccetta {
    transform: translateX(0vw) translateY(-0.5vh);
}


/* ==================================================
   7) TOGGLE TEXT: TITOLO + SUBTITLE (HOME + MODAL)
================================================== */

/* per evitare sforamenti e gestire bene le righe */
.modal-article .toggle-header p,
.volume-inner .home-article .toggle-header p {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ✅ sub-title segue il titolo (stessa riga) */
.toggle-text.has-subtitle{
    display: inline;       /* non flex-column */
    line-height: 1.2;
}

/* Autori */
.toggle-text .art-authors{
    display: inline;
    font-weight: 600;
}

/* Titolo articolo (sub-title) */
.toggle-text .art-subtitle{
    display: inline;
    font-weight: 400;
    opacity: 0.9;
    font-style: italic;
    margin-left: 6px; /* spazio minimo tra autori e subtitle */
}


/* ==================================================
   8) MODAL (overlay + layout)
================================================== */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background-color: rgba(0,0,0,0.85);
    justify-content: center;
    align-items: center;
    overflow: auto;
    padding: 20px;
}

.modal-content {
    background-color: rgb(218,208,186);
    border-radius: 6px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    width: 90vw;
    max-width: 90vw;
    max-height: 90vh;
    scrollbar-width: none;
}

.close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    z-index: 20;
}

.modal-page { display: flex; flex-direction: row; gap: 20px; }
.page-left, .page-right { flex: 1; display: flex; flex-direction: column; }

.cover img {
    width: 40vw;
    height: auto;
    object-fit: cover;
}

.summary { overflow-y: auto; scrollbar-width: none; }

.modal-pages-wrapper { display: flex; transition: transform 0.3s ease; }

.modal-arrow {
    position: absolute;
    top: 50vh;
    transform: translateY(-50%);
    font-size: 30px;
    background-color: rgba(200,200,200,0.7);
    border: none;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 4px;
    z-index: 15;
}

.left-arrow { left: 5px; }
.right-arrow { right: 5px; }

/* quando modal aperto */
body.modal-open .titolo,
body.modal-open .foto,
body.modal-open .zona,
body.modal-open .zona-2 {
    z-index: 0 !important;
    position: relative !important;
}


/* ==================================================
   9) MODAL: ARTICOLI + COLLAPSIBLE
================================================== */
.modal-article {
    width: 45vw;
    margin-bottom: 1vh;
    padding: 1.5vh 2vw;
    background-color: rgb(234,227,208);
    transform: translateX(-1vw);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1vh;
}

.modal-article .toggle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.modal-article .toggle-header p {
    margin: 0;
    flex: 1;
}

/* Freccetta MODAL */
.modal-article .toggle-header .freccetta {
    display: inline-block;
    position: relative;
    width: var(--freccetta-width);
    height: 2vh;
    max-height: 100%;
    cursor: pointer;
    transform: none;
}

.modal-article .toggle-header .freccetta::before,
.modal-article .toggle-header .freccetta::after {
    content: "";
    position: absolute;
    width: var(--freccetta-thickness);
    height: var(--freccetta-height);
    background-color: rgba(0,0,0,0.85);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s ease;
}

.modal-article .toggle-header .freccetta::before {
    transform: translateX(-50%) rotate(-45deg);
    transform-origin: bottom center;
}

.modal-article .toggle-header .freccetta::after {
    transform: translateX(-50%) rotate(45deg);
    transform-origin: bottom center;
}

.modal-article .toggle-header .freccetta.aperto::before,
.modal-article .toggle-header .freccetta.aperto::after {
    bottom: calc(var(--freccetta-height)/2 - var(--freccetta-line-height)/2);
    left: 0;
    width: var(--freccetta-width);
    height: var(--freccetta-line-height);
    transform: rotate(0deg);
}

/* Collapsible MODAL */
.modal-article .collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.5s ease;
    padding-left: 1vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1vh;
}

.modal-article .collapsible-content.open {
    max-height: 1000px;
    padding-top: 2vh;
    padding-bottom: 1vh;
}


/* ==================================================
   10) TITOLI / TESTI / UTILITY
================================================== */
.vol-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 2vh;
    text-align: left;
    color: rgba(0,0,0,0.85);
}

.volume-title-box p.volume-title {
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 0 -0.7vw;
    text-align: left;
    color: rgba(0,0,0,0.85);
}

.toggle-title {
    display: flex;
    align-items: center;
    justify-content: left;
    width: 100%;
    height: 5vh;
    font-size: 15px;
    margin: 0;
    font-weight: bold;
    color: rgba(0,0,0,0.85);
    cursor: pointer;
    line-height: normal;
}

.toggle-text {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    font-size: 13px;
    font-weight: 500;
    margin: 0;
    cursor: pointer;
    line-height: normal;
}

.toggle-title-wrapper,
.toggle-text-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.toggle-title-wrapper p,
.toggle-text-wrapper p {
    flex: 1;
    margin: 0;
    display: flex;
    align-items: center;
}

.scritte { font-weight: 300; color: rgba(0,0,0,0.85); z-index: 1; }
.testo { opacity: 0.8; }
.modal .testo { text-align: justify; text-justify: inter-word; margin: 0 0 0 -1vw; }
.volume-inner .testo { text-align: justify; text-justify: inter-word; margin: 0 0 0 -1vw; }

.download { font-size: 13px; opacity: 0.9; }
.download a { text-decoration: none; color: black; }


/* ==================================================
   11) RESPONSIVE
================================================== */
@media (max-width: 1024px) {
    .carousel-item { flex: 0 0 calc((100% - 50px)/3); }
}


/* ==================================================
   12) FIX: HOME article title/subtitle (override di .toggle-text flex)
   (METTERE IN FONDO AL CSS)
================================================== */
.volume-inner .home-article .toggle-header p.toggle-text{
    display: block;          /* NON flex */
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
}

.volume-inner .home-article .toggle-header p.toggle-text.has-subtitle{
    display: block;          /* resta block anche con subtitle */
}

/* Autori + subtitle restano inline nella stessa riga (wrapping naturale) */
.volume-inner .home-article .toggle-header .toggle-text .art-authors{
    display: inline;
    font-weight: 600;
}

.volume-inner .home-article .toggle-header .toggle-text .art-subtitle{
    display: inline;
    margin-left: 6px;
    font-weight: 400;
    opacity: 0.9;
    font-style: italic;
}