/* ============================================================================
   Luxury Villa Italy - lg2
   Nuovo stile home page: elegante, minimale, ispirato a siti real-estate di
   lusso (es. lionard.com). Font serif per i titoli, sans per il corpo,
   palette avorio/carbone/bronzo, molto spazio bianco, layout completamente
   responsive (mobile-first).
   ============================================================================ */

:root {
    --ink: #1c1b19;
    --ink-soft: #4a4740;
    --cream: #faf8f5;
    --cream-deep: #f2ede5;
    --line: #e7e1d6;
    --gold: #a9834f;
    --gold-deep: #8a6a3d;
    --maroon: #791215;
    --white: #ffffff;
    --shadow: 0 20px 60px rgba(28,27,25,.10);
    --radius: 2px;
    --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sans: 'Jost', 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.lg2 {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    line-height: 1.6;
}

.lg2 img { max-width: 100%; display: block; }
.lg2 a { color: inherit; text-decoration: none; }
.lg2 ul { list-style: none; margin: 0; padding: 0; }

.lg2 .wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

.lg2 .eyebrow {
    display: block;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 14px;
}

.lg2 h1, .lg2 h2, .lg2 h3 { font-family: var(--serif); font-weight: 600; margin: 0; color: var(--ink); }
.lg2 h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.2; }
.lg2 .section-lede {
    max-width: 620px;
    color: var(--ink-soft);
    font-size: 16px;
    margin-top: 16px;
}

.lg2 .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 34px;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: var(--radius);
    border: 1px solid var(--ink);
    transition: all .25s ease;
    cursor: pointer;
    background: transparent;
    color: var(--ink);
}
.lg2 .btn:hover { background: var(--maroon); color: var(--white); border-color: var(--maroon); }
.lg2 .btn.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--white); }
.lg2 .btn.btn-gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.lg2 .btn.btn-light { border-color: rgba(255,255,255,.7); color: var(--white); }
.lg2 .btn.btn-light:hover { background: var(--white); color: var(--ink); }

/* ---------------------------------------------------------------- Header */
.lg2 .site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px 40px;
    transition: background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.lg2 .site-header.has-strip { flex-direction: column; align-items: stretch; padding: 0; }
.lg2 .site-header.has-strip .header-main {
    display: flex; align-items: center; justify-content: space-between; padding: 18px 40px;
}
.lg2 .site-header.has-strip.is-scrolled .header-main { padding: 14px 40px; }

.lg2 .info-strip {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 40px;
    background: var(--ink);
    border-bottom: 1px solid var(--maroon);
    font-size: 12px;
    color: rgba(255,255,255,.8);
}
.lg2 .info-strip__phone { display: flex; align-items: center; gap: 8px; letter-spacing: .04em; }
.lg2 .info-strip__phone i { color: var(--gold); }
.lg2 .info-strip__social { display: flex; align-items: center; gap: 16px; }
.lg2 .info-strip__social a { color: rgba(255,255,255,.75); font-size: 13px; transition: color .2s ease; }
.lg2 .info-strip__social a:hover { color: var(--gold); }
.lg2 .site-header.is-scrolled {
    background: rgba(250, 248, 245, .96);
    padding: 16px 40px;
    box-shadow: 0 2px 0 var(--maroon);
    backdrop-filter: blur(6px);
}
.lg2 .site-header.has-strip.is-scrolled { padding: 0; }
.lg2 .brand {
    font-family: var(--serif);
    font-size: 22px;
    letter-spacing: .04em;
    color: var(--white);
    transition: color .35s ease;
    white-space: nowrap;
}
.lg2 .site-header.is-scrolled .brand { color: var(--ink); }
.lg2 .brand strong { font-weight: 700; }

.lg2 .main-nav { display: flex; align-items: center; gap: 32px; }
.lg2 .main-nav ul { display: flex; gap: 22px; }
.lg2 .main-nav a {
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--white);
    transition: color .35s ease, opacity .2s ease;
    opacity: .92;
}
.lg2 .site-header.is-scrolled .main-nav a { color: var(--ink); }
.lg2 .main-nav a:hover { opacity: 1; border-bottom: 1px solid var(--maroon); }

.lg2 .lang-select {
    position: relative;
}
.lg2 .lang-select__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--white);
    border: 1px solid rgba(255,255,255,.5);
    padding: 8px 14px;
    border-radius: var(--radius);
    cursor: pointer;
    background: transparent;
    transition: color .35s ease, border-color .35s ease;
}
.lg2 .site-header.is-scrolled .lang-select__toggle { color: var(--ink); border-color: var(--line); }
.lg2 .lang-select__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--white);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    min-width: 180px;
    max-height: 320px;
    overflow-y: auto;
    display: none;
    padding: 8px 0;
}
.lg2 .lang-select.open .lang-select__menu { display: block; }
.lg2 .lang-select__menu a {
    display: block;
    padding: 9px 18px;
    font-size: 13px;
    color: var(--ink);
    letter-spacing: normal;
    text-transform: none;
}
.lg2 .lang-select__menu a:hover { background: var(--cream-deep); }

.lg2 .burger {
    display: none;
    width: 26px; height: 18px;
    position: relative;
    cursor: pointer;
    border: 0; background: none; padding: 0;
}
.lg2 .burger span {
    position: absolute; left: 0; right: 0; height: 1px;
    background: var(--white); transition: background .35s ease;
}
.lg2 .site-header.is-scrolled .burger span { background: var(--ink); }
.lg2 .burger span:nth-child(1) { top: 0; }
.lg2 .burger span:nth-child(2) { top: 8px; }
.lg2 .burger span:nth-child(3) { top: 16px; }

/* ------------------------------------------------------------------ Hero */
.lg2 .hero {
    position: relative;
    height: 100vh;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.lg2 .hero::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,15,14,.42) 0%, rgba(15,15,14,.28) 45%, rgba(15,15,14,.62) 100%);
}
.lg2 .hero-content {
    position: relative;
    z-index: 2;
    color: var(--white);
    padding: 0 24px;
    max-width: 880px;
}
.lg2 .hero-content .eyebrow { color: #e7d3b0; }
.lg2 .hero-content h1 {
    color: var(--white);
    font-size: clamp(38px, 6.4vw, 76px);
    line-height: 1.08;
    margin-bottom: 22px;
}
.lg2 .hero-content p {
    font-size: 17px;
    color: rgba(255,255,255,.88);
    max-width: 560px;
    margin: 0 auto 34px;
}
.lg2 .hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.lg2 .scroll-cue {
    position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
    z-index: 2; color: var(--white); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: .85;
}
.lg2 .scroll-cue::after { content: ""; width: 1px; height: 34px; background: rgba(255,255,255,.7); }

/* --------------------------------------------------------------- Search */
.lg2 .search-card {
    position: relative;
    z-index: 20;
    max-width: 1080px;
    margin: -64px auto 0;
    background: var(--white);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    padding: 30px 36px;
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 22px;
    align-items: end;
}
.lg2 .search-field { display: flex; flex-direction: column; gap: 8px; }
.lg2 .search-field label {
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.lg2 .search-field select, .lg2 .search-field input {
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 8px 2px;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    background: transparent;
    outline: none;
}
.lg2 .search-field select:focus, .lg2 .search-field input:focus { border-bottom-color: var(--gold); }
.lg2 .search-submit { justify-self: stretch; }
.lg2 .search-submit .btn { width: 100%; justify-content: center; padding: 15px 20px; }

/* ------------------------------------------------------------- Sections */
/* .tight (non ".tight" legato al solo tag <section>): diverse sezioni sono
   asp:Panel, che renderizzano sempre <div> e non <section>, quindi la regola
   deve applicarsi alla classe a prescindere dal tag per valere anche li'. */
.lg2 section { padding: 110px 0; }
.lg2 .tight { padding: 70px 0; }

/* Spazio ridotto (~40%) sotto l'abstract dell'elenco immobili e sopra/sotto
   il testo completo (blocchi .listing-text), che altrimenti restano troppo
   distanti dal contenuto intorno rispetto alle altre sezioni .tight. */
/* padding-top 30px (era 70px, ereditato da .tight) + padding-bottom 30px
   (era 42px): meno spazio sopra E sotto il testo introduttivo dell'elenco.
   Condivisa con lg/affitti-elenco.aspx (stessa classe, stesso beneficio). */
.lg2 .tight.intro-spacing { padding-top: 30px; padding-bottom: 30px; }
.lg2 .tight.fulltext-spacing { padding-top: 42px; padding-bottom: 42px; }
/* Distanza testo introduttivo -> elenco immobili: SOLO quando l'abstract e'
   presente (#intro-immobili esiste solo in quel caso, vedi
   lg/immobili-elenco.aspx), non tocca .intro-spacing stessa (condivisa con
   lg/affitti-elenco.aspx, che quindi resta invariata su questo punto specifico)
   ne' il caso senza abstract (l'elenco segue direttamente .listing-head). */
.lg2 #intro-immobili + section.tight { padding-top: 30px; }
.lg2 .section-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 30px;
    margin-bottom: 56px; flex-wrap: wrap;
}
.lg2 .section-head .btn { flex-shrink: 0; }
/* Duplicato del pulsante "View All" del section-head, mostrato SOLO sotto il
   breakpoint mobile (vedi @media max-width:640px) al posto di quello in
   alto - su schermi stretti deve comparire dopo le card, centrato, non
   accanto al titolo della sezione. Sezioni Properties/Journal della home. */
.lg2 .view-all-mobile { display: none; }
.lg2 .section-head h2, .lg2 .intro-block h2 { position: relative; padding-top: 18px; }
.lg2 .section-head h2::before, .lg2 .intro-block h2::before {
    content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 2px; background: var(--maroon);
}
.lg2 .intro-block h2::before { left: 50%; transform: translateX(-50%); }

.lg2 .section-divider {
    width: 50%;
    max-width: 50%;
    margin: 0 auto;
    border: none;
    border-top: 1px solid var(--line);
}

.lg2 .intro-block { text-align: center; max-width: 760px; margin: 0 auto; }
.lg2 .intro-block .section-lede { margin-left: auto; margin-right: auto; }
.lg2 .intro-block h2 { margin-top: 6px; }

/* ------------------------------------------------- Listing abstract/testo */
/* Blocchi testo dell'elenco immobili (abstract in alto + testo completo sotto
   l'ancora "Read more"): a differenza di .intro-block occupano tutta la
   larghezza del .wrap, testo allineato a bandiera (non centrato). Sfondo
   bianco + bordo (non var(--cream): identico allo sfondo della pagina
   stessa, body.lg2 { background: var(--cream) }, quindi invisibile) cosi'
   il blocco si stacca davvero come una card, con un accento a sinistra.
*/
.lg2 .listing-text {
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 4px solid var(--maroon);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 34px 40px;
    text-align: left;
}
.lg2 .listing-text p {
    max-width: none;
    margin: 0 0 14px;
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.75;
}
.lg2 .listing-text p:last-child { margin-bottom: 0; }
.lg2 .listing-text h2, .lg2 .listing-text h3 {
    margin: 26px 0 12px;
    text-align: left;
}
.lg2 .listing-text h2::before, .lg2 .listing-text h3::before { display: none; }
.lg2 .listing-text .read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--maroon);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: background .25s ease;
}
.lg2 .listing-text .read-more:hover { background: var(--ink); }
/* Variante "meno evidente" di .read-more: link di testo inline, subito dopo
   il paragrafo (stesso <p>), non un pulsante pieno a se stante - solo
   nell'abstract dell'elenco immobili (lg/immobili-elenco.aspx). Non tocca
   .read-more (rimasto invariato, usato anche da lg/affitti-elenco.aspx). */
