/* ======================================================================
   LARGHEZZA CONTENITORI: più respiro rispetto al tema attivo
   ------------------------------------------------------------------------
   I temi a blocchi (block theme) limitano la larghezza del contenuto tramite
   la custom property --wp--style--global--content-size, letta da una regola
   del tema tipo ".is-layout-constrained > * { max-width: var(...) }". Quella
   regola punta esattamente ai nostri wrapper: ridefinendo qui la stessa
   variabile, il valore che "vede" il tema per i NOSTRI elementi cambia,
   senza toccare le impostazioni globali del tema o richiedere CSS aggiuntivo.
   Su temi classici (senza questa variabile) l'istruzione è semplicemente
   ignorata e resta valido il solo max-width esplicito qui sotto.
   Il limite di 1140px si cambia con l'opzione larghezza dello shortcode, che
   avvolge il contenuto in .p24-larghezza impostando la variabile --p24-larghezza.
   ====================================================================== */
.p24-wrapper-immobili,
.p24-dettaglio-wrapper,
.p24-container,
.p24-larghezza {
    --wp--style--global--content-size: var(--p24-larghezza, 1140px);
    --wp--style--global--wide-size: var(--p24-larghezza, 1140px);
    max-width: var(--p24-larghezza, 1140px);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.p24-claim {
    margin: 5px 0 0 0;
    color: #4a5568;
    font-size: 15px;
}
.p24-content-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-top: 20px;
}
.p24-text-side {
    flex: 1;
}
.p24-lead {
    font-size: 18px;
    color: #2d3748;
    line-height: 1.6;
    margin-bottom: 15px;
}
.p24-image-side {
    flex: 0 0 350px;
}
.p24-img-responsive {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
@media (max-width: 768px) {
    .p24-content-layout {
        flex-direction: column;
    }
    .p24-image-side {
        flex: 1;
        width: 100%;
    }
}

/* ======================================================================
   NUOVI STILI PER GRIGLIA E CARD ANNUNCI (LISTA)
   ====================================================================== */
.p24-titolo-sezione {
    font-size: 26px;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 20px 0;
    line-height: 1.3;
}
.p24-grid-annunci {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 20px;
}
.p24-card-annuncio {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
}
.p24-card-thumb {
    position: relative;
    height: 200px;
    background: #edf2f7;
}
.p24-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.p24-badge-contratto {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #3182ce;
    color: #fff;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    text-transform: uppercase;
}
.p24-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.p24-card-content h4 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #2d3748;
}
.p24-descrizione-breve {
    font-size: 14px;
    color: #718096;
    line-height: 1.5;
    margin-bottom: 15px;
    flex: 1;
}
/* Elenco caratteristiche compatte nella card */
.p24-features-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 15px;
}
.p24-feature-item {
    font-size: 13px;
    color: #4a5568;
    background: #f7fafc;
    padding: 4px 8px;
    border-radius: 4px;
    flex: 1 1 calc(50% - 10px); /* Due elementi per riga */
}
.p24-btn-dettaglio {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: center !important;
    background: #2b6cb0;
    color: #fff !important;
    padding: 10px !important;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px !important;
    line-height: 1.4;
    transition: background 0.2s;
}
.p24-btn-dettaglio:hover {
    background: #2c5282;
}
/* Vista "ultimi" (es. home): link alla pagina con tutti gli annunci */
.p24-ultimi-tutti {
    text-align: center;
    margin: 30px 0 0 0;
}
.p24-btn-tutti {
    display: inline-block;
    background: #2b6cb0;
    color: #fff !important;
    padding: 10px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
}
.p24-btn-tutti:hover,
.p24-btn-tutti:focus {
    background: #2c5282;
}
/* Paginazione */
.p24-paginazione {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}
.p24-paginazione a {
    padding: 8px 16px !important;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    text-decoration: none;
    color: #4a5568;
    font-size: 14px !important;
    line-height: 1.4;
}
.p24-paginazione a.current {
    background: #2b6cb0;
    color: #fff;
    border-color: #2b6cb0;
}

/* FORM RICERCA AVANZATA */
.p24-form-ricerca {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}
.p24-search-row {
    margin-bottom: 15px;
}
/* I selettori dei campi partono dalla classe del form: devono prevalere sulle regole dei temi
   per input[type=text], email e tel (es. Divi, che toglie quasi tutto il padding) */
