/* Personalizzazioni del sito (caricato dopo style.css) */

/* Home, prima slide: titolo piu' piccolo */
.header .caption h1.title-sm {
    font-size: 50px;
}
@media screen and (max-width: 767px) {
    .header .caption h1.title-sm {
        font-size: 32px;
    }
}

/* Gallerie foto verticali: stessa altezza per tutte le miniature */
.photo-portrait {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

/* Video caricati nelle pagine (es. statue personalizzate) */
.site-video {
    width: 100%;
    max-height: 80vh;
    border-radius: 5px;
    background: #000;
}
.photo-square {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Home, carosello servizi: tutte le foto nello stesso formato orizzontale (3:2),
   cosi' una foto verticale non allunga il carosello lasciando spazio vuoto */
.services .owl-carousel .item figure img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.services .owl-carousel .item {
    margin-bottom: 0;
}

/* Portfolio: pulsanti filtro per categoria */
.portfolio-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
}
.portfolio-filter button {
    background: transparent;
    border: 1px solid #a2783a;
    color: #000;
    padding: 6px 16px;
    font-size: 14px;
    letter-spacing: 1px;
    transition: all .3s;
}
.portfolio-filter button:hover,
.portfolio-filter button.active {
    background: #a2783a;
    color: #fff;
}
.gallery-item[hidden] {
    display: none !important;
}

/* Footer: link di telefono ed email con lo stesso colore del testo */
.footer-contact-info a {
    color: inherit;
}

/* Home, carosello servizi: le foto verticali (es. statue sacre) si vedono intere, senza tagli */
.services .owl-carousel .item figure img {
    object-fit: contain;
    background: #F8F5F1;
}

/* Home, carosello servizi: pallini di navigazione piu' distanziati */
.services .owl-theme .owl-dots .owl-dot span {
    margin: 0 8px;
}

/* Home: una sola slide, niente frecce avanti/indietro */
.header.single-slide .owl-nav {
    display: none !important;
}

/* Home, foto grande su mobile: lo schermo verticale mostra solo una striscia della foto,
   quindi la spostiamo a sinistra dove c'e' Stefania (invece del centro, dove c'e' il tavolo) */
@media screen and (max-width: 991px) {
    .header.single-slide .item.bg-img {
        background-position: 15% center !important;
    }
}

/* Home, foto grande su telefono: il testo scende in basso su una sfumatura scura,
   cosi' il volto di Stefania resta libero e la scritta si legge bene */
@media screen and (max-width: 767px) {
    .header.single-slide .v-middle.caption {
        top: auto;
        bottom: 0;
        -webkit-transform: none;
        transform: none;
        padding: 90px 0 35px;
        background: linear-gradient(to bottom, rgba(25, 18, 10, 0) 0%, rgba(25, 18, 10, 0.55) 35%, rgba(25, 18, 10, 0.85) 100%);
    }
    .header.single-slide .caption h4 {
        font-size: 11px;
        letter-spacing: 3px;
        line-height: 1.6em;
        margin-bottom: 8px;
    }
    .header.single-slide .caption h1.title-sm {
        font-size: 27px;
        line-height: 1.25em;
        margin-bottom: 20px;
    }
    .header.single-slide .caption .butn-light a {
        padding: 10px 22px;
    }
}

/* Home su telefono: la foto deve stare tutta nello schermo visibile (senza le barre del browser),
   altrimenti scritta e pulsante finiscono sotto e non si vedono appena si entra.
   100svh = altezza realmente visibile; 100vh resta come riserva per i browser vecchi */
@media screen and (max-width: 767px) {
    .header.single-slide,
    .header.single-slide .owl-item {
        min-height: calc(100vh - 110px);
        min-height: calc(100svh - 110px);
    }
    .header.single-slide .v-middle.caption {
        padding: 70px 0 25px;
    }
}

/* Home su telefono: scritta un po' piu' in alto (piu' spazio sotto il pulsante) */
@media screen and (max-width: 767px) {
    .header.single-slide .v-middle.caption {
        padding-bottom: 14svh;
    }
}

/* Home, carosello: pallini piu' grandi e piu' distanziati */
.services .owl-theme .owl-dots .owl-dot span {
    width: 18px;
    height: 18px;
    margin: 0 10px;
}
.services .owl-theme .owl-dots {
    margin-top: 15px;
}

/* Home, carosello: pallini staccati dalla foto
   (!important perche' il tema owl ha una regola piu' specifica che imposta 10px) */
.services .owl-theme .owl-dots {
    margin-top: 40px !important;
}

/* Home, foto della Divina Misericordia: piu' bassa (formato 3:4), ritagliata dal basso */
.img-short {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center 20%;
}

/* Pagina Corsi: le 4 fasi del percorso */
.course-step {
    background: #fff;
    padding: 35px 30px;
    height: 100%;
    border-radius: 5px;
}
.course-step-num {
    font-family: 'Libre Caslon Display', serif;
    font-size: 40px;
    color: #a2783a;
    line-height: 1;
    margin-bottom: 15px;
}
.course-step h5 {
    font-size: 22px;
    margin-bottom: 10px;
}
.course-step p {
    margin-bottom: 0;
}
.course-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

/* Pagina Corsi: riquadri delle fasi su sfondo bianco */
.course-step {
    background: #F8F5F1;
}
/* Pagine dei corsi: elenco "Cosa prevede" */
.course-points {
    display: inline-block;
    text-align: left;
    margin: 10px 0 25px;
}
.course-points li {
    font-size: 17px;
    padding: 6px 0;
}
.course-points li i {
    color: #a2783a;
    margin-right: 10px;
}
.course-back {
    color: #a2783a;
}

/* Pagina Corsi: i due corsi affiancati, numerati, senza foto */
.course-card {
    background: #fff;
    padding: 45px 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.course-card h4,
.course-card h4 a {
    font-size: 30px;
    color: #000;
    margin-bottom: 8px;
}
.course-card-type {
    color: #a2783a;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}
.course-card p {
    flex-grow: 1;
    margin-bottom: 25px;
}

/* Pagina Corsi: i corsi seguono subito la descrizione (sfondo bianco), quindi box con bordo */
.courses-list {
    padding-top: 40px;
}
.courses-list .course-card {
    background: #F8F5F1;
}
/* "Cosa imparerai" ora su sfondo beige: riquadri bianchi */
.bg-lightbrown .course-step {
    background: #fff;
}

/* Testi centrati: righe di lunghezza piu' uniforme (niente righe con una sola parola) */
.about .text-center p {
    text-wrap: pretty;
}

/* Pagina Corsi: descrizione giustificata (titolo resta centrato) */
.courses-intro p {
    text-align: justify;
    text-align-last: center;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Pagina Corsi: descrizione piu' leggibile (testo piu' grande, piu' scuro e meno sottile) */
.courses-intro p {
    font-size: 17px;
    font-weight: 400;
    color: #3a3a3a;
    line-height: 1.85em;
}

/* Pagina Corsi: anche l'ultima riga di ogni paragrafo occupa tutta la larghezza */
.courses-intro p {
    text-align-last: justify;
}

/* Pagina Corsi: niente parole spezzate col trattino a fine riga */
.courses-intro p {
    hyphens: manual;
    -webkit-hyphens: manual;
}

/* Pagina Corsi: torna il grigio chiaro; ultima riga normale (parole vicine, non allargate) */
.courses-intro p {
    color: #666;
    text-align-last: left;
}

/* Pagina Corsi: copertina mostrata intera, a tutta larghezza */
.courses-cover img {
    display: block;
    width: 100%;
    height: auto;
}

/* Banner con la foto di Stefania (FAQ): su telefono/tablet la foto non resta "fissa"
   e viene spostata a sinistra, dove c'e' Stefania, cosi' il volto non viene tagliato */
@media screen and (max-width: 991px) {
    .banner-stefania {
        background-attachment: scroll !important;
        background-position: 12% center !important;
    }
}

/* Pagina Contatti: le 4 informazioni in riquadri affiancati */
.contact-card {
    background: #F8F5F1;
    padding: 35px 25px;
    height: 100%;
    text-align: center;
    border-radius: 5px;
}
.contact-card-icon span {
    font-size: 40px;
    color: #a2783a;
    display: inline-block;
    margin-bottom: 15px;
}
.contact-card-icon span:before {
    font-size: 40px;
    margin: 0;
}
.contact-card-label {
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 10px;
}
.contact-card-value,
.contact-card-value a {
    font-family: 'Libre Caslon Display', serif;
    font-size: 19px;
    line-height: 1.5em;
    color: #000;
    word-break: break-word;
}
.contact-card-value a:hover {
    color: #a2783a;
}

/* Pagine con testi legali (cookie policy) */
.legal-text h3 {
    font-size: 26px;
    margin: 35px 0 15px;
}
.legal-text h4 {
    font-size: 19px;
    margin: 20px 0 8px;
}
.legal-text ul {
    margin: 0 0 20px 20px;
    list-style: disc;
}
.legal-text li {
    color: #666;
    line-height: 1.75em;
    margin-bottom: 6px;
}
.legal-text a {
    color: #a2783a;
    word-break: break-word;
}
.footer-bottom-copy-right a {
    margin-left: 12px;
}