.lg2 .listing-text .read-more-inline {
    display: inline; font-size: 12px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--maroon);
    border-bottom: 1px solid currentColor; white-space: nowrap;
    transition: color .2s ease;
}
.lg2 .listing-text .read-more-inline:hover { color: var(--ink); }

/* Basi di formattazione testo ricco: .listing-text (abstract/testo completo
   dell'elenco immobili - vedi lg/immobili-elenco.aspx, condivisa con
   lg/affitti-elenco.aspx) non le aveva mai avute, a differenza di
   .article-body/.blog-post-body - link, liste ed elenchi puntati restavano
   di default del browser (bruttissimi/invisibili, come per .article-body
   prima del fix sul dettaglio blog). Stesso trattamento identico: link
   bordeaux sottolineato, pallino dorato/cerchio numerato bordeaux per le
   liste (:not(.fa-ul) per non toccare le liste con icona scelta a mano),
   tabelle a celle grigie spaziate con intestazione piu' scura. */
.lg2 .listing-text a { color: var(--maroon); border-bottom: 1px solid rgba(121,18,21,.35); }
.lg2 .listing-text a:hover { border-color: var(--maroon); }

.lg2 .listing-text ul:not(.fa-ul) { list-style: none; padding-left: 4px; margin: 0 0 20px; }
.lg2 .listing-text ul:not(.fa-ul) li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.lg2 .listing-text ul:not(.fa-ul) li::before {
    content: ""; position: absolute; left: 2px; top: .5em;
    width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
}
.lg2 .listing-text ol { list-style: none; counter-reset: listingOl; padding-left: 4px; margin: 0 0 20px; }
.lg2 .listing-text ol li { position: relative; padding-left: 36px; margin-bottom: 10px; counter-increment: listingOl; }
.lg2 .listing-text ol li::before {
    content: counter(listingOl);
    position: absolute; left: 0; top: .1em;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--maroon); color: var(--white);
    font-size: 12px; font-weight: 700; font-family: var(--sans);
    display: flex; align-items: center; justify-content: center;
}

.lg2 .listing-text table {
    border-collapse: separate; border-spacing: 1px; background: var(--white);
    width: 100%; margin: 22px 0;
}
.lg2 .listing-text th,
.lg2 .listing-text td { border: none; background: #ededed; text-align: left; padding: 10px 14px; }
.lg2 .listing-text th { background: #d6d6d6; font-weight: 600; text-align: left; }

/* --------------------------------------------------------- Welcome split */
.lg2 .welcome-split {
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: 60px;
    align-items: center;
}
.lg2 .welcome-text .section-lede { max-width: 100%; }
.lg2 .area-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.lg2 .area-box {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--cream-deep);
    line-height: 0;
}
.lg2 .area-box img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s ease;
}
.lg2 .area-box:hover img { transform: scale(1.08); }
.lg2 .area-box::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,15,14,0) 45%, rgba(15,15,14,.68) 100%);
}
.lg2 .area-box span {
    position: absolute; left: 16px; bottom: 14px; z-index: 2;
    color: var(--white);
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: normal;
    border-left: 3px solid var(--maroon);
    padding-left: 10px;
}

/* ------------------------------------------------------ Property cards */
.lg2 .property-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.lg2 .property-card {
    position: relative;
    background: var(--white);
    border-radius: 4px;
    padding: 10px 10px 22px;
    box-shadow: 0 4px 16px rgba(28,27,25,.07);
    transition: box-shadow .35s ease, transform .35s ease;
}
.lg2 .property-card:hover {
    box-shadow: 0 26px 46px rgba(28,27,25,.18);
    transform: translateY(-6px);
}
.lg2 .property-card .thumb {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    background: var(--cream-deep);
    line-height: 0;
    aspect-ratio: 16 / 9;
}
/* aspect-ratio + object-fit (stesso trattamento gia' usato da .property-row
   nell'elenco immobili): senza, l'altezza della card dipendeva dalle
   proporzioni native di ciascuna foto sorgente - diverse tra loro, specie
   quelle legacy non ripassate dalla stessa pipeline di ritaglio - rendendo
   le card della griglia disomogenee tra loro. */
.lg2 .property-card .thumb img {
    display: block;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s ease;
}
.lg2 .property-card:hover .thumb img { transform: scale(1.06); }
.lg2 .property-card .price-tag {
    position: absolute; left: 14px; bottom: 14px; z-index: 2;
    background: rgba(28,27,25,.82);
    border-left: 3px solid var(--maroon);
    color: var(--white);
    font-size: 12px;
    letter-spacing: .04em;
    padding: 8px 14px;
    border-radius: var(--radius);
    line-height: normal;
}
.lg2 .property-card .body { padding: 16px 6px 0; }
.lg2 .property-card .loc {
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
    margin-bottom: 6px; display: block;
}
.lg2 .property-card h3 { font-size: 17px; line-height: 1.3; }
.lg2 .property-card h3 a:hover { color: var(--maroon); }
.lg2 .property-card .ref { font-size: 12px; color: var(--ink-soft); margin: 6px 0 0; }

/* ---------------------------------------------------------- Property list */
.lg2 .property-list { display: flex; flex-direction: column; }
.lg2 .property-row {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 34px;
    align-items: center;
    padding: 20px;
    margin-bottom: 26px;
    background: var(--white);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(28,27,25,.07);
    transition: box-shadow .35s ease, transform .35s ease;
}
.lg2 .property-row:last-child { margin-bottom: 0; }
.lg2 .property-row:hover {
    box-shadow: 0 26px 46px rgba(28,27,25,.16);
    transform: translateY(-6px);
}
.lg2 .property-row .thumb {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 16 / 9;
    background: var(--cream-deep);
    line-height: 0;
}
.lg2 .property-row .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.lg2 .property-row:hover .thumb img { transform: scale(1.06); }
.lg2 .property-row .price-tag {
    position: absolute; left: 14px; bottom: 14px; z-index: 2;
    background: rgba(28,27,25,.82);
    border-left: 3px solid var(--maroon);
    color: var(--white);
    font-size: 12px;
    letter-spacing: .04em;
    padding: 8px 14px;
    border-radius: var(--radius);
    line-height: normal;
}
.lg2 .property-row .loc {
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
    margin-bottom: 8px; display: block;
}
.lg2 .property-row h3 { font-size: 24px; margin-bottom: 12px; }
.lg2 .property-row h3 a:hover { color: var(--maroon); }
.lg2 .property-row .ref { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.lg2 .property-row .desc { color: var(--ink-soft); font-size: 14px; line-height: 1.7; max-width: 620px; margin-bottom: 14px; }

/* Caratteristiche a icona (tipo/dimensione/terreno/camere/bagni): solo
   icona + valore, niente etichette testuali (title/aria-label per
   accessibilita'). */
.lg2 .card-specs { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 16px; }
.lg2 .card-specs .spec-item {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; color: var(--ink-soft);
}
.lg2 .card-specs .spec-item i { color: var(--gold); font-size: 14px; }
.lg2 .property-row .row-cta {
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--maroon);
    border-bottom: 1px solid currentColor;
}

/* ----------------------------------------------------------- Article list */
.lg2 .article-list { display: flex; flex-direction: column; }
.lg2 .article-row {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 44px;
    padding: 40px 0;
    border-bottom: 1px solid var(--line);
    align-items: center;
}
.lg2 .article-row:first-child { padding-top: 0; }
.lg2 .article-row .thumb {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 16 / 10;
    background: var(--cream-deep);
    line-height: 0;
}
.lg2 .article-row .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.lg2 .article-row:hover .thumb img { transform: scale(1.06); }
.lg2 .article-row h3 { font-size: 24px; margin-bottom: 12px; }
.lg2 .article-row h3 a:hover { color: var(--maroon); }
.lg2 .article-row .desc { color: var(--ink-soft); font-size: 14px; line-height: 1.7; max-width: 620px; margin-bottom: 14px; }
.lg2 .article-row .row-cta {
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--maroon);
    border-bottom: 1px solid currentColor;
}

