/* ============================================================
   Poco Loco Design System — production token bundle
   The ONLY stylesheet: colors → typography → spacing → motion →
   base helpers → components. Fonts load via <link> in head.html
   (no @import — avoids a blocking chained request).
   ============================================================ */

/* --- Colour tokens ------------------------------------------------- */
:root {
  --pl-orange: #E77817;
  --pl-red: #DA251D;
  --pl-ink: #111111;
  --pl-warm-white: #FAF7F5;

  --pl-gradient: linear-gradient(135deg, #E77817 0%, #DA251D 100%);
  --pl-gradient-soft: linear-gradient(135deg, rgba(231,120,23,0.16) 0%, rgba(218,37,29,0.16) 100%);

  --pl-ink-900: #111111;
  --pl-ink-800: #1C1B1A;
  --pl-ink-700: #2A2826;
  --pl-ink-600: #45413D;
  --pl-ink-500: #6B655F;
  --pl-ink-400: #938C84;
  --pl-ink-300: #C2BAB2;
  --pl-ink-200: #E2DBD4;
  --pl-ink-100: #EFEAE5;

  --pl-paper: #FAF7F5;
  --pl-paper-raised: #FFFFFF;
  --pl-paper-sunken: #F2ECE7;

  --pl-event-forestrun: #2E7D44;
  --pl-event-zuk: #3B82C4;
  --pl-event-gpw: #E77817;
  --pl-event-korba: #D81E45;  /* Poznańska Korba brand crimson (was bronze); teal #16A6A0 is the secondary */
  --pl-event-zadyszka: #00A89D;
  --pl-event-fjallraven: #FB9E00;  /* Fjällräven Campfire — amber accent (teal #003954 is the brand base) */

  --color-bg: var(--pl-paper);
  --color-bg-raised: var(--pl-paper-raised);
  --color-bg-sunken: var(--pl-paper-sunken);
  --color-bg-inverse: var(--pl-ink-900);

  --color-text: var(--pl-ink-900);
  --color-text-muted: var(--pl-ink-500);
  --color-text-faint: var(--pl-ink-400);
  --color-text-inverse: var(--pl-warm-white);
  --color-text-on-accent: #FFFFFF;

  --color-accent: var(--pl-orange);
  --color-accent-strong: var(--pl-red);
  --color-border: var(--pl-ink-200);
  --color-border-strong: var(--pl-ink-300);
  --color-hairline-inverse: rgba(250,247,245,0.16);

  --event-accent: var(--pl-orange);
  --event-accent-contrast: #FFFFFF;

  --pl-scrim-bottom: linear-gradient(180deg, rgba(17,17,17,0) 0%, rgba(17,17,17,0.55) 60%, rgba(17,17,17,0.9) 100%);
  --pl-scrim-full: linear-gradient(180deg, rgba(17,17,17,0.55) 0%, rgba(17,17,17,0.2) 35%, rgba(17,17,17,0.85) 100%);
  --pl-scrim-left: linear-gradient(90deg, rgba(17,17,17,0.85) 0%, rgba(17,17,17,0.35) 45%, rgba(17,17,17,0) 100%);
}

/* --- Typography tokens -------------------------------------------- */
:root {
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-numeric: 'Archivo', system-ui, sans-serif;

  --text-mega: clamp(4rem, 12vw, 11rem);
  --text-display-1: clamp(3rem, 8vw, 7rem);
  --text-display-2: clamp(2.4rem, 5.5vw, 4.5rem);
  --text-display-3: clamp(1.9rem, 3.6vw, 3rem);
  --text-headline: clamp(1.5rem, 2.4vw, 2.1rem);

  --text-xl: 1.5rem;
  --text-lg: 1.25rem;
  --text-md: 1.0625rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --text-2xs: 0.6875rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  --leading-tight: 0.92;
  --leading-snug: 1.1;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-mega: -0.02em;
  --tracking-display: -0.005em;
  --tracking-normal: 0;
  --tracking-eyebrow: 0.22em;
  --tracking-label: 0.08em;

  --eyebrow-size: var(--text-xs);
  --eyebrow-tracking: var(--tracking-eyebrow);
  --body-size: var(--text-md);
  --body-leading: var(--leading-relaxed);
}

/* --- Spacing, radii, shadows, layout ------------------------------ */
:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 11rem;

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  --border-hairline: 1px;
  --border-rule: 2px;
  --border-heavy: 3px;

  --shadow-sm: 0 1px 2px rgba(17,17,17,0.06), 0 1px 1px rgba(17,17,17,0.04);
  --shadow-md: 0 8px 24px rgba(17,17,17,0.10);
  --shadow-lg: 0 24px 60px rgba(17,17,17,0.18);
  --shadow-photo: 0 30px 80px rgba(17,17,17,0.30);

  --container-max: 1320px;
  --container-pad: clamp(1.25rem, 5vw, 5rem);
  --section-gap: clamp(4rem, 9vw, 11rem);
  --grid-gap: clamp(1rem, 1.5vw, 1.5rem);
}

