/*
 * Stili dedicati alla pagina "Esterno"
 * Layout simile a CAMERE
 */

/* Contenitore principale della pagina Esterno */
.ve-esterno-intro {
    max-width: 980px;
    margin: 8px auto 40px auto;
    background: none;
    padding: 0;
    border: 0;
    box-shadow: none;
}

/* Paragrafi generali dentro Esterno */
.ve-esterno-intro p {
    font-size: 0.98rem;
    line-height: 1.6;
}

/* ==========================
   BOX INTRO (clone ve-intro-box)
   ========================== */
.ve-esterno-intro > .wp-block-group:first-of-type {
    background: #f7efe2;
    padding: 24px 28px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    border: 1px solid rgba(180, 150, 120, 0.25);
    margin-bottom: 40px;
}

.ve-esterno-intro > .wp-block-group:first-of-type p:last-child {
    margin-bottom: 0;
}

/* ==========================
   TITOLO "I NOSTRI SPAZI ESTERNI"
   ========================== */
.ve-esterno-intro > h2:first-of-type {
    font-family: 'Cinzel Decorative', cursive;
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    text-align: left;
    margin: 0 auto 14px;
    max-width: 980px;
    color: var(--ve-merlot);
    position: relative;
    padding-bottom: 12px;
}

.ve-esterno-intro > h2:first-of-type::before,
.ve-esterno-intro > h2:first-of-type::after {
    content: "";
    position: absolute;
    height: 1px;
    background: rgba(197,164,109,0.7);
    top: 100%;
    margin-top: 6px;
}

.ve-esterno-intro > h2:first-of-type::before {
    left: 0;
    width: 26%;
}

.ve-esterno-intro > h2:first-of-type::after {
    right: 55%;
    width: 10%;
}

/* ============================================
   FORZATURA ALLINEAMENTO MODULA (Versione Free)
   ============================================ */

/* imposta tutte le card alla stessa altezza */
.ve-esterno-intro .modula-gallery .modula-item {
    height: 200px; /* puoi aumentare se vuoi */
}

/* imposta l'immagine interna per riempire la card */
.ve-esterno-intro .modula-gallery .modula-item img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;   /* taglia i bordi per mantenere proporzione */
}


/* ==========================
   GALLERIA MODULA
   ========================== */
.ve-esterno-intro .modula-gallery {
    max-width: 980px;
    margin: 20px auto 3rem auto;
}

/* CARD FOTO – stile marcato + hover */
.ve-esterno-intro .modula-gallery .modula-item {
    background: #eedcc7;
    border: 1px solid rgba(155, 120, 85, 0.55);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ve-esterno-intro .modula-gallery .modula-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(0,0,0,0.18);
}

/* Immagine dentro al box */
.ve-esterno-intro .modula-gallery .modula-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    transition: transform 0.25s ease;
}

.ve-esterno-intro .modula-gallery .modula-item:hover img {
    transform: scale(1.03);
}

/* Didascalia */
.ve-esterno-intro .modula-gallery .modula-item .modula-item-title,
.ve-esterno-intro .modula-gallery .modula-item .modula-item-caption {
    margin-top: 8px;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ve-merlot);
}

/* Arrotonda tutte le immagini Modula */
.ve-esterno-intro .modula-gallery img {
    border-radius: 12px !important;
}

/* (L’allineamento orizzontale perfetto dei riquadri dipende dal layout
   scelto in Modula: per avere colonne regolari usa un layout “Colonne”
   con stessa proporzione per tutte le immagini.) */


/* ==========================
   SEZIONE VIDEO – TITOLO
   ========================== */
.ve-esterno-intro > h2:nth-of-type(2) {
    font-family: 'Cinzel Decorative', cursive;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: left;
    margin: 40px auto 16px;
    max-width: 980px;
    color: var(--ve-merlot);
    position: relative;
    padding-bottom: 12px;
}

.ve-esterno-intro > h2:nth-of-type(2)::before,
.ve-esterno-intro > h2:nth-of-type(2)::after {
    content: "";
    position: absolute;
    height: 1px;
    background: rgba(197,164,109,0.7);
    top: 100%;
    margin-top: 6px;
}

.ve-esterno-intro > h2:nth-of-type(2)::before {
    left: 0;
    width: 26%;
}

.ve-esterno-intro > h2:nth-of-type(2)::after {
    right: 55%;
    width: 10%;
}

/* ==========================
   CARD VIDEO
   ========================== */

/* Base: mobile 1 colonna */
.ve-esterno-intro .wp-block-video {
    background: #eedcc7;
    border: 1px solid rgba(155, 120, 85, 0.55);
    border-radius: 18px;
    padding: 14px;
    margin: 0 auto 2.5rem auto;
    max-width: 980px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover: leggero sollevamento + ombra */
.ve-esterno-intro .wp-block-video:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(0,0,0,0.18);
}

/* Video / iframe dentro alla card */
.ve-esterno-intro .wp-block-video video,
.ve-esterno-intro .wp-block-video iframe {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}

/* Desktop: 2 colonne perfette per i video */
@media (min-width: 900px) {
    .ve-esterno-intro .wp-block-video {
        max-width: none;
        width: 47%;
        display: inline-block;
        vertical-align: top;
        margin: 0 1.34% 2.5rem 1.34%; /* tuo limite testato */
    }
}


/* ==========================
   RESPONSIVE GENERALE
   ========================== */
@media (max-width: 700px) {
    .ve-esterno-intro > .wp-block-group:first-of-type {
        padding: 20px 18px;
        margin-bottom: 28px;
    }

    .ve-esterno-intro > h2:first-of-type {
        font-size: 1.3rem;
        letter-spacing: 0.12em;
    }

    .ve-esterno-intro > h2:nth-of-type(2) {
        font-size: 1.2rem;
    }
}

/* ==========================
   Sblocco larghezza pagina Esterno
   ========================== */

.page-esterno .ve-esterno-intro {
    max-width: none;
    width: 100%;
    padding-right: 0;
}

/* Mantieni contenuti centrati alla stessa larghezza */
.page-esterno .ve-esterno-intro > .wp-block-group:first-of-type,
.page-esterno .modula-gallery,
.page-esterno .ve-esterno-intro > h2,
.page-esterno .wp-block-video {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}