/* ============================================================================
   KULTOWE ALKOHOLE — utilities (typografia, layout, spacing)
   Używaj klas zamiast inline style=. Kolory wyłącznie przez tokeny.
   ============================================================================ */

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--maxw-narrow); }
.container--text { max-width: var(--maxw-text); }
.section { padding-block: clamp(var(--sp-12), 8vw, var(--sp-24)); }
.section--tight { padding-block: clamp(var(--sp-8), 5vw, var(--sp-16)); }
.section--wash-navy { background: var(--bg-wash-navy); }
.section--wash-gold { background: var(--bg-wash-gold); }
.section--dark { background: var(--bg-dark); color: var(--text-prime-dark); }
.full-bleed { width: 100%; }

/* ---------- Grid ---------- */
.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--auto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .grid--stack-sm { grid-template-columns: 1fr; }
}

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: var(--sp-1);} .gap-2 { gap: var(--sp-2);} .gap-3 { gap: var(--sp-3);}
.gap-4 { gap: var(--sp-4);} .gap-6 { gap: var(--sp-6);} .gap-8 { gap: var(--sp-8);}
.flex-1 { flex: 1 1 0; min-width: 0; }

/* ---------- Typografia (mapa do skali Figma) ---------- */
.t-display-xl { font-size: clamp(3rem, 7vw, var(--fs-display-xl)); font-weight: var(--fw-medium); line-height: var(--lh-tight); }
.t-display-l  { font-size: clamp(2.5rem, 6vw, var(--fs-display-l)); font-weight: var(--fw-light); line-height: var(--lh-tight); }
.t-h1 { font-size: clamp(2rem, 4.5vw, var(--fs-h1)); font-weight: var(--fw-regular); line-height: var(--lh-snug); }
.t-h2 { font-size: clamp(1.6rem, 3.5vw, var(--fs-h2)); font-weight: var(--fw-regular); line-height: var(--lh-snug); }
.t-h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.t-h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.t-h5 { font-size: var(--fs-h5); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.t-body-l { font-size: var(--fs-body-l); line-height: var(--lh-relaxed); letter-spacing: var(--ls-body); }
.t-body   { font-size: var(--fs-body-m); line-height: var(--lh-relaxed); }
.t-body-s { font-size: var(--fs-body-s); line-height: var(--lh-normal); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-normal); letter-spacing: var(--ls-caption); }
.t-overline {
  font-size: var(--fs-overline); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-overline); text-transform: uppercase; line-height: var(--lh-normal);
}
.t-overline-s {
  font-size: var(--fs-overline-s); font-weight: var(--fw-regular);
  letter-spacing: var(--ls-overline-s); text-transform: uppercase;
}

.text-center { text-align: center; }
.text-second { color: var(--text-second); }
.text-accent { color: var(--text-accent); }
.text-prime-dark { color: var(--text-prime-dark); }
.text-second-dark { color: var(--text-second-dark); }
.measure { max-width: 56ch; }
.balance { text-wrap: balance; }

/* ---------- Spacing (margin/padding helpers — top/bottom) ---------- */
.mt-1 { margin-top: var(--sp-1);} .mt-2 { margin-top: var(--sp-2);} .mt-3 { margin-top: var(--sp-3);}
.mt-4 { margin-top: var(--sp-4);} .mt-5 { margin-top: var(--sp-5);} .mt-6 { margin-top: var(--sp-6);}
.mt-8 { margin-top: var(--sp-8);} .mt-10 { margin-top: var(--sp-10);} .mt-12 { margin-top: var(--sp-12);}
.mt-16 { margin-top: var(--sp-16);} .mt-20 { margin-top: var(--sp-20);} .mt-24 { margin-top: var(--sp-24);}
.mb-1 { margin-bottom: var(--sp-1);} .mb-2 { margin-bottom: var(--sp-2);} .mb-3 { margin-bottom: var(--sp-3);}
.mb-4 { margin-bottom: var(--sp-4);} .mb-5 { margin-bottom: var(--sp-5);} .mb-6 { margin-bottom: var(--sp-6);}
.mb-8 { margin-bottom: var(--sp-8);} .mb-10 { margin-bottom: var(--sp-10);} .mb-12 { margin-bottom: var(--sp-12);}
.mb-16 { margin-bottom: var(--sp-16);} .mb-20 { margin-bottom: var(--sp-20);} .mb-24 { margin-bottom: var(--sp-24);}
.mx-auto { margin-inline: auto; }

/* ---------- Aspect ratios (zdjęcia wg DS: 4:3, 3:4, 1:1) ---------- */
.ar-43 { aspect-ratio: 4 / 3; }
.ar-34 { aspect-ratio: 3 / 4; }
.ar-11 { aspect-ratio: 1 / 1; }
.ar-169 { aspect-ratio: 16 / 9; }
.cover { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Pomocnicze ---------- */
.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;
}
.divider { height: 1px; background: var(--border-subtle); border: 0; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }