/* ============================================================
   WE HOME REAL ESTATE - STYLESHEET
   Foglio di stile unico e condiviso da tutte le pagine.
   Architettura: design token (Custom Properties) + classi
   semantiche per componente. Nessuna utility "soup" inline.
   ============================================================ */

/* ============================================================
   0. FONT (serviti dal nostro server)
   ============================================================
   File variabili latin + latin-ext di Google Fonts v20/v31 (licenza OFL); latin-ext si scarica
   solo se nella pagina c'è un carattere di quell'intervallo. Pesi dichiarati come li serviva
   Google (Inter 400-600, Montserrat 600-700): un 800 nel CSS resta reso come 700.
   I "Fallback" sono Arial ridimensionato sulle metriche del font vero (larghezza misurata in
   Chrome su testo italiano, altezze dai file): finché il font non arriva il testo occupa lo
   stesso spazio, quindi gli hero non cambiano altezza allo scambio (CLS, report §9 punto 4).
   I latin sono anche in preload (head.html.twig). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Fallback';
  font-weight: 400;
  src: local('Arial'), local('ArialMT');
  size-adjust: 106.14%;
  ascent-override: 91.27%;
  descent-override: 22.73%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  font-weight: 500;
  src: local('Arial'), local('ArialMT');
  size-adjust: 107.18%;
  ascent-override: 90.39%;
  descent-override: 22.51%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  font-weight: 600;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 101.05%;
  ascent-override: 95.87%;
  descent-override: 23.87%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Montserrat Fallback';
  font-weight: 600;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 107.81%;
  ascent-override: 89.79%;
  descent-override: 23.28%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Montserrat Fallback';
  font-weight: 700;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 109.82%;
  ascent-override: 88.14%;
  descent-override: 22.86%;
  line-gap-override: 0%;
}

/* ============================================================
   1. RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* A capo dei testi senza spazi (titoli Getrix, nomi, parole lunghe scritte nel pannello).
   `anywhere` spezza una parola solo se non ci sta nella riga e, a differenza di `break-word`,
   riduce anche la larghezza minima degli elementi: le colonne di griglie e flex non si
   allargano oltre lo schermo. Proprietà ereditata: vale per tutto il testo. */
body {
  overflow-wrap: anywhere;
}

/* Titoli: le parole vanno a capo intere. La sillabazione italiana (html lang="it") si accende
   SOLO sul titolo che contiene una parola più larga dell'intera riga: la classe la mette
   main.js ("Sillabazione solo dove serve"). Con `hyphens: auto` fisso il browser sillabava
   anche parole che sarebbero andate a capo intere (Safari ignora `hyphenate-limit-chars`).
   Senza JS la parola troppo lunga si spezza comunque (overflow-wrap sul body), senza trattino. */
.has-long-word {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 12 5 5;
}

/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand colors */
  /* Primary: petrolio medio, stessa tinta del secondary (~196°) ma meno saturo:
     fa da gradino intermedio tra il logo (secondary + accent) e lascia all'oro il ruolo di accento. */
  --color-primary: #1B87B0;
  --color-primary-dark: #146C8E;
  --color-primary-light: #3FA6CC;
  --color-secondary: #015675;
  --color-secondary-dark: #01394E;
  --color-secondary-light: #1A7596;
  --color-accent: #AE8642;
  --color-accent-light: #CFA867;

  /* Surfaces & text */
  --color-bg: #FFFFFF;
  --color-surface: #F8FAFC;
  --color-surface-warm: #F1F5F9;
  --color-text: #1A202C;
  --color-text-secondary: #475569;
  --color-muted: #66748A;
  --color-border: #E2E8F0;

  /* State colors */
  --color-success: #2D8A4A;
  --color-warning: #C05621;
  --color-danger: #C53030;

  /* Translucent helpers (derive da brand colors) */
  /* ⚠️ rgb = primary #1B87B0 (27,135,176) e secondary #015675 (1,86,117): se cambiano i brand color, aggiornare anche questi */
  --primary-soft: rgba(27, 135, 176, 0.10);
  --primary-softer: rgba(27, 135, 176, 0.05);
  --primary-strong: rgba(27, 135, 176, 0.20);
  --success-soft: rgba(45, 138, 74, 0.10);
  --overlay-dark: rgba(1, 86, 117, 0.80);
  --on-dark: rgba(255, 255, 255, 0.80);
  --on-dark-muted: rgba(255, 255, 255, 0.70);
  --on-dark-faint: rgba(255, 255, 255, 0.50);
  --on-dark-border: rgba(255, 255, 255, 0.10);

  /* Typography */
  --font-heading: 'Montserrat', 'Montserrat Fallback', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;

  /* Titoli fluidi: invariati da ~1024px in su, più piccoli sugli schermi stretti (a 390px:
     hero ~37px, h1 32px, h2 26px), così i titoli lunghi non occupano mezza schermata. */
  --text-hero: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
  --text-h1: clamp(2rem, 1.5rem + 2.2vw, 2.75rem);
  --text-h2: clamp(1.625rem, 1.25rem + 1.5vw, 2rem);
  --text-h3: 1.5rem;
  --text-h4: 1.25rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-xs: 0.75rem;

  --line-hero: 1.1;
  --line-h1: 1.15;
  --line-h2: 1.2;
  --line-h3: 1.3;
  --line-body: 1.7;

  /* Spacing */
  --section: 5rem;
  --section-lg: 7rem;

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(1, 86, 117, 0.08);
  --shadow-card-hover: 0 8px 40px rgba(1, 86, 117, 0.14);
  --shadow-nav: 0 2px 16px rgba(0, 0, 0, 0.06);

  /* Border radius */
  --radius-card: 0.75rem;
  --radius-btn: 0.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 200ms;
  --transition-normal: 350ms;
  --transition-slow: 600ms;

  /* Layout */
  --max-content: 1280px;
  --max-narrow: 720px;
  --header-height: 5rem;
}

/* ============================================================
   3. BASE ELEMENTS
   ============================================================ */
body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--line-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--line-h2);
  color: var(--color-secondary);
}

::selection {
  background-color: var(--color-primary-light);
  color: #fff;
}

/* ============================================================
   4. ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
  animation: fadeUp var(--transition-slow) ease-out both;
}

.stagger-children > *:nth-child(1) { animation-delay: 100ms; }
.stagger-children > *:nth-child(2) { animation-delay: 200ms; }
.stagger-children > *:nth-child(3) { animation-delay: 300ms; }
.stagger-children > *:nth-child(4) { animation-delay: 400ms; }
.stagger-children > *:nth-child(5) { animation-delay: 500ms; }
.stagger-children > *:nth-child(6) { animation-delay: 600ms; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* State helper toggled via JS */
.hidden { display: none; }

/* ============================================================
   5. LAYOUT PRIMITIVES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .container { padding-inline: 1.5rem; }
}

@media (min-width: 1024px) {
  .container { padding-inline: 2rem; }
}

/* Vertical rhythm for full-width sections */
.section {
  padding-block: var(--section);
}

.section-alt {
  background-color: var(--color-surface);
}

.section-dark {
  position: relative;
  background-color: var(--color-secondary);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--section-lg);
  }
}

/* Sezione che continua il blocco sopra (risultati sotto i filtri, titolo sotto la galleria,
   testo sotto la copertina): stacco ridotto solo in alto, non è un nuovo argomento */
.section.is-continuation {
  padding-top: 2rem;
}

@media (min-width: 1024px) {
  .section.is-continuation {
    padding-top: 3rem;
  }
}

/* ============================================================
   6. HEADER & NAVIGATION
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 50;
  transition: box-shadow var(--transition-normal);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-nav);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.header-logo {
  flex-shrink: 0;
}

.header-logo img {
  height: 3rem;
  width: auto;
}

/* Desktop navigation */
.header-nav {
  display: none;
  align-items: center;
  gap: 2rem;
}

.header-nav a {
  white-space: nowrap;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.header-nav a:hover,
.header-nav a.is-active {
  color: var(--color-primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Header call-to-action button */
.header-cta {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--color-primary);
  color: #fff;
  font-size: var(--text-small);
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-btn);
  transition: background-color var(--transition-fast);
}

.header-cta:hover {
  background-color: var(--color-primary-dark);
}

/* Header phone link */
.header-phone {
  display: none;
  align-items: center;
  white-space: nowrap;
  gap: 0.5rem;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-secondary);
  transition: color var(--transition-fast);
}

.header-phone:hover {
  color: var(--color-primary);
}

.header-phone svg {
  width: 1rem;
  height: 1rem;
}

/* Mobile menu toggle */
.header-toggle {
  display: block;
  padding: 0.5rem;
  margin-right: -0.5rem;
  color: var(--color-text);
}

.header-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Mobile menu panel */
.mobile-menu {
  display: none;
  background-color: #fff;
  border-top: 1px solid var(--color-border);
}

.mobile-menu.is-open {
  display: block;
}

.mobile-menu-nav {
  padding-block: 1rem;
}

.mobile-menu-nav a {
  display: block;
  padding: 0.75rem 1rem;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: var(--radius-btn);
  transition: background-color var(--transition-fast);
}

.mobile-menu-nav a:hover,
.mobile-menu-nav a.is-active {
  background-color: var(--color-surface);
}

