/* ============================================================
   ARVIO · layout.css
   Container, band cromatiche, ritmo di sezione, griglie, split
   asimmetrici, divider, focus e skip link. Mobile first.
   ============================================================ */

/* ---------------- Skip link (accessibilita 11.1) ---------------- */

.skip-link {
  position: absolute;
  left: var(--space-xs);
  top: -100%;
  z-index: var(--z-skip);
  padding: var(--space-xxs) var(--space-xs);
  background: var(--navy);
  color: var(--parchment);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  transition: top var(--t-fast);
}

.skip-link:focus {
  top: var(--space-xs);
}

/* ---------------- Focus brand (9.3) ---------------- */

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ---------------- Container ---------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.container--editorial { max-width: calc(var(--container-editorial) + 2 * var(--gutter)); }
.container--prose { max-width: calc(var(--container-prose) + 2 * var(--gutter)); }

/* ---------------- Sezione + ritmo verticale ---------------- */

.section {
  padding-block: var(--section-pad);
}

.section--tight { padding-block: var(--space-m); }

/* Spazio prima di un divider, gestito da utilita */
.mt-m { margin-top: var(--space-m); }
.mt-l { margin-top: var(--space-l); }
.mb-s { margin-bottom: var(--space-s); }
.mb-m { margin-bottom: var(--space-m); }

/* ---------------- Band cromatiche (6.3 ritmo) ---------------- */

.band-navy {
  background-color: var(--navy);
  color: var(--parchment);
}

.band-navy-mid {
  background-color: var(--navy-mid);
  color: var(--parchment);
}

.band-parchment {
  background-color: var(--parchment);
  color: var(--navy);
}

.band-white {
  background-color: var(--white);
  color: var(--navy);
}

/* Su fondo scuro: testo secondario in parchment attenuato, non stone */
.band-navy .label,
.band-navy-mid .label,
.band-navy .meta,
.band-navy-mid .meta {
  color: rgba(242, 238, 232, 0.6);
}

.band-navy .quote-editorial cite,
.band-navy-mid .quote-editorial cite {
  color: rgba(242, 238, 232, 0.55);
}

/* ---------------- Full bleed (hero) ---------------- */

.full-bleed {
  width: 100%;
}

/* Home: above-the-fold pieno su ogni breakpoint (D2).
   svh = small viewport height: l'intera composizione resta visibile
   senza scroll anche con la barra del browser mobile aperta. */
.h-hero {
  min-height: 100vh;
  min-height: 100svh;
}

/* Hero secondarie: generose e uniformi su mobile, proporzioni del brief
   da desktop in su. Le pagine interne sono da leggere, non dichiarazioni. */
.h-60,
.h-55,
.h-50 {
  min-height: 64vh;
  min-height: 64svh;
}

@media (min-width: 1024px) {
  .h-60 { min-height: 60vh; min-height: 60svh; }
  .h-55 { min-height: 55vh; min-height: 55svh; }
  .h-50 { min-height: 50vh; min-height: 50svh; }
}

/* Centratura verticale e orizzontale del contenuto di una band */
.band-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ---------------- Griglie (6.5) ---------------- */

.grid {
  display: grid;
  gap: var(--space-m);
}

.grid--2,
.grid--3,
.grid--2x2 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--2x2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------- Split asimmetrico (6.5) ---------------- */

.split {
  display: grid;
  gap: var(--space-m);
  align-items: start;
}

@media (min-width: 1024px) {
  .split { gap: var(--space-l); }
  .split--editorial { grid-template-columns: 2fr 3fr; }   /* ~40 / 60 */
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--reverse > :first-child { order: 2; }
}

/* ---------------- Divider copper (componente 7.5) ---------------- */

.divider-copper {
  width: var(--divider-copper-width);
  height: 0;
  border: 0;
  border-top: var(--border-thin);
  margin-block: var(--space-m);
}

.divider-copper--center {
  margin-inline: auto;
}

.divider-copper--full {
  width: 100%;
}

/* ---------------- Ancore con offset header ---------------- */

:target {
  scroll-margin-top: calc(var(--header-h) + var(--space-s));
}

/* ---------------- Helper di allineamento ---------------- */

.text-center { text-align: center; }
.text-left { text-align: left; }
.mx-auto { margin-inline: auto; }