/* ==========================================================================
   base.css - Trychoakademia
   Kolejnosc: @font-face -> aliasy tokenow -> reset -> layout -> komponenty DS -> motion.
   Wszystkie wartosci pochodza z theme.json wygenerowanego z DESIGN.md.
   theme.json i design-export/tokens.css sa GENEROWANE - nie edytuj ich recznie.
   ========================================================================== */

/* --- Fonty lokalne (zero CDN: RODO + LCP). Subsety latin i latin-ext. ------ */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Aliasy tokenow ------------------------------------------------------
   Makieta hi-fi operuje krotkimi nazwami Design Systemu. Ten blok mapuje je
   na zmienne WYGENEROWANE z DESIGN.md, dzieki czemu transfer sekcji jest 1:1,
   a zrodlem prawdy nadal jest DESIGN.md + konwerter. Zero literalow hex/px.
   Jedyny wyjatek: --font-mono. Konwerter zna tylko rodziny display i body,
   wiec trzeci glos systemu (Geist Mono, DESIGN.md -> fonts.mono) stoi tutaj.
   -------------------------------------------------------------------------- */
:root {
  --paper: var(--wp--preset--color--paper);
  --sand: var(--wp--preset--color--sand);
  --sand-deep: var(--wp--preset--color--sand-deep);
  --navy: var(--wp--preset--color--navy);
  --navy-deep: var(--wp--preset--color--navy-deep);
  --navy-soft: var(--wp--preset--color--navy-soft);
  --gold: var(--wp--preset--color--gold);
  --gold-deep: var(--wp--preset--color--gold-deep);
  --line: var(--wp--preset--color--line);
  --line-dark: var(--wp--preset--color--line-dark);
  --text-body: var(--wp--preset--color--text-body);
  --text-muted: var(--wp--preset--color--text-muted);
  --text-on-dark: var(--wp--preset--color--text-on-dark);
  --text-on-dark-muted: var(--wp--preset--color--text-on-dark-muted);
  --focus-ring: var(--wp--preset--color--focus-ring);

  --surface-page: var(--paper);
  --surface-manifest: var(--navy-deep);
  --surface-tile: var(--sand);
  --accent-cta: var(--navy);
  --accent-ornament: var(--gold-deep);

  --font-display: var(--wp--preset--font-family--display);
  --font-body: var(--wp--preset--font-family--body);
  --font-mono: 'Geist Mono', ui-monospace, monospace; /* DESIGN.md -> fonts.mono; konwerter nie emituje 3. rodziny */

  --fs-d1: var(--wp--preset--font-size--d-1);
  --fs-d2: var(--wp--preset--font-size--d-2);
  --fs-h2: var(--wp--preset--font-size--h-2);
  --fs-h3: var(--wp--preset--font-size--h-3);
  --fs-body: var(--wp--preset--font-size--body);
  --fs-small: var(--wp--preset--font-size--small);
  --fs-kicker: var(--wp--preset--font-size--kicker);
  --fs-bignum: var(--wp--preset--font-size--bignum);
  --lh-d1: var(--wp--custom--type--d-1--line-height);
  --lh-d2: var(--wp--custom--type--d-2--line-height);
  --lh-h2: var(--wp--custom--type--h-2--line-height);
  --lh-h3: var(--wp--custom--type--h-3--line-height);
  --lh-body: var(--wp--custom--type--body--line-height);
  --tr-kicker: var(--wp--custom--type--kicker--letter-spacing);
  --w-body: var(--wp--custom--type--body--weight);
  --w-body-medium: 500;
  --w-heavy: var(--wp--custom--type--d-1--weight);

  --sp-1: var(--wp--preset--spacing--1);
  --sp-2: var(--wp--preset--spacing--2);
  --sp-3: var(--wp--preset--spacing--3);
  --sp-4: var(--wp--preset--spacing--4);
  --sp-5: var(--wp--preset--spacing--5);
  --sp-6: var(--wp--preset--spacing--6);
  --sp-7: var(--wp--preset--spacing--7);
  --sp-8: var(--wp--preset--spacing--8);
  --sp-9: var(--wp--preset--spacing--9);
  --sp-10: var(--wp--preset--spacing--10);
  --gutter: var(--wp--preset--spacing--gutter);
  --measure: var(--wp--preset--spacing--measure);

  --radius-0: var(--wp--custom--radius--0);
  --radius-1: var(--wp--custom--radius--1);
  --radius-2: var(--wp--custom--radius--2);
  --radius-pill: var(--wp--custom--radius--pill);
  --shadow-tile: var(--wp--custom--shadow--tile);
  --shadow-pop: var(--wp--custom--shadow--pop);
  --ease-page: var(--wp--custom--motion--easing);
  --dur-hover: var(--wp--custom--motion--duration--hover);
  --dur-reveal: var(--wp--custom--motion--duration--reveal);
  --dur-photo: var(--wp--custom--motion--duration--photo);

  --wide: 1280px; /* = layout.wideSize z DESIGN.md; media queries i grid nie czytaja var() z theme.json */
  --header-h: 77px;
}

