/* Pagine per citta' e zona (cataloghi, raccolte e pagina del comune): sopra la lista di /immobili (pages/list.css),
   sotto zona, mercato e domande a sinistra e le altre ricerche (raccolte, tipologie, zone) a destra.
   Card (.listing), domande (.qa), bottoni e kicker sono componenti del design system. */

@layer pages {
  .catalog { padding-bottom: var(--section); }

  /* ---------- Zona, mercato, domande | altre ricerche ---------- */
  .cat-more {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--block) clamp(32px, 6vw, 112px);
    align-items: start;
    margin-top: var(--section);
  }
  .cat-more.only-nav { grid-template-columns: minmax(0, 1fr); }

  .cat-main { display: grid; gap: var(--block); min-width: 0; }
  .cat-block h2 { margin: 6px 0 20px; font-size: var(--step-lead); max-width: 30ch; }
  .cat-prose { max-width: 68ch; }
  .cat-prose + .cat-prose { margin-top: 12px; }
  .cat-bullets { display: grid; gap: 6px; margin: 16px 0 0; padding-left: 1.2em; max-width: 68ch; }

  .cat-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
    margin: 28px 0 0;

    & div { padding: 18px 20px; border-radius: var(--r-md); background: var(--tint); }
    & dt { font-size: var(--step-small); color: var(--ink-soft); }
    & dd { margin: 6px 0 0; font-family: var(--display); font-size: var(--step-lead); line-height: 1.2; }
  }
  .cat-source { margin-top: 16px; }

  /* altre ricerche: un pannello tinto, link a pillola con il numero di annunci */
  .cat-nav {
    display: grid;
    gap: 32px;
    padding: clamp(24px, 3vw, 40px);
    border-radius: var(--r-lg);
    background: var(--tint);
  }
  .cat-links h2 { margin: 6px 0 16px; font-size: var(--step-lead); }
  .cat-links ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .cat-links a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: var(--control-h-sm);
    padding: 6px 8px 6px 16px;
    border-radius: var(--r-pill);
    background: var(--ground);
    font-size: var(--step-small);
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease);

    & small {
      display: grid;
      place-items: center;
      min-width: 26px;
      height: 26px;
      padding: 0 8px;
      border-radius: var(--r-pill);
      background: var(--accent-soft);
      font-size: var(--step-small);
    }
    &:hover { background: var(--accent-soft); }
    &:hover small { background: var(--ground); }
  }
  .cat-other { display: flex; flex-wrap: wrap; gap: 8px; }
  .cat-nav .btn.ghost { background: var(--ground); }

  @media (max-width: 960px) {
    .cat-more { grid-template-columns: minmax(0, 1fr); }
  }
}