/* ============================================================
   /projekty/ — stránkové styly
   Čtvrtá vrstva nad cfg-base → cfg-brand → styles. Načítá se jen na
   téhle stránce; sdílenou chromu (fixní lišta .hero-3/-4/-6/-7, zlaté
   CTA .hero-16, patička .foot*, utility .u-*) bere ze styles.css, aby
   byla homepage a podstránka opticky totožná.

   Vlastní jmenný prostor je .pj-*, psaný ručně v BEM. Generátor z design
   canvasu přepisuje styles.css celý, tenhle soubor se ho netýká.

   Odsazení je fluidní clamp() odvozený od referenční šířky 1400 px
   (max / 1400 * 100 = vw), stejně jako ve styles.css — proto na
   typografii ani na vertikální rytmus nejsou media queries. Zůstávají
   jen na kolaps gridů, ten se plynule vyjádřit nedá.
   ============================================================ */

/* ============================================================
   HERO — navy pás; lišta je uvnitř v markupu, ale position: fixed
   ============================================================ */
.pj-hero {
  position: relative;
  width: 100%;
  background: linear-gradient(168deg, #071426 0%, #0a1e38 52%, #0e2c50 100%);
  color: var(--brand-text-on-dark);
  overflow: clip;
}

/* Zlatá záře u pravé hrany. Jediná dekorace hera: plocha, ne obrázek,
   takže nemá co dotahovat a nebrzdí LCP. */
.pj-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(64% 82% at 88% 18%, rgba(216, 161, 58, .16), rgba(216, 161, 58, 0) 68%),
    radial-gradient(52% 60% at 8% 96%, rgba(77, 142, 201, .14), rgba(77, 142, 201, 0) 70%);
  pointer-events: none;
}

/* Skladba jako hero na Historii / CFG v číslech / Lidé a směr:
   nadpis (druhý řádek zlatě) a eyebrow mezi linkami. Perex tu není —
   jeho roli hraje text vybrané oblasti v bloku .pj-pillars pod herem,
   takže hero shazuje spodní padding a končí vlasem. */
.pj-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  padding-block: clamp(72px, 8.6vw, 128px) 0;
  text-align: center;
}

.pj-hero__inner::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: clamp(36px, 4vw, 64px);
  background: rgba(216, 161, 58, .35);
}

.pj-hero__headline {
  margin: 0;
  font-family: var(--f-head);
  font-size: clamp(52px, 4.6vw, 74px);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -.035em;
  color: #fff;
  text-wrap: balance;
}

.pj-hero__headline-accent {
  color: var(--gold);
}

.pj-hero__rule {
  margin-top: clamp(20px, 2.29vw, 32px);
  justify-content: center;
}

/* ============================================================
   PILÍŘE A FILTR — navy blok pod herem
   ============================================================ */

/* Šířku zužuje --cfg-max jako claim na /o-skupine/: výchozích 1920px by
   oba sloupce rozhodilo na krajní okraje okna. */
