/*
 * Stile del listing immobili, dal Figma Calea_UI "06_Immobili_L" (node 19854:9653):
 * "Ordina per" in alto a destra, colonna filtri da 400px (tendine, divisore, ricerca per zona
 * con mini mappa chiara), griglia di card a 2 colonne con gap 12, paginazione in fondo.
 *
 * Solo classi nuove (listing_*, filters_*): quelle del sito (section, container, eyebrow,
 * paragraph-lg, paragraph-sm, button_tertiary…) restano di Webflow. Colori, spaziature e font
 * sono le variabili del sito; il valore dopo la virgola è quello del Figma, usato solo se la
 * variabile non esiste.
 *
 * Questo file è la FONTE: `npm run embed` lo inserisce nei blocchi di embed/.
 */
.listing_section {
  --listing-surface: var(--_color---neutral--latte, #fcfcfc);
  --listing-ink: var(--_color---neutral--inchiostro, #050419);
  --listing-primary: var(--_color---blue--abisso, #005974);
  --listing-lago: var(--_color---blue--lago, #408ea6);
  --listing-bruma: var(--_color---blue--bruma, #afccd5);
  --listing-vapore: var(--_color---blue--vapore, #f2f6f8);
  --listing-gap-xs: var(--_layout---gaps--gap-xs, 4px);
  --listing-gap-sm: var(--_layout---gaps--gap-sm, 12px);
  --listing-gap-md: var(--_layout---gaps--gap-md, 24px);
  --listing-gap-lg: var(--_layout---gaps--gap-lg, 32px);
  --listing-gap-xl: var(--_layout---gaps--gap-xl, 60px);
  --listing-radius: 2px;
  --listing-label-font: var(--_typography---fonts--tertiary-font-800, sans-serif);
  --listing-light-font: var(--_typography---fonts--tertiary-font-300, sans-serif);
  --listing-regular-font: var(--_typography---fonts--tertiary-font-400, sans-serif);
  --listing-line: color-mix(in srgb, var(--listing-lago) 55%, transparent);
  /* Token di movimento del sito (head di Webflow): hover in entrata --motion-fast, in uscita
   * --motion-base, sempre Out Quart. Pannelli e aperture: --motion-base. */
  --listing-ease: var(--motion-ease, cubic-bezier(.165, .84, .44, 1));
  --listing-fast: var(--motion-fast, 300ms);
  --listing-base: var(--motion-base, 600ms);
  background: var(--listing-primary);
  color: var(--listing-surface);
  color-scheme: light;
  /* Versione di questo file: se lo script trova un blocco incollato con uno stile più vecchio,
   * carica da solo quello aggiornato. Va aumentata a ogni modifica, insieme a CSS_VERSION in
   * calea-listing.js (un test controlla che coincidano). */
  --calea-css: 7;
}
/* Pulsanti del blocco: né l'aspetto nativo del browser (Safari, iOS) né lo stile dei pulsanti del
 * sito. Le regole dei singoli pulsanti partono da ".listing_section" per battere quelle del sito. */
.listing_section button { -webkit-appearance: none; appearance: none; }
.listing_section button:where(:not(.button)) { margin: 0; text-shadow: none; -webkit-tap-highlight-color: transparent; }
:where(.listing_section) button:where(:not(.button)) { box-shadow: none; letter-spacing: normal; text-transform: none; font-weight: 300; }
.listing_layout { display: flex; flex-direction: column; gap: var(--listing-gap-lg); }
.listing_body { display: grid; grid-template-columns: clamp(240px, 28%, 400px) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
.listing_panel { position: sticky; top: 96px; padding-block: 20px; max-height: calc(100vh - 112px); overflow-y: auto; scrollbar-width: thin; }
.listing_panel_head, .listing_panel_foot, .listing_section .listing_panel_toggle { display: none; }
.listing_main { display: flex; flex-direction: column; align-items: center; gap: var(--listing-gap-lg); min-width: 0; }
.listing_main > [data-calea-slot] { width: 100%; }

/* Il conteggio non è nel Figma: resta per chi usa un lettore di schermo. */
.listing_count_slot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.listing_count { margin: 0; }

/* Ordina per (in alto a destra) */
.listing_topbar { display: flex; justify-content: flex-end; align-items: center; }
.listing_sort { display: inline-flex; align-items: center; gap: var(--listing-gap-md); cursor: pointer; }
.listing_sort_label { font-family: var(--listing-label-font); font-weight: 800; font-size: 14px; line-height: 14px; text-transform: uppercase; }
.listing_sort_label::after { content: ':'; }
.listing_sort_control { position: relative; display: inline-flex; align-items: center; gap: var(--listing-gap-sm); }
.listing_sort_select { field-sizing: content; width: auto; appearance: none; -webkit-appearance: none; background: transparent; color: inherit; border: 0; margin: 0; padding: 0 28px 0 0; line-height: 22px; cursor: pointer; }
.listing_sort_select option { color: var(--listing-ink); }
.listing_sort_icon { position: absolute; right: 0; top: 50%; width: 16px; height: 16px; transform: translateY(-50%) rotate(90deg); pointer-events: none; display: flex; }
.listing_sort_icon svg { width: 16px; height: 16px; }

/* Filtri: tendine senza bordi, freccia a destra */
.filters_header { display: flex; justify-content: flex-end; }
.filters_header:empty { display: none; }
.listing_section .filters_reset { background: none; border: 0; color: inherit; font: 300 14px/20px var(--listing-light-font); text-decoration: underline 0.1em; text-underline-offset: 0.1em; text-underline-position: under; cursor: pointer; padding: 0 0 var(--listing-gap-sm); }
/* Righe compatte separate da un filetto, come un accordion. */
[data-calea-groups], .filters_more_inner { display: flex; flex-direction: column; gap: 0; }
.filters_group { margin: 0; border-bottom: 1px solid var(--listing-line); }
[data-calea-groups] > .filters_group:first-child { border-top: 1px solid var(--listing-line); }
.filters_group_toggle { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--listing-gap-sm); padding: 10px 0; cursor: pointer; }
.filters_group_toggle::-webkit-details-marker { display: none; }
.filters_group_label { margin: 0; font-size: 14px; line-height: 14px; letter-spacing: 0; }
.filters_group.is-active .filters_group_label::after { content: ' •'; }
.filters_group_icon { display: flex; width: 24px; height: 24px; flex: none; transition: transform var(--listing-fast) var(--listing-ease); }
.filters_group[open] .filters_group_icon { transform: rotate(90deg); }
.filters_group_body { padding: 4px 0 var(--listing-gap-md); display: grid; gap: var(--listing-gap-sm); }

/* "Tutti i filtri": i gruppi oltre i primi N si aprono sotto, con un'animazione morbida. */
.filters_more_body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--listing-base) var(--listing-ease); }
.filters_more.is-open .filters_more_body { grid-template-rows: 1fr; }
.filters_more_inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s var(--listing-base); }
/* Da aperto il blocco non taglia più: le tendine (Prezzo, Superficie…) devono poter uscire dal
 * riquadro. "overflow" passa a visible solo a fine animazione (allow-discrete; nei browser che non
 * lo supportano passa subito, e si perde solo l'effetto di apertura). */
.filters_more.is-open .filters_more_inner { visibility: visible; overflow: visible; transition: visibility 0s, overflow 0s var(--listing-base); transition-behavior: allow-discrete; }
.listing_section .filters_more_toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--listing-gap-sm); width: 100%;
  padding: 14px 0 0; background: none; border: 0; color: inherit; cursor: pointer;
  font: 400 14px/14px var(--listing-regular-font); letter-spacing: 1px; text-transform: uppercase; text-align: left;
}
.filters_more_label.is-opened, .filters_more.is-open .filters_more_label.is-closed { display: none; }
.filters_more.is-open .filters_more_label.is-opened { display: inline; }
.filters_more_icon { position: relative; width: 24px; height: 24px; flex: none; }
.filters_more_icon::before, .filters_more_icon::after { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 1px; background: currentColor; transition: transform var(--listing-base) var(--listing-ease); }
.filters_more_icon::after { transform: rotate(90deg); }
.filters_more.is-open .filters_more_icon::after { transform: rotate(0deg); }
.listing_section .filters_more_toggle:hover .filters_more_label { text-decoration: underline 0.1em; text-underline-offset: 0.1em; text-underline-position: under; }
.filters_option { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.filters_option.is-empty { opacity: 0.45; cursor: default; }
.filters_option .filters_option_input {
  appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; padding: 0;
  border: 1px solid currentColor; border-radius: 2px; background: transparent center / 12px no-repeat; cursor: pointer; opacity: 1;
}
.filters_option .filters_option_input:checked {
  background-color: var(--listing-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.8 9 10 3' fill='none' stroke='%23005974' stroke-width='1.6'/%3E%3C/svg%3E");
}
.filters_option .filters_option_input[type='radio'] { border-radius: 50%; }
.filters_option .filters_option_input[type='radio']:checked { background-image: none; box-shadow: inset 0 0 0 4px var(--listing-primary); }
.filters_option .filters_option_input:disabled { opacity: 0.4; cursor: default; }
.filters_option .filters_option_input:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.filters_option_label { flex: 1; font-family: var(--listing-light-font); font-weight: 300; font-size: 16px; line-height: 18px; }
.filters_option_count { margin: 0; opacity: 0.7; font-size: 14px; line-height: 18px; }
.filters_range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--listing-gap-sm); }
.filters_range_field { display: grid; gap: var(--listing-gap-xs); }
.filters_range_field { min-width: 0; }
.filters_range_label { font: 300 14px/18px var(--listing-light-font); }

/* Menu a tendina custom (il <select> vero resta nascosto e tiene il valore) */
.calea_dd { position: relative; min-width: 0; }
.calea_dd > select { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; overflow: hidden; clip: rect(0 0 0 0); }
.listing_section .calea_dd_button { display: flex; align-items: center; justify-content: space-between; gap: var(--listing-gap-sm); width: 100%; min-height: 44px; padding: 10px 12px; background: transparent; color: inherit; border: 1px solid var(--listing-bruma); border-radius: var(--listing-radius); font: 300 16px/20px var(--listing-light-font); text-align: left; cursor: pointer; }
.calea_dd_value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calea_dd_icon { display: flex; flex: none; transition: transform var(--listing-fast) var(--listing-ease); }
.calea_dd.is-open .calea_dd_icon { transform: rotate(180deg); }
.calea_dd_list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 280px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none; background: var(--listing-surface); color: var(--listing-ink); border-radius: var(--listing-radius); box-shadow: 0 12px 32px rgba(5, 4, 25, 0.25); }
.calea_dd_option { padding: 10px 14px; font: 300 16px/20px var(--listing-light-font); white-space: nowrap; cursor: pointer; }
.calea_dd_option.is-active, .calea_dd_option:hover { background: var(--listing-vapore); }
.calea_dd_option[aria-selected='true'] { font-family: var(--_typography---fonts--tertiary-font-500, sans-serif); font-weight: 500; color: var(--listing-primary); }
.calea_dd_option[aria-disabled='true'] { opacity: 0.4; cursor: default; }
.listing_section .calea_dd_button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* "Ordina per": testo semplice, senza bordo, menu allineato a destra */
.listing_section .listing_sort .calea_dd_button { min-height: 0; padding: 0; border: 0; font-size: 18px; line-height: 22px; }
.listing_sort .calea_dd_list { left: auto; right: 0; min-width: 220px; }
.listing_sort .calea_dd + .listing_sort_icon { display: none; }

