/* VA-List, bozza grafica: interviste ai CEO (interviste.html e intervista.html).
   Usa i colori e i pezzi di stile.css e pagine.css (testa-pagina, in-evidenza, riquadro, pannello, citazione, filtro...). */

/* ---------- Pezzi in comune ---------- */

.int-v { color: var(--accent-text); font-weight: 600; }
.int-firma { margin-top: 12px; color: var(--text-3); font-family: var(--mono); font-size: 12.5px; }

/* La compagnia non e' piu' in elenco: etichetta neutra, senza rosso */
.int-stato {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.int-stato--attiva { background: var(--accent-soft); color: var(--accent-text); }

/* Una carta: banner, nome, anno e CEO, frase, invito a leggere. Tutta la carta e' cliccabile con il nome. */
.int-carte { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.int-carta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 12px 12px 16px;
  border-radius: var(--r-l);
  background: var(--surface);
  outline: 1px solid var(--line);
  outline-offset: -1px;
  box-shadow: var(--ombra-1);
  transition: outline-color 0.2s, background-color 0.2s;
}
.int-carta:hover { outline-color: var(--line-strong); }
.int-carta:has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.int-carta a:focus-visible { outline: none; }
.int-carta__banner, .int-va__banner { display: block; aspect-ratio: 6 / 1; overflow: hidden; border-radius: 9px; background: var(--surface-3); }
.int-carta__banner img, .int-va__banner img { width: 100%; height: 100%; object-fit: cover; }
/* un banner vero con proporzioni lontane da 6:1 si vede intero, senza tagliare il marchio; ai lati una copia sfocata dei suoi colori */
.int-carta__banner.is-intero, .int-va__banner.is-intero { position: relative; isolation: isolate; }
.int-carta__banner.is-intero::before, .int-va__banner.is-intero::before {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: -1;
  background: var(--banner) center / cover;
  filter: blur(18px) saturate(1.2) brightness(0.8);
}
.int-carta__banner.is-intero img, .int-va__banner.is-intero img { object-fit: contain; }
.int-carta__corpo { display: grid; gap: 9px; align-content: start; padding: 0 6px; }
.int-carta__nome { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 18px; line-height: 1.2; letter-spacing: -0.02em; }
.int-carta__nome .bandiera { flex: none; }
.int-carta__nome a { overflow-wrap: anywhere; }
.int-carta__nome a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-l); }
.int-carta__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--text-3); font-family: var(--mono); font-size: 12.5px; }
.int-carta__citazione { margin: 0; color: var(--text-2); font-size: 15.5px; line-height: 1.55; }
.int-carta__piede { margin-top: auto; padding: 2px 6px 0; font-size: 14.5px; }
.int-carta:hover .link-freccia .icona { transform: translateX(3px); }
.int-carta__nome .int-stato { flex: none; }

/* aree da toccare di almeno 40 px senza spostare niente */
.int-hub .briciole a, .int-testa .briciole a { padding: 10px 5px; margin: -10px -5px; }
.int-hub .sezione-testa .link-freccia, .int-pagina .sezione-testa .link-freccia, .int-invito-lato .link-freccia, .int-assente__azioni .link-freccia { min-height: 44px; }
.int-hub .in-evidenza h2 a { display: inline-block; padding-block: 8px; margin-block: -8px; }
.int-va__nome a { padding-block: 10px; margin-block: -10px; }

/* ---------- Elenco ---------- */

.int-hub .sezione-testa { margin-bottom: 22px; }

/* ricerca, anno e "ancora in elenco" sulla stessa riga */
.int-barra { display: grid; grid-template-columns: minmax(0, 1fr) 180px auto; align-items: center; gap: 10px; }
.int-barra__cerca {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--text-3) 40%, var(--surface));
  border-radius: 12px;
  background: var(--surface);
  transition: border-color 0.2s, box-shadow 0.2s;
}
:root[data-theme="light"] .int-barra__cerca { border-color: color-mix(in srgb, var(--text-3) 70%, var(--surface)); }
.int-barra__cerca:hover { border-color: var(--text-3); }
.int-barra__cerca:focus-within { border-color: rgb(242 181 68 / 0.7); box-shadow: 0 0 0 4px var(--accent-soft); }
.int-barra__cerca .icona { color: var(--text-3); }
.int-barra__cerca input {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}
.int-barra__cerca input::placeholder { color: var(--text-3); }
.int-barra__anno select { min-height: 48px; }
.int-seg { align-items: center; flex-wrap: nowrap; }
.int-seg .filtro { height: 40px; padding: 0 14px; white-space: nowrap; }

