/* ==========================================================================
   1. RESET E IMPOSTAZIONI GENERALI
   ========================================================================== */
cartelli_1.contenuti { margin-bottom: 1rem; }

.contenuti .path { display: none; }

.contenuti ul, 
.contenuti ul li { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}

header .BG { display: none; }

#settore-wrapper, .filtro-wrapper {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.separator {
    height: 1px;
    background: linear-gradient(to right, transparent, #ccc, transparent);
    margin: 20px auto;
    width: 80%;
}

/* ==========================================================================
   MODIFICHE: AGGIUNTA BOX INFORMATIVI
   ========================================================================== */
.info-boxes-outer-wrapper {
    margin: 2.5rem 0; /* Spaziatura generosa sopra e sotto */
    padding: 0 25px; /* Contiene i box e garantisce spaziatura dai bordi laterali di 800px del text-wrapper */
    width: 100%;
    box-sizing: border-box;
}

/* Ri-utilizzo e adattamento di .grid-container esistente per un layout a 3 colonne reattivo */
.grid-container.info-boxes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Colonne flessibili */
    gap: 1.5rem; /* Gap generoso tra i box */
    margin: 0 auto;
    max-width: 100%; /* Contenuto all'interno dell'outer-wrapper */
}

/* Stile specifico per i nuovi box info, basato su .card */
.info-box {
    background-color: #f1f2f3 !important; /* Grigio chiarissimo per farli risaltare */
    padding: 2rem !important; /* Generoso padding interno per allontanare testo/icone dai bordi */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid #d0d0d0 !important;
    height: 100%; /* Per pareggiare l'altezza */
    justify-content: flex-start; /* Inizia dall'alto */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Ombra sottile per profondità */
}

.info-box .icon-wrapper {
    margin-bottom: 1.5rem;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.info-box .icon-wrapper .info-icon {
    max-width: 80px; /* Dimensione controllata delle icone */
    height: auto;
    display: block; /* Per centraggio corretto */
}

.info-box h3 {
    font-size: 2rem !important; /* Numero grande */
    color: #666 !important;
    margin: 0 0 1rem 0 !important;
    font-weight: bold;
}

.info-box p {
    font-size: 0.95rem !important; /* Testo leggermente più piccolo e pulito */
    line-height: 1.4 !important;
    color: #333 !important;
    margin: 0 !important;
}

/* Media query per mobile per i box info: una colonna */
@media (max-width: 650px) {
    .grid-container.info-boxes-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
}


/* ==========================================================================
   2. LAYOUT E GRIGLIE PRINCIPALI
   ========================================================================== */
.custom-grid-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(800px, 1fr));
    gap: 10px; 
    max-width: 800px;
    margin: 0 auto;
}

#features-grid {
    padding: 2rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.cards-wrapper {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 12px;
    width: 100%;
    padding: 20px 10px;
    box-sizing: border-box;
}

/* Re-definizione wrapper per compatibilità */
.cards-wrapper { padding: 1rem; margin: 0 auto; }

/* ==========================================================================
   3. COMPONENTI: CUSTOM CARD (GRIGIA)
   ========================================================================== */
.custom-card {
    background-color: #666;
    color: #ffffff;
    padding:10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: default;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.custom-card:hover {
    background-color: #666;
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.4);
}

.custom-card h3 {
    font-size: 1.1rem;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
}

.custom-card p {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    color: #eee;
}

.custom-card strong {
    color: #fff;
    font-weight: 700;
}

/* ==========================================================================
   4. COMPONENTI: CARD STANDARD (BIANCA)
   ========================================================================== */
.card {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    height: 100%; 
    box-sizing: border-box;
    transition: box-shadow 0.3s ease;
}

.card { 
    border-radius: 0 !important; 
    width: 100%; 
    max-width: 350px; 
    overflow: hidden; 
    margin: 0 auto; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    align-items: center; 
}