/* Ricerca per zona: la tendina "Località" sta con gli altri filtri, la mappa sotto il divisore */
.filters_zone { display: contents; }
.filters_divider { display: none; }
.filters_zone_block { display: flex; flex-direction: column; gap: var(--listing-gap-md); margin-top: var(--listing-gap-lg); }
.filters_zone_head { display: flex; flex-direction: column; gap: var(--listing-gap-sm); }
.filters_zone_title { margin: 0; font: 300 16px/18px var(--listing-light-font); }
.filters_zone_crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--listing-gap-sm); }
.listing_section .filters_zone_crumb { display: inline-flex; align-items: center; gap: var(--listing-gap-sm); background: none; border: 0; color: inherit; padding: 0; cursor: pointer; font: 400 14px/20px var(--listing-regular-font); letter-spacing: 1px; text-transform: uppercase; }
.listing_section .filters_zone_crumb + .filters_zone_crumb::before {
  content: ''; width: 5px; height: 10px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.2 11'%3E%3Cpath d='M.5.5l5 5-5 5' fill='none' stroke='%23000' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.2 11'%3E%3Cpath d='M.5.5l5 5-5 5' fill='none' stroke='%23000' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.listing_section .filters_zone_crumb[aria-current] { font-family: var(--listing-label-font); font-weight: 800; line-height: 14px; cursor: default; }
.filters_zone_list { list-style: none; margin: 0; padding-left: 0; gap: 2px; max-height: 260px; overflow-y: auto; }
.listing_section .filters_zone_link { display: flex; justify-content: space-between; gap: var(--listing-gap-sm); width: 100%; background: none; border: 0; color: inherit; text-align: left; padding: 4px 0; cursor: pointer; font: 300 16px/20px var(--listing-light-font); }
.filters_zone_list .is-selected .filters_zone_link { text-decoration: underline 0.1em; text-underline-offset: 0.1em; text-underline-position: under; }
.filters_zone_list .is-empty .filters_zone_link { opacity: 0.4; cursor: default; }

/* Mini mappa (Figma 400 × 451): fondo chiaro, zona scelta piena in Lago */
.filters_zone_map { position: relative; width: 100%; aspect-ratio: 400 / 451; max-width: 100%; border-radius: 2.667px; overflow: hidden; background: var(--listing-bruma); }
.listing_map_svg { display: block; width: 100%; height: 100%; }
.listing_map_zone { fill: var(--listing-vapore); stroke: var(--listing-primary); stroke-width: 0.5; stroke-linejoin: round; cursor: pointer; transition: fill var(--listing-base) var(--listing-ease); outline: none; }
.listing_map_zone:hover, .listing_map_zone:focus-visible { transition-duration: var(--listing-fast); fill: color-mix(in srgb, var(--listing-lago) 40%, var(--listing-vapore)); }
.listing_map_zone:focus-visible { stroke-width: 1.5; }
.listing_map_zone.is-empty { fill: color-mix(in srgb, var(--listing-bruma) 45%, var(--listing-vapore)); stroke: color-mix(in srgb, var(--listing-primary) 45%, transparent); cursor: default; }
.listing_map_zone.is-reserved { fill: color-mix(in srgb, var(--listing-lago) 22%, var(--listing-vapore)); }
.listing_map_zone.is-selected { fill: color-mix(in srgb, var(--listing-lago) 75%, var(--listing-vapore)); stroke-width: 1.33; }
.listing_map_label { position: absolute; transform: translate(-50%, -50%); font: 700 12px/14px var(--listing-label-font); letter-spacing: 0.5px; color: var(--listing-ink); white-space: nowrap; pointer-events: none; text-shadow: 0 0 3px var(--listing-vapore), 0 0 6px var(--listing-vapore); }
.listing_section .listing_map_up { position: absolute; top: 10px; left: 10px; background: var(--listing-surface); color: var(--listing-primary); border: 0; border-radius: var(--listing-radius); padding: 6px 10px; cursor: pointer; font: 800 12px/14px var(--listing-label-font); letter-spacing: 1px; text-transform: uppercase; }

/* Griglia e card (Figma: 2 colonne, card 478 × 400, gap 12, angoli 2px) */
.listing_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--listing-gap-sm); }
.listing_card { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 478 / 400; border-radius: var(--listing-radius); color: var(--listing-surface); text-decoration: none; background: var(--listing-ink); }
/* Niente overflow sulla card: se il testo non ci sta la card si allunga invece di tagliarlo. */
.listing_card_media { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; overflow: hidden; border-radius: inherit; }
.listing_card_media .u-img-cover { width: 100%; height: 100%; object-fit: cover; transition: transform var(--listing-base) var(--listing-ease); }
.listing_card:hover .u-img-cover { transform: scale(1.03); }
.listing_card_overlay { display: block; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.5) 100%); mix-blend-mode: multiply; }
.listing_card_badges { position: relative; display: flex; flex-wrap: wrap; gap: var(--listing-gap-xs); margin: 0; padding: clamp(16px, 1.6vw, 24px) clamp(16px, 1.6vw, 24px) 0; list-style: none; }
.listing_card_badge { margin: 0; border: 1px solid currentColor; border-radius: var(--listing-radius); padding: 6px 12px; font-size: 14px; line-height: 14px; letter-spacing: 1px; white-space: nowrap; }
.listing_card_content { position: relative; margin-top: auto; padding: clamp(16px, 1.6vw, 24px); display: flex; flex-direction: column; gap: var(--listing-gap-sm); }
.listing_card_location { display: flex; align-items: center; gap: var(--listing-gap-xs); margin: 0; font-size: 14px; line-height: 14px; letter-spacing: 1px; }
.listing_card_location_icon { display: flex; width: 16px; height: 16px; flex: none; }
.listing_card_title { margin: 0; color: inherit; line-height: 1.17; overflow-wrap: anywhere; }
.listing_card:hover .listing_card_title { text-decoration: underline 0.1em; text-underline-offset: 0.1em; text-underline-position: under; }
.listing_card_price { margin: 0; line-height: 22px; }
/* Immobile riservato: nessuna foto, fondo grafico con il marchio. */
.listing_card.is-offmarket .listing_card_media { background: color-mix(in srgb, var(--listing-lago) 30%, var(--listing-primary)); }
.listing_card.is-offmarket .listing_card_overlay { display: none; }
.listing_card.is-offmarket .listing_card_media::after { content: ''; position: absolute; inset: 0; background: url("logo-mark.svg") center 42% / 38% no-repeat; opacity: 0.55; }