.pj-pillars__inner {
  --cfg-max: 1180px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding-block: clamp(38px, 4.4vw, 62px) clamp(48px, 6.29vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(26px, 3.2vw, 52px);
}

.pj-pillars__head .u-36 {
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

.pj-pillars__title {
  max-width: 14ch;
  margin: 0;
  font-family: var(--f-head);
  font-size: clamp(36px, 3.8vw, 56px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.03em;
  color: #fff;
  text-wrap: balance;
}

.pj-pillars__accent {
  color: var(--gold);
}

/* Svislý vlas dělí nadpis od filtru stejně jako claim na podstránkách. */
.pj-pillars__body {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 30px);
  align-items: flex-start;
  padding-left: clamp(26px, 3.2vw, 52px);
  border-left: 1px solid rgba(216, 161, 58, .3);
}

.pj-lead {
  margin: 0;
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .78);
  max-width: 62ch;
}

.pj-lead[hidden] {
  display: none;
}

/* ============================================================
   OBLASTI — papír
   ============================================================ */
/* Rejstřík značek je sazba, ne plocha: na 1920px sloupci se řádek roztáhne
   tak, že prostřední trakt textu skončí kolem 100 znaků a proti stropu
   měřítka zbyde prázdno. Sekce si proto zúží --cfg-max, ze kterého .cfg-wrap
   počítá padding-inline — mechanismus zůstane stejný, jen sloupec je užší
   a hlavička sekce se zužuje s ním. */
/* Bez vlastního odsazení nahoře: vzduch pod herem si nese každý pás sám,
   takže na hraně s navy je hned tón té oblasti. Papírový proužek navíc
   se u pásů v --paper-2 (Finanční služby) četl jako cizí barevný pruh. */
.pj-areas {
  --cfg-max: 1240px;
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  background: var(--paper);
}

/* ---- filtr ----
   Bez JS by tlačítka nic nedělala, tak se vůbec nevykreslí; projekty.js
   je odemkne třídou .is-ready. Stránka bez JS ukáže tři skupiny značek
   a úvodní odstavec pohledu „Všechny".

   Pilulky sedí na navy pásu, proto obrys z bílé a aktivní stav ve zlaté
   ploše s tmavým textem (--text-on-gold) jako ostatní CTA na tmavém. */
.pj-filters {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
}

.pj-filters.is-ready {
  display: flex;
}

.pj-filter {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 11px 20px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color var(--dur-slow) var(--ease-out),
    background-color var(--dur-slow) var(--ease-out),
    color var(--dur-slow) var(--ease-out);
}

.pj-filter:hover {
  border-color: var(--gold);
  background: rgba(216, 161, 58, .12);
  color: var(--gold-soft);
}

.pj-filter:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
}

.pj-filter.is-active {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--text-on-gold);
}

/* Změnu počtu karet odečítač jinak nezaznamená — .pj-status ji ohlásí.
   Vizuálně ji nese samotný seznam, takže je text jen pro odečítač. */
.pj-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- oblast jako pás ----
   Skupina je nativní cíl kotvy z homepage (projekty/#financni-sluzby) —
   s JS ji projekty.js přesměruje na #oblasti v heru, bez JS se doskočí
   sem. Lišta má 82px (--nav-h), scroll-margin o kus víc, ať nadpis
   nezajede pod ni.

   Oblasti nedělí linka, ale povrch: pásy se střídají --paper / --paper-2
   stejně, jako se na landingu střídá papír a navy. Předěl je pak vidět
   přes celou šířku okna a mezi skupinami nepřibude další vodorovný vlas
   k tomu, který odděluje karty uvnitř. */
.pj-group {
  scroll-margin-top: 112px;
  padding-block: clamp(16px, 1.8vw, 26px) clamp(34px, 4vw, 62px);
  background: var(--paper);
}

.pj-group:nth-of-type(even) {
  background: var(--paper-2);
}

.pj-group[hidden] {
  display: none;
}

/* Číslo oblasti je verzálkový index jako u číslovaných principů na
   homepage: drží pořadí tří pilířů i ve filtrovaném pohledu, kde je
   vidět jen jedna skupina. */
/* Hlavička se lepí pod lištu, dokud běží značky své oblasti: v dlouhém
   rejstříku je tak pořád vidět, ve které oblasti čtenář je. Pozadí bere
   z pásu (background-color: inherit), aby pod ní karty mizely. */
.pj-group__head {
  position: sticky;
  top: var(--nav-h);
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 18px);
  padding-block: clamp(14px, 1.6vw, 22px);
  background-color: inherit;
}

/* Očko bez popisku: zlatý vlas uvozuje oblast stejně jako sekce na
   ostatních podstránkách, název nese až nadpis pod ním. */
.pj-group__rule {
  flex: none;
}

/* Číslo a název drží jeden řádek, štítky činností se pod ně zlomí
   (flex-basis: 100%) — proto má řádek užší row-gap než column-gap: mezi
   nadpisem a jeho štítky patří menší odstup než mezi nadpis a index. */
.pj-group__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: clamp(14px, 1.6vw, 22px);
  row-gap: clamp(10px, 1vw, 14px);
}

/* Číslování oblastí je dočasně skryté — markup zůstává, návrat je smazání
   `display: none`. */