.mobile-menu-cta {
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.mobile-menu-cta a {
  text-align: center;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.mobile-menu-cta a:hover {
  background-color: var(--color-primary-dark);
}

@media (min-width: 640px) {
  .header-cta { display: inline-flex; }
  .mobile-menu-cta { display: none; } /* il pulsante è già nella barra */
}

@media (min-width: 768px) {
  .header-phone { display: inline-flex; }
  /* Menu aperto su tablet e schermi fino a 1279px: voci in griglia, non una per riga */
  .mobile-menu-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem 1rem;
  }
}

/* Menu completo solo da 1280px: con 8 voci, pulsante e telefono l'header in una riga richiede
   circa 1140px; sotto le voci si spezzavano a metà parola. Fino a 1279px resta l'hamburger. */
@media (min-width: 1280px) {
  .header-nav { display: flex; }
  .header-toggle { display: none; }
  .mobile-menu { display: none !important; }
}

/* ============================================================
   7. FOOTER
   ============================================================ */
.site-footer {
  background-color: var(--color-secondary);
  color: #fff;
}

.footer-main {
  padding-block: 4rem;
}

.footer-grid {
  display: grid;
  gap: 3rem;
  /* Su mobile e tablet i due elenchi di link affiancati, marchio e contatti a tutta riga:
     il footer resta compatto */
  grid-template-columns: repeat(2, 1fr);
}

.footer-brand,
.footer-contact {
  grid-column: 1 / -1;
}

.footer-brand-logo {
  display: block;
  margin-bottom: 1rem;
}

.footer-brand-logo img {
  height: 3rem;
  width: auto;
}

.footer-brand-text {
  color: var(--on-dark-muted);
  font-size: var(--text-small);
}

/* Dati societari sotto il logo (denominazione, P.IVA e C.F., REA e capitale): più piccoli e tenui
   del testo del marchio, così la riga del copyright in fondo resta corta */
.footer-brand-legal {
  margin-top: 1rem;
  color: var(--on-dark-faint);
  font-size: var(--text-xs);
  line-height: 1.6;
}

.footer-col-title {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--line-h2);
  color: #fff;
  font-size: var(--text-body);
  margin-bottom: 1rem;
}

.footer-col a {
  display: block;
  color: var(--on-dark-muted);
  font-size: var(--text-small);
  padding-block: 0.25rem;
  transition: color var(--transition-fast);
}

.footer-col a:hover {
  color: #fff;
}

.footer-contact p {
  color: var(--on-dark-muted);
  font-size: var(--text-small);
  padding-block: 0.25rem;
}

.footer-contact p a {
  display: inline;
  padding-block: 0;
}

.footer-portals {
  border-top: 1px solid var(--on-dark-border);
}

.footer-portals-inner {
  padding-block: 1.5rem;
}

.footer-portals-title {
  color: var(--on-dark-faint);
  font-size: var(--text-xs);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.footer-portals-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

/* Nome del portale: link alla pagina dell'agenzia se l'URL è compilato in Dati Azienda */
.footer-portals-list a,
.footer-portals-list span {
  color: var(--on-dark-faint);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.025em;
  transition: color var(--transition-fast);
}

.footer-portals-list a:hover,
.footer-portals-list span:hover {
  color: var(--on-dark);
}

.footer-bottom {
  border-top: 1px solid var(--on-dark-border);
}

.footer-bottom-inner {
  padding-block: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Sul telefono l'ultima riga del footer finisce sopra il pulsante WhatsApp fisso (56px a 20px dal
   fondo): lo spazio sotto evita che il pulsante copra i link. Su desktop la riga è allineata a
   sinistra (sotto) e lascia libero l'angolo del pulsante */
@media (max-width: 639px) {
  .footer-bottom-inner { padding-bottom: 6rem; }
}

.footer-bottom-inner p {
  font-size: var(--text-small);
  color: var(--on-dark-faint);
}

.footer-bottom-inner a {
  color: var(--on-dark-faint);
  font-size: var(--text-small);
  transition: color var(--transition-fast);
}

.footer-bottom-inner a:hover {
  color: #fff;
}

.footer-legal {
  display: flex;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  /* Colonne di link larghe quanto il contenuto, a distanza fissa; il marchio prende il resto */
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) repeat(3, max-content);
    column-gap: 4rem;
  }
  .footer-brand,
  .footer-contact { grid-column: auto; }
  .footer-brand { max-width: 17rem; }
  /* Copyright | Powered by | Privacy | Cookie tutti a sinistra: l'angolo
     destro resta al pulsante WhatsApp e la riga sta sempre alla stessa altezza */
  .footer-bottom-inner {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0;
  }
  .footer-bottom-inner > p,
  .footer-legal {
    display: flex;
    align-items: center;
  }
  .footer-legal { gap: 0; }
  .footer-bottom-inner > * + *::before,
  .footer-legal > a + a::before {
    content: "|";
    margin-inline: 1rem;
    color: var(--on-dark-border);
  }
}

/* ============================================================
   8. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  border-radius: var(--radius-btn);
  padding: 0.75rem 1.5rem;
  font-size: var(--text-body);
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              color var(--transition-fast);
}

.btn-lg {
  padding: 1rem 2rem;
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

.btn-white {
  background-color: #fff;
  color: var(--color-primary);
}

.btn-white:hover {
  background-color: var(--color-surface);
}

/* Contorno come anello interno (box-shadow inset) e non come bordo: stesso aspetto, ma il
   pulsante non cresce dello spessore del bordo e ha la stessa altezza dei pulsanti pieni
   accanto. */
.btn-outline {
  box-shadow: inset 0 0 0 1px var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--primary-softer);
}

.btn-outline-light {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.30);
  color: #fff;
}

.btn-outline-light:hover {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.60);
}

/* Arrow link (testo + freccia) */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--text-small);
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

.link-arrow:hover {
  color: var(--color-primary-dark);
}

.link-arrow svg {
  width: 1rem;
  height: 1rem;
}

/* ============================================================
   9. GENERIC COMPONENTS
   ============================================================ */

/* Badge / pill */
.badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  color: #fff;
}

