/* HLA4 Transplant: fonty, tokeny, typografia, przyciski, narzędzia. Progi: 480, 720, 960, 1200. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-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: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-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: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-condensed-600-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: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-condensed-600-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: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-700-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: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-700-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: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/barlow-condensed-800-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: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/barlow-condensed-800-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;
}

:root {
  --h4-black: #000;
  --h4-night: #000;
  --h4-ink2: #0c0c0c;
  --h4-white: #fff;
  --h4-paper2: #f2f2f2;
  --h4-red: #d62f3a;
  --h4-red-deep: #9e1620;
  --h4-heart: #d62f3a;

  --h4-bg: #000;
  --h4-text: #fff;
  --h4-mute: #b8b8b8;
  --h4-surface: rgba(255, 255, 255, 0.07);
  --h4-surface-2: rgba(255, 255, 255, 0.12);
  --h4-line: rgba(255, 255, 255, 0.2);
  --h4-accent: #e0343f;
  --h4-accent-ink: #fff;
  --h4-link: #fff;

  --h4-radius: 6px;
  --h4-gap: clamp(14px, 2vw, 26px);
  --h4-pad: clamp(16px, 4vw, 56px);
  --h4-wrap: min(1240px, 100% - 2 * var(--h4-pad));
  --h4-font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --h4-font-display: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --h4-header-h: 72px;
  --h4-torn-h: clamp(18px, 3.2vw, 46px);
  --h4-torn-bg: #000;
}

/* Sekcja jasna: biała kartka (te same nazwy tokenów, inne wartości; komponenty wtyczek nic nie wiedzą o tle). */
.h4-paper {
  --h4-bg: #fff;
  --h4-text: #000;
  --h4-mute: #4a4a4a;
  --h4-surface: #f2f2f2;
  --h4-surface-2: #e6e6e6;
  --h4-line: rgba(0, 0, 0, 0.2);
  --h4-accent: #b81d28;
  --h4-accent-ink: #fff;
  --h4-link: #000;
  --h4-torn-bg: #fff;
  background: var(--h4-bg);
  color: var(--h4-text);
}

/* Pas czerwony (liczby, manifest, zaproszenie): biel na czerwieni */
.h4-red {
  --h4-bg: #d62f3a;
  --h4-text: #fff;
  --h4-mute: rgba(255, 255, 255, 0.88);
  --h4-surface: rgba(0, 0, 0, 0.16);
  --h4-surface-2: rgba(0, 0, 0, 0.26);
  --h4-line: rgba(255, 255, 255, 0.45);
  --h4-accent: #fff;
  --h4-accent-ink: #9e1620;
  --h4-link: #fff;
  --h4-torn-bg: #d62f3a;
  background: var(--h4-bg);
  color: var(--h4-text);
}

/* Sekcja czarna druga (odcień do przełamania) */
.h4-black2 {
  --h4-bg: #0c0c0c;
  --h4-torn-bg: #0c0c0c;
  background: var(--h4-bg);
  color: var(--h4-text);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: #000;
}