.pj-group__index {
  display: none;
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--ink-soft);
}

.pj-group__title {
  margin: 0;
  font-family: var(--f-head);
  font-size: clamp(28px, 2.5vw, 38px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--navy);
}

/* Pod názvem oblasti stojí stejný výčet činností, jaký nese rejstřík
   oblastí na homepage. V přilepené hlavičce tak zůstane při scrollu vidět
   nejen jméno sekce, ale i čeho se týká. Jako štítky (vlasový obrys, 4px
   poloměr — stejný tvar jako .opillar__tags na o-skupine) místo jednoho
   tečkového výčtu: na úzkém okně se zlomí po položkách, ne uprostřed
   slova, a dvě z nich jsou dvouslovné.  */
.pj-group__tags {
  flex-basis: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pj-group__tags li {
  padding: 6px 10px;
  border: 1px solid var(--divider-dark);
  border-radius: 4px;
  font-family: var(--f-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---- karta značky ---- */
.pj-card {
  width: 100%;
  box-sizing: border-box;
  scroll-margin-top: 112px;
}

/* Dělič je vlas, ne rámeček: karta není box, je to řádek rejstříku.
   Tři trakty: úzká lišta (obor + logo), sloupec sazby, sloupec čísel. */
.pj-card__inner {
  position: relative;
  isolation: isolate;
  padding-block: clamp(30px, 3.43vw, 48px);
  /* Vodorovné odsazení si karta bere zpět zápornými okraji: potřebuje ho
     jen podbarvení při najetí, sazba zůstane na svém sloupci. */
  padding-inline: clamp(16px, 1.8vw, 28px);
  margin-inline: calc(-1 * clamp(16px, 1.8vw, 28px));
  border-bottom: 1px solid var(--divider-dark);
  border-radius: 14px;
  transition: border-color var(--dur-slow) var(--ease-out);
  display: grid;
  grid-template-columns: minmax(0, .5fr) minmax(0, 1.9fr) minmax(0, .95fr);
  column-gap: clamp(28px, 3.4vw, 52px);
  row-gap: clamp(28px, 3.43vw, 40px);
  align-items: start;
}

/* Konec pásu dělí změna povrchu, vlas by se s ní zdvojil. */
.pj-card:last-of-type .pj-card__inner {
  border-bottom: 0;
}

.pj-card__inner:not(:has(.pj-card__aside)) {
  grid-template-columns: minmax(0, .5fr) minmax(0, 2.85fr);
}

/* Lišta drží obor a logo pod sebou u levé hrany sloupce. */
.pj-card__rail {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
  min-width: 0;
}

/* Poslední karta ve skupině vlas nemá: hned pod ní začíná lišta další
   skupiny s vlastní navy linkou a dvě čáry na sobě dělají 2px šmouhu.
   Platí i při filtrování, kdy se skupiny skrývají. */
.pj-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.43vw, 20px);
  min-width: 0;
}

.pj-card__title {
  margin: 0;
  transition: color .55s var(--ease-out);
  font-family: var(--f-head);
  font-size: clamp(27px, 2.29vw, 36px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--navy);
}

.pj-card__text {
  margin: 0;
  transition: color .55s var(--ease-out);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 74ch;
}

/* Odkaz na web značky má stejný tvar jako odkazy v časové ose na
   /o-skupine/: čitelný stupeň v --f-head, ne verzálky v 700. Verzálková
   mikrosazba tady mizela mezi chipy. Sedí u pravé hrany sloupce, aby
   nesplynul s odstavcem, a šipka je šikmá — vede ven z webu. */
.pj-card__link {
  grid-column: 2 / -1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gold);
  font-family: var(--f-head);
  font-size: clamp(14.5px, 1.15vw, 16px);
  font-weight: 500;
  color: var(--navy);
  transition:
    color var(--dur-slow) var(--ease-out),
    border-color var(--dur-slow) var(--ease-out);
}