.badge-primary   { background-color: var(--color-primary); }
.badge-secondary { background-color: var(--color-secondary); }
.badge-accent    { background-color: var(--color-accent); }
/* "Venduto/Affittato": colore distinto (riprova sociale), volutamente fuori palette per spiccare */
.badge-venduto   { background-color: #C0392B; letter-spacing: 0.03em; text-transform: uppercase; }

/* Tempo di vendita accanto al badge nella scheda (es. "Venduto in 3 settimane") */
.venduto-tempo {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: #C0392B;
}
/* Tempo di vendita come riga in evidenza nelle card (riprova sociale) */
/* margin-top:auto: ancora la riga in fondo, appena sopra il footer, così resta
   allineata tra le card a prescindere dall'altezza di titolo/descrizione sopra. */
.venduto-tempo-card {
  margin: auto 0 0.5rem;
  font-size: var(--text-sm);
  font-weight: 700;
  color: #C0392B;
}

/* Open House: riga "data e ora" sulle card (immobile IN VENDITA valorizzato con un evento) */
/* margin-top:auto: vedi nota su .venduto-tempo-card - riga ancorata in fondo per l'allineamento. */
.openhouse-card {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: auto 0 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
}
.openhouse-card svg {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}
.openhouse-card strong { font-weight: 700; }

/* Open House: riga "data e ora" accanto al badge nella scheda immobile */
.openhouse-detail {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
}
.openhouse-detail svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Tag / chip */
.tag {
  display: inline-block;
  background-color: var(--color-surface);
  color: var(--color-secondary);
  font-size: var(--text-small);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
}

/* Breadcrumb */
.breadcrumb-section {
  padding-top: var(--header-height);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.breadcrumb {
  padding-block: 1rem;
  font-size: var(--text-small);
  color: var(--color-muted);
}

.breadcrumb a {
  color: var(--color-muted);
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

.breadcrumb .separator {
  margin-inline: 0.5rem;
}

.breadcrumb .current {
  color: var(--color-secondary);
  font-weight: 500;
}

/* Section intro (label + titolo + testo, centrato) */
.section-intro {
  text-align: center;
  max-width: var(--max-narrow);
  margin: 0 auto 4rem;
}

.section-intro-label {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.section-intro h2 {
  font-size: var(--text-h2);
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

/* :where() a specificità zero: vale per il sottotitolo, non per l'occhiello
   (.section-intro-label), che mantiene il suo stile. */
:where(.section-intro) p {
  font-size: var(--text-body-lg);
  color: var(--color-muted);
}

/* Testi centrati (intro di sezione, banner CTA, note sotto i form): righe di lunghezza simile,
   niente parola sola sull'ultima riga ("… per Vendere e / Affittare"). Stesso numero di righe;
   chi non supporta `balance` va a capo normalmente. */
:where(.section-intro, .cta-banner-content) :where(h2, p),
:where(.form-note) {
  text-wrap: balance;
}

/* Eyebrow label (allineato a sinistra, dentro le sezioni) */
.eyebrow {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.eyebrow-accent {
  color: var(--color-accent);
}

/* Su fondo scuro l'oro in piccolo si legge poco: bianco 80% come gli altri occhielli su scuro.
   L'oro resta sui fondi chiari (es. "La Nostra Perla" in Hospitality). */
.hero-open-house .eyebrow-accent {
  color: var(--on-dark);
}

/* Info box (CTA inline su sfondo chiaro) */
.info-box {
  background-color: var(--primary-softer);
  border: 1px solid var(--primary-soft);
  padding: 2rem;
  border-radius: var(--radius-card);
}

.info-box-title {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--line-h2);
  font-size: var(--text-h3);
  color: var(--color-secondary);
  margin-bottom: 0.75rem;
}

.info-box p {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

/* Coppia di azioni (bottoni affiancati) */
.btn-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .btn-row { flex-direction: row; }
}

/* ============================================================
   10. FORMS
   ============================================================ */
.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-secondary);
  margin-bottom: 0.375rem;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  font-size: var(--text-body);
  color: var(--color-text);
  background-color: #fff;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-muted);
  opacity: 0.6;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(27, 135, 176, 0.15);
}

/* Stato di errore applicato via JS */
.form-input.border-danger,
.form-textarea.border-danger,
.form-select.border-danger {
  border-color: var(--color-danger) !important;
}

.form-textarea {
  resize: vertical;
  min-height: 6rem;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2366748A' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

.form-checkbox {
  width: 1rem;
  height: 1rem;
  margin-top: 0.25rem;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.form-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}

.form-checkbox-row span {
  font-size: var(--text-small);
  color: var(--color-muted);
}

.form-checkbox-row a {
  color: var(--color-primary);
  text-decoration: underline;
}

.form-checkbox-row a:hover {
  color: var(--color-primary-dark);
}

.form-checkbox-row .req {
  color: var(--color-danger);
}

/* Messaggio di errore inline (toggle .hidden via JS) */
.field-error {
  font-size: var(--text-small);
  color: var(--color-danger);
  margin-top: 0.25rem;
}

.form-row {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .form-row { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   11. HERO (homepage)
   ============================================================ */
.hero {
  position: relative;
  padding-top: var(--header-height);
  background-color: var(--color-secondary);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  top: -15%;
  bottom: -15%;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.20;
}

/* Spazio sopra/sotto il testo come gli hero delle pagine interne (.page-hero-content): 80px sul
   telefono e tablet, 112px da 1024px. */
.hero-content {
  position: relative;
  padding-block: var(--section);
}

@media (min-width: 1024px) {
  .hero-content { padding-block: var(--section-lg); }
}

.hero-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.hero-label {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: var(--line-body);
  color: var(--on-dark);   /* occhielli su fondo scuro: bianco 80%, più leggibile dell'azzurro sulle foto */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: var(--line-hero);
  color: #fff;
  margin-bottom: 1.5rem;
}

.hero-text {
  font-size: var(--text-body-lg);
  color: var(--on-dark);
  margin-bottom: 2rem;
  max-width: 36rem;
}

.hero-note {
  font-size: var(--text-small);
  color: var(--on-dark-faint);
  margin-top: 1rem;
}

.hero-media img {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  width: 100%;
  aspect-ratio: 1280 / 1097; /* riserva lo spazio prima del load → niente CLS (ratio = immagine default) */
  object-fit: cover;
}

@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   12. PAGE HERO (pagine interne)
   ============================================================ */
.page-hero {
  position: relative;
  padding-top: var(--header-height);
  background-color: var(--color-secondary);
  overflow: hidden;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  top: -15%;
  bottom: -15%;
}

.page-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
}

.page-hero-content {
  position: relative;
  padding-block: var(--section);
}

.page-hero-inner {
  max-width: var(--max-narrow);
}

.page-hero-inner.is-centered {
  margin-inline: auto;
  text-align: center;
}

.page-hero-label {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--on-dark);   /* occhielli su fondo scuro: bianco 80%, più leggibile dell'azzurro sulle foto */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.page-hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: var(--line-hero);
  color: #fff;
  margin-bottom: 1.5rem;
}

.page-hero-text {
  font-size: var(--text-body-lg);
  color: var(--on-dark);
}

@media (min-width: 1024px) {
  .page-hero-content { padding-block: var(--section-lg); }
}

/* ============================================================
   13. CTA BANNER (sezione finale colorata)
   ============================================================ */
.cta-banner {
  position: relative;
  overflow: hidden;
  background-color: var(--color-primary);
}

.cta-banner-bg {
  position: absolute;
  inset: 0;
  top: -15%;
  bottom: -15%;
}

.cta-banner-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.20;
}

.cta-banner-content {
  position: relative;
  text-align: center;
  padding-block: var(--section);
}

.cta-banner-content h2 {
  font-size: var(--text-h2);
  color: #fff;
  margin-bottom: 1rem;
}

/* :not(.cta-banner-note): la nota sotto i pulsanti ha il suo stile (sotto), che questa regola,
   più specifica, altrimenti sovrascriverebbe */
.cta-banner-content > p:not(.cta-banner-note) {
  font-size: var(--text-body-lg);
  color: var(--on-dark);
  max-width: var(--max-narrow);
  margin: 0 auto 2rem;
}

.cta-banner-note {
  font-size: var(--text-small);
  color: var(--on-dark); /* 80%: sulla foto del banner un'opacità più bassa non si legge */
  margin-top: 1rem;
}

@media (min-width: 1024px) {
  .cta-banner-content { padding-block: var(--section-lg); }
}

/* ============================================================
   14. SECTION BUILDING BLOCKS
   ============================================================ */

/* Due colonne (testo + immagine) */
.two-col {
  display: grid;
  gap: 4rem;
  align-items: center;
}

.two-col img {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  width: 100%;
  aspect-ratio: 3 / 2; /* riserva lo spazio prima del load → niente CLS (ratio ≈ immagini default 3:2) */
  object-fit: cover;
}

.two-col h2 {
  font-size: var(--text-h2);
  color: var(--color-secondary);
  margin-bottom: 1.5rem;
}

/* Solo i paragrafi di testo della colonna, non quelli dei componenti annidati (icona+indirizzo,
   righe numerate, valori, badge, schede numeriche), che hanno margini e colori propri. :where()
   porta a zero la specificità della parte .two-col, così .eyebrow e simili restano validi. */
:where(.two-col > *) > p {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

.two-col p.is-lead {
  font-size: var(--text-body-lg);
}

@media (min-width: 1024px) {
  .two-col { grid-template-columns: 1fr 1fr; }

  /* Formato foto "Quadrata" scelto nel pannello (pagine_sezioni.formato_foto): per i testi lunghi,
     solo su desktop; su mobile la foto resta 3:2 */
  .two-col img.is-square { aspect-ratio: 1 / 1; }
}

/* Nota discreta a piè di sezione */
.section-note {
  text-align: center;
  color: var(--color-muted);
  font-size: var(--text-small);
  margin-top: 2rem;
}

/* Riga di statistiche (3 numeri in linea) */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* Riga dei contatori sotto le due colonne (Chi siamo): stesso stacco delle colonne fra loro */
.two-col + .stats-row {
  margin-top: 4rem;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-primary);
}

.stat-label {
  font-size: var(--text-small);
  color: var(--color-muted);
}

/* Lista di feature con icona check */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.feature-list-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.feature-icon {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--success-soft);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.feature-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-success);
}

.feature-list-item h3,
.feature-list-item p:first-child {
  font-weight: 600;
  color: var(--color-secondary);
}

.feature-list-item .feature-text {
  font-size: var(--text-small);
  color: var(--color-muted);
}

/* Card prodotto/valore generica con icona */
.feature-card {
  background-color: #fff;
  padding: 2rem;
  border-radius: var(--radius-card);
  border-top: 4px solid transparent;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-normal),
              transform var(--transition-normal),
              border-color var(--transition-normal);
}

.feature-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
  border-top-color: var(--color-primary);
}

.feature-card-icon {
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--primary-soft);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: background-color var(--transition-normal);
}

.feature-card:hover .feature-card-icon {
  background-color: var(--primary-strong);
}

.feature-card-icon svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-primary);
  transition: transform var(--transition-normal);
}

.feature-card:hover .feature-card-icon svg {
  transform: scale(1.1);
}

.feature-card h3 {
  font-size: var(--text-h4);
  color: var(--color-secondary);
  margin-bottom: 0.75rem;
}

.feature-card p {
  color: var(--color-muted);
}

/* Griglie responsive di card */
.card-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .card-grid-2,
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .card-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Con 1 o 2 card (un solo venduto, pochi Open House in calendario...) la riga si centra invece di
   lasciare il vuoto a destra; le card restano larghe come nella griglia piena. */
@media (min-width: 768px) {
  .card-grid-3:has(> :only-child) {
    grid-template-columns: calc((100% - 2rem) / 2);
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .card-grid-3:has(> :only-child) { grid-template-columns: calc((100% - 4rem) / 3); }
  .card-grid-3:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, calc((100% - 4rem) / 3));
    justify-content: center;
  }
}

.card-grid.is-contained {
  max-width: 56rem;
  margin-inline: auto;
}

/* ============================================================
   Card grid team - responsive per N agenti (1-N senza ridesign)
   ============================================================
   - Desktop ≥1024: 3 colonne fisse
   - Tablet ≥640: 2 colonne fisse
   - Mobile <640: scroll orizzontale con scroll-snap (CSS pure, no JS)
   Sta qui e non in gallery-extra.css (caricato in ritardo): sono regole di forma, lì la griglia
   comparirebbe in colonna e poi si ricomporrebbe (spostamento del layout, CLS).
*/

.card-grid-team {
  display: grid;
  gap: 2rem;
}