.p24-form-ricerca .p24-main-search input {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 12px 15px;
    font-size: 16px;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    box-sizing: border-box;
}
.p24-grid-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    align-items: end;
}
.p24-filter-group label {
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: #4a5568;
    margin-bottom: 5px;
}
.p24-range-inputs {
    display: flex;
    gap: 5px;
}
.p24-form-ricerca .p24-range-inputs input,
.p24-form-ricerca .p24-autocomplete-wrapper input,
.p24-form-ricerca .p24-filter-group select {
    width: 100%;
    height: auto;
    margin: 0;
    background: #fff;
    padding: 8px 10px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}
.p24-actions-group {
    display: flex;
    gap: 10px;
    align-items: center;
}
.p24-btn-search {
    background: #2b6cb0;
    color: #fff;
    border: none;
    padding: 10px 20px !important;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 15px !important;
    line-height: 1.4;
}
.p24-btn-reset {
    color: #718096;
    text-decoration: underline;
    font-size: 13px;
}
/* AUTOCOMPLETE COMUNI */
.p24-autocomplete-wrapper {
    position: relative;
}
.p24-autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #cbd5e0;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: none;
}
.p24-autocomplete-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
}
.p24-autocomplete-item:hover {
    background: #ebf8ff;
    color: #2b6cb0;
}

/* ======================================================================
   GALLERIA FOTO - PAGINA DI DETTAGLIO
   ====================================================================== */
.p24-dettaglio-gallery {
    margin: 20px 0 30px 0;
}
.p24-gallery-main {
    width: 100%;
    height: 480px;
    background: #edf2f7;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}
.p24-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.p24-gallery-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.p24-gallery-thumb {
    flex: 0 0 auto;
    width: 100px;
    height: 74px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.7;
    transition: opacity 0.2s, border-color 0.2s;
}
.p24-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.p24-gallery-thumb:hover {
    opacity: 1;
}
.p24-gallery-thumb.active {
    border-color: #2b6cb0;
    opacity: 1;
}
@media (max-width: 600px) {
    .p24-gallery-main {
        height: 260px;
    }
}

/* ======================================================================
   PAGINA DI DETTAGLIO - TIPOGRAFIA
   ------------------------------------------------------------------------
   Dimensioni esplicite per non ereditare gli stili "editoriali" del tema
   attivo (pensati per articoli/pagine, non per una scheda immobiliare).
   ====================================================================== */
.p24-back-link {
    display: inline-block;
    font-size: 14px;
    color: #2b6cb0;
    text-decoration: none;
    margin-bottom: 14px;
}
.p24-back-link:hover {
    text-decoration: underline;
}
.p24-dettaglio-header h1 {
    font-size: 26px;
    font-weight: 700;
    color: #2d3748;
    line-height: 1.3;
    margin: 0 0 8px 0;
}
.p24-location-main {
    font-size: 15px;
    color: #718096;
    margin: 0 0 20px 0;
}
.p24-sezione-descrizione {
    margin-bottom: 30px;
}
.p24-sezione-descrizione h3 {
    font-size: 19px;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 10px 0;
}
.p24-sezione-descrizione p {
    font-size: 15px;
    line-height: 1.7;
    color: #4a5568;
    margin: 0;
}

/* ======================================================================
   PAGINA DI DETTAGLIO - SCHEDA TECNICA (div al posto di table)
   ------------------------------------------------------------------------
   Ogni sezione è una card con righe etichetta/valore in flexbox: rispetto
   a una <table>, è molto più semplice da restilizzare (spaziature, colori,
   comportamento responsive) via CSS personalizzato.
   ====================================================================== */
.p24-scheda-tecnica {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.p24-sezione-specifiche {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 18px 20px;
}
.p24-sezione-specifiche h4 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #2b6cb0;
    margin: 0 0 12px 0;
}
.p24-dati-lista {
    display: flex;
    flex-direction: column;
}
.p24-dato-riga {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
}
.p24-dato-riga:last-child {
    border-bottom: none;
}
.p24-dato-label {
    color: #718096;
    font-weight: 600;
}
.p24-dato-valore {
    color: #2d3748;
    text-align: right;
}
/* ======================================================================
   FORM CONTATTI / RICHIESTA INFORMAZIONI
   ------------------------------------------------------------------------
   Stesso form nella vista "contatti" e in fondo al dettaglio annuncio.
   ====================================================================== */
.p24-form-contatto {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
}
.p24-form-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}
.p24-form-campo {
    margin-bottom: 15px;
}
.p24-form-campo label {
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: #4a5568;
    margin-bottom: 5px;
}
.p24-form-contatto .p24-form-campo input,
.p24-form-contatto .p24-form-campo textarea {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 15px;
    font-family: inherit;
    box-sizing: border-box;
    background: #fff;
}
.p24-form-campo textarea {
    resize: vertical;
}
.p24-form-privacy {
    font-size: 13px;
    color: #4a5568;
    margin-bottom: 15px;
}
.p24-form-privacy input {
    margin-right: 6px;
}
.p24-form-invia:disabled {
    opacity: 0.6;
    cursor: wait;
}
/* Campo trappola anti-spam: fuori schermo ma non display:none (alcuni bot lo riconoscono) */
.p24-form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.p24-form-esito {
    padding: 12px 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 14px;
}
.p24-form-esito--ok {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
}
.p24-form-esito--errore {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}
.p24-sezione-richiesta-info {
    margin-bottom: 30px;
}
/* Dettaglio annuncio: mappa della posizione */
.p24-sezione-mappa {
    margin-bottom: 30px;
}
.p24-sezione-mappa .p24-map-wrapper {
    padding-bottom: 45%;
}
.p24-mappa-indirizzo {
    font-size: 15px;
    color: #4a5568;
    margin: 0 0 12px 0;
}
.p24-sezione-richiesta-info h3,
.p24-sezione-mappa h3,
.p24-contatti-form-side h3 {
    font-size: 19px;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 12px 0;
}

