/* Catalogo /immobili/ (prototipo «Immobili»): pannello di ricerca, titolo e ordinamento, griglia di card, riquadro finale. */
@layer sections {
  .catalog {
    --catalog-gap: 20px;
    padding-bottom: var(--section-y);
  }

  /* Mappa: a tutta larghezza sotto l'header; il pannello di ricerca ne copre il bordo inferiore */
  .catalog-map {
    position: relative;
  }

  .catalog-map__canvas {
    height: clamp(280px, 34.7vw, 500px);
    background: var(--surface-soft);
    isolation: isolate; /* i livelli di Leaflet (z-index 400–1000) restano dentro la mappa, sotto header e pannello */

    &.is-failed { display: none; }
    /* Fondo cartografico un po' spento, come nel prototipo: i pin restano in primo piano */
    & .leaflet-tile-pane { filter: saturate(.3) contrast(.95); }
    & .leaflet-control-attribution { font-size: 11px; }
  }

  .catalog-map__fallback {
    margin: 0;
    padding: 24px var(--gutter);
    color: var(--text-muted);
  }

  .catalog-map__tools {
    position: absolute;
    top: 10px;
    left: 56px; /* accanto ai pulsanti +/− di Leaflet */
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
  }

  .catalog-map__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: var(--text-strong);
    color: var(--text-inverse);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    & .icon { color: var(--text-on-dark-accent); }
  }

  .catalog-map__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 4px 12px 4px 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-page);
    box-shadow: var(--shadow-float);
    color: var(--text-strong);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    & input { width: 16px; height: 16px; margin: 0; accent-color: var(--surface-brand); }
  }

  /* Pin: pillola scura con il prezzo, appesa al punto (il punto è il centro del bordo inferiore) */
  .map-pin-anchor { background: none; border: 0; }

  .map-pin {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 2px solid var(--surface-page);
    border-radius: var(--radius-pill);
    background: var(--text-strong);
    color: var(--text-inverse);
    font-family: var(--font-body);
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    white-space: nowrap;
    box-shadow: var(--shadow-float);
    transform: translate(-50%, -100%);
    cursor: pointer;
    transition: background-color var(--dur-fast), color var(--dur-fast);
  }

  .map-pin-anchor:hover .map-pin,
  .map-pin-anchor:focus-visible .map-pin { background: var(--action-accent); color: var(--text-brand); }

  .map-pin--group { font-weight: var(--fw-semibold); }

  .map-dot {
    position: absolute;
    left: -6px;
    top: -6px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--surface-page);
    border-radius: 50%;
    background: var(--text-muted);
    box-shadow: var(--shadow-float);
  }

  /* Pannello di ricerca: sopra il bordo inferiore della mappa */
  .catalog-search {
    position: relative;
    z-index: 2;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin: clamp(-44px, -3vw, -34px) auto 0;
    padding-inline: var(--gutter);
  }

  .catalog-search__panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-lg);
    background: var(--surface-page);
    box-shadow: var(--shadow-panel);
  }

  .catalog-search__contract {
    display: flex;
    gap: 4px;
    align-self: flex-start;
    margin: 0;
    padding: 4px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
  }

  .catalog-search__option {
    position: relative;
    cursor: pointer;

    & input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
    & span {
      display: flex;
      align-items: center;
      min-height: var(--hit-min);
      padding: 0 22px;
      border-radius: var(--radius-pill);
      color: var(--text-brand);
      font-weight: var(--fw-semibold);
      transition: background-color var(--dur-fast), color var(--dur-fast);
    }
    & input:checked + span { background: var(--surface-brand); color: var(--text-inverse); }
    & input:focus-visible + span { outline: 2px solid var(--border-strong); outline-offset: 2px; }
  }

  .catalog-search__row {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 140px 160px;
    gap: 10px;

    @media (max-width: 899px) { grid-template-columns: 1fr; }
  }

  /* Menu a tendina: freccia disegnata sopra la select (appearance: none) */
  .catalog-search__select,
  .catalog-search__control {
    position: relative;
    display: block;

    & select {
      width: 100%;
      height: var(--control-h-lg);
      padding: 0 44px 0 18px;
      border: 0;
      border-radius: var(--radius-control);
      background: var(--surface-soft);
      color: var(--text-strong);
      font: inherit;
      font-size: var(--fs-ui);
      font-weight: var(--fw-medium);
      appearance: none;
      cursor: pointer;
    }
  }

  .catalog-search__chevron {
    position: absolute;
    top: 50%;
    right: 18px;
    color: var(--text-brand);
    transform: translateY(-50%);
    pointer-events: none;
  }

  .catalog-search__text {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--control-h-lg);
    padding: 0 18px;
    border-radius: var(--radius-control);
    background: var(--surface-soft);
    color: var(--text-brand);

    & input {
      flex: 1;
      min-width: 0;
      height: 100%;
      border: 0;
      background: none;
      color: var(--text-strong);
      font: inherit;
      font-size: var(--fs-ui);
    }
    & input::placeholder { color: var(--text-muted); opacity: 1; }
    &:focus-within { outline: 2px solid var(--border-strong); outline-offset: 2px; }
    & input:focus { outline: none; } /* il contorno è sul contenitore, intorno a icona e campo */
  }

  .catalog-search__filters,
  .catalog-search__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: var(--control-h-lg);
    border-radius: var(--radius-control);
    font: inherit;
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background-color var(--dur-fast), border-color var(--dur-fast);
  }

  .catalog-search__filters {
    padding: 0 20px;
    border: 1px solid var(--border-default);
    background: var(--surface-page);
    color: var(--text-brand);
    &:hover, &[aria-expanded="true"] { border-color: var(--border-strong); }
  }

  .catalog-search__submit {
    padding: 0 32px;
    border: 0;
    background: var(--action-secondary);
    color: var(--text-inverse);
    font-size: 17px;
    &:hover { background: var(--action-secondary-hover); }
  }

  .catalog-search__advanced {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 2px;
    padding: 14px 6px 6px;
    border-top: 1px solid var(--border-default);

    &[hidden] { display: none; }
    @media (max-width: 899px) { grid-template-columns: 1fr 1fr; }
  }

  .catalog-search__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .catalog-search__label {
    color: var(--text-brand);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
  }

  /* Variante con bordo e fondo bianco: menu dei filtri e «Ordina per» */
  .catalog-search__advanced .catalog-search__control select,
  .catalog-search__control--pill select {
    height: 48px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-page);
  }

  .catalog-search__control--pill select {
    min-width: 205px;
    padding-left: 16px;
    border-radius: var(--radius-pill);
  }

  /* Risultati */
  .catalog-results {
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin: clamp(40px, 3.6vw, 52px) auto 0;
    padding-inline: var(--gutter);
  }

  .catalog-results__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
    margin-bottom: 32px;
  }

  .catalog-results__title {
    margin: 0;
    color: var(--text-brand);
    font-size: var(--fs-h1-catalog);
    font-weight: var(--fw-regular);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-h2);
  }

  .catalog-results__count {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: var(--fs-label);
  }

  .catalog-results__sort {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: var(--fs-ui);
  }

  .catalog-results__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: var(--catalog-gap);

    & > li { display: flex; }
    & .card-immobile { flex: 1; }
  }

  .catalog-results .pagination { margin-top: 48px; }

  .catalog-results__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 40px 0;
    color: var(--text-body);
    font-size: var(--fs-body);
    & p { margin: 0; }
  }

  .catalog__cta {
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin: var(--section-y) auto 0;
    padding-inline: var(--gutter);
  }
}