/* =========================
   SFONDO PAGINA
========================= */

body {
    background: #cfcac0;
}


/* =========================
   CONTENITORE CENTRALE
========================= */

.storia-container {
    width: 100%;
    max-width: 1000px;
    margin: 40px auto 60px;
    padding: 45px 45px 60px;
    background: #f3efe4;
    box-shadow: 0 0 12px rgba(0,0,0,0.12);
    box-sizing: border-box;
}


    /* =========================
   TITOLI
========================= */

    .storia-container h1 {
        margin: 0 0 35px;
        font-size: 45px;
        font-weight: bold;
        color: #1f1f1f;
        line-height: 1.1;
    }


/* =========================
   TESTO
========================= */

.storia-testo {
    font-size: 15px;
    line-height: 1.3; /* REGOLA QUI distanza righe */
    text-align: justify;
    color: #2f2b24;
}


/* =========================
   ACCAPO STRETTO
========================= */

/* REGOLA QUI la distanza dei <br> */

.accapo-stretto br {
    line-height: 0.8;
}


/* Variante più ariosa:
.accapo-stretto br {
    line-height: 1;
}
*/

/* Variante molto compatta:
.accapo-stretto br {
    line-height: 0.6;
}
*/


.storia-testo p {
    margin: 0 0 18px;
}

.storia-testo em {
    color: #5f5a50;
}


/* =========================
   TABELLA ARCHIVISTICA
========================= */

.tabella-equipaggio {
    width: 100%;
    border-collapse: collapse;
    margin: 45px 0;
    font-size: 16px;
    color: #2f2b24;
    background: rgba(255,255,255,0.18);
}

    .tabella-equipaggio th {
        background: #d8ccb3;
        color: #4f4332;
        padding: 12px 14px;
        text-align: left;
        border: 1px solid #b8ac93;
        font-weight: bold;
    }

    .tabella-equipaggio td {
        padding: 10px 14px;
        border: 1px solid #cfc3ab;
        vertical-align: top;
        line-height: 1.35;
    }

    .tabella-equipaggio tr:nth-child(even) {
        background: rgba(255,255,255,0.35);
    }

    .tabella-equipaggio tr:hover {
        background: rgba(216,204,179,0.20);
    }


/* =========================
   GALLERIA
========================= */

.internamento-galleria {
    margin-top: 50px;
}

.internamento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.internamento-foto {
    background: #e8e2d2;
    border: 1px solid #c9bea7;
    padding: 6px;
    box-sizing: border-box;
}

    .internamento-foto img {
        width: 100%;
        height: 280px;
        object-fit: cover;
        display: block;
    }

.internamento-caption {
    padding-top: 8px;
    font-size: 14px;
    text-align: center;
    color: #5f5a50;
    line-height: 1.3;
}


/* =========================
   RESPONSIVE
========================= */

@media screen and (max-width: 900px) {

    .storia-container {
        padding: 35px 25px 45px;
    }

        .storia-container h1 {
            font-size: 42px;
        }
}

@media screen and (max-width: 700px) {

    .storia-container {
        padding: 25px 18px 35px;
    }

        .storia-container h1 {
            font-size: 34px;
        }

    .storia-testo {
        font-size: 16px;
    }

    .tabella-equipaggio {
        font-size: 14px;
    }

        .tabella-equipaggio th,
        .tabella-equipaggio td {
            padding: 8px 9px;
        }

    .internamento-grid {
        grid-template-columns: 1fr;
    }

    .internamento-foto img {
        height: auto;
    }
}
/* =========================================
   foto
========================================= */

.danni-doppio {
    width: 100%;
    max-width: 920px;
    margin: 50px auto;
}

    /* primo schema */

    .danni-doppio a:first-child {
        display: block;
        text-align: left;
        margin-bottom: 8px;
    }

        .danni-doppio a:first-child img {
            width: 530px;
        }

    /* secondo schema */

    .danni-doppio a:last-child {
        display: block;
        text-align: right;
    }

        .danni-doppio a:last-child img {
            width: 360px;
        }

    /* immagini */

    .danni-doppio img {
        max-width: 100%;
        background: transparent;
        border: 1px solid #d3c8b0;
        box-shadow: 0 4px 14px rgba(0,0,0,0.18);
        display: inline-block;
        transition: transform 0.25s ease;
    }

        .danni-doppio img:hover {
            transform: scale(1.02);
        }

.storia-bottone-container {
    text-align: center;
    margin: 40px 0 10px;
}

.bottone-storia {
    display: inline-block;
    padding: 12px 26px;
    background: #2f5f8f;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    border-radius: 4px;
    transition: background 0.25s ease;
}

    .bottone-storia:hover {
        background: #23496d;
    }