/* Vista contatti-ridotta: recapiti in pila (footer, sidebar). Icone nascondibili con .p24-contatti-ridotta .p24-icona { display: none; } */
.p24-contatti-ridotta p {
    margin: 0 0 6px 0;
    line-height: 1.0;
}
.p24-contatti-ridotta p:last-child {
    margin-bottom: 0;
}

/* Vista contatti: dati agenzia a sinistra, form a destra */
.p24-contatti-form-side {
    flex: 1;
}
.p24-contatti-immagine {
    margin-bottom: 20px;
}
.p24-contatti-dati p {
    margin: 0 0 8px 0;
    font-size: 15px;
}
.p24-contatti-social a {
    margin-right: 12px;
}

/* ======================================================================
   VISTE AGENZIA: chi siamo / dove siamo
   ====================================================================== */
.p24-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
}
.p24-header h2 {
    margin: 0;
}
.p24-logo {
    max-height: 80px;
    max-width: 200px;
    width: auto;
    height: auto;
}
.p24-subtitle {
    margin: 5px 0 0 0;
    color: #4a5568;
    font-size: 15px;
}
.p24-image-side--verticale {
    flex: 0 0 280px;
}
.p24-chi-siamo .p24-image-side:not(.p24-image-side--verticale) {
    flex: 0 0 42%;
}

.p24-dove-siamo-dati {
    margin-top: 20px;
    padding: 15px 18px;
    background: #f8fafc;
    border-radius: 8px;
}
.p24-dove-siamo-dati p {
    margin: 0 0 8px 0;
    font-size: 15px;
}
.p24-dove-siamo-dati p:last-child {
    margin-bottom: 0;
}
.p24-btn-indicazioni {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 18px;
    background: #2b6cb0;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}
.p24-btn-indicazioni:hover,
.p24-btn-indicazioni:focus {
    background: #2c5282;
    color: #fff;
}
.p24-map-side {
    flex: 0 0 50%;
}
.p24-map-wrapper {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
.p24-map-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.p24-map-link {
    margin: 8px 0 0 0;
    font-size: 13px;
    text-align: right;
}
/* Vista dove-siamo con solo_mappa: mappa più bassa, adatta a stare dentro altre pagine */
.p24-dove-siamo--solo-mappa .p24-map-wrapper {
    padding-bottom: 50%;
}
@media (max-width: 768px) {
    .p24-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .p24-map-side,
    .p24-chi-siamo .p24-image-side:not(.p24-image-side--verticale),
    .p24-image-side--verticale {
        flex: 1;
        width: 100%;
    }
}