/* Nessun risultato */
.listing_empty { padding: 48px 0; display: grid; gap: 20px; justify-items: start; }
.listing_empty_text { margin: 0; }

/* Paginazione (Figma: frecce 18px, numeri 18px; attivo Bold bianco, gli altri Light).
 * Numeri non attivi, puntini e freccia disabilitata in Bruma e non in Lago: su Abisso il Lago
 * dà 2,1:1 di contrasto, sotto il minimo per un controllo (serve 4,5:1). Bruma dà 4,63:1. */
.listing_pagination { display: flex; justify-content: center; align-items: center; gap: var(--listing-gap-lg); }
.listing_pagination_list { display: flex; gap: var(--listing-gap-sm); margin: 0; padding: 0; list-style: none; }
.listing_section .listing_page { min-width: 20px; background: none; border: 0; padding: 0; color: var(--listing-bruma); font: 300 18px/22px var(--listing-light-font); cursor: pointer; text-align: center; }
.listing_section .listing_page:hover { color: var(--listing-surface); }
.listing_section .listing_page.is-active { color: var(--listing-surface); font-family: var(--_typography---fonts--tertiary-font-800, sans-serif); font-weight: 700; cursor: default; }
.listing_section .listing_page_arrow { display: flex; width: 18px; height: 18px; background: none; border: 0; padding: 0; color: var(--listing-surface); cursor: pointer; }
.listing_section .listing_page_arrow.is-prev svg { transform: rotate(180deg); }
.listing_section .listing_page_arrow.is-disabled { color: var(--listing-bruma); cursor: default; }
.listing_page_ellipsis { color: var(--listing-bruma); font: 300 18px/22px var(--listing-light-font); }
.listing_loadmore_wrap { display: flex; justify-content: center; }
/* "Carica altri" e il link dei risultati vuoti: il bottone terziario del sito (.button_tertiary).
 * Su un <button> la regola dei link del sito non arriva, quindi il font si riprende qui; la linea
 * sta subito sotto il testo e al passaggio si stringe verso il centro, come nell'interazione del sito. */
