/**
 * Usatomania Theme Hooks — Sezione "Prenota appuntamento"
 *
 * Stile del widget Elementor `usm_booking`. Portato dal tema Magento
 * porto_child (sections/homepage-v2.css + custom.css) e messo in scope
 * sotto .usm-booking, così le classi generiche del design originale
 * (booking-section, circle-img-container, calendar-badge) non collidono
 * con tema o plugin.
 *
 * Dipendenze:
 * - griglia e utility Bootstrap 5.3 (caricate dal tema Blonwe)
 * - font Playfair Display / Caveat e Material Symbols (handle usm-google-fonts)
 *
 * Caricato solo dove il widget è presente, via get_style_depends().
 */

/* ── Sezione ──────────────────────────────────────────────────── */

.usm-booking {
    background: var(--usm-dark, #151616);
    color: #fff;
    padding-bottom: 2em;
}

.usm-booking .usm-hp-section {
    max-width: 90%;
    margin: 0 auto;
}

/* ── Tipografia ───────────────────────────────────────────────── */

.usm-booking .font-headline {
    font-family: var(--usm-font-serif, 'Playfair Display', Georgia, serif) !important;
}

.usm-booking .font-accent {
    font-family: var(--usm-font-accent, 'Caveat', cursive) !important;
}

.usm-booking .text-gold {
    color: var(--usm-gold, #EBBD17);
}

/* Utility assente in Bootstrap 5.3: senza questa il sottotitolo
   resterebbe bianco pieno invece che al 60%. */
.usm-booking .text-opacity-60 {
    --bs-text-opacity: .6;
}

.usm-booking .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* ── Bottone ──────────────────────────────────────────────────── */

/* Blonwe stila i bottoni con `.btn:not(.unset):not(.link)` — specificità
   (0,3,0) — imponendo colore, sfondo grigio, font 11px e height fissa
   di 2.625rem. Serve `a.btn.btn-gold` (0,3,1) per riprendere il controllo
   a prescindere dall'ordine di caricamento dei CSS. */
.usm-booking a.btn.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 1rem 2.5rem;
    background: var(--usm-gold, #EBBD17);
    color: var(--usm-dark, #151616);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    border: none;
    border-radius: 10px;
    transition: .3s;
}

.usm-booking a.btn.btn-gold:hover,
.usm-booking a.btn.btn-gold:focus-visible {
    background: var(--usm-gold, #EBBD17);
    color: var(--usm-dark, #151616);
    transform: translateY(-2px);
    opacity: .9;
}

/* ── Immagine + badge calendario ──────────────────────────────── */

.usm-booking .circle-img-container {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 5%;
    border: 1px solid rgba(235, 189, 23, .2);
    padding: 2rem;
    position: relative;
    max-height: 650px;
    margin-left: auto;
    /* Centra verticalmente il wrapper panoramico dentro il riquadro quadrato. */
    display: flex;
    align-items: center;
}

/* Riprende le proporzioni native dell'immagine: è il sistema di riferimento
   su cui è posizionata l'icona nel fumetto. */
.usm-booking .usm-booking__media {
    position: relative;
    width: 100%;
    aspect-ratio: 904 / 425;
    /* Rende l'icona dimensionabile in base alla larghezza del banner
       (unità cqw) invece che a quella della finestra. */
    container-type: inline-size;
}

/* L'immagine è cliccabile: il link riempie il box, così l'img mantiene
   il 100%/100% su cui si basa object-fit. */
.usm-booking .circle-img-container .usm-booking__img-link {
    display: block;
    width: 100%;
    height: 100%;
}

.usm-booking .circle-img-container img {
    border-radius: 5%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Il fumetto giallo è già disegnato dentro l'immagine, ma è vuoto: l'icona del
   calendario ci va dentro. Le coordinate sono percentuali del wrapper che
   riprende le proporzioni dell'immagine (904x425), così restano centrate sul
   fumetto a qualunque larghezza. */
.usm-booking .usm-booking__fumetto {
    position: absolute;
    left: 79%;
    top: 34%;
    transform: translate(-50%, -50%) rotate(-4deg);
    color: var(--usm-dark, #151616);
    line-height: 1;
    transition: transform .2s ease;
}

.usm-booking .usm-booking__fumetto .material-symbols-outlined {
    /* Il fumetto occupa circa un terzo della larghezza dell'immagine: a 8% resta
       ampiamente dentro. Il fallback in vw copre i browser senza container query. */
    font-size: clamp(20px, 5.5vw, 60px);
    font-size: clamp(20px, 8cqw, 84px);
}

.usm-booking .usm-booking__fumetto:hover,
.usm-booking .usm-booking__fumetto:focus-visible {
    color: var(--usm-dark, #151616);
    transform: translate(-50%, -50%) rotate(-4deg) scale(1.08);
}

/* ── Responsive ───────────────────────────────────────────────── */

/* Sotto i 992px le colonne Bootstrap si impilano: l'immagine non deve
   più essere spinta a destra e il badge resta dentro la viewport. */
@media (max-width: 991.98px) {
    .usm-booking .circle-img-container {
        margin-left: 0;
        margin-right: auto;
    }
}

/* Su mobile l'immagine sta larga: il contenitore diventa 2:1 e senza padding,
   così la vignetta occupa tutta la colonna invece di restare un quadrato
   piccolo al centro. Selettore con .usm-booking per battere la regola base. */
@media (max-width: 767.98px) {
    .usm-booking .circle-img-container {
        padding: 0 !important;
        aspect-ratio: 2;
    }
}