/* section-note.css — rimando a un'altra pagina in testa o in coda a una sezione.
   File PROPRIO del componente (non in pages.css): serve anche alla Home, che
   pages.css non lo carica. Dichiarato negli assets.css delle pagine che lo usano. */

/* ===== .section-note =====
   Nasce per la FAQ, che sta fuori dal menu. Barra orizzontale: icona · testo ·
   bottone, tutto su una riga dove c'è spazio, in colonna sotto i 34rem.
   Due vesti automatiche: fondo chiaro (default, es. Contatti) e fondo scuro
   (dentro .section-cta, la banda navy→verde). Il link NON eredita il verde
   globale: su navy avrebbe un contrasto insufficiente. */
.section-note {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  max-width: 46rem; margin: 1.75rem auto 0;
  padding: .95rem 1.15rem;
  border: .0625rem solid rgba(64, 141, 90, .35);
  border-left: .25rem solid var(--brand-accent);
  border-radius: .75rem;
  background: #F0F6F2;
}
/* Variante in TESTA alla sezione (link.position: before): stacca dal titolo
   che segue invece che dal contenuto che precede. */
.section-note--before { margin: 0 auto 2rem; }

.section-note-icon { width: 1.5rem; height: 1.5rem; flex: none; color: var(--brand-accent-strong); }
.section-note-lead {
  flex: 1 1 16rem; margin: 0;
  font-size: 1rem; line-height: 1.45; color: var(--brand-ink, #1A1F2E);
}
.section-note-link {
  flex: none;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.05rem; border-radius: .625rem;
  background: var(--brand-accent-strong); color: #fff;
  font-weight: 700; font-size: .9375rem; text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease;
}
.section-note-link::after { content: "→"; }

/* Sulla banda scura di chiusura: card translucida, bottone in outline chiaro. */
.section-cta .section-note {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .28);
  border-left-color: #9FD6B4;
}
.section-cta .section-note-icon { color: #9FD6B4; }
.section-cta .section-note-lead { color: #cfe0d6; }
.section-cta .section-note-link {
  background: transparent; color: #fff;
  border: .0625rem solid rgba(255, 255, 255, .55);
}

@media (hover: hover) {
  .section-note-link:hover { background: #2c6a42; transform: translateY(-.0625rem); }
  .section-cta .section-note-link:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
}
@media (max-width: 34rem) {
  /* Icona ACCANTO al testo, non su una riga sua: allineata alla prima riga
     (flex-start + un filo di margine ottico), il testo occupa lo spazio che
     resta. Solo il bottone va a capo, a piena larghezza. */
  .section-note { gap: .55rem .7rem; align-items: flex-start; padding: .9rem 1rem; }
  .section-note-icon { width: 1.35rem; height: 1.35rem; margin-top: .1rem; }
  .section-note-lead { flex: 1 1 0; min-width: 0; font-size: .9375rem; }
  .section-note-link { flex: 1 1 100%; justify-content: center; margin-top: .35rem; }
}