/* Mobile: scroll orizzontale con snap (swipe-able nativo browser) */
@media (max-width: 639px) {
  .card-grid-team {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    gap: 1rem;
    padding-bottom: 1rem;
    /* Bordo soft scrolla fuori dal container */
    margin-inline: -1rem;
    padding-inline: 1rem;
    /* Barra di scorrimento nascosta, scorrimento col dito attivo: che si scorre lo dice la
       card successiva in vista */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .card-grid-team > * {
    flex: 0 0 80%;        /* ogni card occupa 80% width → si vede inizio della prossima */
    max-width: 320px;
    scroll-snap-align: start;
  }
  .card-grid-team::-webkit-scrollbar {
    display: none;
  }
}

/* Tablet: 2 colonne */
@media (min-width: 640px) and (max-width: 1023px) {
  .card-grid-team {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 3 colonne fisse (con 6 persone due righe piene da 3, senza righe a metà) */
@media (min-width: 1024px) {
  .card-grid-team {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1280px;
    margin-inline: auto;
  }
  /* Centra contenuto se poche card (1-2) per evitare card stretched larghissime */
  .card-grid-team.is-contained {
    max-width: 56rem;
  }
}

/* Recensioni (home): sul telefono, dove la griglia sarebbe in colonna, card in fila da scorrere
   come il team, con l'inizio della successiva in vista. Da 768px resta la griglia .card-grid-3. */
@media (max-width: 767px) {
  .card-grid-swipe {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    gap: 1rem;
    /* Lo scorrimento taglia ciò che esce dalla fila: spazio sopra per le virgolette (.quote-mark
       a -0.75rem), compensato dal margine, così la sezione non si sposta */
    padding-block: 1rem;
    margin-top: -1rem;
    margin-inline: -1rem;
    padding-inline: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .card-grid-swipe > * {
    flex: 0 0 80%;
    max-width: 320px;
    scroll-snap-align: start;
  }
  .card-grid-swipe::-webkit-scrollbar {
    display: none;
  }
}

/* Da 640px il container ha 1.5rem di margine: la fila arriva comunque al bordo dello schermo */
@media (min-width: 640px) and (max-width: 767px) {
  .card-grid-swipe {
    scroll-padding-inline: 1.5rem;
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
  }
}

/* Griglia di piccoli fatti/specifiche */
/* Dati del Palazzo (Hospitality): un'unica fascia divisa da linee sottili, 2×2 sul telefono e 4 in
   fila da 640px. minmax(0, 1fr): le colonne
   non si allargano oltre la fascia. */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 2rem;
  padding-block: 0.5rem;
  background-color: var(--color-surface);
  border-radius: var(--radius-card);
}

.spec {
  padding: 0.75rem 0.5rem;
  text-align: center;
}

.spec:nth-child(even) {
  border-left: 1px solid var(--color-border);
}

.spec:nth-child(n + 3) {
  border-top: 1px solid var(--color-border);
}

@media (min-width: 640px) {
  .spec-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .spec:not(:first-child) {
    border-left: 1px solid var(--color-border);
  }

  .spec:nth-child(n + 3) {
    border-top: 0;
  }
}

.spec-number {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-primary);
}

.spec-label {
  font-size: var(--text-small);
  color: var(--color-muted);
}

/* Riga icona + testo (indirizzo, contatti inline) */
.icon-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.icon-row svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

.icon-row a {
  color: var(--color-primary);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.icon-row a:hover {
  color: var(--color-primary-dark);
}

.icon-row span,
.icon-row p {
  color: var(--color-muted);
}

.icon-row.is-spaced {
  margin-bottom: 1rem;
}

/* Sezione scura: testo e liste su fondo secondary */
.on-dark-text {
  font-size: var(--text-body-lg);
  color: var(--on-dark);
}

.on-dark-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.on-dark-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--on-dark);
}

.on-dark-list svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-primary-light);
  flex-shrink: 0;
}

/* ============================================================
   15. PROPERTY CARD (card immobile)
   ============================================================ */
.property-card {
  background-color: #fff;
  border-radius: var(--radius-card);
  border-top: 4px solid transparent;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-normal),
              transform var(--transition-normal),
              border-color var(--transition-normal);
}

.property-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
  border-top-color: var(--color-primary);
}

.property-card-image {
  position: relative;
  overflow: hidden;
}

.property-card-image img {
  width: 100%;
  height: 14rem;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.property-card:hover .property-card-image img {
  transform: scale(1.05);
}

.property-card-badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  gap: 0.5rem;
}

.property-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.property-card-location {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-bottom: 0.25rem;
}

.property-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}

/* Riga di icone specifiche (locali / mq / bagni) */
.property-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.property-specs span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.property-specs svg {
  width: 1rem;
  height: 1rem;
}

.property-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  margin-top: auto;
  border-top: 1px solid var(--color-border);
}

/* Quando una riga evento (Open House / Venduto) precede il footer è lei a portare
   il margin-top:auto: qui azzero quello del footer, altrimenti i due auto si
   spartiscono lo spazio libero e si aprirebbe un gap tra riga evento e footer. */
.openhouse-card + .property-card-footer,
.venduto-tempo-card + .property-card-footer {
  margin-top: 0;
}

.property-price {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-primary);
}

/* ============================================================
   16. PROPERTY DETAIL (pagina immobile singolo)
   ============================================================ */
.property-gallery {
  padding-top: var(--header-height);
}

.property-gallery-grid {
  display: grid;
  gap: 1rem;
  padding-block: 2rem;
}

.property-gallery-main img {
  width: 100%;
  height: 20rem;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.property-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.property-gallery-thumbs img {
  width: 100%;
  height: 10rem;
  object-fit: cover;
  border-radius: var(--radius-card);
}

@media (min-width: 1024px) {
  .property-gallery-grid { grid-template-columns: 2fr 1fr; }
  .property-gallery-main img { height: 100%; min-height: 24rem; }
  .property-gallery-thumbs { grid-template-columns: 1fr; }
}

/* ============================================================
   Gallery immobile - replica fedele di Airbnb (in style.css e non in gallery-extra.css,
   caricato in ritardo: sono regole di forma, lì la galleria si ricomporrebbe = CLS)
   ============================================================
   Pattern: 1 hero a sinistra + grid 2x2 di thumb a destra (5 foto totali visibili).
   Tecnica: ogni cella ha aspect-ratio fisso (maschera) + object-fit: cover sulle img
   → ritaglio uniforme indipendentemente dall'orientamento delle foto.
   Border-radius solo sui 4 corner ESTERNI del grid (non su ogni cella).
*/

.property-gallery-section {
  padding-block: 1.25rem;
}

.property-gallery-grid {
  position: relative;
  display: grid;
  gap: .5rem;
  border-radius: 18px;
  overflow: hidden;          /* taglia i corner delle celle interne, lascia solo i 4 esterni del grid */
  padding: 0;                /* azzera padding-block ereditato da style.css */
  width: 100%;               /* riempie completamente il container parent */
}

/* ============ Cella generica ============ */
.property-gallery-cell {
  position: relative;
  display: block;
  overflow: hidden;
  background: #efe9e2;       /* placeholder warm-grey mentre carica */
  cursor: zoom-in;
}
.property-gallery-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 500ms cubic-bezier(.2,.8,.2,1), filter 250ms ease;
}
.property-gallery-cell:hover img {
  filter: brightness(.92);
  transform: scale(1.02);
}

/* ============ Mobile: hero in alto, grid 2x2 thumb sotto ============ */
@media (max-width: 767px) {
  .property-gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }
  .property-gallery-cell--main {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }
  .property-gallery-cell--thumb {
    aspect-ratio: 1 / 1;
  }
}

/* ============ Desktop: hero a SX (2 colonne) + 4 thumb 2x2 a DX ============ */
@media (min-width: 768px) {
  .property-gallery-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    /* Altezza esplicita responsive (no aspect-ratio per non restringere la width) */
    height: clamp(380px, 42vw, 540px);
  }
  .property-gallery-cell--main {
    grid-column: 1 / 3;
    grid-row: 1 / 3;          /* span entrambe le righe = quadrato grande */
  }
  /* I 4 thumb si dispongono automaticamente nelle 4 celle rimanenti */
  .property-gallery-cell--thumb {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* ============ Bottone "Mostra tutte le N foto" ============ */
/* Coerente con .btn del sito (font, weight, radius) ma compatto e floating
   in basso-destra sopra l'angolo della 4° thumb. */
.property-gallery-cta {
  position: absolute;
  bottom: .85rem;
  right: .85rem;
  z-index: 3;
  background-color: #fff;
  color: var(--color-secondary);
  border: none;
  border-radius: var(--radius-btn);
  padding: .6rem 1rem;
  font-family: var(--font-heading);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  box-shadow: none;
  transition:
    background-color var(--transition-fast, 180ms ease),
    color var(--transition-fast, 180ms ease),
    transform 120ms ease;
  white-space: nowrap;
  line-height: 1.2;
}
.property-gallery-cta:hover {
  background-color: var(--color-secondary);
  color: #fff;
  transform: translateY(-1px);
}
.property-gallery-cta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.property-gallery-cta:active {
  transform: translateY(0);
}
.property-gallery-cta svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Su mobile il bottone resta in basso-destra, leggermente più compatto */
@media (max-width: 767px) {
  .property-gallery-cta {
    bottom: .6rem;
    right: .6rem;
    padding: .45rem .8rem;
    font-size: .78rem;
  }
  .property-gallery-cta svg {
    width: 14px;
    height: 14px;
  }
}

.property-layout {
  display: grid;
  gap: 4rem;
}

@media (min-width: 1024px) {
  .property-layout { grid-template-columns: 2fr 1fr; }
}

.property-detail-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.property-detail-location {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-muted);
}

.property-detail-location svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

.property-detail-title {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

.property-detail-head {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
}

.property-detail-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
}

.property-detail-price {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-primary);
}

.property-detail-sqm {
  color: var(--color-muted);
}

/* Griglia feature numeriche dell'immobile */
.property-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 3rem;
}

.property-feature {
  background-color: var(--color-surface);
  padding: 1.25rem;
  border-radius: var(--radius-card);
  text-align: center;
}

