/* FILE CSS: style.css - Definizione della variabile e codice corretto */

:root {
    /* DEFINIZIONE DELLA VARIABILE GREEN-COLOR ALL'INIZIO DEL FILE */
    --green-color: #00FF00;
}

body {
    font-family: Arial, sans-serif; 
    background-color: black;
    color: white; 
    margin: 0;
    padding: 0;
}

.container {
    /* Layout principale (Flexbox) */
    display: flex;
    flex-direction: column; 
    gap: 10px; 
    padding: 10px;
    box-sizing: border-box;
}

/* --- RIGA SUPERIORE NERA (Wrapper) --- */
.top-row-wrapper {
    display: flex;
    gap: 10px;
    width: 100%; 
}

.block {
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Stili per le due sezioni a sfondo Nero */
.black-bg {
    background-color: black;
    color: white;
}

.top-row-wrapper .block {
    width: 50%;
    flex-shrink: 0;
}

/* Stili per la sezione a sfondo Verde (USA LA VARIABILE QUI) */
.green-bg {
    background-color: var(--green-color); /* Qui usa la variabile definita sopra */
    color: black;
    width: 100%; 
}

/* --- Riga di Intestazione (Data, Title, Board) --- */
.header-row {
    display: flex;
    font-size: 10px;
    justify-content: space-between;
}

.date, .center-title, .board-title {
    color: inherit; 
    font-weight: normal;
}

/* Stili per il testo "sbiadito" nel blocco verde (usando opacità) */
.green-bg .date, 
.green-bg .center-title, 
.green-bg .board-title, 
.green-bg .list-container ol {
    color: black; 
    opacity: 0.4; 
}

.center-title {
    flex-grow: 1;
    text-align: center;
}

/* --- Separatori Orizzontali --- */
hr {
    border: none;
    margin: 10px 0;
}

.header-divider-white {
    border-top: 1px solid white;
}

.header-divider-black, .content-divider-black {
    border-top: 1px solid black;
}

/* --- Contenuto Superiore (Due Colonne di Testo) --- */
.two-col-text {
    display: flex;
    gap: 20px;
}

.two-col-text p {
    flex: 1;
    line-height: 1.4;
    font-size: 0.95em;
    margin-top: 5px;
}

/* --- Contenuto Inferiore (Immagini + Testo) --- */
.split-content {
    display: flex;
    gap: 10px;
    flex-grow: 1;
    margin-top: 10px;
}

/* Colonna Immagini (9/12) */
.images-column {
    flex: 3; 
    display: flex;
    flex-direction: column;
    gap: 10px; 
}

.image-set {
    display: flex;
    gap: 10px;
    flex-grow: 1;
}

.image-set img { 
    width: 50%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Colonna Testo (3/12) */
.text-column {
    flex: 1; 
    padding-left: 10px;
    display: flex;
    flex-direction: column;
}

.main-title {
    font-size: 3em; 
    line-height: 0.9;
    margin-top: 0;
    margin-bottom: 5px;
    font-weight: 900; 
    white-space: nowrap; 
}

.intro-text {
    font-size: 0.9em;
    margin: 10px 0;
    line-height: 1.4;
}

/* Lista numerata */
.list-container ol {
    padding-left: 20px;
    font-size: 0.9em;
    line-height: 1.6;
    font-style: italic; 
}