/* --- Motion tokens ------------------------------------------------ */
:root {
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
  --dur-reveal: 900ms;
  --dur-parallax: 1200ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --hover-lift: translateY(-4px);
  --press-scale: scale(0.98);
  --hover-photo-zoom: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
    --dur-parallax: 0ms;
  }
}

/* --- Base layer & cinematic primitives ---------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.pl-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.pl-mega {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.pl-eyebrow {
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pl-eyebrow--accent { color: var(--event-accent); }
.pl-eyebrow--ondark { color: rgba(250,247,245,0.6); }
.pl-eyebrow--rule {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.pl-eyebrow--rule::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}

.pl-figure {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-mega);
  line-height: 0.9;
}

.pl-gradient-text {
  background: var(--pl-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pl-gradient-bg { background: var(--pl-gradient); }

/* Cinematic photo-block placeholder */
.pl-photo {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 70% 15%, color-mix(in oklab, var(--event-accent) 42%, transparent) 0%, transparent 55%),
    radial-gradient(140% 120% at 15% 85%, rgba(17,17,17,0.55) 0%, transparent 60%),
    linear-gradient(160deg, var(--pl-ink-800) 0%, var(--pl-ink-900) 100%);
  color: rgba(250,247,245,0.55);
  isolation: isolate;
}
.pl-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pl-photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.pl-photo:has(.pl-photo__img)::after { opacity: 0.16; }
.pl-photo:has(.pl-photo__img) .pl-photo__label { display: none; }

/* Scrim overlays */
.pl-scrim-bottom::before,
.pl-scrim-full::before,
.pl-scrim-left::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.pl-scrim-bottom::before { background: var(--pl-scrim-bottom); }
.pl-scrim-full::before   { background: var(--pl-scrim-full); }
.pl-scrim-left::before   { background: var(--pl-scrim-left); }

/* Layout container */
.pl-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Fade-up reveal */
.pl-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
.pl-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pl-reveal { opacity: 1; transform: none; }
}

/* Hairline rules */
.pl-rule { border: 0; border-top: var(--border-hairline) solid var(--color-border); }
.pl-rule--inverse { border-top-color: var(--color-hairline-inverse); }

/* Skip-to-content link (visible on focus only) */
.pl-skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  background: var(--pl-ink-900);
  color: var(--pl-warm-white);
  padding: var(--space-3) var(--space-5);
  font-weight: var(--weight-bold);
  text-decoration: none;
}
.pl-skip-link:focus {
  left: var(--space-3);
  top: var(--space-3);
}

/* ============================================================
   Component styles — Button, Badge, EventCard
   ============================================================ */

/* Button */
.pl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.85em 1.75em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast);
  border: 2px solid transparent;
  white-space: nowrap;
}
.pl-btn:active { transform: var(--press-scale); }

.pl-btn--primary {
  background: var(--pl-gradient);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.pl-btn--primary:hover {
  transform: var(--hover-lift);
  box-shadow: var(--shadow-md);
  color: #fff;
  text-decoration: none;
}

/* Accent button — adopts the in-scope --event-accent (DS Button variant="accent") */
.pl-btn--accent {
  background: var(--event-accent);
  color: var(--event-accent-contrast);
  box-shadow: var(--shadow-sm);
}
.pl-btn--accent:hover {
  transform: var(--hover-lift);
  box-shadow: var(--shadow-md);
  color: var(--event-accent-contrast);
  text-decoration: none;
}

.pl-btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.pl-btn--secondary:hover {
  transform: var(--hover-lift);
  background: var(--color-bg-raised);
  text-decoration: none;
}

.pl-btn--secondary-ondark {
  background: transparent;
  color: var(--pl-warm-white);
  border-color: rgba(250,247,245,0.5);
}
.pl-btn--secondary-ondark:hover {
  transform: var(--hover-lift);
  background: rgba(250,247,245,0.1);
  color: var(--pl-warm-white);
  text-decoration: none;
}

.pl-btn--ghost-ondark {
  background: transparent;
  color: rgba(250,247,245,0.82);
  border-color: rgba(250,247,245,0.28);
}
.pl-btn--ghost-ondark:hover {
  transform: var(--hover-lift);
  color: var(--pl-warm-white);
  border-color: rgba(250,247,245,0.55);
  text-decoration: none;
}

.pl-btn--white {
  background: #fff;
  color: var(--pl-ink-900);
  border-color: #fff;
}
.pl-btn--white:hover {
  transform: var(--hover-lift);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.pl-btn--lg {
  font-size: var(--text-base);
  padding: 1em 2em;
}
.pl-btn--sm {
  font-size: var(--text-xs);
  padding: 0.65em 1.25em;
}

/* Badge */
.pl-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.75em;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
}
.pl-badge--accent {
  color: var(--event-accent);
  background: transparent;
}
.pl-badge--solid-accent {
  background: var(--event-accent);
  color: var(--event-accent-contrast);
  border-color: transparent;
}
.pl-badge--inverse {
  background: rgba(250,247,245,0.15);
  color: var(--pl-warm-white);
  border-color: rgba(250,247,245,0.35);
}
/* dev / "in preparation" — muted grey fill (DS Badge tone="dev") */
.pl-badge--dev {
  background: var(--pl-ink-200);
  color: var(--pl-ink-700);
  border-color: transparent;
}
.pl-badge--dev.pl-badge--ondark {
  background: rgba(250,247,245,0.12);
  color: rgba(250,247,245,0.7);
}
.pl-badge--live::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--event-accent);
  border-radius: 50%;
  animation: pl-pulse 1.8s ease-in-out infinite;
}
@keyframes pl-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .pl-badge--live::before { animation: none; }
}