/* Klikací je celá karta: odkaz roztáhne neviditelnou plochu přes celý
   řádek rejstříku. Uvnitř karty žádný jiný odkaz není, takže se nic
   nepřekrývá.

   Platí jen pro myš a řádkové rozvržení. Ve stohu je karta na výšku přes
   celou obrazovku a cíl v půl stránky nedává smysl — tam se kliká na
   samotné CTA. */
@media (min-width: 1101px) {
  .pj-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
  }
}

.pj-card__link:hover {
  color: var(--gold-on-paper);
}

.pj-card__link:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 4px;
}

.pj-card__arrow {
  display: inline-block;
  font-size: 1.05em;
  color: inherit;
  transition:
    color var(--dur) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.pj-card__link:hover .pj-card__arrow {
  transform: translate(3px, -3px);
}

/* Klikací je celá karta, tak se při najetí celá překlopí do navy —
   stejný přejezd, jaký mají oblasti na homepage (.obl-led__row): navy
   gradient najede zleva, sazba zbělá, akcenty jdou do --gold-soft.
   Plocha zůstává plochá, hloubku systém nedělá (DESIGN.md). */
.pj-card__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 14px;
  background: linear-gradient(100deg, var(--navy) 0%, var(--navy-2) 100%);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .55s var(--ease-out);
}

@media (min-width: 1101px) {
  .pj-card__inner:hover::before {
    clip-path: inset(0 0 0 0);
  }

  .pj-card__inner:hover {
    border-bottom-color: transparent;
  }

  .pj-card__inner:hover .pj-card__title {
    color: #fff;
  }

  .pj-card__inner:hover .pj-card__text {
    color: rgba(255, 255, 255, .78);
  }

  .pj-card__inner:hover .pj-stat {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .22);
  }

  .pj-card__inner:hover .pj-stat__num {
    color: #fff;
  }

  /* Na navy jde jednotka do bílé, ne do zlaté: zlatý „+ mld. Kč“ se odtrhl
     od hodnoty a dvojice se četla jako dvě různá čísla. */
  .pj-card__inner:hover .pj-stat__suffix {
    color: #fff;
  }

  .pj-card__inner:hover .pj-stat__label {
    color: rgba(255, 255, 255, .7);
  }

  .pj-card__inner:hover .pj-card__link {
    color: var(--gold-soft);
    border-bottom-color: var(--gold-soft);
  }

  .pj-card__inner:hover .pj-card__arrow {
    transform: translate(3px, -3px);
  }
}

.pj-stat,
.pj-stat__num,
.pj-stat__suffix,
.pj-stat__label,
.pj-card__logo-wrap {
  transition:
    background-color .55s var(--ease-out),
    border-color .55s var(--ease-out),
    color .55s var(--ease-out);
}

/* „(nové okno)" jen pro odečítač: vizuálně to říká ikona šipky. */
.pj-card__ext {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pj-card__aside {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.29vw, 32px);
  min-width: 0;
}

/* V liště určuje velikost loga šířka traktu, ne pevný strop: min-height
   64px sloužil k srovnání se starou pravou stopkou, tady by jen vyrobil
   mezeru pod logem. */
/* Značka dostala vlastní světlou plochu: loga jsou různě široká i tmavá
   a na papíru splývala. Dlaždice je plochá (poloměr 14px, žádný stín),
   takže drží pravidla systému a zároveň logo zvětší. */
.pj-card__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 104px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--divider-dark);
  border-radius: 14px;
  transition: border-color var(--dur-slow) var(--ease-out);
}

.pj-card__logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 64px;
  object-fit: contain;
  object-position: center;
}

/* Čísla nesou stejný tvar jako benefity — chip s vlasovým obrysem. Uvnitř
   zůstává rejstříkové čtení: popisek u levé hrany, hodnota u pravé. */
