/* Stili esclusivi per le pagine di dettaglio (es. Security Compliance) */
.page-container {
    max-width: 900px;
    margin: 3rem auto;
    padding: 4rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.page-container h1 { color: #005bb5; margin-bottom: 0.5rem; }
.page-container .subtitle { font-size: 1.25rem; color: #64748b; margin-bottom: 3rem; }

.page-block { margin-bottom: 3rem; }
.page-block h2 { font-size: 1.6rem; color: #0f172a; margin-bottom: 1rem; }
.page-block p { font-size: 1.1rem; line-height: 1.8; color: #334155; }

/* Stile per l'immagine integrata */
.responsive-image {
    width: 100%;           /* Occupa la larghezza del contenitore */
    max-width: 700px;      /* Non diventa eccessivamente larga */
    height: auto;          /* Mantiene le proporzioni */
    margin: 0 auto 3rem;   /* Centrata con margine inferiore per staccarla dal testo */
    display: block;        /* Necessario per il centramento automatico */
    border-radius: 8px;    /* Leggera arrotondatura per coerenza con le card */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Ombra morbida per dare profondità */
    margin-top: 25px; /* Spazio superiore per separarla dal titolo */
    margin-bottom: 25px; /* Spazio inferiore per separarla dal testo successivo */
}

/* Disposizione verticale a colonna singola (una per riga) */
.page-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Spazio verticale uniforme tra i blocchi */
    margin-top: 2rem;
}

.page-item {
    width: 100%;
    background: #f8fafc;
    padding: 1.5rem 2rem;
    border-radius: 8px; /* Angoli arrotondati */
    border: 1px solid #e2e8f0;
    border-left: 6px solid #005bb5; /* Bordo blu marcato a sinistra */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Leggero effetto interattivo al passaggio del mouse */
.page-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    background: #ffffff;
}

.page-item h4 {
    color: #005bb5;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.page-item p {
    margin-bottom: 0;
    font-size: 1rem;
    color: #334155;
}

/* 1. Reset degli elenchi per allinearli ai paragrafi */
ul {
    list-style: none; /* Rimuove il pallino standard */
    padding: 0;
    margin: 1.5em 0; /* Identico al margine dei tuoi paragrafi */
}

/* 2. Formattazione di ogni singolo punto elenco */
li {
    position: relative;
    padding-left: 25px; /* Spazio per il punto elenco personalizzato */
    margin-bottom: 1em; /* Spaziatura tra i punti */
    line-height: 1.6;   /* Identico ai paragrafi */
}

/* 3. Creazione del punto elenco personalizzato in blu */
li::before {
    content: "•";
    color: #0056b3; /* Sostituisci con il tuo codice colore blu esatto */
    font-size: 1.5em;
    position: absolute;
    left: 0;
    top: -5px; /* Centratura verticale rispetto alla riga */
}

@media screen and (max-width: 768px) {
    .page-container { padding: 2rem; margin: 1rem; }
    .page-item { padding: 1.25rem; }
}