/* CSS OTTIMIZZATO */

header .BG {display: none}

/* Struttura generale contenuti */
.contenuti .path {display: none}
.contenuti ul, .contenuti ul li {list-style: none; padding: 0; margin: 0}

/* Header e Wrapper Immagini */
header .img-wrapper {padding: 0; width: 100%}
header img {width: 100%}


/* Container principale */
.bg-dark-wrapper {
    background-color: #666;
    color: #fff;
    padding: 3rem 1rem;
    text-align: center;
}

.bg-dark-wrapper h1 {
    margin-bottom: 2rem;
}

/* Griglia Responsive */
.guida-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Crea colonne in automatico */
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Stile della singola Card */
.guida-card {
    background-color: #444; /* Leggermente più scuro del wrapper per dare profondità */
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
}

.guida-card:hover {
    transform: translateY(-5px);
}

.guida-img img {
    width: 300px; /* Dimensione icone */
    height: auto;
}

.guida-content h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.guida-content p {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
    min-height: 60px; /* Mantiene i bottoni allineati */
}

/* Pulsante Grigio Chiaro */
.guida-btn {
    display: inline-block;
    background-color: #ddd; /* Grigio chiaro */
    color: #333;
    padding: 1rem;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition: background 0.3s;
}

.guida-btn:hover {
    background-color: #fff;
    color: #333;
}

/* Box Grigio Presentazione */
.bg-grey-wrapper {margin: 1rem auto; margin-top: 0; margin-bottom: 0; background-color: #f5f5f5; color: #666; padding: 1rem}
.text-wrapper {padding: 0.5rem; margin: 0 auto; max-width: 65rem; text-align: justify}

/* Box Grigio Scuro Presentazione */
.bg-dark-wrapper {margin: 1rem auto; margin-top: 0; margin-bottom: 0; background-color: #666; color: #fff; padding: 1rem}
.bg-dark-wrapper div {margin: 0 auto 1rem;}
.bg-dark-wrapper div:last-of-type {margin-bottom: 0}
.bg-dark-wrapper h3  {color: #fff;}
.bg-dark-wrapper p {color: #fff}

/* Pulsanti */
.button {background-color: #666; border-radius: 0rem; padding: 1rem; margin-top: 1rem; display: inline-block; align-content: center}
.button a {text-decoration: none; color: inherit;}

/* Sezione Materiale e Filtri */
#materiale-wrapper .materiale-classe {margin-top: 1rem}

/* Griglia Cards Generali */
.general-cards-wrapper {display: flex; flex-wrap: wrap; margin: 1rem auto; justify-content: center}
.general-cards-wrapper .card {
    max-width: 125px; 
    border-radius: 0rem; 
    padding: 0.25rem; 
    margin: 0.5rem; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box; 
    overflow: hidden; 
    box-shadow: 0 0 1px #f5f5f5; 
    background-color: #666; 
    color: #ffffff;
}

/* EFFETTO HOVER SULLE CARD */
.general-cards-wrapper .card:hover {
    /* MODIFICA QUESTO COLORE PER CAMBIARE L'EVIDENZIAZIONE */
    background-color: #444; 
    cursor: pointer;
}

/* Rimuove il margine forzato dai div interni alle card per evitare disallineamenti */
.guida-cards-container .guida-card div {
    margin-bottom: 0;
}

/* Assicura che tutte le card abbiano la stessa altezza nella griglia */
.guida-card {
    height: 100%; 
    box-sizing: border-box;
}

/* Cards Big (specifiche per la tua pagina) */
.big-cards-wrapper .card {max-width: 200px; padding-bottom: 0.5rem}
.card-body .img-wrapper {border-radius: 0; max-width: 500px; padding: 0; margin: 0;}
.card-text {margin: 5px; font-size: 1rem; color: #ffffff !important;}
.card-text h4 {margin: 0.5rem 0;}

#why {margin-top: 0 !important; padding-top: 1rem;}
#why ul {display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center}
#why ul li {margin: 0 auto 3rem}
#why .img-wrapper {width:100%; max-width: 300px; border-radius: 0px; overflow: hidden; margin: 0 auto}
#why .text-wrapper {text-align: justify; padding-top: 0; padding-bottom: 0; line-height:125%}

/* Comportamento link nelle card */
.card a {text-decoration: none; color: white;}

/* Utility */
html {scroll-behavior: smooth;}

/* Responsive */
@media only screen and (min-width: 900px) {
    header .img-wrapper {
        content: url(/img/Approfondimenti/Prodotti/Commercializzato/Sicurezza_lavoro_intro.png);
    }
    header img {
        content: url(/img/Approfondimenti/Prodotti/Commercializzato/Sicurezza_lavoro_intro.png);
    }
	#why ul {padding: 2rem}
    #why ul li {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: center; align-content: center}
    #why .img-wrapper {max-width: 150px; margin: 0}
    #why .text-wrapper {-ms-flex-item-align: center;-ms-grid-row-align: center;align-self: center; text-align: left; margin: 0 0 0 1rem}
    #why .text-wrapper h3 {margin-top: 0}
    #why .text-wrapper a {text-decoration: underline}
}