.card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.card-body {
    flex-grow: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.card-body { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    align-items: center; 
    margin-top: 1rem; 
}

.card .img-wrapper {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
}

.card .img-wrapper img {
    max-width: 100%;
    max-height: 220px;
    height: auto;
    width: auto;
    object-fit: contain;
}

.card h3 {
    font-size: 1.2rem;
    margin: 10px 0;
    color: #666;
    font-weight: bold;
}

.card p {
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Pittogrammi e varianti card */
.card .pittogrammi-wrapper { 
    display: flex; 
    flex-wrap: wrap; 
    padding: 0 1rem; 
    margin-top: 1rem; 
    justify-content: center; 
    align-items: center; 
}

.card .pittogrammi-wrapper .icon-wrapper { 
    padding: 0.25rem; 
    width: unset; 
    max-width: unset; 
    height: unset; 
    max-height: unset; 
}

.card .pittogrammi-wrapper .icon-wrapper img { 
    max-width: unset; 
    height: unset; 
    max-height: unset; 
    width: 1.5rem; 
    height: auto; 
}

.general-cards-wrapper { 
    display: flex; 
    flex-wrap: wrap; 
    margin: 1rem auto; 
    justify-content: center; 
}

.general-cards-wrapper .card { 
    max-width: 125px; 
    padding: 0.25rem; 
    margin: 0.5rem; 
    box-sizing: border-box; 
    box-shadow: 0 0 1px #666; 
}

.general-cards-wrapper .card:hover { box-shadow: 0 0 2px #333; }

.big-cards-wrapper .card { max-width: 200px; padding-bottom: 0.5rem; }

/* ==========================================================================
   5. FEATURE CARDS E ALTRI COMPONENTI UI
   ========================================================================== */
.feature-card {
    background: #f1f2f3;
    padding: 1.5rem;
    border-left: 4px solid #666;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

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

.icon-header { display: flex; align-items: center; margin-bottom: 1rem; }

.dash {
    width: 20px;
    height: 3px;
    background: #999;
    margin-right: 10px;
    display: inline-block;
}

.feature-card h3 { margin: 0; font-size: 1.2rem; color: #666; }

.feature-card p {
    font-size: 1rem;
    line-height: 1.5;
    color: #666;
    text-align: left;
}

.feature-list { padding: 0; margin: 0; list-style: none; font-size: 0.9rem; }
.feature-list li { margin-bottom: 0.5rem; padding-left: 0; }

/* Pulsanti */
.button-container { text-align: center; padding: 0 20px 25px 20px; }

.btn-custom {
    display: inline-block;
    background-color: #666;
    color: #fff !important;
    padding: 10px 25px;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.2s;
}

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

.btn-modern {
    display: inline-block;
    background-color: #666;
    color: #fff !important;
    text-decoration: none;
    padding: 10px 20px;
    font-weight: bold;
    margin-top: auto; 
    align-self: center;
}

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

/* Media e Testi */
.text-wrapper { padding: 0.5rem; margin: 0 auto; max-width: 800px; text-align: justify; }

.video-wrapper { width: 100%; max-width: 800px; margin: 1rem auto 0; }
.video-wrapper iframe { width: 100%; height: 250px; -webkit-box-sizing: border-box; box-sizing: border-box; }

.slider-container { width: 100%; max-width: 800px; margin: auto; overflow: hidden; }
.slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.slider img { width: 100%; flex-shrink: 0; scroll-snap-align: start; object-fit: cover; }

/* Galleria e Lightbox */
.modern-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.modern-gallery img { width: 100%; height: 300px; object-fit: cover; cursor: pointer; transition: transform 0.3s ease, filter 0.3s ease; }
.modern-gallery img:first-child { grid-column: span 2; height: 450px; }
.modern-gallery img:hover { filter: brightness(0.9); transform: scale(1.01); }

.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}

.lightbox img {
    max-width: 800px;
    width: 90%;
    max-height: 80vh;
    border: 4px solid white;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    object-fit: contain;
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   6. SEZIONI SPECIFICHE (ID)
   ========================================================================== */

/* Presentazione Generale */
#presentazione-generale .img-protos-all-wrapper { padding: 1rem; margin: 0rem auto; }
#presentazione-generale .img-protos-all-wrapper ul { display: flex; flex-wrap: wrap; justify-content: center; }
#presentazione-generale .img-protos-all-wrapper ul li { padding: 0.5rem; }
#presentazione-generale .img-protos-all-wrapper .img-wrapper { max-width: 300px; border-radius: 0px; overflow: hidden; }

/* Company Profile */
#company-profile .img-wrapper { width: 100%; max-width: 35rem; margin: 0 auto; }
#company-profile p { margin-bottom: 1rem; }

/* Categorie e Prodotti */
#categorie-all-section .card-body .img-wrapper, 
#altri-prodotti-segnaletica .card-body .img-wrapper { border-radius: 0; max-width: 500px; padding: 0; margin: 0; }
#categorie-all-section .card .text-wrapper { padding: 0 1rem; }
#categorie-all-section .card h4, 
#altri-prodotti-segnaletica .card h4 { margin: 0.5rem auto; }
#categorie-all-section .card .button:hover { background-color: #333; }
#cat-identificazione { background-color: #f1f2f3; }
#materiale-wrapper .materiale-classe { margin-top: 1.5rem; }

/* ==========================================================================
   7. MEDIA QUERIES (RESPONSIVE)
   ========================================================================== */

@media (max-width: 1200px) {
    .cards-wrapper { grid-template-columns: repeat(2, 1fr) !important; }
}

@media only screen and (min-width: 1200px) {
    /* header .img-wrapper { display: none; } ... */
}

@media only screen and (min-width: 900px) {
    header .img-wrapper { content: url(/img/Landing/Martor/Intro_Martor.png); padding: 0; width: 100%; }
    header img { content: url(/img/Landing/Martor/Intro_Martor.png); }
    #presentazione-generale .img-protos-all-wrapper ul { flex-wrap: nowrap; }
    #presentazione-generale .img-protos-all-wrapper .img-wrapper { max-width: 350px; }
    #why ul { padding: 2rem; }
    #why ul li { display: flex; justify-content: flex-start; align-content: center; }
    #why .img-wrapper { max-width: 150px; margin: 0; }
    #why .text-wrapper { align-self: center; text-align: left; margin: 0 0 0 1rem; }
    #why .text-wrapper h3 { margin-top: 0; text-align: center; }
    #why .text-wrapper a { text-decoration: underline; }
    #affiliazioni > div { max-width: 40rem; margin-left: auto; margin-right: auto; }
}

@media only screen and (min-width: 768px) {
    .video-wrapper iframe { height: 440px; }
}

@media (max-width: 768px) {
    .custom-grid-section { gap: 25px; }
    .grid-container { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .cards-wrapper { grid-template-columns: 1fr !important; }
    .card .img-wrapper { height: auto; }
}

@media only screen and (min-width: 600px) {
    #clienti-loghi ul { display: flex; flex-wrap: wrap; max-width: 35rem; }
    #clienti-loghi ul li { margin-top: 0; padding: 1rem; }
    #clienti-loghi .img-wrapper { height: 50px; width: auto; }
    #clienti-loghi .img-wrapper img { height: 100%; width: auto; }
    .video-wrapper iframe { height: 350px; }
    #categorie-all-section header .img-wrapper, 
    #categorie-all-section header img { content: unset; }
    #settore-wrapper .cards-wrapper { 
        display: flex; 
        flex-wrap: wrap; 
        justify-content: center; 
        align-items: stretch; 
        margin: auto auto 1rem; 
    }
    .card { margin: 1rem; align-self: stretch; max-width: 20rem; }
}

@media (max-width: 600px) {
    .modern-gallery { grid-template-columns: 1fr; }
    .modern-gallery img:first-child { grid-column: span 1; height: 300px; }
}

@media (max-width: 480px) {
    .custom-grid-section { grid-template-columns: 1fr; }
}

@media only screen and (min-width: 450px) {
    .video-wrapper iframe { height: 300px; padding: 0 1rem; }
    .card { margin: 1rem; }
}
/* Forza il contenitore della MasterPage a calcolare l'altezza corretta */
.corpo {
    display: flex;
    align-items: stretch; /* Obbliga le colonne laterali a pareggiare l'altezza del centro */
    overflow: visible;
}

.tdPrincipale {
    flex-grow: 1;
    min-width: 0; /* Previene problemi di overflow con le Grid */
}

/* Assicura che le sidebar occupino tutta l'altezza disponibile */
#sidebarSx, #sidebarDx, .colonnasx, .colonnadx {
    height: auto !important;
    min-height: 100%;
}

/* Fix per il footer: evita che si sovrapponga */
.footer {
    clear: both;
    position: relative;
    z-index: 10;
}

/* ==========================================================================
   MODIFICA: GRIGLIA ALLINEATA A 3 COLONNE (MAX 800px)
   ========================================================================== */
#features-grid {
    padding: 2rem 0.5rem;
    max-width: 800px; /* Non esce dall'ingombro del testo principale */
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Forza la griglia ad avere esattamente 3 colonne su schermi grandi */
#features-grid .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 1.5rem;
    width: 100%;
}

.feature-card {
    background: #f1f2f3;
    padding: 1.5rem;
    border-left: 4px solid #666;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

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

.icon-header { 
    display: flex; 
    align-items: center; 
    justify-content: center;
    margin-bottom: 1rem; 
}

/* Modificato il colore per riflettere quello dei titoli (h3/h1 -> #666) */
.feature-card h3 { 
    margin: 0; 
    font-size: 3rem; /* Leggermente ridotto da 3.5rem a 3rem per evitare che i testi tocchino i bordi su schermi intermedi */
    color: #666 !important; /* Stesso colore dei titoli della pagina */
    font-weight: bold;
    width: 100%;
    text-align: center;
}

.feature-card p {
    font-size: 1rem;
    line-height: 1.5;
    color: #666;
    text-align: center;
}

/* ==========================================================================
   RESPONSIVE: PASSA A 1 COLONNA SOLO SU SCONTRINO/MOBILE
   ========================================================================== */
@media (max-width: 768px) {
    #features-grid .grid-container {
        grid-template-columns: 1fr !important; /* Diventa verticale solo su dispositivi mobili */
        gap: 1rem;
    }
}

/* ==========================================================================
   NUOVA GALLERIA IMMAGINI RESPONSIVE (6 BOX CORREDO TAGLIERINI)
   ========================================================================== */
.gallery-responsive-container {
    max-width: 800px;         /* Perfettamente allineato al testo .text-wrapper */
    margin: 2rem auto;        /* Spaziatura verticale bilanciata */
    padding: 0 0.5rem;        /* Allineamento con il padding del wrapper di testo */
    width: 100%;
    box-sizing: border-box;
}

.gallery-responsive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonne su desktop */
    gap: 15px;                             /* Spaziatura pulita tra i box */
    width: 100%;
}

.gallery-responsive-grid-taglierini {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonne su mobile di base */
    gap: 15px;                             /* Spaziatura pulita tra i box */
    width: 100%;
}

/* Da desktop in su (schermi più larghi di 768px) */
@media (min-width: 768px) {
    .gallery-responsive-grid-taglierini {
        grid-template-columns: repeat(6, 1fr); /* 6 colonne su desktop */
    }
}

.gallery-box {
    position: relative;
    overflow: hidden;
    height: 180px;                         /* Altezza fissa e proporzionata per i box */
    background-color: #f1f2f3;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.gallery-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;                     /* Adatta l'immagine senza distorcerla */
    transition: transform 0.4s ease;
}

/* Overlay moderno che appare al passaggio del mouse */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(102, 102, 102, 0.85); /* Tonalità grigia coerente con il brand (#666) */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 10px;
    box-sizing: border-box;
}

.gallery-overlay span {
    color: #ffffff;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    letter-spacing: 1px;
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

/* --- EFFETTI DI ANIMAZIONE (HOVER) --- */
.gallery-box:hover {
    transform: translateY(-4px);           /* Leggero sollevamento del box */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.gallery-box:hover img {
    transform: scale(1.08);                /* Zoom controllato dell'immagine interna */
}

.gallery-box:hover .gallery-overlay {
    opacity: 1;                            /* Dissolvenza in entrata dello sfondo grigio */
}

.gallery-box:hover .gallery-overlay span {
    transform: translateY(0);              /* Slittamento verso l'alto del testo */
}

/* --- ADATTAMENTO RESPONSIVE --- */
@media (max-width: 768px) {
    .gallery-responsive-grid {
        grid-template-columns: repeat(2, 1fr); /* Diventa a 2 colonne sui tablet */
    }
    .gallery-box {
        height: 160px;                     /* Riduce leggermente l'altezza */
    }
}

@media (max-width: 480px) {
    .gallery-responsive-grid {
        grid-template-columns: 1fr;        /* 1 colonna singola sugli smartphone */
        gap: 12px;
    }
    .gallery-box {
        height: 180px;                     /* Ripristina proporzione per visualizzazione mobile completa */
    }
}

/* Modifica all'interno dello stile del box precedentemente creato */
.gallery-box {
    position: relative;
    overflow: hidden;
    height: 180px;
    background-color: #f1f2f3;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer; /* Forza il cursore a manina su tutto il box */
}

.gallery-box img.zoomable {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    cursor: zoom-in; /* Mostra la lente di ingrandimento quando si passa sopra l'immagine */
}

/* Modifica importante all'overlay per consentire il click */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(102, 102, 102, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 10px;
    box-sizing: border-box;
    
    /* RENDI L'OVERLAY TRASPARENTE AI CLIC DEL MOUSE */
    pointer-events: none; 
}
.sec-base {margin-bottom: 5px; background-color: #6e6e6e; padding: 2rem;}
.sec-base h2 { color: #fff; margin-top: 0.5rem; }
.sec-base p { color: #fff; }
.sec-elevato {margin-bottom: 5px; background-color: #a0a0a0; padding: 2rem;}
.sec-elevato h2 { color: #fff; margin-top: 0.5rem; }
.sec-elevato p { color: #fff; }
.sec-massimo {margin-bottom: 5px; background-color: #ebebeb; padding: 2rem;}
.sec-massimo h1 {margin-top: 0.5rem;}
.sec-detector {margin-bottom: 5px; background-color: #004a69; padding: 2rem;}
.sec-detector h2 { color: #fff; margin-top: 0.5rem; }
.sec-detector p { color: #fff; }
.sec-detector li { color: #fff; }