/* ============================================================================
   SALES NETWORK — rete vendita
   Sess.68. Solo token, `:hover` dentro `@media (hover:hover)`, 4 fasce.
   ========================================================================= */

/* ── contenitore di pagina ────────────────────────────────────────────────
   ⚠️ L'header del sito è `position: fixed` e `<main>` parte da y=0: senza
   spazio in cima il titolo finisce SOTTO la barra di navigazione (visto in
   pagina, non dedotto). E senza padding laterale il contenuto tocca il bordo.
   Non invento una misura mia: è **la stessa regola di `portfolio-page.css`**,
   che usa la variabile canonica `--ds-header-h`. Se un domani l'header cambia
   altezza, questa pagina segue insieme alle altre invece di restare indietro. */
.sales-network-page .page-wrap {
  max-width: var(--page-max, 1200px);
  margin-inline: auto;
  /* §4.2 del DESIGN-CONTRACT — respiro sotto l'header: 24px (--ds-space-6).
     ⚠️ La formula vecchia sbagliava di due cose: usava 18px invece di 24, e
     soprattutto DIMENTICAVA che la pill non parte da zero — sta a
     `--ds-header-gap` (14px) dall'alto. 66+18 = 84, ma il fondo della pill
     e' a 14+66 = 80 ⇒ restavano QUATTRO pixel, e l'intestazione sembrava
     infilata sotto la barra. Ora: 14 + 66 + 24 = 104. */
  padding: calc(var(--ds-header-gap, 14px) + var(--ds-header-h, 66px) + var(--ds-space-6))
           clamp(14px, 3vw, 28px) 48px;
}

.sn-title {
  position: relative;
  margin: 0 0 10px;
  padding-left: 16px;
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ds-c-text);
}

.sn-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0.86em;
  background: linear-gradient(180deg,
              var(--ds-brand-yellow-dark), var(--ds-brand-yellow-light));
}

.sn-lead {
  margin: 0 0 22px;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ds-c-text-secondary);
}

/* ── campo di ricerca ─────────────────────────────────────────────────────
   Senza queste regole restava il campo grezzo del browser, che in una pagina
   con questo livello di finitura si nota subito. */
.sn-search {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 420px;
}

.sn-search__label {
  font-family: 'ConthraxSB', 'Oswald', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ds-c-text-tertiary);
}

.sn-search__input {
  appearance: none;
  width: 100%;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--ds-c-surface-border);
  background: var(--ds-c-surface);
  color: var(--ds-c-text);
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 15px;
}

.sn-search__input::placeholder { color: var(--ds-c-text-tertiary); }

.sn-search__input:focus-visible {
  outline: 2px solid var(--ds-c-focus);
  outline-offset: 2px;
  border-color: var(--ds-c-accent);
}

.sn { display: block; }

/* ── fascia BOZZA ─────────────────────────────────────────────────────────
   Stessa famiglia visiva del banner delle pagine prodotto: giallo brand con
   testo nero (Pattern B), che è leggibile identico in chiaro e in scuro
   perché il giallo non cambia col tema. */
.sn-draft {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ds-brand-yellow-dark);
  color: #1A1A1A;
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .04em;
}

.sn-draft__count {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .18);
  font-variant-numeric: tabular-nums;
}

/* ── filtri per continente ───────────────────────────────────────────────── */
.sn-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.sn-pill {
  appearance: none;
  padding: 9px 16px;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid var(--ds-c-surface-border);
  background: var(--ds-c-surface);
  color: var(--ds-c-text-secondary);
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.sn-pill.is-active {
  border-color: var(--ds-c-accent);
  background: var(--ds-c-accent-subtle);
  color: var(--ds-c-text);
}

.sn-pill:focus-visible {
  outline: 2px solid var(--ds-c-focus);
  outline-offset: 2px;
}

/* ── gruppi e griglia ────────────────────────────────────────────────────── */
.sn-group { margin-bottom: 36px; }

.sn-group__title {
  position: relative;
  margin: 0 0 16px;
  padding-left: 14px;
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ds-c-text);
}

/* Barra titolo: il primo dei due accenti del design system. */
.sn-group__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 32px;
  background: linear-gradient(180deg,
              var(--ds-brand-yellow-dark), var(--ds-brand-yellow-light));
}

.sn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

/* Il cartellino è una colonna dentro una griglia → accento SOLO sul proprio
   lato sinistro (`feedback_accent_borders_logical`). */
