/* ============================================================
   QuiQuoQua · Utilities
   Layout, spacing, visibilità — mobile first
   ============================================================ */

/* --- Grid --- */
.qq-grid       { display: grid; gap: var(--qq-space-4); }
.qq-grid--2    { grid-template-columns: repeat(2, 1fr); }
.qq-grid--3    { grid-template-columns: repeat(3, 1fr); }
.qq-grid--4    { grid-template-columns: repeat(4, 1fr); }

.qq-grid--gap-2 { gap: var(--qq-space-2); }
.qq-grid--gap-3 { gap: var(--qq-space-3); }
.qq-grid--gap-6 { gap: var(--qq-space-6); }

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

/* --- Flex --- */
.qq-flex           { display: flex; }
.qq-flex--col      { flex-direction: column; }
.qq-flex--wrap     { flex-wrap: wrap; }
.qq-flex--center   { align-items: center; justify-content: center; }
.qq-flex--between  { justify-content: space-between; }
.qq-flex--baseline { align-items: baseline; }
.qq-gap-1 { gap: var(--qq-space-1); }
.qq-gap-2 { gap: var(--qq-space-2); }
.qq-gap-3 { gap: var(--qq-space-3); }
.qq-gap-4 { gap: var(--qq-space-4); }
.qq-gap-6 { gap: var(--qq-space-6); }

/* --- Spacing --- */
.qq-mt-0 { margin-top: 0; }
.qq-mt-3 { margin-top: var(--qq-space-3); }
.qq-mt-4 { margin-top: var(--qq-space-4); }
.qq-mt-6 { margin-top: var(--qq-space-6); }
.qq-mt-8 { margin-top: var(--qq-space-8); }

.qq-mb-0 { margin-bottom: 0; }
.qq-mb-3 { margin-bottom: var(--qq-space-3); }
.qq-mb-4 { margin-bottom: var(--qq-space-4); }
.qq-mb-6 { margin-bottom: var(--qq-space-6); }
.qq-mb-8 { margin-bottom: var(--qq-space-8); }

.qq-py-4 { padding-top: var(--qq-space-4); padding-bottom: var(--qq-space-4); }
.qq-py-6 { padding-top: var(--qq-space-6); padding-bottom: var(--qq-space-6); }
.qq-py-8 { padding-top: var(--qq-space-8); padding-bottom: var(--qq-space-8); }

.qq-px { padding-left: var(--qq-container-x); padding-right: var(--qq-container-x); }

/* --- Testo --- */
.qq-text-center { text-align: center; }
.qq-text-left   { text-align: left; }
.qq-text-right  { text-align: right; }

.qq-text-ink     { color: var(--qq-ink); }
.qq-text-muted   { color: var(--qq-muted); }
.qq-text-canary  { color: var(--qq-canary); }
.qq-text-cream   { color: var(--qq-cream); }

/* --- Sfondi --- */
.qq-bg-cream      { background: var(--qq-cream); }
.qq-bg-cream-warm { background: var(--qq-cream-warm); }
.qq-bg-sand       { background: var(--qq-sand); }
.qq-bg-canary     { background: var(--qq-canary); }
.qq-bg-ink        { background: var(--qq-ink); color: var(--qq-cream); }
.qq-bg-sage       { background: var(--qq-sage); }
.qq-bg-blush      { background: var(--qq-blush); }

/* --- Visibilità responsive --- */
.qq-hide            { display: none !important; }
.qq-hide-md         { }
.qq-show-md         { display: none !important; }
.qq-show-inline-md  { display: none !important; }
@media (min-width: 768px) {
  .qq-hide-md        { display: none !important; }
  .qq-show-md        { display: block !important; }
  .qq-show-inline-md { display: inline !important; }
}

/* --- Sr only --- */
.qq-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* --- Ancoraggio nastro canarino (firma brand) --- */
.qq-underline-canary {
  position: relative;
  display: inline-block;
}
.qq-underline-canary::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 4px;
  background: var(--qq-canary);
  transform: skewY(-1deg);
  border-radius: 1px;
}

/* --- Ratio helpers --- */
.qq-ratio-1x1  { aspect-ratio: 1 / 1; }
.qq-ratio-3x4  { aspect-ratio: 3 / 4; }
.qq-ratio-4x5  { aspect-ratio: 4 / 5; }
.qq-ratio-16x9 { aspect-ratio: 16 / 9; }