/* ----------------------------------------------------------------
   Override e fix personalizzati del sito.
   Caricato dopo main.css in includes/header.php.
   ---------------------------------------------------------------- */

/* Offerte: forza l'aspect-ratio del template (384×440) così il layout
   resta costante anche con immagini dimensioni diverse. */
.tp-offer-three-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 384 / 440;
    overflow: hidden;
}
.tp-offer-three-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Banner residenze: nel template l'altezza delle card è determinata da
   padding + contenuto, non dall'immagine (l'inner .tp-banner-thumb-inner
   è position:absolute e fa da sfondo). Con testo nostro più corto di
   quello del template demo le altezze si sformano. Forziamo un aspect-
   ratio sull'outer card per avere dimensioni coerenti col layout
   originale (grande 588×504, piccole 588×240), così 2 piccole impilate
   matchano l'altezza della grande indipendentemente dal contenuto. */
.tp-banner-thumb {
    aspect-ratio: 588 / 504;
}
.tp-banner-thumb-2,
.tp-banner-thumb-3 {
    aspect-ratio: 588 / 240;
}
/* Le immagini di sfondo riempiono l'inner con crop centrato. */
.tp-banner-thumb-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Adventures (Esperienza): su mobile (<576px) le 3 box restano in fila
   su una sola riga (col-4 nel markup). Riduciamo padding, scaliamo l'icona
   e centriamo il contenuto, altrimenti il template li lascia con tanto
   bianco a destra. */
@media (max-width: 575.98px) {
    .tp-adventures-box {
        padding: 15px 8px 10px 8px;
        text-align: center;
        /* Riempie l'altezza del col genitore così le 3 box di una row
           hanno sempre la stessa altezza, anche con icone PNG di
           dimensioni native diverse (badge3 è 54x46, gli altri 54-56x54-56). */
        height: 100%;
    }
    .tp-adventures-box-icon {
        display: block;
        margin-bottom: 12px !important;
    }
    .tp-adventures-box-icon img {
        max-width: 55px;
        height: auto;
    }
    .tp-adventures-content span {
        font-size: 11px;
    }
    .tp-adventures-content h4 {
        font-size: 13px;
        line-height: 1.2;
    }
    /* Sotto i 360px riduciamo ancora un filo per i telefoni piccoli. */
    @media (max-width: 359.98px) {
        .tp-adventures-box {
            padding: 12px 4px 8px 4px;
        }
        .tp-adventures-box-icon img {
            max-width: 45px;
        }
    }
}

/* Form contatti: messaggi errore inline + select styling. */
.tp-error-msg {
    display: block;
    color: #dc3545;
    font-size: 13px;
    margin-top: 5px;
    min-height: 0;
}
.tp-input.is-invalid,
.tp-textarea.is-invalid {
    border-color: #dc3545;
}
select.tp-input {
    appearance: auto;
    cursor: pointer;
}
.text-success {
    color: #198754 !important;
    font-weight: 600;
}
.text-danger {
    color: #dc3545 !important;
}

/* Suites card vetrina residence: il template usa foto 384x420 (portrait).
   Le nostre foto sono landscape di dimensioni variabili. Forziamo il
   ratio originale e crop centrato. */
.tp-suites-thumb {
    aspect-ratio: 384 / 420;
    overflow: hidden;
}
.tp-suites-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* "Altre nostre proposte" card: il template usa foto 510x360 tutte uguali.
   Le nostre copertine hanno aspect ratio diversi (noce landscape, misano
   verticale). Forziamo il ratio del template così i blocchi sono tutti
   alti uguali. */
.tp-room-area .tp-room-thumb {
    aspect-ratio: 510 / 360;
    overflow: hidden;
}
.tp-room-area .tp-room-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* "Altre unità di Residence Azzurro" (similar rooms): il template usa foto
   588x340. Stesso approccio: aspect-ratio fisso + object-fit cover così
   le card hanno sempre la stessa altezza indipendentemente dalle foto. */
.tp-similar-room-area .tp-room-thumb {
    aspect-ratio: 588 / 340;
    overflow: hidden;
}
.tp-similar-room-area .tp-room-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Slider galleria dettaglio appartamento: aspect-ratio fisso identico
   all'immagine originale del template (792x430 → ~1.84) così l'altezza
   dello slider è la stessa del template originale (~396px in col-lg-8).
   object-fit: contain mostra l'intera foto senza crop, con sfondo scuro
   per lo spazio vuoto ai lati delle foto verticali. */
.tp-room-details-slide-active .tp-room-details-thumb {
    aspect-ratio: 792 / 430;
    background: #1a1a1a;
    border-radius: 10px;
    overflow: hidden;
}
.tp-room-details-slide-active .tp-room-details-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Thumbnails sotto lo slider: 120x80 = 3:2. */
.tp-room-details-thumb-active .tp-room-details-thumb {
    aspect-ratio: 120 / 80;
    background: #1a1a1a;
    border-radius: 6px;
    overflow: hidden;
}
.tp-room-details-thumb-active .tp-room-details-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}