/* --- Reset i baza --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-5));
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Link tekstowy - zloty podkreslnik rosnacy od lewej.
   :not(.btn) chroni przycisk przed przejeciem stylu (lekcja #2). */
a:not(.btn) {
  color: var(--navy);
  text-decoration: none;
  background-image: linear-gradient(var(--gold-deep), var(--gold-deep));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size var(--dur-hover) var(--ease-page);
}
a:not(.btn):hover { background-size: 100% 1px; }
.section--dark a:not(.btn) { color: var(--text-on-dark); background-image: linear-gradient(var(--gold), var(--gold)); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
::selection { background: var(--sand); color: var(--navy-deep); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px;
  z-index: 100;
  background: var(--navy); color: var(--text-on-dark);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-1);
}
.skip-link:focus { top: var(--sp-4); }

/* --- Layout sekcji (lekcje #1 i #3) --------------------------------------- */
.site-main { display: block; }
.alignfull { width: 100%; }

.section {
  display: grid;
  grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--wide)) minmax(var(--gutter), 1fr);
  background: var(--surface-page);
}
.section > * { grid-column: 2; }

.section__inner {
  grid-column: 2;
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
}
.section--dark { background: var(--surface-manifest); color: var(--text-on-dark); }
.section--sand { background: var(--surface-tile); }

/* --- Typografia uzytkowa -------------------------------------------------- */
.display-1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-heavy);
  font-size: var(--fs-d1);
  line-height: var(--lh-d1);
  letter-spacing: var(--wp--custom--type--d-1--letter-spacing);
  text-transform: uppercase;
  color: var(--navy);
}
.display-2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-heavy);
  font-size: var(--fs-d2);
  line-height: var(--lh-d2);
  letter-spacing: var(--wp--custom--type--d-2--letter-spacing);
  color: var(--navy);
}
.h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-heavy);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--navy);
}
.h3 {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
  color: var(--navy);
}
.lead { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.section--dark .h2, .section--dark .display-1, .section--dark .display-2, .section--dark .h3, .section--dark .lead { color: var(--text-on-dark); }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.section--dark .mono { color: var(--text-on-dark-muted); }

/* --- Kicker z ornamentem (DS: Kicker) ------------------------------------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-kicker);
  letter-spacing: var(--tr-kicker);
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.4;
}
.kicker__ornament { width: 36px; height: 1px; background: var(--gold-deep); flex: none; }
.kicker--dark, .section--dark .kicker { color: var(--text-on-dark); }
.kicker--dark .kicker__ornament, .section--dark .kicker__ornament { background: var(--gold); }

/* --- Hairline (DS: Hairline) ---------------------------------------------- */
.hairline { display: flex; align-items: center; gap: 14px; }
.hairline__line { flex: 1; height: 1px; background: var(--gold-deep); opacity: .85; }
.hairline__label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted);
}
.section--dark .hairline__line { background: var(--gold); }
.section--dark .hairline__label { color: var(--text-on-dark-muted); }

