/* ══════════════════════════════════════════════════════════
   L'ANGOLO AUDIOFILO — hub archivio (.ao-*)
   Token reali da groovilla-base.css. Font a peso caricato (display/serif 400, Lora 400/600).
   ══════════════════════════════════════════════════════════ */
.ao-hub { max-width: 1100px; margin: 0 auto; padding: 3.5rem 0 4rem; }

/* ── testata ── */
.ao-hub-head { max-width: 720px; margin-bottom: 2.4rem; }
.ao-kicker {
  display: block; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--rust); margin-bottom: 14px;
}
.ao-title {
  font-family: var(--display); font-weight: 400; font-size: clamp(38px, 6vw, 62px);
  line-height: 1.02; letter-spacing: -.02em; color: var(--ink); margin: 0 0 16px;
}
.ao-title em { font-style: italic; color: var(--rust); }
.ao-sub {
  font-family: var(--serif-article); font-weight: 400; font-size: 17px; line-height: 1.6;
  color: var(--ink-2); margin: 0; max-width: 60ch;
}

/* ── filetto + I FILONI + contatore ── */
.ao-filoni-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  margin-bottom: 1.6rem;
}
.ao-filoni-label {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink);
}
.ao-filoni-count {
  font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1; color: var(--rust);
}

/* riga-indice (.ao-index*): regole spostate in groovilla-base.css (condivise hub + home).
   Solo la spaziatura sotto la riga, specifica dell'hub: */
.ao-hub .ao-index { margin-bottom: 3rem; }

/* ── filoni: sezioni impilate (01 → 02 → 03) ── */
.ao-filone { margin-bottom: 3.2rem; }
.ao-filone:last-child { margin-bottom: 0; }
/* .ao-filone-head / -kicker / -title stanno in groovilla-base.css (condivise hub + home) */

/* ── card: griglia a 3 colonne (una card = una colonna) ── */
.ao-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 16px;
}
.ao-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--paper-line); background: #fff; transition: transform .15s, box-shadow .15s;
}
a.ao-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -12px oklch(0.2 0.02 60 / .4); }
.ao-card-media { aspect-ratio: 16/10; overflow: hidden; position: relative; background: var(--cream-3); }
.ao-card-media img { width: 100%; height: 100%; object-fit: cover; }

/* badge N.02 in alto a sinistra sulla cover */
.ao-card-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; background: var(--ink);
  padding: 4px 8px; border-radius: 2px;
}

/* fallback SENZA immagine: fondo tramato + nome serif + etichetta (no placeholder grigio) */
.ao-card--noimg .ao-card-media {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 20px; text-align: center;
  background:
    repeating-linear-gradient(45deg, var(--cream-2) 0, var(--cream-2) 9px, var(--cream-3) 9px, var(--cream-3) 18px);
  border-bottom: 3px solid var(--rust);
}
.ao-noimg-name {
  font-family: var(--display); font-weight: 400; font-size: clamp(22px, 4vw, 30px); line-height: 1.05;
  letter-spacing: -.01em; color: var(--ink);
}
.ao-noimg-lbl {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-mute);
}

.ao-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }

/* riga kicker + stato */
.ao-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ao-card-kicker {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.ao-card-status {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--olive-deep); flex: none;
}
.ao-card-status.is-up { color: var(--rust); }

.ao-card-model {
  font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.08;
  letter-spacing: -.01em; color: var(--ink);
}
.ao-card-cat {
  font-family: var(--serif-article); font-weight: 400; font-style: italic; font-size: 14px;
  color: var(--ink-mute); margin-top: -4px;
}

/* Produzione | Usato oggi */
.ao-card-meta { display: flex; gap: 20px; padding: 4px 0; border-top: 1px solid var(--paper-line); }
.ao-card-meta > div { display: flex; flex-direction: column; gap: 3px; }
.ao-meta-lbl {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute);
}
.ao-meta-val {
  font-family: var(--serif-article); font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--ink);
}

/* difficoltà: 3 barre + label */
.ao-card-diff { display: flex; flex-direction: column; gap: 6px; }
.ao-card-diff .ao-meta-lbl { margin-bottom: 1px; }
.ao-diff-bars { display: flex; gap: 5px; align-items: center; }
.ao-diff-bar {
  width: 26px; height: 6px; border-radius: 1px; background: var(--paper-line);
}
.ao-diff-bar.on { background: var(--rust); }
.ao-diff-lbl {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2);
}

.ao-card-title {
  font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.15;
  letter-spacing: -.01em; color: var(--ink);
}
.ao-card-desc {
  font-family: var(--serif-article); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--ink-mute);
}
.ao-card-cta {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rust); margin-top: auto; padding-top: 4px;
}
.ao-card--upcoming .ao-card-cta { color: var(--ink-mute); }

/* ── filone Manutenzione: fascia full-width su fondo scuro (non card in griglia) ── */
.ao-filone--band { margin-bottom: 3.2rem; }
.ao-band {
  display: block; text-decoration: none; background: var(--ink); color: #fff;
  padding: 3rem 3rem 2.7rem; border-radius: 3px; transition: background .15s;
}
.ao-band + .ao-band { margin-top: 16px; }
.ao-band:hover { background: var(--ink-2); }
.ao-band-kicker {
  display: block; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: oklch(0.66 0.14 48); margin-bottom: 16px;
}
.ao-band-title {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(28px, 4.4vw, 42px); line-height: 1.05; letter-spacing: -.01em;
  color: #fff; margin-bottom: 14px;
}
.ao-band-sub {
  display: block; font-family: var(--serif-article); font-weight: 400; font-style: italic;
  font-size: 17px; line-height: 1.55; color: oklch(0.90 0.008 60); margin-bottom: 22px; max-width: 62ch;
}
.ao-band-cta {
  display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  border-bottom: 1px solid oklch(1 0 0 / .4); padding-bottom: 3px;
}
.ao-band:hover .ao-band-cta { border-bottom-color: #fff; }

/* ── mobile: card in colonna singola, indice in colonna con filetto rust ── */
@media (max-width: 860px) {
  .ao-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .ao-hub { padding: 2rem 0 3rem; }
  .ao-cards { grid-template-columns: 1fr; }
  /* .ao-index mobile: in groovilla-base.css (condiviso) */
  .ao-band { padding: 2rem 1.4rem 1.9rem; }
  .ao-band-kicker { margin-bottom: 12px; }
  .ao-band-sub { margin-bottom: 18px; }
}