.int-riga { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; margin: 16px 0 14px; }
.int-conto { color: var(--text-2); font-size: 14.5px; }
.int-conto b { color: var(--text); font-variant-numeric: tabular-nums; }
.int-azzera {
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--accent-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.int-azzera:hover { background: var(--accent-soft); }
.int-vuoto { grid-column: 1 / -1; margin-top: 0; }

/* Farsi intervistare */
.int-passi { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.int-passi__num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
}
.int-invito { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }
.int-invito .link-freccia { min-height: 44px; }
.int-domande { margin-top: 24px; border-radius: var(--r-m); background: var(--surface); outline: 1px solid var(--line); outline-offset: -1px; }
.int-domande summary {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 18px;
  border-radius: var(--r-m);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.int-domande summary::-webkit-details-marker { display: none; }
.int-domande summary::after { content: "+"; margin-left: auto; color: var(--text-3); font-family: var(--mono); font-size: 18px; }
.int-domande[open] summary::after { content: "\2212"; }
.int-domande ol { display: grid; gap: 12px; padding: 4px 18px 20px 42px; color: var(--text-2); }
.int-domande li::marker { color: var(--accent-text); font-family: var(--mono); font-size: 13px; }
.int-hub .nota-bozza { margin-top: 32px; line-height: 1.55; }

/* ---------- Singola intervista ---------- */

.int-testa h1 { max-width: 22ch; }
.int-h1__lead {
  display: block;
  margin-bottom: 10px;
  color: var(--text-2);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.int-h1__nome { display: block; overflow-wrap: anywhere; }

.int-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 26px; }
.int-meta__chi { display: flex; align-items: center; gap: 12px; min-width: 0; }
.int-meta__chi .avatar { width: 46px; height: 46px; border-radius: 14px; font-size: 15px; }
.int-meta__dato { display: grid; gap: 2px; min-width: 0; color: var(--text-3); font-family: var(--mono); font-size: 12.5px; }
.int-meta__dato b { color: var(--text); font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }

.int-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.int-articolo { min-width: 0; max-width: 780px; }
.int-lato { display: grid; gap: 16px; min-width: 0; }

/* la frase in apertura riusa .citazione (pagine.css) */
.int-lead { margin: 0; }
.int-lead p { margin: 0; }
.int-testo-nota { margin-top: 14px; color: var(--text-3); font-size: 14px; }

.int-qa { list-style: none; margin-top: 34px; }
.int-q { padding: 32px 0; border-top: 1px solid var(--line); }
.int-q:first-child { padding-top: 6px; border-top: 0; }
.int-q__testa { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 14px; }
.int-q__num { padding-top: 2px; color: var(--accent-text); font-family: var(--mono); font-size: 14px; font-weight: 500; }
.int-q__tema { margin-bottom: 7px; color: var(--text-3); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; }
.int-q h2 { font-size: clamp(18px, 1.5vw, 20.5px); font-weight: 650; line-height: 1.38; letter-spacing: -0.015em; text-wrap: pretty; }
.int-q__risposta { display: grid; gap: 15px; max-width: 66ch; margin: 16px 0 0 62px; }
.int-q__risposta p, .int-q__risposta li { color: var(--text-2); font-size: 17.5px; line-height: 1.7; overflow-wrap: break-word; }
.int-q__risposta a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.int-q__risposta a:hover { color: var(--text); }
.int-q__risposta ul { list-style: none; display: grid; gap: 7px; padding: 0; }
.int-q__risposta li { position: relative; padding-left: 22px; }
.int-q__risposta li::before { content: ""; position: absolute; left: 3px; top: 0.78em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.int-pdf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 14px;
  padding: 22px 24px;
  border-radius: var(--r-l);
  background: var(--surface);
  outline: 1px solid var(--line);
  outline-offset: -1px;
}
.int-pdf h2 { font-size: 17px; letter-spacing: -0.015em; }
.int-pdf p { margin-top: 6px; color: var(--text-2); font-size: 14.5px; }

.int-vicine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.int-vicina {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 84px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
  transition: border-color 0.2s, background-color 0.2s;
}
.int-vicina:hover { border-color: var(--line-strong); background: var(--surface-2); }
.int-vicina span { display: flex; align-items: center; gap: 6px; color: var(--text-3); font-family: var(--mono); font-size: 12px; }
.int-vicina span .icona { width: 15px; height: 15px; }
.int-vicina b { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.int-vicina small { color: var(--text-3); font-family: var(--mono); font-size: 12px; }
.int-vicina--avanti { text-align: right; }
.int-vicina--avanti span { justify-content: flex-end; }
.int-vicina--vuota { min-height: 0; padding: 0; border: 0; background: none; }

/* scheda della compagnia a lato */
.int-va { display: grid; gap: 12px; align-content: start; }
.int-va__nome { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; }
.int-va__nome a:hover { color: var(--accent-text); }
.int-va__nome .bandiera { flex: none; }
.int-va__stato { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--text-2); font-size: 14px; }
.int-va > p { margin-top: 0; }
/* il nome della compagnia puo' essere lungo: il testo dei pulsanti va a capo invece di uscire dalla scheda */
.int-va .btn { height: auto; min-height: 44px; margin-top: 0; padding-block: 11px; line-height: 1.25; text-align: center; white-space: normal; }
.int-va.voto .voto__rango { margin-top: 4px; }
.int-va.voto .voto__voti { margin-top: 0; }
.int-va.voto .btn { margin-top: 6px; }
.int-va.voto .btn + .btn { margin-top: 0; }
.int-invito-lato > p + p { margin-top: 12px; }

/* intervista non trovata */
.int-assente b { font-size: 19px; }
.int-assente__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 6px; }

.int-nota-riga { padding-block: 0 clamp(32px, 5vw, 56px); }
.int-nota { line-height: 1.55; }
.int-nota p + p, .int-nota p + ul { margin-top: 8px; }
.int-nota ul { display: grid; gap: 4px; padding-left: 18px; }
.int-pagina .sezione--alt + .int-nota-riga { padding-top: clamp(24px, 4vw, 40px); }

/* ---------- Schermi piu' stretti ---------- */

@media (min-width: 1001px) and (min-height: 780px) {
  .int-lato { position: sticky; top: calc(var(--testata-h) + 24px); }
}

@media (max-width: 1000px) {
  .int-griglia { grid-template-columns: minmax(0, 1fr); }
  .int-articolo { max-width: none; }
  .int-lato { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .int-passi { grid-template-columns: minmax(0, 1fr); }
  .int-hub .in-evidenza__banner { order: -1; }
}

@media (max-width: 860px) {
  .int-barra { grid-template-columns: 170px minmax(0, 1fr); }
  .int-barra__cerca { grid-column: 1 / -1; }
  .int-seg { justify-self: start; }
}

@media (max-width: 640px) {
  .int-barra { grid-template-columns: minmax(0, 1fr); }
  .int-seg { justify-self: stretch; }
  .int-seg .filtro { flex: 1 1 0; padding: 0 8px; }
  .int-lato { grid-template-columns: minmax(0, 1fr); }
  .int-vicine { grid-template-columns: minmax(0, 1fr); }
  .int-vicina--vuota { display: none; }
  .int-vicina--avanti { text-align: left; }
  .int-vicina--avanti span { justify-content: flex-start; }
  .int-pdf { padding: 20px; }
  .int-pdf .btn { width: 100%; }
}

@media (max-width: 560px) {
  .int-q { padding: 28px 0; }
  .int-q__testa { grid-template-columns: 30px minmax(0, 1fr); gap: 0 10px; }
  .int-q__risposta { margin-left: 0; margin-top: 14px; }
  .int-q__risposta p, .int-q__risposta li { font-size: 17px; }
  .int-lead.citazione { padding: 54px 18px 18px; }
  .int-lead.citazione .icona { left: 18px; top: 16px; }
  .int-meta { gap: 14px 22px; }
}

@media (max-width: 380px) {
  .int-seg .filtro { font-size: 13px; padding: 0 6px; }
  .int-seg .filtro small { display: none; }
}