/* --- Bignum (DS: pas danych) ---------------------------------------------- */
.bignum { display: flex; flex-direction: column; gap: 6px; }
.bignum__value {
  font-family: var(--font-display);
  font-weight: var(--w-heavy);
  font-size: clamp(44px, 6vw, 96px);
  line-height: var(--wp--custom--type--bignum--line-height);
  letter-spacing: var(--wp--custom--type--bignum--letter-spacing);
  color: var(--navy);
}
.bignum__label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted);
}

/* --- Przyciski (DS: Button). Klasy KONKRETNE, nie gole <a> (lekcja #2) ----- */
.btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .03em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0 28px;
  min-height: 48px;
  border-radius: var(--radius-1);
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  background: none;
  box-sizing: border-box;
  transition: background var(--dur-hover) var(--ease-page), box-shadow var(--dur-hover) var(--ease-page), color var(--dur-hover) var(--ease-page);
}
.btn--primary { background: var(--navy); color: var(--text-on-dark); border-color: var(--navy); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--navy-soft); color: var(--text-on-dark); }
.btn--outline { color: var(--navy); border-color: var(--navy); background: transparent; }
.btn--outline:hover, .btn--outline:focus-visible { background: color-mix(in srgb, var(--navy) 7%, transparent); }
.section--dark .btn--primary { background: var(--sand); color: var(--navy-deep); border-color: var(--sand); }
.section--dark .btn--primary:hover { background: var(--paper); color: var(--navy-deep); }
.section--dark .btn--outline { color: var(--text-on-dark); border-color: var(--text-on-dark); }
.section--dark .btn--outline:hover { background: color-mix(in srgb, var(--text-on-dark) 10%, transparent); }
.btn--link {
  color: var(--navy); padding: 0; min-height: 44px; border-color: transparent;
  box-shadow: inset 0 -1px 0 var(--gold-deep);
}
.btn--link:hover { box-shadow: inset 0 -2px 0 var(--gold-deep); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; margin: 0; }

/* --- Etykieta wagi dowodu (DS: EvidenceTag) - signature move -------------- */
.evidence {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy);
  border: 1px solid var(--gold-deep);
  border-radius: var(--radius-pill);
  padding: 5px 12px 5px 14px;
  line-height: 1;
  white-space: nowrap;
}
.evidence--empty {
  color: var(--text-muted);
  border-style: dashed;
  border-color: var(--sand-deep);
  padding: 5px 12px;
}
.section--dark .evidence { color: var(--text-on-dark); border-color: var(--gold); }

/* --- Kafel foto (DS: PhotoTile) ------------------------------------------- */
.photo-tile { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.photo-tile__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-1);
  box-shadow: var(--shadow-tile);
  background: var(--surface-tile);
}
.photo-tile--16-9 .photo-tile__frame { aspect-ratio: 16 / 9; }
.photo-tile--9-16 .photo-tile__frame { aspect-ratio: 9 / 16; }
.photo-tile--bleed .photo-tile__frame { box-shadow: var(--shadow-pop); }
.photo-tile__frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1);
  transition: transform var(--dur-photo) var(--ease-page);
}
.photo-tile__frame:hover img { transform: scale(1.03); }
.photo-tile__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.photo-tile__ph {
  position: absolute; inset: 10px;
  border: 1px dashed var(--gold-deep);
  border-radius: var(--radius-1);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); padding: var(--sp-4); text-align: center;
}
.photo-tile__ph-kicker {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep);
}
.photo-tile__ph-label { font-family: var(--font-body); font-size: var(--fs-small); color: var(--navy); max-width: 26ch; }
.photo-tile__caption { font-family: var(--font-mono); font-size: var(--fs-kicker); letter-spacing: .08em; color: var(--text-muted); }
.section--dark .photo-tile__ph-label { color: var(--text-on-dark); }
.section--dark .photo-tile__caption { color: var(--text-on-dark-muted); }

/* Ikona play na kadrze wideo. */
.play-badge { position: absolute; left: 20px; bottom: 20px; pointer-events: none; }
.play-badge > span {
  width: 56px; height: 56px;
  border: 1.5px solid var(--gold-deep);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--gold-deep);
  background: color-mix(in srgb, var(--paper) 80%, transparent);
}
.section--dark .play-badge > span {
  border-color: var(--gold); color: var(--gold);
  background: color-mix(in srgb, var(--navy-deep) 70%, transparent);
}

