/*                 --- STILI COMUNI E LAYOUT ---             */
/* archive-struttura.php e single-struttura.php e single.php */

.csj-container {max-width:900px; margin:20px auto; padding:5px; color:#333;}

header h1.strutture-attivita {text-align:center}
header img .copertina {width:1280px; height:250px;}
header h3 {color: var(--primary-color); margin-top:20px; text-align:center;}

.navigator-strutture {display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center; line-height: 70px;}


.ricerca-text {width:200px;}
.ricerca-cat {width:150px;}
.ricerca-tappa {width:200px;}

.cerca-struttura,
.filtro-categoria,
.filtro-tappa {width:100%; border-radius:6px !important; border:1px solid #ccc; height:44px; background-color: white;}


.button-ricerca {width:95px;}
#button-submit {width:100%; background:var(--primary-color); color:white; border:none; height:44px; padding:0 25px; border-radius:6px; cursor:pointer; font-weight:bold;margin:0;}

.reset {width:100px;}
#reset {width:100%; display:block; background:white; color:#e74c3c; text-decoration:none; font-size:0.85em; font-weight:bold; line-height:42px; padding:0 15px; border-radius:6px; border:1px solid #e74c3c;}

#button-submit,
#reset{box-shadow: 0 4px 12px rgba(0,0,0,0.08); transition: all 0.3s ease;}

#button-submit:hover,
#reset:hover {
    text-decoration:none !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}


.lista-strutture {display:flex; flex-wrap:wrap; gap:25px; align-content: stretch; justify-content:center; align-items:center; padding: 20px 0;}

.risultati-feedback {width: 100%; display:block;}
.risultati-feedback p.trovate {color: #1e1d22; font-style: italic; margin: 15px 10px 15px 50px; line-height: 1.6;}
.risultati-feedback a {color: #3498db; text-decoration: underline; margin-left: 50px; font-style: normal; font-size: 1em;}
.risultati-feedback a:hover {opacity: 0.8;}

.risultati-feedback .text-query {color: #2c3e50; font-weight: 600;}
.risultati-feedback .cat-search {text-transform:capitalize;}

.container-flex-strutture {display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: stretch;}

.card-struttura {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column; /* Card verticale */
    flex: 0 1 calc(33.333% - 17px); /* 3 per riga su desktop */
    min-width: 280px;
    max-width: 380px;
    transition: all 0.3s ease;
    margin-bottom: 0; /* Gestito dal gap del container */
}

.card-struttura:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}

/* Thumbnail Full Width nella card */
.card-struttura .thumbnail {
    width: 100%;
    height: 180px;
    flex: none;
    overflow: hidden;
}

.card-struttura .thumb-img, 
.card-struttura .no-thumb {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.thumb-img { object-fit: cover;} /* Taglia l'immagine per riempire il quadrato senza deformarla */

.no-thumb { background: #f0f0f0; display: flex; align-items: center; 
            justify-content: center; font-size: 2em; color: #ccc; 
            border: 1px dashed #ddd;
}

.card-struttura .card-container-flex {
    padding: 15px;
    display: flex;
    flex-direction: column; 
    height: 100%;
    justify-content: flex-start; /* Spinge il footer grazie al margin-top:auto */
}

.titolo-struttura {color: var(--primary-color) !important; text-decoration:none;}
.titolo-struttura:hover {color: var(--primary-hover) !important}


/*.card-container-flex { width: 100%; display: flex; gap: 5px; flex-direction: row; }*/

/* Gestione Indirizzo e Titolo (Testo a capo) */
.card-struttura h3 {
    font-size: 1.15em;
    line-height: 1.3;
    margin: 10px 0 5px 0 !important;
}

.card-struttura .c1 {
    min-width: unset;
    padding: 0;
    /*flex: none;*/
}

/* Colonna Tappe (C2) nell'archivio */
.card-struttura .c2 {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    width: 100%;
    /*flex: none;*/
}



/* Badge e Label */
.badge-cat { font-size:0.65em; background:#4a6741; color:white; padding:3px 8px; border-radius:3px; font-weight:bold; text-transform:uppercase; }
.badge-donativo { font-size:0.65em; background:#d35400; color:white; padding:3px 8px; margin-left: 10px; border-radius:3px; font-weight:bold; }

/* Rating */
.card-rating { margin: 0 0 15px 0;}
.stars { color: #ffb400; font-size: 1.4em; line-height: 1; letter-spacing: 2px; }
.rating-pill { color: #666; font-size: 0.9em; font-weight: bold; background: #f0f0f0; padding: 2px 8px; border-radius: 4px;}
div.wpcr3_review blockquote {border-color: var(--accent-color);}


/* GESTIONE TESTO A CAPO */
.info-indirizzo { 
    margin: 10px 0; 
    font-size: 0.88em; 
    color: #666;
    line-height: 1.4;
    word-wrap: break-word;    /* Spezza parole troppo lunghe */
    overflow-wrap: break-word;
}

.letti-e-tenda {margin:10px 0; display:flex; gap:12px; font-size:0.85em; color:#444;}

.titolo-tappe {display: flex; align-items: center; gap: 4px; margin-bottom: 10px;}
.titolo-tappe strong {font-size: 0.75em; color: #7f8c8d; text-transform: uppercase;}

/* --- SISTEMA TAPPE (Pillole) --- */
.box-tappe-flex {display:flex; justify-content:flex-start; gap:5px; flex-wrap:wrap;}

.tappa-pill { 
    background: var(--primary-color); color: #ffffff; padding: 4px 10px; border-radius: 20px; 
    font-size: 0.7em; font-weight: bold; border: 1px solid #3e5637; 
    transition: all 0.2s ease; text-decoration: none; display: inline-block;
}

.tappa-pill:hover { background: var(--primary-hover); color: #ffffff; text-decoration: none !important; transform: translateY(-1px); }
.tappa-pill.empty { background: #f8f9fa; color: #6c757d; border: 1px solid #dee2e6; cursor: default; }

/* Bottoni e Footer Card */
.footer-card {
    margin-top: auto;
    padding-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.link-dettagli {font-weight:bold; color:#4a6741; font-size:0.85em;}
.link-dettagli:hover {color:#486c3c;}

.btn-chiama {background:#e8f0e5; color:#4a6741; padding:5px 12px; border-radius:4px; text-decoration:none; font-size:0.85em; font-weight:bold;}
.btn-chiama:hover {color:#486c3c;}



/* --- single-struttura.php SPECIFICI --- */ 

.badge-tipo-struttura { background:#4a6741; color:white; padding:6px 15px; border-radius:20px; font-size:0.8em; text-transform:uppercase; font-weight:bold; display: inline-block; }

p.link-map{font-size: 1.2em; color: #7f8c8d;}
p.link-map a {color:#4a6741; font-weight:bold;}

.thumbnail-full {width:100%; margin-bottom: 40px; box-shadow:0 10px 30px rgba(0,0,0,0.1);}

.the-content {line-height:1.8; font-size:1.15em; margin-bottom:40px;}

.sezione-tappe_titolo {display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.sezione-tappe_titolo .dashicon {font-size: 1.2em;}
.sezione-tappe_titolo .dashtext {font-size: 0.85em; color: #2c3e50; text-transform: uppercase;}

/* Gristyle="margin-bottom: 30px;"glie e Colonne */   
.col3,
.col2 {display: grid; gap: 15px; margin-bottom: 40px;}

.col3 {grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top:20px;}
.col2 {grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));}

/* Box Info Generico */  
.box-info { line-height: 200%; background:#EFEDED; border-radius:12px; padding:25px; 
            border: 1px solid #eee; height: 100%; margin-bottom: 40px;}

.box-info .sezione-titolo { color:#4a6741; border-bottom: 1px solid rgb(74, 103, 65, 0.3); padding-bottom: 8px; margin-bottom: 25px; font-size: 1.2em; }

.box-info .info-item {margin-bottom: 12px; line-height: 1.5;}
.box-info .info-item strong { color: #555; display: block; font-size: 0.85em; text-transform: uppercase; }
.box-info .info-item strong i {font-size: 0.70em;}

.box-info .link-map {color:#4a6741; font-weight:bold;}

            
.box-info p.p-web{font-style: italic; margin-bottom: 0px; margin-top: 0px; font-size: 1.05rem; word-wrap: break-word; overflow-wrap: break-word;}
.box-info a.a-web{margin: 0; padding: 0; line-height: 100%;}

.cin-label { font-size: 0.8em; color:#aaa; padding-top: 8px; text-align: right; }


.t-center {text-align: center;}

.camere-container {display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:15px;}

.box-inf-camere {margin-bottom: 40px; background: #fff;}
.box-inf-servizi {margin-bottom: 40px;}

.servizi-list {display:flex; flex-wrap:wrap; gap:8px;}

.servizio-tag { background: #e8f0e5; color: #3e5637; padding: 4px 10px; border-radius: 4px; font-size: 0.9em; border: 1px solid #d0decb; }

.tenda-container { background: #eef9f1; padding: 25px; border-radius: 12px; border: 1px solid #c2e5cb; margin-bottom: 40px; text-align: center; }

.prezzo-tag { font-size: 1.1em; color: #d35400; font-weight: bold; }
.numero-tag { font-size: 1.1em; font-weight: bold; }

.sezione-recensioni {margin-top:50px; padding:30px; background:#fff; border:1px solid #eee; border-radius:12px;}
.recensioni-titolo {color:#4a6741; margin-top:0; border-bottom:2px solid #4a6741; display:inline-block; padding-bottom:5px;}

.note {background:#fffcf0; border-left:5px solid #f1c40f; }

.user-attivita {background:#e8f4fd; padding:15px; border-radius:5px; margin-top: 30px; margin-bottom:20px;}

.footer-back {margin-top:30px; padding:20px 0; border-top:1px solid #eee;}
.link-back {color:#4a6741; font-weight:bold;}




/* --- single.php SPECIFICI --- */ 
.sezione-strutture-tappa { display:flex; flex-wrap:wrap; gap:25px; align-content:stretch; justify-content:center; align-items:center;
                          max-width:900px; margin: 50px auto; padding-top: 30px; border-top: 2px solid #4a6741;}
                                    
.titolo-strutture { text-align: center; margin-bottom: 50px; color: #2c3e50; font-weight: bold; }

.footer-sezione-tappa { text-align: center; margin-top: 50px; }

.btn-tutte-strutture {
    display: inline-block; /* fondamentale altrimenti non esegue lo spostamento */
    /* Il motivo per cui il transform: translateY non funziona è un classico dei CSS: l'elemento <a> è, di base, un elemento inline. Le proprietà di trasformazione (come translate, scale, ecc.) non hanno effetto sugli elementi inline.*/
    background-color: var(--accent-color);
    color: var(--white-color) !important;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Colore Hover e Focus Bottone */
.btn-tutte-strutture:hover,
.btn-tutte-strutture:focus{background-color: var(--accent-hover);}
/* Stato Hover Bottone */
.btn-tutte-strutture:hover
{
    transform: translateY(-2px); /* Effetto "sollevamento" */
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}


/* MEDIA */
 @media (max-width: 1024px) {
     .card-struttura { flex: 0 1 calc(50% - 15px); } 
 }
 

@media (max-width: 650px) {
    .card-struttura {
        width: 100% !important;
        flex: 0 1 100%;
        margin-left: 10px;
        margin-right: 10px;
    }
    .risultati-feedback p.trovate {
        margin-left: 20px; /* Riduce il margine eccessivo su mobile */
    }
    
    .letti-e-tenda{justify-content: center;}
    
    .card-struttura .c1,
    .card-struttura .c2 {display:flex; flex-direction:column; align-items:center; text-align:center;}
    .box-tappe-flex {justify-content:center;}
}