.pj-card__stats {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Čísla zůstala na kartě jediným faktem vedle popisu, takže nesou víc
   váhy než dřív: sytější povrch místo holého obrysu a větší stupeň. */
.pj-stat {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 14px 20px;
  background: var(--paper);
  border: 1px solid var(--divider-dark);
  border-radius: 999px;
}

.pj-stat__num {
  margin: 0;
  flex-shrink: 0;
  font-family: var(--f-head);
  font-size: clamp(23px, 1.95vw, 29px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Textová hodnota („1 splátka", „20–30 %") nese stejnou váhu jako číslo,
   ale musí se vejít do sloupce — proto menší stupeň. */
.pj-stat__num--text {
  font-size: clamp(16px, 1.3vw, 19px);
  letter-spacing: -.01em;
}

/* Jednotka u čísla („+", „mil. Kč") drží stejný tvar jako na homepage:
   drobnější stupeň a zlatý akcent, aby nepřebíjela samotnou hodnotu. */
.pj-stat__suffix {
  font-size: .55em;
  color: var(--accent-on-paper);
}

.pj-stat__label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.5;
}

.pj-empty {
  margin: 0;
  padding-block: clamp(40px, 4.57vw, 64px);
  font-size: 16px;
  color: var(--ink-soft);
}

/* ============================================================
   MARQUEE
   ============================================================ */
.pj-brands {
  width: 100%;
  background: var(--paper-2);
  border-top: 1px solid var(--divider-dark);
  overflow: clip;
}

.pj-brands__head {
  width: 100%;
  box-sizing: border-box;
  padding-block: clamp(46px, 5.71vw, 80px) clamp(28px, 3.14vw, 44px);
}

.pj-brands__title {
  margin: 0;
  font-family: var(--f-head);
  font-size: clamp(32px, 3.43vw, 48px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--navy);
}

.pj-marquee {
  padding-bottom: clamp(46px, 5.71vw, 80px);
  /* Okraje pásu se vytrácejí, aby smyčka neměla viditelný střih. */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.pj-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.86vw, 40px);
  width: max-content;
  /* Stopa nese obsah 2×, posun o -50 % je proto bezešvý. */
  animation: pjMarquee 46s linear infinite;
}

.pj-marquee__item {
  font-family: var(--f-head);
  font-size: clamp(22px, 2.29vw, 32px);
  font-weight: 400;
  letter-spacing: -.02em;
  /* .55 drží 3,6:1 proti paper-2: pás je tlumený, ale pořád čitelný.
     Níž (výchozích .38) klesne na 2,3:1 a jména se rozpustí do pozadí. */
  color: rgba(26, 31, 41, .55);
  white-space: nowrap;
}

.pj-marquee__dot {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--gold);
}

@keyframes pjMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   SPOLUPRÁCE — navy
   ============================================================ */
.pj-join {
  width: 100%;
  background: var(--navy);
  color: var(--brand-text-on-dark);
}

.pj-join__inner {
  width: 100%;
  box-sizing: border-box;
  padding-block: clamp(56px, 6.86vw, 96px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(36px, 4.57vw, 64px);
}

.pj-join__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 1.71vw, 24px);
}

.pj-join__title {
  margin: 0;
  font-family: var(--f-head);
  font-size: clamp(38px, 4.29vw, 60px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.03em;
  color: #fff;
}

.pj-join__sub {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 17px);
  line-height: 1.72;
  color: rgba(255, 255, 255, .72);
  max-width: 56ch;
}

.pj-join__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 15px 32px;
}

.pj-join__media {
  display: flex;
  justify-content: center;
}

.pj-join__svg {
  width: 100%;
  max-width: 420px;
  height: auto;
  color: var(--gold);
}

/* Uzly a jádro drží nižší krytí, aby zlatá nepřebila text vlevo. */
.pj-join__links { opacity: .34; }
.pj-join__nodes { opacity: .6; }
.pj-join__core  { opacity: .42; }

/* Signature moment stránky: síť se nakreslí, až na ni scroll dojede.
   pathLength="1" normalizuje délku, takže stejné dasharray sedí na
   krátkou i dlouhou spojnici bez počítání geometrie. */
.js-anim .pj-join__media[data-anim] .pj-join__links path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.js-anim .pj-join__media[data-anim][data-shown] .pj-join__links path {
  animation: pjDraw 1.1s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: calc(var(--rd, 0ms) + var(--d, 0ms));
}