/* --- Pole formularza (DS: InputUnderline) --------------------------------- */
.input-u { display: flex; flex-direction: column; gap: var(--sp-2); font-family: var(--font-body); min-width: 220px; }
.input-u__label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted);
}
.input-u input, .input-u textarea {
  background: transparent; border: none; outline: none;
  border-bottom: 1px solid var(--navy);
  padding: 6px 0 10px;
  font-family: var(--font-body); font-size: var(--fs-body);
  color: var(--text-body);
  border-radius: var(--radius-0);
  min-height: 44px;
  width: 100%;
  transition: border-color var(--dur-hover) var(--ease-page);
}
.input-u input:focus, .input-u textarea:focus { border-bottom: 2px solid var(--gold-deep); }
.section--dark .input-u input { border-bottom-color: var(--line-dark); color: var(--text-on-dark); }

/* Kontener na formularz Forminatora, dopoki go nie ma. */
.form-placeholder {
  border: 1px dashed var(--gold-deep);
  border-radius: var(--radius-1);
  padding: var(--sp-6) var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-kicker);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
/* Forminator w naszym wygladzie - wtyczka ustawiona na motyw "none". */
.forminator-ui input[type="text"],
.forminator-ui input[type="email"] {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--navy) !important;
  border-radius: var(--radius-0) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-body) !important;
  min-height: 44px !important;
}
.forminator-ui button[type="submit"] {
  background: var(--navy) !important;
  color: var(--text-on-dark) !important;
  border-radius: var(--radius-1) !important;
  min-height: 48px !important;
  font-family: var(--font-body) !important;
}

/* --- Strona 404 i podstrony tekstowe -------------------------------------- */
.section--404 { padding: clamp(96px, 12vw, 180px) 0; }
.section--404__inner { display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start; max-width: 60ch; }

/* --- Tresci podstron prawnych (regulamin, polityka, odstapienie) ---------- */
.section--page .section__inner h2 {
  font-family: var(--font-display);
  font-weight: var(--w-heavy);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--navy);
  margin: var(--sp-7) 0 var(--sp-3);
}
.section--page .section__inner h3 {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--navy);
  margin: var(--sp-5) 0 var(--sp-2);
}
.section--page .section__inner h1 + p { margin-top: var(--sp-5); }
.section--page .section__inner p,
.section--page .section__inner li { line-height: var(--lh-body); }
.section--page .section__inner ul,
.section--page .section__inner ol { padding-left: var(--sp-5); }
.section--page .section__inner li { margin-bottom: var(--sp-2); }
.section--page .section__inner hr { border: none; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }

/* --- Baner cookies (A8) --------------------------------------------------- */
.cookie-bar {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  max-width: 720px;
  margin-inline: auto;
  padding: var(--sp-4) var(--sp-5);
  background: var(--navy-deep);
  color: var(--text-on-dark);
  border-radius: var(--radius-1);
  box-shadow: var(--shadow-pop);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar__text { margin: 0; flex: 1 1 260px; font-size: var(--fs-small); line-height: var(--lh-body); }
.cookie-bar__text a { color: var(--text-on-dark); background-image: linear-gradient(var(--gold), var(--gold)); }
.cookie-bar__btn { flex: none; background: var(--sand); color: var(--navy-deep); border-color: var(--sand); }
.cookie-bar__btn:hover, .cookie-bar__btn:focus-visible { background: var(--paper); color: var(--navy-deep); }

/* Na stronie glownej dol ekranu zajmuje pasek zakupu - baner cookies idzie nad niego. */
body.has-sticky-buy .cookie-bar { bottom: calc(var(--sp-4) + 76px); }

@media (max-width: 520px) {
  .cookie-bar { flex-direction: column; align-items: stretch; }
  .cookie-bar__btn { width: 100%; }
}

/* --- Motion --------------------------------------------------------------- */
/* Ukrywamy tylko, gdy JS wystartowal (klasa js-reveal na <html>) - bez JS tresc jest widoczna. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 950ms var(--ease-page), transform 950ms var(--ease-page);
}
.js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
  .photo-tile__frame:hover img { transform: none; }
}