/* Aste della v2 (/v2/<lingua>/aste/...): elenco con mappa, scheda, grazie. Linguaggio di lista e scheda v2;
   i pezzi (card .listing, campi, bottoni, badge) sono componenti del design system. */

@layer pages {

  /* ---------- Barra filtri ---------- */
  .auction-bar .field.q { flex: 2 1 280px; }
  .auction-bar .field.city { flex: 1 1 180px; min-width: 150px; }
  .auction-bar .field.prov { flex: 0 1 140px; min-width: 110px; }
  /* telefono: i campi vanno a capo, cosi' Provincia e Cerca si vedono senza scorrere; la barra non segue la pagina */
  @media (max-width: 640px) {
    .filters.auction-bar { position: static; }
    .auction-bar form.row { flex-wrap: wrap; overflow: visible; }
    .auction-bar .field.q { flex: 1 1 100%; max-width: none; }
    .auction-bar .field.city { flex: 1 1 0; min-width: 0; max-width: none; }
    .auction-bar .field.prov { flex: 0 0 120px; min-width: 0; }
    .auction-bar .btn { flex: 1 1 100%; }
  }

  /* ---------- Elenco: risultati a sinistra, mappa a destra ---------- */
  .auctions { padding-top: clamp(28px, 4vw, 56px); }
  .auctions-head { max-width: 860px; }
  .auctions-head h1 { margin-top: 8px; font-size: var(--step-head); }
  .auctions-head .lead { margin-top: 14px; max-width: 64ch; color: var(--ink-soft); }

  .auctions-split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: start;
    margin-top: clamp(28px, 4vw, 48px);
  }

  .res-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 24px; }
  .res-head .count { font-size: var(--step-lead); font-family: var(--display); }
  .res-head .count b { font-weight: 500; }

  .auction-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
  .auction-card.is-map-active .media { box-shadow: 0 0 0 3px var(--accent); }

  .empty { text-align: center; }

  .pager-now { font-size: var(--step-small); font-weight: 500; }

  /* ---------- Mappa dell'elenco: come la mappa della ricerca immobili (segnaposto: components/map-pins.css) ---------- */
  /* 88px: la barra dei filtri, che resta in vista, piu' il margine */
  .auctions-mapcol { position: sticky; top: calc(var(--top-h, 62px) + 88px); }
  .auction-map {
    position: relative;
    height: calc(100dvh - var(--top-h, 62px) - 108px);
    min-height: 420px;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--tint);
    box-shadow: inset 0 0 0 1px var(--line);
    isolation: isolate;

    & .map-canvas { position: absolute; inset: 0; z-index: 0; background: var(--tint); font: inherit; }
    & .zoom { position: absolute; top: 14px; right: 14px; z-index: 900; display: grid; border-radius: 16px; background: var(--ground); box-shadow: var(--shadow-menu); overflow: hidden; }
    & .zoom button { display: grid; place-items: center; width: var(--field-h); height: 42px; border: 0; background: transparent; color: var(--ink); cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
    & .zoom button:hover { background: var(--tint); }
    & .zoom button + button { box-shadow: inset 0 1px 0 var(--tint-2); }
    & .zoom .icon { width: 17px; height: 17px; }
    & .auction-map-clear { position: absolute; top: 14px; left: 14px; z-index: 900; background: var(--ground); box-shadow: var(--shadow-menu); }
  }

  /* Sotto i 900px la mappa non c'e' e non si avvia (v2/js/auctions-map.js) */
  @media (max-width: 900px) {
    .auctions-split { grid-template-columns: minmax(0, 1fr); }
    .auctions-mapcol { display: none; }
  }

  /* ---------- Scheda ---------- */
  .auction-detail { padding-top: clamp(16px, 2vw, 28px); }
  .auction-crumbs { margin-bottom: 20px; }

  .auction-hero {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: end;
  }
  .auction-hero-media {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--tint-2);

    & img { width: 100%; height: 100%; object-fit: cover; }
    & .badges { position: absolute; left: 16px; top: 16px; }
  }
  .auction-hero-text h1 { font-size: var(--step-head); }
  .auction-place { display: flex; gap: 8px; margin-top: 16px; color: var(--ink-soft); }
  .auction-place .icon { flex: none; width: 18px; height: 18px; margin-top: 4px; color: var(--accent); }
  .auction-price { display: grid; gap: 2px; margin-top: 24px; }
  .auction-price .label { margin: 0; }
  .auction-price b { font-family: var(--display); font-size: var(--step-head); font-weight: 400; line-height: 1.1; }

  .auction-body {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
    margin-top: var(--block);
  }
  .auction-content { display: grid; gap: var(--block); min-width: 0; }
  .auction-content h2 { font-size: var(--step-lead); }

  .auction-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
    gap: var(--gap);
    margin: 20px 0 0;

    & > div { padding: 14px 18px; border-radius: var(--r-md); background: var(--tint); min-width: 0; }
    & dt { font-size: var(--step-small); color: var(--ink-soft); }
    & dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }
  }

  @media (max-width: 640px) {
    .auction-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .auction-detail-map {
    height: clamp(320px, 42vw, 480px);
    margin-top: 20px;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--tint);
    isolation: isolate;
    font: inherit;
  }
  .auction-detail-map-popup { display: grid; gap: 2px; font-family: var(--font); font-size: var(--step-small); }

  .auction-description { margin-top: 16px; max-width: 72ch; white-space: pre-line; overflow-wrap: anywhere; }

  /* ---------- Richiedi supporto: colonna ferma allo scorrimento ---------- */
  .auction-aside { position: sticky; top: calc(var(--top-h, 62px) + 20px); min-width: 0; }
  .auction-support {
    display: grid;
    gap: 16px;
    padding: clamp(20px, 2.6vw, 36px);
    border-radius: var(--r-lg);
    background: var(--tint);

    & h2 { font-size: var(--step-lead); }
  }
  .auction-form {
    display: grid;
    gap: 16px;

    /* i campi stanno su fondo --tint: tornano bianchi */
    & .field input, & .field textarea { background-color: var(--ground); }
  }

  @media (max-width: 960px) {
    .auction-hero, .auction-body { grid-template-columns: minmax(0, 1fr); }
    .auction-aside { position: static; }
  }

  /* ---------- Grazie ---------- */
  .auction-thanks { padding-top: clamp(40px, 7vw, 96px); }
  .auction-done {
    display: grid;
    justify-items: center;
    gap: 14px;
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 56px);
    border-radius: var(--r-lg);
    background: var(--tint);
    text-align: center;

    & h1 { font-size: var(--step-head); }
    & > p { max-width: 52ch; }
    & .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }
    & .done-mark {
      display: grid;
      place-items: center;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--accent);
      color: var(--on-ink);
      font-size: 26px;
      font-weight: 600;
    }
  }
}