.js-anim .pj-join__media[data-anim] .pj-join__links path:nth-child(1) { --d: 0ms; }
.js-anim .pj-join__media[data-anim] .pj-join__links path:nth-child(2) { --d: 90ms; }
.js-anim .pj-join__media[data-anim] .pj-join__links path:nth-child(3) { --d: 180ms; }
.js-anim .pj-join__media[data-anim] .pj-join__links path:nth-child(4) { --d: 270ms; }
.js-anim .pj-join__media[data-anim] .pj-join__links path:nth-child(5) { --d: 360ms; }
.js-anim .pj-join__media[data-anim] .pj-join__links path:nth-child(6) { --d: 450ms; }

@keyframes pjDraw {
  to { stroke-dashoffset: 0; }
}

/* ============================================================
   Browser surfaces — výběr textu a fokus dostávají barvu systému,
   ne výchozí modrou prohlížeče.
   ============================================================ */
.pj-areas ::selection,
.pj-brands ::selection {
  background: rgba(216, 161, 58, .3);
  color: var(--navy);
}

.pj-hero ::selection,
.pj-join ::selection {
  background: rgba(216, 161, 58, .38);
  color: #fff;
}

/* ============================================================
   Responsivita — jen kolaps gridů, zbytek řeší clamp()
   ============================================================ */
@media (max-width: 1100px) {
  .pj-pillars__inner,
  .pj-join__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Na jednom sloupci nemá svislý vlas co dělit. */
  .pj-pillars__inner {
    align-items: start;
  }

  .pj-pillars__body {
    padding-left: 0;
    border-left: 0;
  }

  .pj-card__inner,
  .pj-card__inner:not(:has(.pj-card__aside)) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Ve stohu je nadpis oblasti nad kartami hned vidět a lepení by na
     nízkém okně ukrojilo pruh obrazovky. */
  .pj-group__head {
    position: static;
  }

  /* Ve stohu má karta jeden sloupec, odkaz zůstává u pravé hrany — jinak
     by si `grid-column: 2` vynutil druhý, implicitní sloupec. */
  .pj-card__link {
    grid-column: 1 / -1;
    justify-self: end;
  }

  /* Dlaždice loga se ve stohu řídí šířkou loga, ne šířkou okna — přes
     celý řádek by z ní byl banner. */
  .pj-card__logo-wrap {
    max-width: 260px;
    min-height: 92px;
  }

  /* Ve stohu se lišta položí na řádek: obor a logo vedle sebe nad sazbou,
     ať tři trakty pod sebou nenatáhnou řádek do tří obrazovek. */
  .pj-card__rail {
    flex-direction: row;
    align-items: center;
    gap: clamp(20px, 3vw, 32px);
  }

  .pj-card__logo-wrap {
    flex: 0 0 auto;
  }

  .pj-card__logo {
    max-width: min(200px, 100%);
  }

  .pj-join__media {
    justify-content: flex-start;
    order: -1;
  }

  .pj-join__svg {
    max-width: 320px;
  }
}

@media (max-width: 760px) {

  /* Na telefonu už řádek nic neuspoří a logo by se tlačilo k oboru —
     lišta se vrací do sloupce. */
  .pj-card__rail {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(14px, 3vw, 20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pj-marquee__track {
    animation: none;
    /* Bez pohybu se stopa nesmí táhnout mimo obraz — zalomí se do řádku. */
    width: 100%;
    flex-wrap: wrap;
  }

  /* Stopa nese obsah 2× kvůli bezešvé smyčce. Když se nehýbe, je druhá
     sada jen zdvojený seznam — pryč s ní (7 značek = 14 prvků i s tečkami). */
  .pj-marquee__track > :nth-child(n+15) {
    display: none;
  }

  .pj-marquee {
    mask-image: none;
  }

  .js-anim .pj-join__media[data-anim] .pj-join__links path,
  .js-anim .pj-join__media[data-anim][data-shown] .pj-join__links path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }

  .pj-card__arrow,
  .pj-filter {
    transition: none;
  }

  .pj-card__inner:hover .pj-card__arrow,
  .pj-card__link:hover .pj-card__arrow {
    transform: none;
  }

  .pj-card__inner,
  .pj-card__inner::before {
    transition: none;
  }
}