/* ------------------------------------------------------- Article / About */
.lg2 .article-feature-image { margin-top: -60px; position: relative; z-index: 2; }
.lg2 .article-feature-image img {
    width: 100%; max-height: 560px; object-fit: cover;
    border-radius: 4px; box-shadow: 0 20px 50px rgba(28,27,25,.18);
    display: block;
}
/* font-size 16px -> 20px: uniformata a quella del dettaglio blog (vedi
   .blog-post-body piu' sotto, che ora eredita questo stesso valore senza
   bisogno di un proprio override) su TUTTE le pagine che usano .article-body
   (Chi siamo, pagine legali, pagina generica, bio autore, dettaglio
   immobile...). Unica eccezione voluta: .listing-text (abstract/testo
   completo dell'elenco immobili) resta a 16px, non tocata da questa
   modifica - e' un contenitore diverso, con la propria regola di
   font-size sul paragrafo (riga ~354). */
.lg2 .article-body {
    max-width: 800px; margin: 0 auto;
    font-size: 20px; line-height: 1.85; color: var(--ink-soft);
}
/* Bio estesa della pagina autore (lg/autore.aspx): stessa larghezza di .wrap
   (1280px, come la strisciata "Articles by..." piu' sotto), non la colonna di
   lettura stretta da 800px usata per gli articoli. Stesso trattamento a
   scheda (sfondo bianco + bordo + accento a sinistra) gia' usato per
   .listing-text nella pagina elenco immobili, cosi' il testo non si perde
   nella pagina. */
.lg2 .article-body.author-bio-full {
    max-width: 1280px;
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 4px solid var(--maroon);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 34px 40px;
}
.lg2 .article-body.author-bio-full p:last-child { margin-bottom: 0; }
.lg2 .article-body h2, .lg2 .article-body h3 { color: var(--ink); margin: 40px 0 16px; }
.lg2 .article-body h2 { font-size: 28px; }
.lg2 .article-body h3 { font-size: 21px; }
.lg2 .article-body p { margin: 0 0 20px; }
.lg2 .article-body a { color: var(--maroon); border-bottom: 1px solid rgba(121,18,21,.35); }
.lg2 .article-body a:hover { border-color: var(--maroon); }
/* Punti elenco/numerati visibili su TUTTE le pagine che usano .article-body
   (Chi siamo, pagine legali, pagina generica, bio autore, dettaglio
   immobile via .detail-columns...), non solo sul dettaglio blog: stesso
   identico problema di fondo (".lg2 ul { list-style:none }" globale, mai
   compensato qui) gia' risolto per .blog-post-body/.listing-text, ora
   spostato sulla regola di base cosi' vale ovunque - stessa resa (pallino
   dorato/cerchio bordeaux numerato), :not(.fa-ul) per non toccare le liste
   con icona scelta a mano nell'editor. */
.lg2 .article-body ul:not(.fa-ul) { list-style: none; padding-left: 4px; margin: 0 0 20px; }
.lg2 .article-body ul:not(.fa-ul) li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.lg2 .article-body ul:not(.fa-ul) li::before {
    content: ""; position: absolute; left: 2px; top: .5em;
    width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
}
.lg2 .article-body ol { list-style: none; counter-reset: articleBodyOl; padding-left: 4px; margin: 0 0 20px; }
.lg2 .article-body ol li { position: relative; padding-left: 36px; margin-bottom: 10px; counter-increment: articleBodyOl; }
.lg2 .article-body ol li::before {
    content: counter(articleBodyOl);
    position: absolute; left: 0; top: .1em;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--maroon); color: var(--white);
    font-size: 12px; font-weight: 700; font-family: var(--sans);
    display: flex; align-items: center; justify-content: center;
}
.lg2 .article-body img { max-width: 100%; height: auto; border-radius: 4px; margin: 10px 0; }
.lg2 .article-body blockquote {
    margin: 32px 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--gold);
    font-family: var(--serif); font-size: 20px; color: var(--ink); font-style: italic;
}

/* -------------------------------------------------- Dettaglio blog (post) */
/* lg/blog-post.aspx (.article-body.blog-post-body): il font-size a 20px ora
   arriva gia' dalla regola di base .article-body (vedi sopra, uniformata a
   questo stesso valore su tutte le pagine tranne .listing-text), quindi qui
   serve solo il trattamento delle liste con icone al posto del default
   browser, spento globalmente da ".lg2 ul { list-style: none }" (riga ~40,
   pensato per menu/card, non per il testo degli articoli). Pallino dorato
   per le liste puntate, cerchio bordeaux numerato per quelle ordinate -
   stessi due colori di accento gia' usati nel resto del sito (eyebrow/gold,
   bottoni/maroon). */
/* :not(.fa-ul) esclude le liste con icona scelta a mano nell'editor
   (class="fa-ul", stesso pattern gia' usato da 2018villa.aspx - <li><i
   class="fa fa-li fa-xxx">): quelle hanno gia' l'icona giusta via <i> e la
   propria formattazione da font-awesome.min.css (gia' caricato in questa
   pagina), il pallino dorato qui sotto andrebbe in conflitto/doppione. */
.lg2 .blog-post-body ul:not(.fa-ul) {
    list-style: none; padding-left: 4px;
}
.lg2 .blog-post-body ul:not(.fa-ul) li {
    position: relative; padding-left: 28px; margin-bottom: 10px;
}
.lg2 .blog-post-body ul:not(.fa-ul) li::before {
    content: ""; position: absolute; left: 2px; top: .5em;
    width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
}
.lg2 .blog-post-body ol {
    list-style: none; counter-reset: blogPostOl; padding-left: 4px;
}
.lg2 .blog-post-body ol li {
    position: relative; padding-left: 36px; margin-bottom: 10px;
    counter-increment: blogPostOl;
}
.lg2 .blog-post-body ol li::before {
    content: counter(blogPostOl);
    position: absolute; left: 0; top: .1em;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--maroon); color: var(--white);
    font-size: 12px; font-weight: 700; font-family: var(--sans);
    display: flex; align-items: center; justify-content: center;
}

/* ---------------------------------------- Contenuto blog: classi storiche */
/* L'HTML dei post (lgBlog.testoBlog) e di altri testi ricchi contiene ancora
   le classi scritte a mano dall'editor negli anni, definite in origine da
   css2015/styleBlog.css (vecchio template). Qui vengono ridisegnate con lo
   STESSO nome classe ma nello stile lg2 (palette/raggio/tipografia del
   redesign), cosi' i contenuti gia' pubblicati restano leggibili e coerenti
   senza dover riscrivere nulla nel CMS. Scoperte tutte sotto .article-body
   (non solo nel blog: qualunque testo ricco del sito le puo' contenere). */

/* .sc-quote reso standalone (nessun antenato .article-body richiesto),
   stesso motivo/pattern gia' usato per .divVerde piu' sotto: nell'elenco
   immobili (lg/immobili-elenco.aspx) il testo ricco vive dentro
   .listing-text, un contenitore diverso da .article-body - senza questo i
   box colorati (blu/rosso/verde/arancio/grigio, incluse le varianti con
   icona) restavano senza sfondo/bordo li' dentro. */