.property-feature svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-primary);
  margin: 0 auto 0.5rem;
}

.property-feature-number {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--color-secondary);
}

.property-feature-label {
  font-size: var(--text-small);
  color: var(--color-muted);
}

@media (min-width: 640px) {
  .property-features { grid-template-columns: repeat(4, 1fr); }
}

/* Elenco dettagli (chiave/valore) */
.detail-list {
  display: grid;
  gap: 0;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.detail-row .label {
  color: var(--color-muted);
}

.detail-row .value {
  font-weight: 500;
  color: var(--color-secondary);
}

@media (min-width: 640px) {
  .detail-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
  }
}

/* Mappa embedded */
.map-embed {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-top: 2rem;
}

.map-embed iframe {
  width: 100%;
  height: 400px;
  border: 0;
  display: block;
}

/* ============================================================
   17. SIDEBAR (immobile / articolo / agente)
   ============================================================ */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sidebar-card {
  background-color: var(--color-surface);
  padding: 1.5rem;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.sidebar-card-title {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--line-h2);
  font-size: var(--text-h4);
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

.sidebar-card-text {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

/* Segnali di fiducia (icona + testo) */
.trust-signal {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-bottom: 0.75rem;
}

.trust-signal svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-success);
  flex-shrink: 0;
}

/* CTA in sidebar (sfondo colorato) */
.sidebar-cta {
  background-color: var(--color-primary);
  padding: 1.5rem;
  border-radius: var(--radius-card);
  text-align: center;
}

.sidebar-cta-title {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--line-h2);
  font-size: var(--text-h4);
  color: #fff;
  margin-bottom: 0.75rem;
}

.sidebar-cta p {
  font-size: var(--text-small);
  color: var(--on-dark);
  margin-bottom: 1rem;
}

@media (min-width: 1024px) {
  .sidebar.is-sticky {
    position: sticky;
    top: 7rem;
  }
}

/* ============================================================
   18. FILTERS (pagina immobili)
   ============================================================ */
.filters-bar {
  background-color: #fff;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: var(--header-height);
  z-index: 40;
}

.filters-bar-inner {
  padding-block: 0.75rem;
}

.filters-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block: 0.5rem;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-secondary);
}

.filters-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-primary);
}

.filters-toggle .chevron {
  color: var(--color-muted);
  transition: transform var(--transition-fast);
}

.filters-panel {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.75rem;
}

.filters-panel.is-open {
  display: flex;
}

.filters-label {
  display: none;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-secondary);
  margin-right: 0.5rem;
}

.filter-select {
  appearance: none;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  padding: 0.625rem 2.5rem 0.625rem 1rem;
  font-size: var(--text-small);
  color: var(--color-text);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2366748A' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}

/* Menu dei filtri: stessa larghezza fra loro e, sul telefono, a tutta riga come il pulsante
   "Cerca". Solo la barra filtri:
   il menu di ordinamento dei risultati usa la stessa classe e resta com'è */
.filters-panel .filter-select { width: 100%; }

@media (min-width: 1024px) {
  .filters-toggle { display: none; }
  /* Riga unica: "Filtra per:", 4 menu uguali che riempiono lo spazio, "Cerca"; tutti alti uguali */
  .filters-panel {
    display: grid !important;
    grid-template-columns: auto repeat(4, minmax(0, 1fr)) auto;
    align-items: stretch;
    gap: 0.75rem;
    padding-top: 0;
  }
  .filters-label { display: inline; align-self: center; }
  .filters-panel .btn { white-space: nowrap; }
}

/* Barra dei risultati */
.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
/* Il form dell'ordinamento non genera un box: il <select> resta figlio flex della results-bar
   (allineamento identico al placeholder precedente). */
.sort-form { display: contents; }

.results-count {
  font-size: var(--text-small);
  color: var(--color-muted);
}

.results-count strong,
.results-count span {
  color: var(--color-secondary);
  font-weight: 600;
}

/* Property grid */
.property-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 640px) {
  .property-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .property-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Paginazione */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3rem;
}

.pagination a,
.pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.5rem;
  border-radius: var(--radius-btn);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-secondary);
  background-color: var(--color-surface);
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
}

.pagination a:hover {
  background-color: var(--color-primary);
  color: #fff;
}

.pagination .is-current {
  background-color: var(--color-primary);
  color: #fff;
}

/* ============================================================
   19. BLOG / ARTICOLI
   ============================================================ */
.blog-card {
  background-color: #fff;
  border-radius: var(--radius-card);
  border-top: 4px solid transparent;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow var(--transition-normal),
              transform var(--transition-normal),
              border-color var(--transition-normal);
}

.blog-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
  border-top-color: var(--color-primary);
}

.blog-card-image {
  position: relative;
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}

.blog-card-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.blog-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card-date {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}

.blog-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 0.75rem;
  transition: color var(--transition-fast);
}

.blog-card:hover .blog-card-title {
  color: var(--color-primary);
}

.blog-card-text {
  color: var(--color-muted);
  flex: 1;
  margin-bottom: 1rem;
}

/* Callout (riquadro informativo centrato) */
.callout {
  background-color: #fff;
  padding: 2rem;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  max-width: var(--max-narrow);
  margin: 4rem auto 0;
  text-align: center;
}

.callout h2 {
  font-size: var(--text-h3);
  color: var(--color-secondary);
  margin-bottom: 0.75rem;
}

.callout p {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

/* Articolo singolo */
.article-layout {
  display: grid;
  gap: 4rem;
}

.article-hero {
  padding-top: 2rem;
}

.article-hero img {
  width: 100%;
  height: 16rem;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  font-size: var(--text-small);
  color: var(--color-muted);
}

.article-body p {
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.article-body h2 {
  font-size: var(--text-h2);
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

.article-body h3 {
  font-size: var(--text-h3);
  color: var(--color-secondary);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.article-body ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.article-body ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--color-muted);
}

.article-body ul li svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.article-body strong {
  color: var(--color-secondary);
  font-weight: 600;
}

.article-body img {
  border-radius: var(--radius-card);
  margin-block: 1.5rem;
}

/* CTA inline nell'articolo */
.article-cta {
  background-color: var(--color-secondary);
  padding: 2rem;
  border-radius: var(--radius-card);
  margin-block: 3rem;
}

.article-cta-title {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--line-h2);
  font-size: var(--text-h3);
  color: #fff;
  margin-bottom: 0.75rem;
}

.article-cta p {
  color: var(--on-dark);
  margin-bottom: 1.5rem;
}

/* Card documento (dentro articolo) */
.doc-grid {
  display: grid;
  gap: 1rem;
  margin-block: 1.5rem;
}

.doc-card {
  background-color: var(--color-surface);
  padding: 1.25rem;
  border-radius: var(--radius-card);
}

.doc-card-title {
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 0.25rem;
}

.doc-card-text {
  font-size: var(--text-small);
  color: var(--color-muted);
}

@media (min-width: 640px) {
  .doc-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Sidebar articolo */
.sidebar-section-title {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.author-card {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-name {
  font-weight: 600;
  color: var(--color-secondary);
}

.author-role {
  font-size: var(--text-small);
  color: var(--color-muted);
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.related-item {
  display: block;
}

/* Separatore orizzontale */
.divider {
  border-top: 1px solid var(--color-border);
}

.related-item-title {
  font-weight: 500;
  color: var(--color-secondary);
  transition: color var(--transition-fast);
}

.related-item:hover .related-item-title {
  color: var(--color-primary);
}

.related-item-date {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-top: 0.25rem;
}

/* Avatar con iniziali */
.avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--text-small);
  flex-shrink: 0;
}

.avatar-primary   { background-color: var(--color-primary); color: #fff; }
.avatar-secondary { background-color: var(--color-secondary); color: #fff; }

/* Categorie blog */
.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background-color: var(--color-surface);
  border-radius: var(--radius-full);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
}

.category-pill:hover,
.category-pill.is-active {
  background-color: var(--color-primary);
  color: #fff;
}

/* Newsletter box */
.newsletter {
  background-color: var(--color-secondary);
  padding: 3rem 2rem;
  border-radius: var(--radius-card);
  text-align: center;
}

.newsletter h2 {
  color: #fff;
  margin-bottom: 0.75rem;
}

.newsletter p {
  color: var(--on-dark);
  max-width: var(--max-narrow);
  margin: 0 auto 1.5rem;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: var(--max-narrow);
  margin-inline: auto;
}

@media (min-width: 640px) {
  .newsletter-form { flex-direction: row; }
  .newsletter-form .form-input { flex: 1; }
}

@media (min-width: 1024px) {
  .article-layout { grid-template-columns: 2fr 1fr; }
}

/* ============================================================
   20. CARD GALLERIE / TEAM / ZONE
   ============================================================ */

/* Card team / agente (anteprima) */
.team-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow var(--transition-normal);
}

.team-card:hover {
  box-shadow: var(--shadow-card-hover);
}

.team-card img {
  width: 100%;
  aspect-ratio: 1 / 1;   /* quadrata a ogni larghezza */
  height: auto;
  object-fit: cover;
  object-position: top;
}

.team-card-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.team-card-name {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 0.25rem;
}

.team-card-role {
  color: var(--color-primary);
  font-weight: 500;
  font-size: var(--text-small);
  margin-bottom: 1rem;
}

.team-card-text {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
  flex: 1;
}

/* ============================================================
   GALLERIA A MOSAICO delle pagine (Open House, Hospitality) - partials/galleria-mosaico
   Mosaico alternato: riga 1 larga + stretta, riga 2 stretta + larga (4 foto). Sul telefono:
   una grande, due affiancate, una larga. Con meno di 4 foto la griglia si adatta.
   Lightbox e pulsante "Mostra tutte" come la scheda immobile (.property-gallery-cta).
   ============================================================ */
.galleria-mosaico {
  position: relative;
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 13rem 9rem 9rem;
  grid-template-areas: "a a" "b c" "d d";
}
.galleria-mosaico-cell {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-card);
}
.galleria-mosaico-cell:nth-child(1) { grid-area: a; }
.galleria-mosaico-cell:nth-child(2) { grid-area: b; }
.galleria-mosaico-cell:nth-child(3) { grid-area: c; }
.galleria-mosaico-cell:nth-child(4) { grid-area: d; }
.galleria-mosaico-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}
.galleria-mosaico-cell:hover img { transform: scale(1.03); }

/* Meno di 4 foto */
.galleria-mosaico--1 { grid-template-columns: 1fr; grid-template-rows: 16rem; grid-template-areas: "a"; }
.galleria-mosaico--2 { grid-template-rows: 13rem 13rem; grid-template-areas: "a a" "b b"; }
.galleria-mosaico--3 { grid-template-rows: 13rem 10rem; grid-template-areas: "a a" "b c"; }

@media (min-width: 640px) {
  .galleria-mosaico {
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, 17rem);
    grid-template-areas: "a a b" "c d d";
  }
  .galleria-mosaico--1 { grid-template-columns: 1fr; grid-template-rows: 28rem; grid-template-areas: "a"; }
  .galleria-mosaico--2 { grid-template-rows: 22rem; grid-template-areas: "a a b"; }
  .galleria-mosaico--3 { grid-template-areas: "a a b" "a a c"; }
}