.listing_section .listing_loadmore, .listing_section .listing_empty_cta {
  display: inline-block; padding: 0; background: none; border: 0; border-radius: 0; color: inherit; cursor: pointer; text-decoration: none;
  font-family: var(--_components---button--font, var(--listing-regular-font)); font-size: var(--_components---button--font-size, 13.6px);
  line-height: var(--_components---button--line-height, 1.5); font-weight: var(--_components---button--font-weight, 400);
  letter-spacing: var(--_components---button--letter-spacing, normal); text-transform: uppercase;
}
.listing_section .listing_loadmore:hover, .listing_section .listing_empty_cta:hover { background: none; color: inherit; }
.listing_loadmore .button_tertiary_text, .listing_empty_cta .button_tertiary_text { display: block; margin-bottom: 0.1em; background: none; }
.listing_loadmore .button_text_line, .listing_empty_cta .button_text_line { display: block; width: 100%; height: 1.1px; margin: 0 auto; background-color: currentColor; transition: width var(--listing-base) var(--listing-ease); }
.listing_loadmore:hover .button_text_line, .listing_empty_cta:hover .button_text_line { width: 0; transition-duration: var(--listing-fast); }

/* Caricamento: segnaposto con la forma di filtri e card e un riflesso Abisso/Lago che scorre */
.listing_skeleton_filters { display: flex; flex-direction: column; gap: var(--listing-gap-lg); }
.listing_skeleton_line, .listing_skeleton_map, .listing_skeleton_card {
  display: block; border-radius: var(--listing-radius);
  background: linear-gradient(100deg, color-mix(in srgb, var(--listing-lago) 18%, var(--listing-primary)) 30%, color-mix(in srgb, var(--listing-lago) 42%, var(--listing-primary)) 50%, color-mix(in srgb, var(--listing-lago) 18%, var(--listing-primary)) 70%);
  background-size: 250% 100%;
  animation: listing-shimmer 1.6s ease-in-out infinite;
}
.listing_skeleton_line { height: 14px; width: 60%; }
.listing_skeleton_line:nth-child(2) { width: 35%; }
.listing_skeleton_line:nth-child(3) { width: 48%; }
.listing_skeleton_map { aspect-ratio: 400 / 451; width: 100%; margin-top: var(--listing-gap-md); }
.listing_skeleton_card { aspect-ratio: 478 / 400; }
@keyframes listing-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
/* Le card arrivano con una breve dissolvenza. */
.listing_grid:not(.listing_skeleton_grid) > * { animation: listing-in 0.35s ease both; }
@keyframes listing-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .listing_skeleton_line, .listing_skeleton_map, .listing_skeleton_card, .listing_grid > * { animation: none; }
}

