/* ============================================================
   QuiQuoQua · Base — tipografia + reset light per il layer qq-*
   Non tocca html/body per non rompere le pagine attuali.
   Attiva solo dentro contenitori con .qq-scope
   ============================================================ */

.qq-scope,
.qq-scope * {
  box-sizing: border-box;
}

.qq-scope {
  font-family: var(--qq-font-sans);
  font-size: var(--qq-fs-body);
  line-height: var(--qq-lh-body);
  color: var(--qq-ink);
  background: var(--qq-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.qq-scope img,
.qq-scope picture,
.qq-scope video {
  max-width: 100%;
  display: block;
}

/* --- Container mobile-first --- */
.qq-container {
  width: 100%;
  max-width: var(--qq-container);
  margin: 0 auto;
  padding-left: var(--qq-container-x);
  padding-right: var(--qq-container-x);
}

.qq-container-fluid {
  width: 100%;
  padding-left: var(--qq-container-x);
  padding-right: var(--qq-container-x);
}

/* --- Headings serif --- */
.qq-h,
.qq-h1,
.qq-h2,
.qq-h3,
.qq-hero-title {
  font-family: var(--qq-font-serif);
  font-weight: var(--qq-fw-regular);
  color: var(--qq-ink);
  letter-spacing: var(--qq-ls-tight);
  margin: 0;
}

.qq-hero-title {
  font-size: var(--qq-fs-hero);
  line-height: var(--qq-lh-tight);
  font-weight: var(--qq-fw-regular);
}

.qq-h1 { font-size: var(--qq-fs-h1); line-height: var(--qq-lh-heading); }
.qq-h2 { font-size: var(--qq-fs-h2); line-height: var(--qq-lh-heading); font-weight: var(--qq-fw-medium); }
.qq-h3 { font-size: var(--qq-fs-h3); line-height: var(--qq-lh-heading); font-weight: var(--qq-fw-medium); }

.qq-h em,
.qq-h1 em,
.qq-h2 em,
.qq-h3 em,
.qq-hero-title em {
  font-style: italic;
  font-weight: inherit;
}

/* --- Kicker maiuscoletto --- */
.qq-kicker {
  font-family: var(--qq-font-sans);
  font-size: var(--qq-fs-kicker);
  font-weight: var(--qq-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--qq-ls-kicker);
  color: var(--qq-muted);
  display: inline-block;
}

.qq-kicker--ink { color: var(--qq-ink); }

/* --- Body --- */
.qq-p {
  font-size: var(--qq-fs-body);
  line-height: var(--qq-lh-body);
  color: var(--qq-ink-soft);
  margin: 0 0 var(--qq-space-3);
}

.qq-p--small { font-size: var(--qq-fs-small); }
.qq-p--muted { color: var(--qq-muted); }

/* --- Link editoriale --- */
.qq-link {
  color: var(--qq-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--qq-ink);
  padding-bottom: 2px;
  font-weight: var(--qq-fw-semi);
  transition: color var(--qq-t-fast), border-color var(--qq-t-fast);
}

.qq-link:hover {
  color: var(--qq-ink);
  border-color: var(--qq-canary);
}

/* --- Section title (kicker + h2 + link vedi tutti) --- */
.qq-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--qq-space-3);
  margin-bottom: var(--qq-space-4);
  padding: 0 var(--qq-container-x);
}

.qq-section-head__title {
  font-family: var(--qq-font-serif);
  font-size: var(--qq-fs-h2);
  line-height: var(--qq-lh-heading);
  font-weight: var(--qq-fw-medium);
  color: var(--qq-ink);
  margin: 0;
}

.qq-section-head__title em { font-style: italic; }

.qq-section-head__more {
  font-family: var(--qq-font-sans);
  font-size: var(--qq-fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--qq-ls-btn);
  font-weight: var(--qq-fw-semi);
  color: var(--qq-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--qq-ink);
  padding-bottom: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- Sezione: padding verticale standard --- */
.qq-section {
  padding: var(--qq-space-8) 0;
}

.qq-section--tight { padding: var(--qq-space-6) 0; }
.qq-section--loose { padding: var(--qq-space-10) 0; }

.qq-section--cream-warm { background: var(--qq-cream-warm); }
.qq-section--sand       { background: var(--qq-sand); }
.qq-section--sage       { background: var(--qq-sage); }
.qq-section--blush      { background: var(--qq-blush); }
.qq-section--canary     { background: var(--qq-canary); }
.qq-section--ink        { background: var(--qq-ink); color: var(--qq-cream); }

/* --- Divider sottile --- */
.qq-rule {
  height: 1px;
  background: var(--qq-line);
  border: 0;
  margin: 0;
}

/* --- Scrollbar hidden per caroselli orizzontali --- */
.qq-scroll-x {
  display: flex;
  gap: var(--qq-space-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding-left: var(--qq-container-x);
  padding-right: var(--qq-container-x);
  scroll-padding-left: var(--qq-container-x);
}

.qq-scroll-x::-webkit-scrollbar { display: none; }

.qq-scroll-x > * { scroll-snap-align: start; flex: 0 0 auto; }

/* --- Focus visible accessibile --- */
.qq-scope :focus-visible {
  outline: 2px solid var(--qq-canary);
  outline-offset: 2px;
}