/* Card zona/quartiere (immagine + overlay) */
.zone-card {
  position: relative;
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.zone-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.zone-card:hover img {
  transform: scale(1.05);
}

.zone-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--overlay-dark), rgba(1, 86, 117, 0.2), transparent);
}

.zone-card-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.25rem;
}

.zone-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: 700;
  color: #fff;
}

.zone-card-count {
  font-size: var(--text-small);
  color: var(--on-dark-muted);
}

/* ============================================================
   21. STEPS / FAQ / TESTIMONIAL / COUNTER
   ============================================================ */

/* Steps (processo numerato) */
.steps-grid {
  display: grid;
  gap: 2rem;
}

.step {
  position: relative;
  text-align: center;
}

.step-number {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  background-color: var(--color-primary);
  color: #fff;
  margin: 0 auto 1.5rem;
}

.step-number-accent {
  background-color: var(--color-accent);
  color: #fff;   /* numero step 4: bianco su oro, il navy si legge poco */
}

.step-title {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 0.75rem;
}

.step-text {
  color: var(--color-muted);
}

@media (min-width: 768px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .steps-grid { grid-template-columns: repeat(4, 1fr); }
}

/* FAQ accordion */
.faq-item {
  background-color: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: 1rem;
}

.faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-secondary);
  transition: color var(--transition-fast);
}

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-summary:hover {
  color: var(--color-primary);
}

.faq-summary svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-muted);
  flex-shrink: 0;
  margin-left: 1rem;
  transition: transform var(--transition-fast);
}

.faq-item[open] .faq-summary svg {
  transform: rotate(180deg);
}

.faq-content {
  padding: 0 1.5rem 1.5rem;
}

.faq-content p {
  color: var(--color-muted);
}

/* Testimonial */
.testimonial-grid {
  display: grid;
  gap: 2rem;
}

.testimonial-card {
  position: relative;
  background-color: #fff;
  padding: 2rem;
  border-radius: var(--radius-card);
  border-left: 4px solid var(--color-primary);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.testimonial-text {
  color: var(--color-text);
  flex: 1;
  margin-bottom: 1.5rem;
}

.testimonial-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1.5rem;
  margin-top: auto;
  border-top: 1px solid var(--color-border);
}

.testimonial-author {
  font-weight: 600;
  color: var(--color-secondary);
}

.testimonial-role {
  font-size: var(--text-small);
  color: var(--color-muted);
}

.star-rating {
  display: flex;
  gap: 0.125rem;
}

.star-rating svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--color-accent);
  color: var(--color-accent);
}