.lg2 .sc-quote {
    padding: 28px 32px;
    margin: 28px 0;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--cream);
    font-size: 17px;
    line-height: 1.7;
}
.lg2 .sc-quote.blu     { background: #eaf1fb; border-color: #b9cdf0; color: var(--ink); }
.lg2 .sc-quote.rosso   { background: #fbeaea; border-color: #e8b9b9; color: var(--ink); }
.lg2 .sc-quote.verde   { background: #eaf6ea; border-color: #b9dcb9; color: var(--ink); }
.lg2 .sc-quote.arancio { background: #fdf3e4; border-color: #f0d8ad; color: var(--ink); }
.lg2 .sc-quote.grigio  { background: var(--cream-deep); border-color: var(--line); color: var(--ink); }

/* Titoli H2/H3 dentro i box colorati: azzerato SOLO il margine sopra
   (margin-top), non l'intera regola di stile (colore/dimensione restano
   quelli di .article-body/.listing-text h2/h3). Senza questo, il margine
   superiore da 40px/26px ereditato dal contenitore si sommava al padding
   gia' presente sul box (28px), lasciando troppo spazio vuoto sopra il
   titolo quando e' il primo elemento dentro il box. Stessa specificita' di
   ".article-body h3"/".listing-text h3" (0,2,1): vince per ordine nel
   foglio, essendo dichiarata dopo. */
.lg2 .sc-quote h2, .lg2 .sc-quote h3 { margin-top: 0; }

.lg2 .sc-quote.icona {
    background-repeat: no-repeat;
    background-position: 28px 28px;
    background-size: 44px 44px;
    padding-left: 96px;
    min-height: 60px;
}
.lg2 .sc-quote.IcoYoutube   { background-image: url(https://www.luxuryvillaitaly.com/public/icone/iconaYoutube.png); }
.lg2 .sc-quote.IcoLampadina { background-image: url(https://www.luxuryvillaitaly.com/public/icone/iconaLampadina.png); }
.lg2 .sc-quote.IcoElena     { background-image: url(https://www.luxuryvillaitaly.com/public/icone/iconaElena.png); }
.lg2 .sc-quote.IcoOK        { background-image: url(https://www.luxuryvillaitaly.com/public/icone/iconaOK.png); }
.lg2 .sc-quote.IcoDanger    { background-image: url(https://www.luxuryvillaitaly.com/public/icone/iconaDanger.png); }
.lg2 .sc-quote.IcoDomanda   { background-image: url(https://www.luxuryvillaitaly.com/public/icone/iconaDomanda.png); }
.lg2 .sc-quote.IcoMoney     { background-image: url(https://www.luxuryvillaitaly.com/public/icone/iconaMoney.png); }
.lg2 .sc-quote.IcoThumbUp   { background-image: url(https://www.luxuryvillaitaly.com/public/icone/iconaThumbUp.png); }
.lg2 .sc-quote.IcoLuxury    { background-image: url(https://www.luxuryvillaitaly.com/public/icone/iconaLuxury.png); }
.lg2 .sc-quote.IcoMail      { background-image: url(https://www.luxuryvillaitaly.com/public/icone/iconaMail.png); }
.lg2 .sc-quote.IcoDownload  { background-image: url(https://www.luxuryvillaitaly.com/public/icone/iconaDownload.png); min-height: 90px; }

.lg2 .article-body .imgBlog {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin: 22px 0;
}

.lg2 .article-body .BTbigBlog {
    display: inline-block;
    margin-bottom: 5px;
    font-size: 160%;
    text-decoration: none !important;
    color: var(--maroon);
}
.lg2 .article-body .zoom a,
.lg2 .article-body .zoom a:hover { text-decoration: none !important; }
@media (max-width: 768px) { .lg2 .article-body .BTbigBlog { font-size: 130%; } }
@media (max-width: 480px) { .lg2 .article-body .BTbigBlog { font-size: 110%; } }

.lg2 .article-body .linkNewsletter,
.lg2 .article-body .linkDownloadGuida,
.lg2 .article-body .linkPubblica {
    display: block;
    color: var(--white);
    text-decoration: none !important;
}

.lg2 .article-body .divNewsletter,
.lg2 .article-body .divDownloadGuida,
.lg2 .article-body .divPubblica {
    background-color: var(--gold);
    color: var(--white);
    padding: 30px 30px 30px 140px;
    min-height: 120px;
    background-repeat: no-repeat;
    background-position: 30px center;
    font-size: 140%;
    font-weight: 600;
    border-radius: var(--radius);
    margin: 22px 0;
}
.lg2 .article-body .divNewsletter     { background-image: url(https://www.luxuryvillaitaly.com/public/icone/bgNewsletter.png); }
.lg2 .article-body .divDownloadGuida  { background-image: url(https://www.luxuryvillaitaly.com/public/icone/iconaPDF.png); }
.lg2 .article-body .divPubblica       { background-image: url(https://www.luxuryvillaitaly.com/public/icone/iconaPubblica.png); }
.lg2 .article-body .divNewsletter span,
.lg2 .article-body .divDownloadGuida span,
.lg2 .article-body .divPubblica span {
    color: var(--white);
    font-size: 60%;
    font-weight: 400;
    text-decoration: none !important;
}

.lg2 .article-body .divPubblica2021 { padding: 30px; margin: 22px 0; }
.lg2 .article-body .divPubblica2021 span { font-size: 60%; font-weight: 400; }

/* font-size 140% -> 110%: era decisamente piu' grande degli altri box
   colorati (.sc-quote, ~17px fisso) per via del vecchio contenuto storico
   incollato via FCKeditor - qui uniformato, "appena appena" piu' grande del
   testo normale invece di quasi il doppio. Valore relativo (%) apposta,
   non fisso: cosi' resta "appena piu' grande" del testo circostante sia sul
   dettaglio blog (18px mobile / 20px desktop) sia sulle altre pagine che
   condividono .article-body. */
.lg2 .article-body .divVerdeLight {
    background: #eaf6ea;
    color: var(--ink);
    padding: 30px 30px 30px 140px;
    min-height: 120px;
    font-size: 110%;
    font-weight: 600;
    border-radius: var(--radius);
    border: 1px solid #b9dcb9;
    margin: 22px 0;
}
.lg2 .article-body .divVerdeLight span { font-size: 60%; font-weight: 400; }

/* .divVerde (contenuto storico, incollato via FCKeditor) non compariva solo
   dentro .article-body (dettaglio immobile): nell'elenco immobili il testo
   completo e' dentro .listing-text, un contenitore diverso - stesso
   contenuto, stessa classe, ma senza il contenitore giusto restava senza
   sfondo. Regola resa standalone (nessun antenato richiesto) cosi' funziona
   ovunque compaia, presente o futuro. */
/* font-size 140% -> 120%: stesso motivo/stessa riduzione gia' fatta per
   .divVerdeLight (era decisamente piu' grande del testo circostante). */
.lg2 .divVerde { background: #eaf6ea; color: var(--ink); border: 1px solid #b9dcb9; font-size: 120%; font-weight: 600; padding: 24px; border-radius: var(--radius); margin: 22px 0; }
.lg2 .article-body .divVerdeChiaro  { background: #eaf6ea; color: var(--ink); border: 1px solid #b9dcb9; padding: 24px; border-radius: var(--radius); margin: 22px 0; }
.lg2 .article-body .divArancio      { background: #fdf3e4; color: var(--ink); border: 1px solid #f0d8ad; padding: 24px; border-radius: var(--radius); margin: 22px 0; }
.lg2 .article-body .divArancioScuro { background: var(--gold); color: var(--white); font-size: 140%; font-weight: 600; padding: 24px; border-radius: var(--radius); margin: 22px 0; }
.lg2 .article-body .divAzzurro      { background: #eaf1fb; color: var(--ink); border: 1px solid #b9cdf0; padding: 24px; border-radius: var(--radius); margin: 22px 0; }
.lg2 .article-body .divGrigio       { background: var(--cream-deep); color: var(--ink); border: 1px solid var(--line); padding: 24px; border-radius: var(--radius); margin: 22px 0; }
.lg2 .article-body .divRosso        { background: var(--maroon); color: var(--white); font-size: 140%; font-weight: 600; padding: 24px; border-radius: var(--radius); margin: 22px 0; }

.lg2 .article-body .centrato { text-align: center; }
.lg2 .centrato { text-align: center; }

/* Righe icona + testo in stile Bootstrap (row/col-md-2/col-md-10), tipiche
   del contenuto storico incollato via FCKeditor (es. divPubblica2021/
   divVerde con icona a sinistra e testo a destra): il frontend lg/lg2 non
   carica Bootstrap, quindi senza queste regole i due blocchi si
   impilerebbero senza stile e l'icona (spesso una versione "_BIG") apparirebbe
   alla sua dimensione originale. Copre solo lo schema icona+testo gia' visto
   nei contenuti esistenti, non l'intera griglia Bootstrap a 12 colonne. */
.lg2 .row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.lg2 .row .col-md-2 { flex: 0 0 auto; width: 90px; }
.lg2 .row .col-md-2 img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.lg2 .row .col-md-10 { flex: 1 1 260px; }
@media (max-width: 600px) {
    .lg2 .row .col-md-2, .lg2 .row .col-md-10 { width: 100%; flex-basis: 100%; }
}

.lg2 .article-body .rwd-video,
.lg2 .rwd-video {
    position: relative; height: 0; padding-top: 30px; padding-bottom: 56.25%;
    overflow: hidden; border-radius: var(--radius); margin: 22px 0;
    width: 100%; max-width: none;
}
/* !important: il codice embed incollato dall'admin (YouTube "Condividi" >
   "Incorpora") porta di solito un width/height fisso sull'<iframe> stesso
   (attributo o, a volte, style inline) - senza forzare qui il video
   resterebbe alla dimensione di YouTube (560x315) invece di riempire tutta
   la colonna, vedi lg/immobili-dettaglio.aspx. */
.lg2 .article-body .rwd-video iframe,
.lg2 .article-body .rwd-video object,
.lg2 .article-body .rwd-video embed,
.lg2 .rwd-video iframe,
.lg2 .rwd-video object,
.lg2 .rwd-video embed { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; border: 0; }

.lg2 .article-body .table-responsive { overflow-x: auto; min-height: .01%; margin: 22px 0; }
.lg2 .article-body .table-responsive table { width: 100%; border-collapse: collapse; }
.lg2 .article-body .table-responsive th,
.lg2 .article-body .table-responsive td { padding: 10px 14px; border: 1px solid var(--line); text-align: left; }

/* Tabelle nel dettaglio blog: celle grigie con 1px di spazio tra loro (non
   un semplice bordo) cosi' si vede lo sfondo bianco dell'articolo passare
   tra una cella e l'altra - border-collapse:separate + border-spacing
   invece di collapse+border. Intestazione in un grigio leggermente piu'
   scuro, testo sempre allineato a sinistra. Selettore su ".blog-post-body
   table" diretto (non piu' agganciato a ".table-responsive"): il contenuto
   dei post non usa sempre quel wrapper, qualunque tabella dentro il testo
   dell'articolo va uniformata, non solo quelle con quella classe
   specifica. Scoped a .blog-post-body, non tocca le tabelle delle altre
   pagine con .article-body. */
.lg2 .blog-post-body table {
    border-collapse: separate; border-spacing: 1px; background: var(--white);
    width: 100%; margin: 22px 0;
}
.lg2 .blog-post-body th,
.lg2 .blog-post-body td {
    border: none; background: #ededed; text-align: left; padding: 10px 14px;
}
.lg2 .blog-post-body th {
    background: #d6d6d6; font-weight: 600; text-align: left;
}

/* --------------------------------------------------------- Listing header */
/* Nessuna hero image su questo template: l'header e' gia' forzato compatto
   fin da subito (.site-header.is-scrolled + data-solid="true", vedi
   immobili-elenco.aspx), quindi qui basta lo spazio per il solo header
   compatto (~90px), non i 205px pensati per un header alto/trasparente
   sopra una foto hero. Padding-bottom 30px (era 50px): meno spazio subito
   dopo il titolo H1, prima del testo introduttivo o dell'elenco. Condivisa
   con lg/affitti-elenco.aspx (stessa classe, stesso beneficio). */
.lg2 .listing-head {
    padding: 130px 0 30px;
    background: var(--cream-deep);
    border-bottom: 1px solid var(--line);
}
.lg2 .listing-head h1 { font-size: clamp(30px, 4vw, 44px); margin-top: 10px; }
/* Riga occhiello + conteggio / ordinamento, sopra il titolo (elenco
   immobili): stessa riga, ordinamento sempre allineato a destra - vedi
   lg/immobili-elenco.aspx. */
.lg2 .listing-head__top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.lg2 .listing-head__top .sort-select { margin-left: auto; }

/* Breadcrumbs (prova, dettaglio immobile): Home / Properties / Titolo. */
.lg2 .breadcrumb-trail { display: block; margin-bottom: 14px; font-family: var(--sans); font-size: 12px; letter-spacing: .03em; color: var(--ink-soft); }
.lg2 .breadcrumb-trail a { color: var(--ink-soft); text-decoration: none; }
.lg2 .breadcrumb-trail a:hover { color: var(--maroon); }
.lg2 .breadcrumb-trail .sep { margin: 0 8px; color: var(--gold); }
.lg2 .breadcrumb-trail .current { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------- Author page */
.lg2 .author-hero__inner { display: flex; align-items: center; gap: 30px; }
.lg2 .author-hero__avatar {
    width: 110px; height: 110px; border-radius: 50%; object-fit: cover;
    flex-shrink: 0; border: 3px solid var(--white); box-shadow: 0 6px 20px rgba(28,27,25,.15);
}
.lg2 .author-hero__ruolo { margin: 6px 0 0; font-size: 15px; color: var(--ink-soft); }
.lg2 .author-hero__social { display: flex; gap: 14px; margin-top: 16px; }
.lg2 .author-hero__social a {
    width: 34px; height: 34px; border-radius: 50%; background: var(--white);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink); font-size: 15px; transition: background .2s ease, color .2s ease;
}
.lg2 .author-hero__social a:hover { background: var(--gold); color: var(--white); }
@media (max-width: 560px) {
    .lg2 .author-hero__inner { flex-direction: column; text-align: center; gap: 16px; }
    .lg2 .author-hero__social { justify-content: center; }
}

/* Scheda autore in cima al post + box bio in fondo (lg/blog-post.aspx) */
.lg2 .post-author-card {
    display: flex; align-items: center; gap: 12px; margin-top: 14px;
}
.lg2 .post-author-card__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.lg2 .post-author-card a.post-author-card__name { color: var(--ink); font-weight: 500; }
.lg2 .post-author-card a.post-author-card__name:hover { color: var(--maroon); }

.lg2 .post-author-box {
    display: flex; gap: 22px; align-items: flex-start;
    background: var(--cream); border-radius: var(--radius); border: 1px solid var(--line);
    padding: 28px; margin: 40px 0 0;
}
.lg2 .post-author-box__avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.lg2 .post-author-box__name { font-size: 17px; font-weight: 600; color: var(--ink); }
.lg2 .post-author-box__ruolo { font-size: 13px; color: var(--ink-soft); margin: 2px 0 10px; }
.lg2 .post-author-box__bio { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 10px; }
.lg2 .post-author-box a.post-author-box__link { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--maroon); border-bottom: 1px solid currentColor; }
@media (max-width: 560px) {
    .lg2 .post-author-box { flex-direction: column; align-items: center; text-align: center; }
}

/* ------------------------------------------------------ Post + sidebar */
/* Contenuto a sinistra, sidebar a destra (lg/blog-post.aspx, riutilizzabile
   su altre pagine con includesLG/sidebarLg.ascx). Su mobile una sola
   colonna: essendo il primo elemento nel DOM ad apparire dopo .post-main
   (che include gia' il box autore in fondo al testo), la sidebar scorre
   naturalmente sotto di esso, senza bisogno di alcun trucco JS. */
/* gap 60px -> 30px (dimezzato): meno spazio tra la colonna di testo e la
   sidebar nel dettaglio blog (e nelle altre pagine che condividono questo
   layout a due colonne: chi-siamo, pagina-contatti). */
.lg2 .post-layout { display: grid; grid-template-columns: 1fr 320px; gap: 30px; align-items: start; }
@media (max-width: 900px) {
    .lg2 .post-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* Testo dell'articolo su sfondo bianco (stesso trattamento di .listing-text
   nell'elenco immobili e di .article-body.author-bio-full nella pagina
   autore): piu' leggibile e separato visivamente dalla sidebar. */
.lg2 .post-main .article-body {
    max-width: none; margin: 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 4px solid var(--maroon);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 34px 40px;
}

.lg2 .sidebar-block { background: var(--cream); border-radius: var(--radius); padding: 26px; position: sticky; top: 100px; }
.lg2 .sidebar-block__title {
    font-size: 13px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
    color: var(--ink); margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
/* Stessa struttura delle card "Journal" della home: immagine 16:9 sopra,
   titolo (link) sotto. */
.lg2 .sidebar-post { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.lg2 .sidebar-post:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.lg2 .sidebar-post__thumb {
    display: block; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden;
    background: var(--cream-deep); line-height: 0; margin-bottom: 12px;
}
.lg2 .sidebar-post__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.lg2 .sidebar-post:hover .sidebar-post__thumb img { transform: scale(1.05); }
.lg2 .sidebar-post__title { margin: 0; font-size: 14px; line-height: 1.4; }
.lg2 .sidebar-post__title a { color: var(--ink); font-weight: 500; }
.lg2 .sidebar-post__title a:hover { color: var(--maroon); }
@media (max-width: 900px) {
    .lg2 .sidebar-block { position: static; }
}

/* -------------------------------------------------------------- Pagination */
.lg2 .pagination {
    display: flex; align-items: center; justify-content: center; gap: 28px;
    margin-top: 60px;
}
.lg2 .pagination .page-link {
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink); border-bottom: 1px solid transparent; transition: border-color .2s ease, color .2s ease;
}
.lg2 .pagination .page-link:hover { color: var(--maroon); border-color: var(--maroon); }
.lg2 .pagination .page-count { font-size: 13px; color: var(--ink-soft); }

/* -------------------------------------------------------- Locations band */
.lg2 .locations { background: var(--ink); color: var(--white); }
.lg2 .locations .section-head h2, .lg2 .locations .eyebrow { color: var(--white); }
.lg2 .locations .eyebrow { color: #e7d3b0; }
.lg2 .location-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: rgba(255,255,255,.12);
}
.lg2 .location-card {
    background: var(--ink);
    padding: 34px 26px;
    transition: background .3s ease;
}
.lg2 .location-card:hover { background: #262420; }
.lg2 .location-card .count { font-size: 11px; letter-spacing: .12em; color: rgba(255,255,255,.55); text-transform: uppercase; }
.lg2 .location-card h3 { color: var(--white); font-size: 19px; margin-top: 8px; }

/* ------------------------------------------------------- Icon card grid */
/* Sezioni "Location" (decorativa) e "By Property Type" (dinamica) di
   pagina-ricerca.aspx: card leggere con icona + etichetta. */
.lg2 .icon-card-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}
.lg2 .icon-card {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    text-align: center;
    padding: 24px 14px;
    background: var(--cream);
    border-radius: var(--radius);
    transition: background .25s ease, transform .25s ease;
}
.lg2 .icon-card:hover { background: var(--cream-deep); transform: translateY(-4px); }
.lg2 .icon-card i { font-size: 26px; color: var(--gold); }
.lg2 .icon-card span { font-size: 13px; letter-spacing: .04em; color: var(--ink); font-weight: 500; }
.lg2 .icon-card .count { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 2px; }

/* Variante con immagine quadrata al posto dell'icona (card gestibili da
   pannello2018/ricerca-schede-configurazione.aspx e ricerca-tipologie-immagini.aspx),
   stessa griglia .icon-card-grid. */
.lg2 .image-card {
    display: flex; flex-direction: column;
    text-align: center;
    background: var(--cream);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.lg2 .image-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.1); }
.lg2 .image-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--cream-deep);
    overflow: hidden;
}
.lg2 .image-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg2 .image-card__media .placeholder-icon {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: var(--gold);
}
.lg2 .image-card__label { padding: 12px 10px; font-size: 13px; letter-spacing: .04em; color: var(--ink); font-weight: 500; }
.lg2 .image-card__label .count { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 2px; font-weight: 400; }

/* --------------------------------------------------------- Position lists */
.lg2 .position-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}
.lg2 .position-list h3 { font-size: 18px; margin-bottom: 16px; }
.lg2 .position-list ul { list-style: none; margin: 0; padding: 0; }
.lg2 .position-list li { padding: 9px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 14px; }
.lg2 .position-list li a { color: var(--ink); }
.lg2 .position-list li a:hover { color: var(--maroon); }
.lg2 .position-list li b { color: var(--ink-soft); font-weight: 500; }
.lg2 .position-list .see-all {
    display: inline-block; margin-top: 14px; font-size: 12px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--maroon); border-bottom: 1px solid currentColor;
}
/* Bottone "All regions"/"All cities": stesso aspetto del link .see-all che
   sostituisce (era <a href>, ora <button> che rivela le righe oltre la
   decima invece di navigare - vedi lg/pagina-ricerca.aspx). */
.lg2 .position-list button.see-all {
    background: none; border: none; border-bottom: 1px solid currentColor;
    padding: 0; font: inherit; cursor: pointer;
}
/* Righe oltre la decima: nascoste con un'animazione di apertura (non un
   display:none secco) quando si clicca "All regions"/"All cities" - stesso
   layout flex della riga normale, solo schiacciata a altezza zero finche'
   ul non riceve la classe "show-all" (vedi mostraTutti() in
   lg/pagina-ricerca.aspx). max-height (non height) per poter animare senza
   conoscere l'altezza esatta del contenuto. */
.lg2 .position-list li.extra-item {
    display: flex; max-height: 0; opacity: 0; overflow: hidden;
    padding-top: 0; padding-bottom: 0; border-bottom-color: transparent;
    transition: max-height .4s ease, opacity .35s ease, padding .4s ease, border-color .4s ease;
}
.lg2 .position-list ul.show-all li.extra-item {
    max-height: 60px; opacity: 1; padding-top: 9px; padding-bottom: 9px; border-bottom-color: var(--line);
}

/* ------------------------------------------------------------- Story */
.lg2 .story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}
.lg2 .story .image { aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius); }
.lg2 .story .image img { width: 100%; height: 100%; object-fit: cover; }
.lg2 .story .content .section-lede { max-width: 100%; }
.lg2 .story .stats { display: flex; gap: 44px; margin-top: 40px; flex-wrap: wrap; }
.lg2 .story .stats .num { font-family: var(--serif); font-size: 34px; color: var(--gold-deep); }
.lg2 .story .stats .lbl { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }
/* Solo home page: spazio Story -> Journal (blog) ridotto (era 110px+70px=
   180px in totale, la sezione Story usa il padding base ".lg2 section" e
   quella Journal ".tight", vedi commenti li' sopra) e bottone "Learn More"
   (ultimo elemento di Story, subito prima del blog) centrato.
   Breakpoint 860px (non i consueti 640px "telefonino" usati altrove nel
   foglio) apposta uguale a quello di ".story { grid-template-columns: 1fr }"
   qualche riga sopra: e' li' che la sezione passa a una sola colonna e il
   bottone sinistrorso comincia a stonare sotto testo/immagine a larghezza
   piena - un breakpoint diverso (es. 640px) avrebbe lasciato una fascia di
   larghezze (tra 640 e 860px: tablet, telefoni in orizzontale) con il layout
   gia' impilato ma bottone/spaziatura non ancora corretti.
   "#storyHome" e ".story-cta" sono id/classe dedicati solo a questo blocco
   di lg/index.aspx, non toccano altre sezioni ".tight"/bottoni ".btn". */
@media (max-width: 860px) {
    #storyHome { padding-bottom: 40px; }
    #storyHome + section.tight { padding-top: 30px; }
    .lg2 .story-cta { text-align: center; }
}

/* -------------------------------------------------------------- Journal */
.lg2 .journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.lg2 .journal-card .thumb { display: block; aspect-ratio: 16/10; overflow: hidden; border-radius: var(--radius); background: var(--cream-deep); line-height: 0; }
.lg2 .journal-card .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.lg2 .journal-card:hover .thumb img { transform: scale(1.06); }
.lg2 .journal-card .body { padding: 20px 2px 0; }
.lg2 .journal-card h3 { font-size: 18px; line-height: 1.35; }
.lg2 .journal-card p { color: var(--ink-soft); font-size: 14px; margin-top: 10px; }
.lg2 .journal-card .read-more { display: inline-block; margin-top: 14px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--maroon); border-bottom: 1px solid currentColor; }

/* ----------------------------------------------------------- Newsletter */
.lg2 .newsletter {
    background: var(--cream-deep);
    text-align: center;
}
.lg2 .newsletter .wrap { max-width: 640px; }
.lg2 .newsletter-form {
    display: flex; gap: 12px; margin-top: 34px;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 10px;
}
.lg2 .newsletter-form input {
    flex: 1; border: none; background: transparent; font-family: var(--sans);
    font-size: 15px; padding: 8px 4px; outline: none;
}
.lg2 .newsletter-form button {
    border: none; background: transparent; font-size: 12px; letter-spacing: .16em;
    text-transform: uppercase; cursor: pointer; color: var(--ink); font-weight: 500;
}
.lg2 .newsletter-form button:hover { color: var(--gold-deep); }
/* Esito iscrizione: testo ambra discreto di riserva (default, non usato di
   fatto da iscriviNewsletter - sia l'errore che la conferma applicano
   sempre uno dei due modificatori sotto). Sia per l'avviso di email non
   plausibile sia per la conferma di iscrizione avvenuta (classe
   aggiunta/rimossa da lg/index.aspx.vb in iscriviNewsletter) non basta il
   colore - un vero banner (sfondo pieno, icona, testo piu' grande) cosi'
   risalta anche a un'occhiata veloce, non solo leggendo il testo: stessa
   dimensione/evidenza per entrambi, cambia solo il colore (bordeaux per
   l'errore, oro scuro per la conferma) e l'icona. */
.lg2 .newsletter-note {
    display: block; margin-top: 14px; font-size: 13px; color: var(--gold-deep);
}
.lg2 .newsletter-note.is-error,
.lg2 .newsletter-note.is-success {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 18px; padding: 12px 22px;
    color: var(--white);
    font-size: 15px; font-weight: 600;
    border-radius: var(--radius);
}
.lg2 .newsletter-note.is-error i,
.lg2 .newsletter-note.is-success i { font-size: 17px; }
.lg2 .newsletter-note.is-error { background: var(--maroon); }
.lg2 .newsletter-note.is-success { background: var(--gold-deep); }

/* ------------------------------------------------------------- Footer */
.lg2 .site-footer { background: var(--ink); color: rgba(255,255,255,.72); padding-top: 90px; }
.lg2 .footer-grid {
    display: grid; grid-template-columns: 1fr 0.8fr 1.4fr; gap: 50px;
    padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.lg2 .footer-brand { font-family: var(--serif); font-size: 22px; color: var(--white); margin-bottom: 24px; display: block; }
.lg2 .footer-col h4 {
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--white);
    margin-bottom: 20px; font-weight: 500; font-family: var(--sans);
}
.lg2 .footer-col ul li { margin-bottom: 12px; font-size: 14px; }
.lg2 .footer-col ul li i { color: var(--gold); width: 18px; text-align: center; margin-right: 4px; }
.lg2 .footer-col a:hover { color: var(--white); }
.lg2 .footer-social { display: flex; gap: 12px; margin-top: 22px; }
.lg2 .footer-social a {
    width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
    transition: border-color .2s ease, background .2s ease;
}
.lg2 .footer-social a:hover { background: rgba(255,255,255,.08); border-color: var(--maroon); }
.lg2 .footer-fiaip { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
.lg2 .footer-fiaip img { max-height: 46px; }
.lg2 .footer-fiaip span { font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.5; }
.lg2 .footer-bottom {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
    padding: 26px 0; font-size: 12px; color: rgba(255,255,255,.5);
}
.lg2 .footer-bottom a { color: rgba(255,255,255,.5); }
.lg2 .footer-bottom a:hover { color: var(--white); }
.lg2 .footer-bottom .legal-links { display: flex; gap: 22px; }

.lg2 .float-whatsapp {
    position: fixed; right: 26px; bottom: 26px; z-index: 400;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; box-shadow: 0 8px 20px rgba(0,0,0,.25);
    transition: transform .2s ease;
}
.lg2 .float-whatsapp:hover { transform: scale(1.08); color: var(--white); }

/* ------------------------------------------------------------ Utility */
.lg2 .empty-note { color: var(--ink-soft); font-size: 14px; }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 1320px) {
    .lg2 .property-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1080px) {
    .lg2 .property-grid, .lg2 .journal-grid { grid-template-columns: repeat(2, 1fr); }
    .lg2 .location-grid { grid-template-columns: repeat(2, 1fr); }
    .lg2 .footer-grid { grid-template-columns: 1fr 1fr; }
    .lg2 .search-card { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
    .lg2 .story { grid-template-columns: 1fr; gap: 36px; }
    .lg2 .welcome-split { grid-template-columns: 1fr; gap: 36px; }
    .lg2 .property-row, .lg2 .article-row { grid-template-columns: 1fr; gap: 20px; }
    .lg2 .main-nav ul { display: none; }
    .lg2 .burger { display: block; }
    .lg2 .icon-card-grid { grid-template-columns: repeat(3, 1fr); }
    .lg2 .position-columns { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 640px) {
    .lg2 .wrap { padding: 0 20px; }
    .lg2 section { padding: 70px 0; }
    /* Blocco testo articolo (sfondo bianco): padding esterno (.wrap, qui e'
       la stessa classe di .post-layout sull'elemento, quindi la regola sotto
       vince su quella base senza toccare .wrap altrove) e interno ridotti
       per recuperare spazio orizzontale su schermi piccoli - il testo
       scorreva su troppe righe con i valori da desktop.
       Font/interlinea/padding laterale/margine negativo DEVONO stare in
       QUESTO blocco (non altrove nel foglio, es. subito dopo
       .blog-post-body): la regola base ".post-main .article-body" (piu'
       sotto, sezione "Post + sidebar") non ha media query quindi e' sempre
       attiva, stessa specificita' di questa - a parita' di specificita'
       vince chi e' scritto DOPO nel foglio a prescindere dalla media query,
       quindi un blocco @media messo PRIMA di quella regola base verrebbe
       silenziosamente ignorato per le proprieta' in comune (e' successo
       proprio qui: padding/margin non arrivavano sul sito, solo il
       font-size perche' la sua regola base era ancora piu' in alto).
       Uniformato su TUTTE le pagine che condividono questo contenitore
       (dettaglio blog, chi-siamo, pagina-legale, generica, pagina-contatti)
       - esclusi di proposito immobili-dettaglio.aspx (".detail-columns
       .article-body", contenitore diverso). */
    .lg2 .post-layout { padding: 0 14px; }
    .lg2 .post-main .article-body {
        font-size: 18px; line-height: 1.6;
        padding: 22px 16px;
        margin-left: -14px; margin-right: -14px;
    }
    /* Bio estesa della pagina autore (.article-body.author-bio-full): stesso
       trattamento mobile del blocco appena sopra (era rimasto scoperto,
       quindi su schermi piccoli restava alla dimensione/padding da
       desktop), MA SENZA margine negativo: a differenza di ".listing-text"
       qui sotto, in lg/autore.aspx questa classe e' scritta sullo STESSO
       elemento che ha gia' la classe ".wrap" (<div class="wrap article-body
       author-bio-full">), non su un figlio di un ".wrap" separato - un
       margine negativo qui non "buca" nessun gutter genitore, spinge invece
       l'elemento stesso oltre i bordi dello schermo (bug reale, box che
       sborda a sinistra/destra nascondendo parte del testo). Il gutter di
       20px e' gia' garantito dal padding della regola base ".lg2 .wrap"
       qui sopra, che questo elemento eredita gia' avendo anche lui la
       classe "wrap". */
    .lg2 .article-body.author-bio-full {
        font-size: 18px; line-height: 1.6;
        padding: 22px 16px;
    }
    /* .listing-text (abstract + testo completo dell'elenco immobili/affitti,
       famiglia CSS separata da .article-body): stesso trattamento appena
       sopra, "a tutta pagina" come il blocco blog - padding interno ridotto
       a 16px e margine negativo per annullare il gutter di ".wrap" su
       mobile (qui 20px, non 14px: questi box vivono dentro un ".wrap"
       semplice, non ".post-layout"). Sia il blocco introduttivo
       (#intro-immobili, solo immobili-elenco.aspx) sia quello del testo
       completo (#testo-completo, .fulltext-spacing, condiviso anche da
       affitti-elenco.aspx) usano ".listing-text", quindi un'unica regola
       qui copre entrambi su entrambe le pagine. */
    .lg2 .listing-text {
        padding: 16px;
        margin-left: -20px; margin-right: -20px;
    }
    .lg2 .content-card { padding: 22px 18px; }
    .lg2 .info-strip { display: none; }
    .lg2 .listing-head { padding-top: 100px; }
    .lg2 .property-grid, .lg2 .journal-grid, .lg2 .location-grid { grid-template-columns: 1fr; }
    .lg2 .section-head .btn { display: none; }
    .lg2 .view-all-mobile { display: flex; justify-content: center; margin-top: 32px; }
    .lg2 .icon-card-grid { grid-template-columns: repeat(2, 1fr); }
    .lg2 .footer-grid { grid-template-columns: 1fr; gap: 34px; }
    .lg2 .search-card { grid-template-columns: 1fr; margin-top: -40px; padding: 24px; }
    .lg2 .site-header { padding: 18px 20px; }
    .lg2 .site-header.is-scrolled { padding: 14px 20px; }
    .lg2 .hero-content h1 { font-size: 38px; }
    .lg2 .newsletter-form { flex-direction: column; align-items: stretch; border-bottom: none; }
    .lg2 .newsletter-form input { border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
    /* Logo testuale ("Luxury Villa Italy"): a 22px, sommato al selettore
       lingua + burger nella stessa riga, su schermi stretti "Italy" andava a
       capo (spazio insufficiente nel flex .site-header). Ridotto qui e
       ulteriormente sotto i 400px. */
    .lg2 .brand { font-size: 17px; }
}
@media (max-width: 400px) {
    /* Device molto stretti in verticale (es. iPhone SE, Android piccoli):
       ancora meno margine tra logo, selettore lingua e burger. */
    .lg2 .brand { font-size: 14px; letter-spacing: .02em; }
    .lg2 .lang-select__toggle { font-size: 11px; padding-left: 6px; padding-right: 6px; }
}

/* --------------------------------------------------- Mobile nav drawer */
.lg2 .mobile-nav {
    position: fixed; inset: 0; z-index: 600;
    background: var(--ink);
    color: var(--white);
    display: flex; flex-direction: column;
    padding: 30px 30px 40px;
    transform: translateX(100%);
    transition: transform .35s ease;
}
.lg2 .mobile-nav.open { transform: translateX(0); }
.lg2 .mobile-nav .close-btn {
    align-self: flex-end; background: none; border: none; color: var(--white);
    font-size: 26px; cursor: pointer; line-height: 1;
}
.lg2 .mobile-nav ul { margin-top: 50px; display: flex; flex-direction: column; gap: 26px; }

/* ------------------------------------------------------- Widget strip */
/* Strisciata di 4 card (rimandi a sezioni/servizi del sito), sostituisce i
   contenuti che nella vecchia "lg" vivevano nella colonna laterale. Un
   gruppo per template, gestito da pannello2018/widget-configurazione.aspx +
   widget-gestisci.aspx. Vedi app_code/lg2Chrome.vb (CaricaWidget). */
.lg2 .widget-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.lg2 .widget-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(28,27,25,.08);
    transition: transform .3s ease, box-shadow .3s ease;
}
.lg2 .widget-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.lg2 .widget-card__media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--cream-deep); }
.lg2 .widget-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.lg2 .widget-card:hover .widget-card__media img { transform: scale(1.08); }
.lg2 .widget-card__body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.lg2 .widget-card__body h4 { font-family: var(--serif); font-weight: 600; font-size: 18px; margin: 0 0 8px; }
.lg2 .widget-card__body p { font-family: var(--sans); font-size: 13.5px; line-height: 1.65; margin: 0; opacity: .82; }
/* Solo home page: ".locations" e' il wrapper esclusivo di lg/index.aspx per
   questa stessa striscia widget (le altre pagine che la includono - blog,
   chi-siamo, elenco immobili/affitti, ecc. - usano ".tight widget-strip"),
   quindi questo selettore non le tocca. Testo (non il titolo, h4 resta
   18px) ingrandito di 2px su richiesta. */
.lg2 .locations .widget-card__body p { font-size: 15.5px; }

/* palette curata (stesse variabili colore del resto di lg2) */
.lg2 .widget-card--white     { background: var(--white); }
.lg2 .widget-card--white h4, .lg2 .widget-card--white p     { color: var(--ink); }
.lg2 .widget-card--cream     { background: var(--cream); }
.lg2 .widget-card--cream h4, .lg2 .widget-card--cream p     { color: var(--ink); }
.lg2 .widget-card--cream-deep { background: var(--cream-deep); }
.lg2 .widget-card--cream-deep h4, .lg2 .widget-card--cream-deep p { color: var(--ink); }
.lg2 .widget-card--ink       { background: var(--ink); }
.lg2 .widget-card--ink h4, .lg2 .widget-card--ink p         { color: var(--white); }
.lg2 .widget-card--gold      { background: var(--gold); }
.lg2 .widget-card--gold h4, .lg2 .widget-card--gold p       { color: var(--ink); }
.lg2 .widget-card--maroon    { background: var(--maroon); }
.lg2 .widget-card--maroon h4, .lg2 .widget-card--maroon p   { color: var(--white); }

/* Variante con solo 2 card visibili: affiancate, ciascuna meta' larghezza
   del contenitore (.wrap) - l'immagine e' gia' 16:9 di base, qui solo il
   layout a 2 colonne (vedi lg2Chrome.WidgetGridClass). */
.lg2 .widget-grid--pair {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px;
}
.lg2 .widget-grid--pair .widget-card__body h4 { font-size: 22px; }

@media (max-width: 900px) {
    .lg2 .widget-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .lg2 .widget-grid { grid-template-columns: 1fr; }
    .lg2 .widget-grid--pair { grid-template-columns: 1fr; max-width: 460px; }
}

/* ---------------------------------------------------------- Photo gallery */
/* Hero scorrevole (dettaglio immobile): tutte le foto in un track con scroll
   nativo + scroll-snap, frecce prev/next e contatore. Sotto, griglia "Altre
   foto" a riquadri ingrandibili (lightbox fancybox), rivelata a gruppi via JS
   (vedi script in fondo a immobili-dettaglio.aspx). */
.lg2 .hero-slider-wrap { position: relative; margin-bottom: 26px; }
.lg2 .hero-slider { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--cream-deep); }
.lg2 .hero-slider__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.lg2 .hero-slider__track::-webkit-scrollbar { display: none; }
.lg2 .hero-slide { flex: 0 0 100%; scroll-snap-align: start; display: block; aspect-ratio: 16/9; }
.lg2 .hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg2 .hero-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,.9); color: var(--ink);
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    box-shadow: 0 4px 14px rgba(0,0,0,.15); z-index: 2; transition: background .2s ease;
}
.lg2 .hero-nav:hover { background: #fff; }
.lg2 .hero-nav--prev { left: 16px; }
.lg2 .hero-nav--next { right: 16px; }
.lg2 .hero-count {
    position: absolute; bottom: 14px; right: 16px; z-index: 2;
    background: rgba(0,0,0,.55); color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 20px;
}
.lg2 .sold-badge { position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; }

/* Immobile "Off Market" (lgVille.flagOffMarket): SOLO l'etichetta sulla foto
   nelle card dell'elenco (lg/immobili-elenco.aspx) - nessuna sfocatura,
   nessuna riduzione di contenuto/specifiche: la scheda e' trattata come
   tutte le altre, e' compito dell'admin caricare foto gia' sfocate/limitare
   i contenuti direttamente nel DB se lo desidera. Posizionato in alto a
   sinistra (non sovrapposto a .price-tag, che resta in basso a sinistra
   come sempre). */
.lg2 .offmarket-badge {
    position: absolute; left: 14px; top: 14px; z-index: 2;
    background: rgba(122, 32, 32, .88);
    color: var(--white);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: var(--radius);
    line-height: normal;
}
.lg2 .offmarket-badge i { margin-right: 4px; }

.lg2 .photo-grid-wrap { margin-top: 0; }
.lg2 .photo-grid-head { margin-bottom: 16px; }
.lg2 .photo-grid-head h3 { font-size: 18px; margin: 0; }
.lg2 .photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
/* Stesse proporzioni ed effetto hover di .property-row .thumb (card dell'elenco
   immobili, gia' live): 16:9, object-fit cover (ritaglio verticale se serve),
   zoom 1.06 al passaggio del mouse. */
.lg2 .photo-tile { display: block; position: relative; line-height: 0; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius); background: var(--cream-deep); }
.lg2 .photo-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.lg2 .photo-tile:hover img { transform: scale(1.06); }
.lg2 .photo-tile.is-hidden-group { display: none; }
.lg2 .photo-grid-more { text-align: center; margin-top: 22px; }

.lg2 .quick-links { display: flex; gap: 22px; margin: 20px 0 6px; }
.lg2 .quick-links a { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.lg2 .quick-links a:hover { color: var(--maroon); }

@media (max-width: 900px) {
    .lg2 .photo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .lg2 .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .lg2 .hero-nav { width: 36px; height: 36px; font-size: 14px; }
}

/* ------------------------------------------------------------- Spec list */
.lg2 .spec-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lg2 .spec-list li { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.lg2 .spec-list li b { font-weight: 500; color: var(--ink-soft); }
.lg2 .spec-list li span { color: var(--ink); font-weight: 500; text-align: right; }
/* Badge "Ref: XXXX" - bordo oro + sfondo crema per farlo risaltare rispetto al
   testo circostante (era grigio piatto, poco visibile); il codice vero e
   proprio e' nel <strong> figlio, in nero e piu' grande dell'etichetta. */
.lg2 .ref-tag {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
	color: var(--ink-soft); background: var(--cream-deep);
	border: 1px solid var(--gold); border-radius: var(--radius);
	padding: 5px 12px; line-height: 1.6;
}
.lg2 .ref-tag i { color: var(--gold-deep); font-size: 11px; }
.lg2 .ref-tag strong { color: var(--ink); font-weight: 700; font-size: 14px; text-transform: none; letter-spacing: normal; }

/* ------------------------------------------------- Dettaglio: titolo/prezzo */
/* Titolo (sx) + Rif (dx) sulla stessa riga, prezzo su una riga propria sotto. */
.lg2 .detail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.lg2 .detail-head h2 { font-size: 26px; margin: 0; }
.lg2 .detail-price { font-size: 17px; color: var(--maroon); font-weight: 500; margin: 10px 0 0; }

/* Due colonne su desktop: specifiche a sinistra, testo descrittivo a destra
   (impilate su mobile, specifiche prima perche' vengono prima nel markup). */
.lg2 .detail-columns { display: grid; grid-template-columns: 320px 1fr; gap: 50px; margin-top: 30px; align-items: start; }
.lg2 .detail-columns .spec-list { max-width: none; }
/* Stesso trattamento a scheda (sfondo bianco + bordo + accento a sinistra +
   ombra) gia' usato per .article-body nel dettaglio blog (.post-main
   .article-body) e nella bio autore (.article-body.author-bio-full), cosi'
   il testo descrittivo risalta rispetto allo sfondo crema della pagina. */
.lg2 .detail-columns .article-body {
    max-width: none; margin: 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 4px solid var(--maroon);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 34px 40px;
}
/* Solo mobile: stesso trattamento "a tutta pagina" gia' fatto per
   .listing-text (elenco immobili) e .post-main .article-body (blog e
   affini) - padding interno ridotto a 16px, margine negativo che annulla
   il gutter di ".wrap" (20px su mobile) cosi' il box arriva a filo schermo.
   DEVE stare dopo la regola base qui sopra (stessa specificita' a tre
   classi, ".lg2 .detail-columns .article-body"): a parita' di specificita'
   vince chi e' scritto dopo nel foglio a prescindere dalla media query. */
@media (max-width: 640px) {
    .lg2 .detail-columns .article-body {
        padding: 16px;
        margin-left: -20px; margin-right: -20px;
    }
}
/* Bottone "Scarica PDF", subito sotto la tabella delle specifiche (stessa
   colonna sinistra da 320px): a tutta larghezza per farlo risaltare, visibile
   solo se il PDF e' gia' stato generato (vedi brochureLg.pdfEsiste). */
.lg2 .detail-pdf-btn { margin-top: 40px; width: 100%; justify-content: center; }
@media (max-width: 900px) {
    .lg2 .detail-columns { grid-template-columns: 1fr; gap: 30px; }
}
/* Dettaglio immobile, solo mobile: spazio ridotto tra i vari blocchi (era lo
   standard ".tight" = 70px sopra/sotto ogni sezione, che sommato tra sezioni
   consecutive diventava eccessivo su schermi stretti). Selettori a ID (uno
   per sezione, aggiunti nel markup di lg/immobili-dettaglio.aspx) per non
   toccare le altre pagine che condividono ".tight". */
@media (max-width: 640px) {
    /* Sotto le icone Mappa/Contatti, prima del titolo H2: dimezzato. */
    #descrizioneSection { padding-top: 35px; }
    /* Sopra la mappa e sotto il disclaimer (verso "Immobili simili"): dimezzati. */
    #contattiSection { padding-top: 35px; padding-bottom: 35px; }
    /* Prima e dopo "Immobili simili": dimezzati (il "dopo" e' lo spazio
       prima della striscia widget seguente, ridotto di almeno il 50% in
       combinazione con il padding-top di #widgetSectionVilla sotto). */
    #pnlSimili { padding: 35px 0; }
    #widgetSectionVilla { padding-top: 35px; }
}

/* Mappa (sx) e form contatti (dx) affiancate, stessa altezza (align-items:
   stretch, la mappa riempie tutta la colonna anche se piu' bassa del form);
   impilate su mobile, mappa prima. Se la mappa e' nascosta (Off Market o
   coordinate mancanti) il form resta l'unico figlio della grid e riprende la
   larghezza stretta/centrata di prima grazie a .contact-columns--single. */
.lg2 .contact-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; }
.lg2 .contact-columns--single { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
@media (max-width: 900px) {
    .lg2 .contact-columns { grid-template-columns: 1fr; gap: 30px; }
}

/* --------------------------------------------------------- Form fields */
/* Riusa la stessa forma di .search-field (label + input sottolineato) fuori
   dal box .search-card, per i form contatti/inquiry. */
.lg2 .form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.lg2 .form-field label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); font-weight: 500;
}
.lg2 .form-field input, .lg2 .form-field textarea {
    border: none; border-bottom: 1px solid var(--line); background: transparent;
    font-family: var(--sans); font-size: 15px; color: var(--ink); padding: 8px 2px; outline: none; resize: vertical;
}
.lg2 .form-field input:focus, .lg2 .form-field textarea:focus { border-bottom-color: var(--gold); }

.lg2 .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- Sort dropdown */
/* Menu di ordinamento allineato a destra nel .section-head (es. elenco
   immobili): stesso design system, select nativo navigato via onchange
   (niente postback, coerente con i filtri via querystring gia' in uso). */
.lg2 .sort-select { position: relative; flex-shrink: 0; }
.lg2 .sort-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: .02em;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 11px 36px 11px 18px;
    cursor: pointer;
    outline: none;
}
.lg2 .sort-select select:focus { border-color: var(--gold); }
.lg2 .sort-select::after {
    content: "\f107";
    font-family: FontAwesome;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--ink-soft);
    font-size: 12px;
}
.lg2 .form-note { font-size: 12px; color: var(--ink-soft); margin-top: -6px; margin-bottom: 18px; }
.lg2 .form-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink-soft); margin-bottom: 18px; line-height: 1.6; }
.lg2 .form-check input { margin-top: 4px; }
.lg2 .field-error { display: block; color: var(--maroon); font-size: 12px; margin-top: 4px; }
.lg2 .antispam-hint { width: 100%; max-width: 140px; display: block; margin-bottom: 8px; border-radius: 3px; }

/* Elenco file caricati nello step 2 di proponi-immobile.aspx - stesso
   trattamento a righe di .office-card li, senza il box attorno. */
.lg2 .upload-list { list-style: none; margin: 14px 0; padding: 0; }
.lg2 .upload-list:empty { display: none; }
.lg2 .upload-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); padding: 8px 0; border-bottom: 1px solid var(--line); }
.lg2 .upload-list li:last-child { border-bottom: none; }
.lg2 .upload-list li i { color: var(--gold); width: 16px; text-align: center; }

/* -------------------------------------------------------------- Offices */
/* Tre schede impilate (non piu' una griglia 2 colonne: ora vivono nella
   colonna stretta di .post-main, ciascuna nel proprio .content-card - vedi
   sotto), h4 con icona in linea con le altre etichette a icona. */
.lg2 .office-list { display: flex; flex-direction: column; gap: 26px; }
.lg2 .office-card h4 { font-size: 17px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.lg2 .office-card h4 i { color: var(--gold); }
.lg2 .office-card ul { list-style: none; margin: 0 0 14px; padding: 0; }
.lg2 .office-card li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; }
.lg2 .office-card li i { color: var(--gold); width: 16px; text-align: center; }
.lg2 .office-card iframe { width: 100%; height: 260px; border: none; border-radius: var(--radius); margin-top: 4px; }

/* Box a sfondo bianco riusabile (stesso trattamento di .article-body nel
   post-main: bordo + accento a sinistra + ombra), per il form contatti e
   ciascuna scheda sede - non porta la tipografia di .article-body (non e'
   testo lungo), solo il contenitore. */
.lg2 .content-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 4px solid var(--maroon);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 34px 40px;
}

/* ----------------------------------------------------------- Confirm modal */
.lg2 .modal-overlay { position: fixed; inset: 0; background: rgba(28,27,25,.55); z-index: 800; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lg2 .modal-box { background: var(--white); border-radius: var(--radius); padding: 40px 34px; max-width: 420px; text-align: center; }
.lg2 .modal-box i.fa { font-size: 34px; color: var(--gold); margin-bottom: 14px; }
.lg2 .modal-box p { margin: 0 0 20px; font-size: 15px; color: var(--ink); }
.lg2 .modal-box.is-error i.fa { color: var(--maroon); }
.lg2 .modal-box.is-error p { text-align: left; font-size: 13.5px; color: var(--ink-soft); }

.lg2 .mobile-nav a { font-family: var(--serif); font-size: 26px; }