/* dieselpunk — component overrides: ports _brand.css treatment onto .c-* classes.
 * Requires tokens.css (--th-* + --ds-*). Load after core.css. */

/* ---- typography ---- */
.c-h1{
  font-family:var(--ds-f-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.9;
}

.c-h1 .em{ color:var(--ds-accent); }

.c-crumb{
  font-family:var(--ds-f-label);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:var(--ds-small);
}

/* ---- buttons ---- */
.c-btn{
  font-family:var(--ds-f-label);
  font-weight:700;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:14px 22px;
}

.c-btn--solid{
  background:var(--ds-ink);
  color:var(--ds-btn-ink);
}

.c-btn--accent{
  background:var(--ds-accent);
  color:var(--ds-btn-ink);
}

.c-btn--ghost{
  background:transparent;
  color:var(--ds-ink);
  border:2px solid var(--ds-ink);
}

/* ---- CTA / frame treatment ---- */
.c-cta{
  border:2px solid var(--ds-ink);
  overflow:hidden;
  position:relative;
}

/* ---- card: dieselpunk frame ---- */
.c-card{
  border:1px solid var(--ds-line);
  border-top:3px solid var(--ds-ink);
}

/* ---- comparison table: inked header row ---- */
.c-cmp th{
  background:var(--ds-ink);
  color:var(--ds-bg);
  font-family:var(--ds-f-label);
  font-size:var(--ds-small);
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* zebra-stripe with accent tint */
.c-cmp tr:nth-child(even) td{
  background:color-mix(in srgb, var(--ds-accent) 8%, transparent);
}

/* ---- hero ---- */
.c-hero{
  background:var(--th-oil,#16130f);
  color:var(--th-bone,#ece6d6);
  position:relative;
  overflow:hidden;
}

/* image layer: grayscale + raster dot halftone */
.c-hero__img > img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.14);
}

.c-hero__ht{
  position:absolute;inset:0;mix-blend-mode:multiply;opacity:.2;
  background:radial-gradient(circle,#000 42%,transparent 43%) 0 0/4px 4px;
}

.c-hero__vig{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,9,7,.45),transparent 30%,transparent 55%,rgba(10,9,7,.92));
}

.c-hero__glow{
  position:absolute;inset:0;mix-blend-mode:screen;
  background:radial-gradient(ellipse 40% 26% at 50% 30%,color-mix(in srgb,var(--ds-accent) 85%,transparent),transparent 60%);
}

/* ---- horizontal rule / divider ---- */
.c-rule{
  border:none;
  border-top:3px solid var(--ds-ink);
  margin:1.5rem 0;
}

/* ---- mono label / kick line ---- */
.c-label{
  font-family:var(--ds-f-label);
  font-weight:700;
  font-size:var(--ds-small);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ds-accent);
}

/* ---- image dark overlay variant ---- */
.c-img--dark > img{
  filter:grayscale(1) contrast(1.18) brightness(.66);
}

/* hero with media (faza 3.5): image fills, layers over it, body on top */
.c-hero--media{min-height:clamp(340px,48vw,520px);display:flex;align-items:center}
.c-hero__img{position:absolute;inset:0}
.c-hero__body{position:relative;z-index:2;padding:2rem}
.c-hero .c-h1{font-size:clamp(40px,7vw,72px);line-height:.95}

/* signature: mode cards get the dieselpunk frame */
.c-mode{border:1px solid var(--ds-line);border-top:3px solid var(--ds-ink);background:var(--ds-surface)}

/* full-bleed cinematic hero on wide conversion pages (c-page) */
.c-page .c-hero--media{width:100vw;position:relative;left:50%;transform:translateX(-50%);min-height:clamp(420px,55vh,680px)}
.c-page .c-hero__body{max-width:1200px;margin:0 auto;width:100%;padding:2.5rem 24px}

/* hero art v2 ("żarzy się mowa"): left scrim under the headline + glow on the speech cloud */
.c-page .c-hero--media .c-hero__vig{
  background:
    linear-gradient(90deg, rgba(10,9,7,.78) 0%, rgba(10,9,7,.45) 30%, transparent 55%),
    linear-gradient(180deg, rgba(10,9,7,.35), transparent 30%, transparent 60%, rgba(10,9,7,.85));
}
.c-page .c-hero--media .c-hero__glow{
  background:radial-gradient(ellipse 34% 30% at 58% 22%,
    color-mix(in srgb, var(--ds-accent) 80%, transparent), transparent 62%);
}
/* ── Contact (dieselpunk accent) ──────────────────────────────────────── */
.c-contact__form{border-top:3px solid var(--ds-ink)}
.c-form__status:not(:empty):not(.is-error){color:var(--ds-accent)}
/* ── Placement quiz — dieselpunk treatment ─────────────────────────────── */
.c-quiz__q { font-family: var(--th-font-display, inherit); }
.c-opt { border-width: 2px; }
.c-opt[aria-pressed="true"] { background: color-mix(in srgb, var(--ds-accent) 8%, transparent); }
.c-quiz__collection { font-family: var(--th-font-mono, monospace); }
/* ── W2 (2026-07-11): sygnatura karty = linia gazetowa (top-rule), bez cieni ── */
.c-square,.c-split__aside{border-top:3px solid var(--ds-ink)}
.c-square--feat{border-top-color:var(--ds-accent)}

/* ── press-photo treatment: B&W + żar (glow) + mono-podpis prasowy ──
 * Zdjęcie jest grayscale'owane przez CSS (jak .c-hero__img); żar dokłada ::after.
 * Finalne kadry MJ mogą być kolorowe — treatment i tak sprowadzi je do reżimu. */
.c-photo-band,.c-split__figure,.c-founder__figure{background:var(--th-oil)}
.c-photo-band img,.c-split__figure img,.c-founder__figure img{filter:grayscale(1) contrast(1.1) brightness(.88)}
.c-photo-band::after,.c-split__figure::after{
  content:"";position:absolute;inset:0;z-index:1;mix-blend-mode:screen;pointer-events:none;
  background:radial-gradient(ellipse 45% 40% at 62% 35%,color-mix(in srgb,var(--ds-accent) 55%,transparent),transparent 68%);
}
.c-photo-caption{
  font-family:var(--ds-f-label);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:color-mix(in srgb,var(--th-heat-gold) 80%,#fff 0%);
  background:rgba(22,19,15,.55);padding:2px 8px;
}
.c-course-tile{border-top:3px solid var(--ds-ink)}

/* ── training-map: sygnatura dieselpunk ── */
.c-ledger{border-top:3px solid var(--ds-ink)}
.c-ledger__no{color:var(--ds-accent)}
.c-ledger__flabel{color:var(--ds-accent)}
.c-soon{background:var(--ds-accent);color:var(--ds-bg)}
.c-starts__item{border-left-color:var(--ds-accent)}