@media (min-width: 640px) {
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Counter / statistiche numeriche */
.counter-grid {
  display: grid;
  /* 2×2 anche sul telefono: in colonna i 4 contatori occuperebbero troppo spazio */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1rem;
  text-align: center;
}

.counter-number {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}

.counter-label {
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (min-width: 640px) {
  .counter-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

@media (min-width: 1024px) {
  .counter-grid { grid-template-columns: repeat(4, 1fr); }
  .counter-number { font-size: 3rem; }
}

/* ============================================================
   22. AGENTE (pagina profilo)
   ============================================================ */
.agent-layout {
  display: grid;
  gap: 4rem;
}

.agent-sidebar-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.agent-sidebar-card img {
  width: 100%;
  height: 18rem;
  object-fit: cover;
  object-position: top;
}

.agent-sidebar-info {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.agent-sidebar-cta {
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.agent-name {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}

.agent-role {
  font-size: var(--text-h4);
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: 2rem;
}

.agent-bio {
  margin-bottom: 3rem;
}

.agent-bio h2 {
  font-size: var(--text-h2);
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

.agent-bio p {
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.agent-bio p.is-lead {
  font-size: var(--text-body-lg);
}

.agent-block {
  margin-bottom: 3rem;
}

.agent-block h2 {
  font-size: var(--text-h2);
  color: var(--color-secondary);
  margin-bottom: 1.5rem;
}

.competence-grid {
  display: grid;
  gap: 1rem;
}

.competence-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background-color: var(--color-surface);
  padding: 1.25rem;
  border-radius: var(--radius-card);
}

.competence-item svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-success);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.competence-item span {
  color: var(--color-muted);
}

.zone-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .competence-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .agent-layout { grid-template-columns: 1fr 2fr; }
}

/* ============================================================
   23. CONTATTI / VALUTAZIONE
   ============================================================ */
.contact-grid {
  display: grid;
  gap: 4rem;
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* Cerchio come le altre icone affiancate a un testo (nel sito niente icone in riquadro) */
.contact-info-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background-color: var(--primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.contact-info-item h3 {
  font-size: var(--text-h4);
  color: var(--color-secondary);
  margin-bottom: 0.25rem;
}

.contact-info-item p {
  color: var(--color-muted);
}

.contact-info-item a {
  color: var(--color-primary);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.contact-info-item a:hover {
  color: var(--color-primary-dark);
}

.contact-map {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  min-height: 400px;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 0;
  display: block;
}

.form-card {
  background-color: #fff;
  padding: 2rem;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-card.is-surface {
  background-color: var(--color-surface);
  box-shadow: none;
}

.form-card h2,
.form-card h3 {
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}

.form-card-intro {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

.valuation-grid {
  display: grid;
  gap: 4rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .valuation-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   24. PROSE (testo lungo generico)
   ============================================================ */
.prose {
  color: var(--color-text);
}

.prose p {
  margin-bottom: 1rem;
}

.prose h2 {
  font-size: var(--text-h3);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.prose h3 {
  font-size: var(--text-h4);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.prose ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.prose ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

/* Link nei testi da editor. In .article-body solo dentro paragrafi ed elenchi: lì vivono anche
   condivisione e pulsante CTA (link in div, esclusi); .note-box a ha il suo stile. :where tiene la
   specificità a (0,1,1), come .prose a. */
.prose a,
.article-body :where(p, li) a:not(:where(.note-box a)) {
  color: var(--color-primary);
  text-decoration: underline;
}

.prose strong {
  font-weight: 600;
}

/* ============================================================
   25. ELEMENTI AGGIUNTIVI
   ============================================================ */

/* Articolo: layout a sezioni e testi introduttivi */
.article-body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.article-title {
  font-family: var(--font-heading);
  font-size: var(--text-h1); /* come il titolo della scheda immobile: i titoli degli articoli sono frasi lunghe */
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 1.5rem;
}

.article-lead {
  font-size: var(--text-body-lg);
  color: var(--color-muted);
  margin-bottom: 3rem;
}

.article-body p:last-child {
  margin-bottom: 0;
}

/* Riquadro nota evidenziato (dentro testo lungo) */
.note-box {
  background-color: var(--primary-softer);
  border-left: 4px solid var(--color-primary);
  padding: 1.5rem;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

.note-box p {
  font-weight: 500;
  color: var(--color-secondary);
  margin-bottom: 0;
}

.note-box a {
  color: var(--color-primary);
  font-weight: 600;
}

.note-box a:hover {
  color: var(--color-primary-dark);
}

/* Titolo di sezione allineato a sinistra */
.section-heading {
  font-size: var(--text-h2);
  color: var(--color-secondary);
  margin-bottom: 2rem;
}

/* Avatar con icona */
.avatar svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Lista di voci con spunta */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.check-list svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-success);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.check-list span {
  color: var(--color-muted);
}

/* two-col: ordine invertito su mobile (testo prima dell'immagine) */
.two-col.reverse-mobile > *:first-child { order: 2; }
.two-col.reverse-mobile > *:last-child { order: 1; }

@media (min-width: 1024px) {
  .two-col.reverse-mobile > *:first-child,
  .two-col.reverse-mobile > *:last-child { order: 0; }
}

/* Testo lungo su due colonne bilanciate (desktop); una colonna su tablet/mobile.
   Usato in Chi siamo per il racconto della squadra. */
.text-columns {
  max-width: 64rem;
  margin-inline: auto;
}

.text-columns p {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .text-columns {
    column-count: 2;
    column-gap: 4rem;
  }
}

/* Pannello su sfondo chiaro */
.panel {
  background-color: var(--color-surface);
  padding: 2rem;
  border-radius: var(--radius-card);
}

.panel h3 {
  font-size: var(--text-h3);
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

/* Lista di righe numerate */
.numbered-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.numbered-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background-color: #fff;
  border-radius: var(--radius-btn);
}

.numbered-badge {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--primary-soft);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.numbered-row p {
  color: var(--color-muted);
}

/* Coppia di bottoni centrata */
.btn-row.is-centered {
  justify-content: center;
}

/* Bottone secondario */
.btn-secondary {
  background-color: var(--color-secondary);
  color: #fff;
}

.btn-secondary:hover {
  background-color: var(--color-secondary-dark);
}

/* Container ristretto */
.container.is-narrow {
  max-width: var(--max-narrow);
}

/* Valore evidenziato (es. orari) */
.value-strong {
  font-weight: 500;
  color: var(--color-text);
}

/* Card informativa su sfondo bianco */
.info-card {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: 2rem;
}

.info-card h3 {
  font-size: var(--text-h4);
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

/* Nota sotto a un form */
.form-note {
  font-size: var(--text-small);
  color: var(--color-muted);
  text-align: center;
}

/* Gruppo di consensi (checkbox) */
.form-consent {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Paragrafo introduttivo */
.lead {
  font-size: var(--text-body-lg);
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

/* Toggle filtri: gruppo icona + testo */
.filters-toggle > span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 1024px) {
  .filters-bar-inner { padding-block: 1.25rem; }
}

/* Badge singolo sulla card immobile */
.property-card-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

/* Testo descrittivo nella card immobile */
.property-card-text {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-bottom: 1rem;
}

/* Link dentro una nota di sezione */
.section-note a {
  color: var(--color-primary);
  font-weight: 600;
}

.section-note a:hover {
  color: var(--color-primary-dark);
}

/* --- Hero Open House --- */
.hero-open-house {
  position: relative;
  padding-top: var(--header-height);
  background-color: var(--color-secondary);
  overflow: hidden;
}

.hero-open-house-bg {
  position: absolute;
  inset: 0;
}

.hero-open-house-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
}

.hero-open-house-content {
  position: relative;
  padding-block: 6rem;
}

.hero-open-house-inner {
  max-width: 48rem;
}

.hero-open-house-title {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  margin-bottom: 1.5rem;
}

.hero-open-house-text {
  font-size: var(--text-body-lg);
  color: var(--on-dark);
  max-width: var(--max-narrow);
  margin-bottom: 2rem;
}

.hero-open-house-note {
  font-size: var(--text-small);
  color: var(--on-dark-faint);
  margin-top: 1rem;
}

@media (min-width: 1024px) {
  .hero-open-house-content { padding-block: 8rem; }
}

/* Bottone accent */
.btn-accent {
  background-color: var(--color-accent);
  color: #fff;   /* testo bianco su oro, il navy si legge poco */
}

.btn-accent:hover {
  background-color: var(--color-accent-light);
}

/* Immagine con badge flottante */
.media-float {
  position: relative;
}

.float-badge {
  display: none;
  position: absolute;
  bottom: -1.5rem;
  left: -1.5rem;
  background-color: var(--color-primary);
  color: #fff;
  /* Spaziature esplicite: 24px sopra, ~18px fra "3x" e scritta, ~42px sotto (altezza 146px). */
  padding: 1.5rem 1.5rem 2.65rem;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-hover);
}

.float-badge p:first-child {
  font-family: var(--font-heading);
  font-size: 2.5rem;   /* "3x" grande per bilanciare il riquadro sotto */
  line-height: 1.1;    /* contenuto nel box senza sbordare */
  font-weight: 700;
  margin: 0 0 1.15rem;
  color: #fff;   /* "3x" sempre bianco, leggibile sia su blu (primary) che su oro (accent) */
}

.float-badge p:last-child {
  font-size: var(--text-small);
  color: var(--on-dark);
  line-height: 1.2;
  margin: 0;
}

@media (min-width: 1024px) {
  .float-badge { display: block; }
}

/* Connettore tratteggiato fra gli step */
.step-connector {
  display: none;
}

@media (min-width: 1024px) {
  .step-connector {
    display: block;
    position: absolute;
    top: 2rem;
    left: 60%;
    width: 80%;
    border-top: 2px dashed var(--color-border);
  }
}

/* Testo in grassetto dentro la check-list */
.check-list strong {
  color: var(--color-secondary);
  font-weight: 600;
}

/* Contenitore FAQ */
.faq-list {
  max-width: 48rem;
  margin-inline: auto;
}

/* Intestazione della scheda immobile (titolo + prezzo) */
.property-block {
  margin-bottom: 3rem;
}

.property-block h2 {
  font-size: var(--text-h2);
  color: var(--color-secondary);
  margin-bottom: 1.5rem;
}

.property-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--color-muted);
}

/* Form impilato (campi in colonna) */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* --- Homepage --- */

/* Immagine hero affiancata (nascosta su mobile) */
.hero-media {
  display: none;
}

@media (min-width: 1024px) {
  .hero-media { display: block; }
}

/* Sezione contatori numerici */
.counter-section {
  padding-block: 4rem;
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
  .counter-section { padding-block: 5rem; }
}

.counter-unit {
  font-size: 1.5rem;
  color: var(--color-muted);
}

/* Badge in alto a destra sulla card immobile */
.property-card-badge-right {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

/* Footer di sezione (link / nota centrati) */
.section-footer {
  text-align: center;
  margin-top: 3rem;
}

/* Punti di forza affiancati */
.value-points {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .value-points { flex-direction: row; }
}

/* Riga valutazione (stelle + punteggio) */
.rating-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: var(--text-small);
  color: var(--color-muted);
}

.rating-row strong {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-secondary);
}

/* Virgolette decorative del testimonial */
.quote-mark {
  position: absolute;
  top: -0.75rem;
  left: 1.5rem;
  font-family: var(--font-heading);
  font-size: 3.75rem;
  line-height: 1;
  color: rgba(27, 135, 176, 0.15);
  user-select: none;
}

/* Badge flottante variante accent (in basso a destra) */
.float-badge.is-accent {
  left: auto;
  right: -1.5rem;
  background-color: var(--color-accent);
  color: var(--color-secondary);
}

.float-badge.is-accent p:last-child {
  color: #fff;   /* testo sotto al "3x": bianco sulla badge oro, il navy si legge poco */
}

/* Nota discreta sotto a un blocco */
.note-after {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-top: 0.75rem;
}

/* Griglia delle zone/quartieri */
.zone-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 1024px) {
  .zone-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Sfondo immagine di una sezione scura */
.section-dark-bg {
  position: absolute;
  inset: 0;
  top: -15%;
  bottom: -15%;
}

.section-dark-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.10;
}

.section-dark .container {
  position: relative;
}

.section-dark .two-col h2 {
  color: #fff;
}

.section-dark .two-col p {
  color: var(--on-dark);
}

/* Intestazione centrata e testo a colonne su fondo scuro (Chi siamo, racconto della squadra) */
.section-dark .section-intro-label {
  color: var(--on-dark);
}

.section-dark .section-intro h2 {
  color: #fff;
}

.section-dark :where(.section-intro) p,
.section-dark .text-columns p {
  color: var(--on-dark);
}

/* Eyebrow chiaro per fondi scuri */
.eyebrow-light {
  color: var(--on-dark);
}

/* Lista su fondo scuro: spaziatura inferiore */
.on-dark-list {
  margin-bottom: 2rem;
}

/* Icona feature variante primary */
.feature-icon.is-primary {
  background-color: var(--primary-soft);
}

.feature-icon.is-primary svg {
  color: var(--color-primary);
}

/* Bottone WhatsApp flottante */
.whatsapp-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 900;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #25d366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.whatsapp-float:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.24);
}

/* Pulsanti condivisione social */
.share-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.share-buttons .share-label {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-right: 0.25rem;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--color-surface);
  color: var(--color-secondary);
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.share-btn:hover { transform: translateY(-2px); color: #fff; }
.share-btn.share-fb:hover   { background-color: #1877f2; }
.share-btn.share-wa:hover   { background-color: #25d366; }
.share-btn.share-li:hover   { background-color: #0a66c2; }
.share-btn.share-mail:hover { background-color: var(--color-primary); }

/* ============================================================
   Calcolatore costi acquisto casa
   ============================================================ */

/* Teaser in sidebar */
.calc-teaser {}

/* Dialog modale */
dialog.calc-modal {
  padding: 0;
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-hover);
  width: min(1000px, 95vw);
  max-height: 92vh;
  overflow: hidden;
  margin: auto;
  background: var(--color-bg);
}

/* display:flex SOLO da aperto: altrimenti sovrascrive il display:none nativo del
   <dialog> chiuso → il box resta visibile nel flusso e finisce sotto l'header. */
dialog.calc-modal[open] {
  display: flex;
  flex-direction: column;
}

dialog.calc-modal::backdrop {
  background: var(--overlay-dark);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.calc-modal-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;   /* riempie il <dialog> via flex, NON height:100% */
  min-height: 0;    /* Safari: height:100% di un dialog ad altezza indefinita collassa a 0 → box invisibile */
}

.calc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.calc-modal-title {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--line-h2);
  font-size: var(--text-h4);
  color: var(--color-secondary);
  margin: 0;
}

.calc-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  border-radius: var(--radius-btn);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.calc-close-btn:hover {
  color: var(--color-text);
  background: var(--color-surface);
}
.calc-close-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.calc-modal-body {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 0;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.calc-modal-body > #calc-form {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  border-right: 1px solid var(--color-border);
  gap: 0.875rem;
}

.calc-modal-body > .calc-results {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  background: var(--color-surface);
}

.calc-section-title {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: 0.625rem;
  margin-top: 0.875rem;
}
.calc-section-title:first-child {
  margin-top: 0;
}

.calc-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: end;
}
/* Le label possono andare su 2 righe: ogni cella è una colonna flex e l'input si
   ancora in fondo, così le due caselle della riga restano allineate anche quando
   un'etichetta occupa 2 righe e l'altra 1. */
.calc-row-2 > div {
  display: flex;
  flex-direction: column;
}
.calc-row-2 > div .form-input {
  margin-top: auto;
}

.calc-toggle-row {
  margin: 0.25rem 0;
}
.calc-toggle-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  font-size: var(--text-small);
  color: var(--color-text);
  font-family: var(--font-body);
}
.calc-toggle-switch {
  position: relative;
  display: inline-block;
  width: 2.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.calc-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.calc-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--color-border);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
  cursor: pointer;
}
.calc-toggle-slider::before {
  content: '';
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  left: 0.175rem;
  top: 0.175rem;
  background: white;
  border-radius: 50%;
  transition: transform var(--transition-fast);
}
.calc-toggle-switch input:checked + .calc-toggle-slider {
  background: var(--color-primary);
}
.calc-toggle-switch input:checked + .calc-toggle-slider::before {
  transform: translateX(1rem);
}

.calc-note {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin: -0.25rem 0 0.25rem;
  line-height: 1.4;
}

.calc-mutuo-section {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* Risultati */
.calc-result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-small);
  color: var(--color-text);
}
.calc-result-row:last-child {
  border-bottom: none;
}
.calc-result-value {
  font-weight: 600;
  color: var(--color-secondary);
  white-space: nowrap;
}

.calc-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--color-secondary);
  color: white;
  border-radius: var(--radius-btn);
  font-size: var(--text-small);
  font-weight: 600;
}
.calc-total-row strong {
  font-size: var(--text-h4);
  font-family: var(--font-heading);
}
/* display:flex qui sopra annulla l'attributo hidden che il JS usa per mostrarli/nasconderli */
.calc-mutuo-section[hidden],
.calc-total-row[hidden] { display: none; }

.calc-mutuo-results {
  margin-top: 1rem;
}

.calc-disclaimer {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: 1.25rem;
  line-height: 1.5;
  font-style: italic;
}

/* Spiegazione dinamica del calcolo dell'imposta di registro (prima/seconda casa) */
.calc-spiegazione {
  margin-top: 0.875rem;
  padding: 0.75rem 0.875rem;
  background: var(--primary-soft);
  border-radius: var(--radius-btn);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.calc-spiegazione strong { color: var(--color-secondary); }
.calc-spiegazione-hint { color: var(--color-muted); }

.calc-modal-footer {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
  justify-content: flex-end;
}

/* Modalità inline (pagina standalone /calcola-spese): il calcolatore vive nel flusso
   della pagina come una card, non in modale. Riusa la griglia .calc-modal-body. */
.calc-inline {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
  margin-top: 2.5rem;
}
.calc-inline .calc-modal-body {
  overflow: visible;
}
.calc-inline .calc-modal-body > #calc-form,
.calc-inline .calc-modal-body > .calc-results {
  overflow: visible;
}

/* Responsive: su mobile la modale va full-screen, form e risultati in colonna */
@media (max-width: 640px) {
  dialog.calc-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    margin: 0;
    position: fixed;
    inset: 0;
  }
  /* libero l'inner dal cap 92vh così riempie tutta l'altezza dello schermo */
  .calc-modal-inner {
    max-height: 100dvh;
  }
  /* su mobile: una sola colonna e un unico scroll (form + risultati impilati) */
  .calc-modal-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .calc-modal-body > #calc-form {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    overflow: visible;
  }
  .calc-modal-body > .calc-results {
    overflow: visible;
  }
  .calc-row-2 {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────────────────────
   Pagine errore (404 / 405 / 500 / 503)
   Le classi .error-page e .section-padding mancavano: le pagine
   risultavano senza impaginazione (solo testo + bottone). Layout
   centrato e brandizzato, coerente coi token del tema.
   ────────────────────────────────────────────────────────────── */
.section-padding {
  padding-block: var(--section);
}

/* L'header è fisso (80px): lo spazio sopra ne tiene conto e il blocco sta al centro della
   schermata (tutte le pagine di errore) */
.error-page {
  min-height: calc(100vh - var(--header-height));
  padding-top: calc(var(--header-height) + 3rem);
  padding-bottom: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.error-page .error-code {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(5rem, 18vw, 9rem);
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.75rem;
}

.error-page h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

.error-page p {
  color: var(--color-text-secondary);
  font-size: var(--text-body-lg);
  max-width: 34rem;
  margin-inline: auto;
  margin-bottom: 2rem;
}

.error-page .btn-row {
  margin-top: 0;
}

/* "Oppure vai a: Chi siamo · Servizi · Contatti" (404, 405). È un nav, non un p: .error-page p gli
   darebbe testo grande e margine sotto */
.error-links {
  margin-top: 1.5rem;
  color: var(--color-text-secondary);
  text-wrap: balance;
}
.error-links span { margin-right: 0.35rem; }
.error-links a {
  color: var(--color-primary);
  font-weight: 500;
  white-space: nowrap;
}
.error-links a:hover { text-decoration: underline; }
.error-links a + a::before {
  content: "·";
  display: inline-block;
  margin-inline: 0.6rem;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Elenchi nei testi scritti con l'editor
   Il reset in cima al file toglie i pallini a tutti gli ul/ol (menu, card...):
   qui si rimettono SOLO nei contenitori dei campi rich-text di Directus -
   bio agenti (.agent-bio), descrizioni immobili (.property-text), articoli e
   pagine legali (.article-body), pagine generiche (.prose, stili sopra).
   Gli elenchi degli articoli con le icone (svg) restano come sono.
   Nuovo contenitore di testo da editor -> aggiungerlo a questi selettori.
   ========================================================================== */
.agent-bio ul,
.agent-bio ol,
.property-text ul,
.property-text ol,
.article-body ul:not(:has(svg)),
.article-body ol {
  display: block;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  color: var(--color-muted);
}

.agent-bio ul,
.property-text ul,
.article-body ul:not(:has(svg)) {
  list-style: disc;
}

.agent-bio ol,
.property-text ol,
.article-body ol {
  list-style: decimal;
}

.agent-bio li,
.property-text li,
.article-body ul:not(:has(svg)) li,
.article-body ol li {
  display: list-item;
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;
}

.agent-bio li::marker,
.property-text li::marker,
.article-body li::marker,
.prose li::marker {
  color: var(--color-primary);
}

/* ==========================================================================
   Formati dell'editor - menu "Formati" di articoli e pagine
   (bin/configure-editor-formati.php).
   - ul.lista-spunte = elenco con la spunta (come quelli già negli articoli)
   - ul.lista-schede = elenco a schede grigie su 2 colonne (come le .doc-card):
     il testo in grassetto all'inizio della voce diventa il titolo della scheda
   - Riquadro in evidenza = .note-box (stili già esistenti)
   ========================================================================== */
.article-body ul.lista-spunte,
.prose ul.lista-spunte,
.property-text ul.lista-spunte,
.article-body ul.lista-schede,
.prose ul.lista-schede,
.property-text ul.lista-schede {
  list-style: none;
  padding-left: 0;
}

.article-body ul.lista-spunte li,
.prose ul.lista-spunte li,
.property-text ul.lista-spunte li {
  display: block;
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.75rem;
  color: var(--color-muted);
}

.article-body ul.lista-spunte li::before,
.prose ul.lista-spunte li::before,
.property-text ul.lista-spunte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center / contain;
}

.article-body ul.lista-schede,
.prose ul.lista-schede,
.property-text ul.lista-schede {
  display: grid;
  gap: 1rem;
  margin-block: 1.5rem;
}

.article-body ul.lista-schede li,
.prose ul.lista-schede li,
.property-text ul.lista-schede li {
  display: block;
  margin: 0;
  padding: 1.25rem;
  background-color: var(--color-surface);
  border-radius: var(--radius-card);
  font-size: var(--text-small);
  color: var(--color-muted);
}

.article-body ul.lista-schede li strong:first-child,
.prose ul.lista-schede li strong:first-child,
.property-text ul.lista-schede li strong:first-child {
  display: block;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 0.25rem;
}

@media (min-width: 640px) {
  .article-body ul.lista-schede,
  .prose ul.lista-schede,
  .property-text ul.lista-schede {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Spazi del testo scritto con l'editor: senza le <section> (che si possono scrivere
   solo in HTML) il gap di .article-body separava ogni paragrafo di 2rem + margine.
   Solo per il testo "piatto": articoli a sezioni invariati. Lo spazio grande resta
   sopra i titoli. */
.article-body:not(:has(> section)) {
  gap: 0;
}

.article-body:not(:has(> section)) > h2:not(:first-child) {
  margin-top: 2rem;
}

.article-body:not(:has(> section)) > .note-box,
.article-body:not(:has(> section)) > .doc-grid {
  margin-bottom: 1rem;
}