body.h4-site {
  margin: 0;
  background: #000;
  color: var(--h4-text);
  font-family: var(--h4-font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.h4-site img,
.h4-site svg,
.h4-site video,
.h4-site iframe {
  max-width: 100%;
}

.h4-site img {
  height: auto;
}

.h4-site a {
  color: var(--h4-link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.h4-site a:hover {
  color: var(--h4-accent);
}

.h4-site :focus-visible {
  outline: 3px solid var(--h4-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Zdjęcia czarno-białe (ustawienie HLA4, Wygląd); kolor wraca po najechaniu na urządzeniach z myszą */
.h4-bw main img,
.h4-bw .h4-hero__media img,
.h4-bw .h4c-lightbox img {
  filter: grayscale(1) contrast(1.06);
  transition: filter 0.3s ease;
}

@media (hover: hover) {
  .h4-bw main a:hover img,
  .h4-bw main .h4c-card:hover img,
  .h4-bw main .h4tv-card:hover img {
    filter: none;
  }
}

.h4-bw main .h4-color img,
.h4-bw main img.h4-color {
  filter: none;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 18px;
  clip: auto;
  background: var(--h4-red);
  color: #fff;
  font-weight: 800;
  border-radius: 6px;
}

.h4-wrap {
  width: var(--h4-wrap);
  margin-inline: auto;
}

/* Typografia */
.h4-site h1,
.h4-site h2,
.h4-site h3,
.h4-site h4 {
  font-family: var(--h4-font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 0.5em;
  color: var(--h4-text);
}

.h4-site h1 {
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
}

.h4-site h2 {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
}

.h4-site h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
}

.h4-site h4 {
  font-size: 1.2rem;
}

.h4-site p {
  margin: 0 0 1em;
}

.h4-site .h4-eyebrow {
  margin: 0 0 0.7em;
  font-family: var(--h4-font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--h4-accent);
}

.h4-eyebrow a {
  color: inherit;
  text-decoration: none;
}

.h4-title {
  margin: 0;
}

/* Tytuł z czerwoną kreską, jak "HLA" w znaku */
.h4-section .h4-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 5px;
  margin-top: 0.3em;
  background: var(--h4-red);
}

.h4-prose {
  max-width: 68ch;
}

.h4-prose p,
.h4-prose li {
  color: var(--h4-text);
}

.h4-prose h2 {
  margin-top: 1.4em;
}

.h4-prose blockquote {
  margin: 1.4em 0;
  padding: 0.4em 0 0.4em 1.2em;
  border-left: 5px solid var(--h4-red);
  font-size: 1.15em;
  color: var(--h4-text);
}

.h4-prose img {
  border-radius: var(--h4-radius);
}

.h4-content > * + * {
  margin-top: 1.2em;
}

/* Pędzlowa, poszarpana krawędź (jak w media kicie): element ::before w kolorze sekcji, nachodzący na poprzednią */
.h4-torn {
  position: relative;
}

.h4-torn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 1px;
  z-index: 2;
  height: var(--h4-torn-h);
  transform: translateY(-100%);
  background: var(--h4-torn-bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48L0 21.9L16 23.7L24 26.4L39 25.1L55 25.1L68 24L89 23.6L104 25.5L127 27.3L136 26.4L158 27.7L176 26.8L188 25.8L211 24.1L221 26.5L243 23.8L257 27.6L275 24.1L294 28.1L307 28L315 27.3L338 28.9L351 25.7L374 26.9L395 27.8L418 26L430 27.1L438 28.9L462 26.8L486 28.6L506 33L524 31.8L542 32.4L557 32.4L584 29.4L607 28.9L619 26.3L627 29.4L636 26.7L654 25.9L671 23.7L685 23.2L704 23.9L729 17.5L756 20.3L778 17.5L793 18.4L812 16.4L826 16.3L838 18.2L856 20.9L866 17.6L892 20.3L905 21.1L919 21.6L936 20.3L948 18.8L971 22.8L983 22.5L997 23.3L1012 19.6L1020 19.9L1038 21.3L1061 21.4L1081 21.4L1098 20.2L1108 19.6L1125 17.4L1137 18.3L1157 17.7L1170 17.5L1187 15.3L1207 21L1224 19.4L1235 20.2L1249 16.9L1268 18L1279 18.5L1304 18L1314 20.1L1338 20.1L1350 18.4L1362 18.9L1387 21.6L1405 21.3L1422 22.3L1440 25L1440 48Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48L0 21.9L16 23.7L24 26.4L39 25.1L55 25.1L68 24L89 23.6L104 25.5L127 27.3L136 26.4L158 27.7L176 26.8L188 25.8L211 24.1L221 26.5L243 23.8L257 27.6L275 24.1L294 28.1L307 28L315 27.3L338 28.9L351 25.7L374 26.9L395 27.8L418 26L430 27.1L438 28.9L462 26.8L486 28.6L506 33L524 31.8L542 32.4L557 32.4L584 29.4L607 28.9L619 26.3L627 29.4L636 26.7L654 25.9L671 23.7L685 23.2L704 23.9L729 17.5L756 20.3L778 17.5L793 18.4L812 16.4L826 16.3L838 18.2L856 20.9L866 17.6L892 20.3L905 21.1L919 21.6L936 20.3L948 18.8L971 22.8L983 22.5L997 23.3L1012 19.6L1020 19.9L1038 21.3L1061 21.4L1081 21.4L1098 20.2L1108 19.6L1125 17.4L1137 18.3L1157 17.7L1170 17.5L1187 15.3L1207 21L1224 19.4L1235 20.2L1249 16.9L1268 18L1279 18.5L1304 18L1314 20.1L1338 20.1L1350 18.4L1362 18.9L1387 21.6L1405 21.3L1422 22.3L1440 25L1440 48Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}

/* Przyciski */
.h4-btn,
.h4c .h4-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.62em 1.5em;
  font-family: var(--h4-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.1;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 2px;
  transition: transform 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.h4-site .h4-btn--primary {
  background: var(--h4-red);
  color: #fff;
  border-color: var(--h4-red);
}

.h4-site .h4-btn--primary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--h4-red-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.h4-site .h4-paper .h4-btn--primary:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}

.h4-site .h4-btn--ghost {
  background: transparent;
  color: var(--h4-text);
  border-color: var(--h4-text);
}

.h4-site .h4-btn--ghost:hover {
  background: var(--h4-text);
  border-color: var(--h4-text);
  color: var(--h4-bg);
}

.h4-btn--lg {
  min-height: 58px;
  padding-inline: 2em;
  font-size: 1.3rem;
}

.h4-chip {
  display: inline-block;
  padding: 0.1em 0.7em;
  font-family: var(--h4-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--h4-red);
  border-radius: 2px;
}

/* Formularze ogólne (wyszukiwarka, 404) */
.h4-site input[type="search"],
.h4-site input[type="text"],
.h4-site input[type="email"],
.h4-site textarea,
.h4-site select {
  width: 100%;
  min-height: 48px;
  padding: 0.6em 0.9em;
  font: inherit;
  color: var(--h4-text);
  background: var(--h4-surface);
  border: 1px solid var(--h4-line);
  border-radius: 2px;
}

.h4-site input::placeholder,
.h4-site textarea::placeholder {
  color: var(--h4-mute);
}

.h4-site .search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 520px;
  margin-block: 1.4em;
}

.h4-site .search-form label {
  flex: 1 1 220px;
}

.h4-site .search-form .search-submit {
  min-height: 48px;
  padding: 0 1.4em;
  font-family: var(--h4-font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--h4-red);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}