/* Stati */
[data-calea-listing].is-loading [data-calea-slot='results'] { opacity: 0.55; transition: opacity var(--listing-fast) var(--listing-ease); }
.listing_error { padding: 32px 0; }
.listing_section :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Breakpoint di Webflow */
@media screen and (max-width: 1199px) {
  .listing_card_badge { padding: 5px 8px; font-size: 12px; line-height: 12px; }
}
@media screen and (max-width: 991px) {
  .listing_body { grid-template-columns: minmax(0, 1fr); gap: var(--listing-gap-lg); }
  /* Filtri a tutto schermo, aperti dal pulsante flottante in basso a sinistra. */
  .listing_panel {
    position: fixed; inset: 0; z-index: 1000; top: 0; max-height: none; padding: 0; overflow: hidden;
    display: flex; flex-direction: column; background: var(--listing-primary); color: var(--listing-surface);
    visibility: hidden; opacity: 0; transform: translateY(16px); transition: opacity var(--listing-base) var(--listing-ease), transform var(--listing-base) var(--listing-ease), visibility 0s var(--listing-base);
  }
  .listing_panel.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity var(--listing-base) var(--listing-ease), transform var(--listing-base) var(--listing-ease); }
  .listing_panel_head { display: flex; justify-content: space-between; align-items: center; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 16px; border-bottom: 1px solid color-mix(in srgb, var(--listing-lago) 60%, transparent); }
  .listing_panel_title { font: 800 14px/14px var(--listing-label-font); letter-spacing: 1px; text-transform: uppercase; }
  .listing_section .listing_panel_close { display: flex; background: none; border: 0; color: inherit; padding: 4px; cursor: pointer; }
  .listing_panel .listing_sidebar { flex: 1; overflow-y: auto; padding: 24px 16px; overscroll-behavior: contain; }
  .listing_panel_foot { display: block; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid color-mix(in srgb, var(--listing-lago) 60%, transparent); }
  .listing_section .listing_panel_done { width: 100%; min-height: 48px; background: var(--listing-surface); color: var(--listing-primary); border: 0; border-radius: var(--listing-radius); font: 800 14px/14px var(--listing-label-font); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
  .listing_section .listing_panel_toggle {
    display: inline-flex; align-items: center; gap: 10px; position: fixed; z-index: 999;
    left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding: 12px 18px; min-height: 48px;
    background: var(--listing-surface); color: var(--listing-primary); border: 0; border-radius: 999px;
    box-shadow: 0 8px 24px rgba(5, 4, 25, 0.3); font: 800 14px/14px var(--listing-label-font); letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
    opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--listing-fast) var(--listing-ease), transform var(--listing-fast) var(--listing-ease), visibility 0s var(--listing-fast);
  }
  .listing_section .listing_panel_toggle.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity var(--listing-fast) var(--listing-ease), transform var(--listing-fast) var(--listing-ease); }
  .listing_panel_badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--listing-primary); color: var(--listing-surface); font-size: 12px; line-height: 20px; text-align: center; }
  .filters_zone_map { max-width: 400px; }
  .listing_skeleton_filters { display: none; }
  /* Nel pannello a tutto schermo si vedono tutti i filtri: niente "Tutti i filtri". */
  .filters_more_body { grid-template-rows: 1fr; }
  /* "inherit", non "visible": un figlio visibile dentro il pannello nascosto resterebbe cliccabile
   * (e il pannello sta sopra il menu del sito, che così perdeva le voci sotto). */
  .filters_more_inner, .filters_more.is-open .filters_more_inner { visibility: inherit; overflow: visible; }
  .listing_section .filters_more_toggle { display: none; }
}
html.calea-panel-open { overflow: hidden; }
/* Titolo h1 della pagina quando il design non lo mostra (es. /affitti): solo per lettori di schermo e motori. */
.listing_section .listing_sr_title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .listing_panel, .listing_section .listing_panel_toggle { transition: none; }
}
@media screen and (max-width: 767px) {
  .listing_skeleton_card:nth-child(n + 3) { display: none; }
  .listing_grid { grid-template-columns: minmax(0, 1fr); }
  .listing_card { aspect-ratio: 4 / 3.6; }
  .listing_topbar { justify-content: flex-end; }
}