.sn-card {
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--ds-c-bg-elevated);
  box-shadow: inset 3px 0 0 rgba(244, 181, 50, .48);
}

body.ds-dark .sn-card {
  box-shadow: inset 3px 0 0 rgba(244, 181, 50, .32);
}

.sn-card__country {
  margin: 0 0 6px;
  font-family: 'ConthraxSB', 'Oswald', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ds-c-accent);
}

.sn-card__company {
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ds-c-text);
}

.sn-card__person {
  margin-top: 2px;
  font-size: 13px;
  color: var(--ds-c-text-secondary);
}

.sn-card__addr {
  margin: 8px 0 0;
  font-style: normal;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ds-c-text-secondary);
}

.sn-card__contacts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 12px 0 0;
  font-size: 13px;
}

.sn-card__dt {
  font-family: 'ConthraxSB', 'Oswald', system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ds-c-text-tertiary);
  align-self: center;
}

.sn-card__dd {
  margin: 0;
  color: var(--ds-c-text);
  overflow-wrap: anywhere;
}

/* ── V-10 · PIU' DISTRIBUTORI IN UN PAESE ────────────────────────────────────
   Hong Kong e Macao ne hanno tre, la Cina due. Prima finivano tutti dentro
   l'indirizzo del primo. Ogni azienda e' un blocco, separato da una riga
   sottile: la separazione la fa il bordo, non lo spazio, perche' dentro una
   card la distanza da sola si legge come "respiro", non come "un'altra". */
.sn-cos { display: grid; gap: 14px; }

.sn-co + .sn-co {
  padding-top: 14px;
  border-top: 1px solid var(--ds-c-border-subtle, rgba(128,128,128,.22));
}

/* Nota di paese (es. «GREATER CHINA REGION — Cina continentale, Hong Kong…»):
   e' contesto, non un contatto ⇒ sta sopra le aziende e pesa meno di loro. */
.sn-card__note {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ds-c-text-tertiary);
}

/* ⭐ `daRivedere`: il dato che dichiara di non essere affidabile. Oggi nessun
   record ce l'ha piu', e la regola resta apposta per il prossimo. */
.sn-card__warn {
  margin: 0 0 10px;
  padding: 6px 9px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ds-c-text);
  background: var(--ds-c-warn-bg, rgba(244,181,50,.12));
  border-left: 3px solid var(--ds-brand-yellow, #F4B532);
}

.sn-card__other {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ds-c-text-tertiary);
}

.sn-link { color: var(--ds-c-text); text-decoration: none; border-bottom: 1px solid var(--ds-c-accent-border); }

.sn-empty {
  padding: 22px;
  border-radius: 12px;
  background: var(--ds-c-surface);
  color: var(--ds-c-text-secondary);
}

/* ── ripiego per chi non trova il proprio paese ──────────────────────────── */
.sn-missing {
  margin-top: 8px;
  padding: 24px;
  border-radius: 14px;
  background: var(--ds-c-surface);
  border: 1px solid var(--ds-c-surface-border);
}

.sn-missing__title {
  margin: 0 0 6px;
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--ds-c-text);
}

.sn-missing__text {
  margin: 0 0 14px;
  color: var(--ds-c-text-secondary);
  max-width: 62ch;
}

/* CTA brand: giallo pieno + testo NERO (`feedback_cta_brand_style`). */
.sn-missing__cta {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--ds-brand-yellow-dark);
  color: #1A1A1A;
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}

@media (hover: hover) {
  .sn-pill:hover { border-color: var(--ds-c-accent-border); color: var(--ds-c-text); }
  .sn-link:hover { border-bottom-color: var(--ds-c-accent); }
  .sn-missing__cta:hover { background: var(--ds-c-accent-hover); }
}

/* ══ FASCE ═══════════════════════════════════════════════════════════════ */

/* app — sotto 1100: una colonna, bersagli touch più generosi. */
@media (max-width: 1099.98px) {
  .sn-grid { grid-template-columns: 1fr; }
  .sn-pill { min-height: 44px; }
  .sn-draft__count { margin-left: 0; }
  .sn-search { max-width: none; }
  .sn-search__input { min-height: 46px; }   /* bersaglio touch */
}

/* wide — da 1850: la griglia respira senza diventare una tabella. */
@media (min-width: 1850px) {
  .sn-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .sn-pill { transition: none; }
}