/* EventCard */
.pl-event-card {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--pl-warm-white);
}
.pl-event-card:hover .pl-event-card__img,
.pl-event-card:hover .pl-photo__img { transform: scale(1.04); }
.pl-event-card .pl-photo__img { transition: transform var(--dur-reveal) var(--ease-out); }
.pl-event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pl-event-card { transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }

.pl-event-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.pl-event-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-reveal) var(--ease-out);
}

.pl-event-card__scrim {
  position: absolute;
  inset: 0;
  background: var(--pl-scrim-bottom);
  z-index: 1;
}

.pl-event-card__body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-5);
}

.pl-event-card__accent-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--event-accent);
  z-index: 3;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.pl-event-card:hover .pl-event-card__accent-bar { transform: scaleX(1); }

/* Status pill, top-right of the card (DS EventCard status="live|dev") */
.pl-event-card__status {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 3;
}

/* Tall feature tile (DS EventCard tall) */
.pl-event-card--tall { min-height: 520px; }
.pl-event-card--tall .pl-event-card__title { font-size: var(--text-display-3); }

.pl-event-card__stat-value {
  font-family: var(--font-display);
  font-size: var(--text-display-3);
  line-height: 1;
  letter-spacing: var(--tracking-mega);
  color: var(--event-accent);
}
.pl-event-card__stat-label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgba(250,247,245,0.7);
  margin-top: 2px;
}
.pl-event-card__discipline {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(250,247,245,0.6);
  margin-top: var(--space-3);
}
.pl-event-card__title {
  font-family: var(--font-display);
  font-size: var(--text-headline);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--pl-warm-white);
  margin: 0.2em 0 0;
}
.pl-event-card__location {
  font-size: var(--text-xs);
  color: rgba(250,247,245,0.55);
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: 0.3em;
}

/* StatBlock (count-up) */
.pl-stat__value {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-mega);
  line-height: 0.9;
}
.pl-stat--sm .pl-stat__value  { font-size: var(--text-display-3); }
.pl-stat--md .pl-stat__value  { font-size: var(--text-display-2); }
.pl-stat--lg .pl-stat__value  { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.pl-stat--mega .pl-stat__value { font-size: var(--text-mega); }
.pl-stat__value--accent { color: var(--event-accent); }
.pl-stat__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.pl-stat--ondark .pl-stat__label { color: rgba(250,247,245,0.6); }
.pl-stat__value--gradient {
  background: var(--pl-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   Page primitives — DS hero band + long-form prose
   Used by generic content pages (o nas, współpraca, kontakt, EN)
   ============================================================ */

/* Dark hero band that clears the fixed 76px header */
.pl-page-hero {
  background: var(--pl-ink-900);
  color: var(--pl-warm-white);
  padding: calc(76px + clamp(3rem, 8vh, 6rem)) 0 clamp(3rem, 8vh, 5rem);
  position: relative;
  overflow: hidden;
}
.pl-page-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-display-1);
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  margin: 0.3em 0 0;
  max-width: 18ch;
}
.pl-page-hero__lead {
  max-width: 52ch;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: rgba(250,247,245,0.78);
  margin: var(--space-5) 0 0;
}

/* Long-form prose, design-system styled (replaces Tailwind .prose) */
.pl-prose { font-size: var(--text-md); line-height: 1.7; color: var(--color-text); }
.pl-prose > *:first-child { margin-top: 0; }
.pl-prose p, .pl-prose li { color: var(--pl-ink-600); }
.pl-prose h2 {
  font-family: var(--font-display);
  font-size: var(--text-display-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: 1;
  color: var(--color-text);
  margin: var(--space-8) 0 var(--space-4);
}
.pl-prose h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: var(--space-6) 0 var(--space-2);
}
.pl-prose a { color: var(--pl-orange); text-decoration: underline; text-underline-offset: 2px; }
.pl-prose a:hover { color: var(--pl-red); }
.pl-prose strong { font-weight: var(--weight-bold); color: var(--color-text); }
.pl-prose ul, .pl-prose ol { padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.pl-prose blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 3px solid var(--event-accent);
  font-family: var(--font-display);
  font-size: var(--text-headline);
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--color-text);
}
.pl-prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin: var(--space-5) 0; }
.pl-prose th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: var(--space-3);
  background: var(--pl-ink-900);
  color: var(--pl-warm-white);
}
.pl-prose td { padding: var(--space-3); border-top: 1px solid var(--color-border); }
.pl-prose tr:nth-child(even) td { background: var(--pl-paper-sunken); }