/* ============================================================
   O skupině (/o-skupine/)
   Načítá se za styles.css a jen na téhle stránce. Sdílené
   utility (.u-*, .cfg-wrap, .hero-1, .hero-3, .vedeni-2, .foot)
   se berou ze styles.css, tady je jen to, co je vlastní stránce.

   Pozor: .cfg-split / .cfg-g3 nemají v základu žádnou definici,
   jsou to jen markery, na které cílí kolaps v cfg-brand.css
   (1100 px, resp. 760 px). Sloupce si každá sekce nastavuje sama.
   ============================================================ */

/* ---- hero ---- */

/* Skladba na osu stránky jako hero na homepage (.hero-10): headline,
   popisek mezi linkami a perex pod ním. Vlas nad perexem drží celou
   šířku pásu, text se v něm centruje sám. */
.about-hero {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding-block: clamp(72px, 8.6vw, 128px) clamp(56px, 6.4vw, 96px);
  text-align: center;
}

/* Displejový stupeň z DESIGN.md, ne 104px jako .hero-12 na homepage:
   to je tam vedený jako dluh a na podstránce by headline přebil obsah. */
.about-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;
}

/* Druhý řádek nadpisu zlatě a popisek pod ním mezi dvěma linkami —
   stejná skladba jako hero na /projekty/ (.pj-hero__headline-accent,
   .pj-hero__rule), aby obě podstránky vypadaly jako jedna rodina. */
.about-hero__accent {
  color: var(--gold);
}

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

.about-hero__row {
  margin-top: clamp(36px, 4vw, 64px);
  padding-top: clamp(30px, 3.2vw, 46px);
  border-top: 1px solid rgba(216, 161, 58, .35);
}

/* Užší míra než dřív (bylo 78ch): centrovaný odstavec se čte podle
   středu, takže dlouhé řádky by nutily oči skákat přes celý pás. */
.about-hero__sub {
  margin: 0 auto;
  font-family: var(--f-body);
  font-size: 19px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .78);
  max-width: 68ch;
}

/* ---- sekční nadpis ---- */

.about-h2 {
  margin: 0;
  font-family: var(--f-head);
  font-size: clamp(38px, 4.1vw, 54px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -.025em;
  color: var(--navy);
  text-wrap: balance;
}

/* ---- intro ---- */

/* Hlavičky Vize a Strategie: nadpis vlevo, lead vpravo. */
.about-vision__head,
.about-strategy__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 4.4vw, 80px);
}

/* ---- navy top: hero + úvodní claim v jednom pásu ----
   Sdílí Historie a Lidé a směr. Obě podstránky nemají pod herem centrovaný
   perex (.about-hero__row) a navazují rovnou dvousloupcovým claimem, takže
   hlavička a claim jsou záměrně jeden navy pás.

   Gradient nese obal .about-top, ne oba bloky zvlášť: 115° gradient se
   počítá z rozměru vlastního boxu, takže dva stejně zapsané gradienty
   vedle sebe dají na hraně tónový schod. Dělení dělá mezera a vlas,
   ne barva — proto hero uvnitř obalu shazuje spodní padding. */
.about-top {
  background: linear-gradient(115deg, #071426 0%, #0a1e38 48%, #0e2c50 100%);
  color: #fff;
}

.about-top .hero-1,
.about-claim {
  background: none;
}

.about-top .about-hero {
  padding-bottom: 0;
}

/* Vlas kreslí pseudoelement uvnitř hera (ten je .cfg-wrap), takže má
   stejnou míru i krytí jako border-top na .about-hero__row, kterým se
   perex odděluje na /cfg-v-cislech/. */
.about-top .about-hero::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: clamp(36px, 4vw, 64px);
  background: rgba(216, 161, 58, .35);
}

.about-claim__inner.u-46 {
  padding-top: clamp(38px, 4.4vw, 62px);
}

/* Nadpisový akcent claimu má stejný odstín jako druhý řádek H1
   (--gold), ne světlejší --gold-soft, který .principy .u-10 nasazuje
   na homepage. */
.about-claim__title .u-10 {
  color: var(--gold);
}

/* Šířku zužuje --cfg-max: výchozích 1920px by oba sloupce rozhodilo na
   krajní okraje okna. Nadpis i odstavce tak zůstanou u svislého vlasu
   ve středu stránky. */
.about-claim__inner {
  --cfg-max: 1180px;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(26px, 3.2vw, 52px);
}

/* Očko jde s nadpisem v jednom sloupci (jako Principy na homepage), aby
   se při svislém vycentrování obou sloupců neodtrhlo nahoru. */
.about-claim__head .u-36 {
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

.about-claim__title {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(44px, 6.5vw, 92px);
  line-height: .98;
  text-wrap: balance;
}

/* Nadpis příběhu je dvakrát delší než claim na /lide-a-smer/ („Měníme svět
   financí“) a v displejovém stupni se lámal na čtyři řádky. Nižší stupeň,
   širší míra a o kus širší sloupec ho drží na dvou řádcích, na které je
   i psaný (<br> v markupu). */
.about-claim--story .about-claim__inner {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}

.about-claim--story .about-claim__title {
  max-width: 22ch;
  font-size: clamp(34px, 3.4vw, 50px);
}

/* Svislý vlas mezi nadpisem a odstavci. Přechod z centrovaného hera do
   dvousloupcového claimu se bez něj čte jako text náhodně odsazený
   doprava; takhle je split vidět jako záměr. Po kolapsu na jeden sloupec
   (viz media query) se vlas ruší. */
.about-claim__text {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 24px);
  max-width: 67ch;
  padding-left: clamp(26px, 3.2vw, 52px);
  border-left: 1px solid rgba(216, 161, 58, .3);
}

.about-vision__text {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 1.8vw, 26px);
  /* Míra řádku: pod 75ch, jinak by odstavec ve dvousloupcovém rozvržení
     na širokém okně přerostl čitelnou délku. */
  max-width: 68ch;
}

/* Příběh uvádí časovou osu, proto mezi nimi není plná mezera dvou
   samostatných obsahových sekcí. Změna pozadí dál zachová jejich členění. */
.about-timeline-section .u-46 {
  padding-top: clamp(36px, 4vw, 56px);
}

/* ---- čísla skupiny ----
   Šest karet ve třech kolonách. Ikona stojí vlevo přes obě řádky, číslo
   a popisek napravo od ní pod sebou — proto explicitní umístění do gridu
   a ne pořadí ve zdroji. */

.about-figs {
  margin: clamp(28px, 3vw, 44px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 22px);
}

.about-fig {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: clamp(14px, 1.4vw, 20px);
  row-gap: 8px;
  min-width: 0;
  box-sizing: border-box;
  padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 30px);
  background: #fff;
  border-radius: 4px;
  /* Bez stínu: karty na papíru drží jen vlasový obrys, hloubku nese
     kontrast bílé plochy proti podkladu. */
  border: 1px solid rgba(8, 25, 47, .1);
  transition:
    transform .45s cubic-bezier(.2, .7, .2, 1),
    border-color .45s cubic-bezier(.2, .7, .2, 1);
}

/* Světlé kolečko, ne navy jako u hodnot: karta čísla je drobnější a plná
   navy plocha by v ní přebila samotné číslo. Tah ikony proto zůstává
   navy a zlatá se šetří na jednu — emise, jediné číslo, které mluví
   o produktu skupiny. */
.about-fig__ico {
  grid-column: 1;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: clamp(46px, 4vw, 56px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(8, 25, 47, .05);
  transition: background .45s cubic-bezier(.2, .7, .2, 1);
}

.about-fig__ico .p-ico {
  width: 56%;
  stroke-width: 1.5;
  color: var(--navy);
}

/* Čtvrtá karta (vlastních emisí) nese zlatou ikonu — jeden akcent
   v mřížce, ne šest. */
.about-fig:nth-child(4) .p-ico {
  color: var(--gold);
}

.about-fig__num {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--f-head);
  font-size: clamp(34px, 3vw, 46px);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.about-fig__unit {
  font-size: .42em;
  letter-spacing: 0;
}

.about-fig__label {
  grid-column: 2;
  grid-row: 2;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (hover: hover) {

  .about-fig:hover {
    transform: translateY(-3px);
    border-color: rgba(8, 25, 47, .2);
  }

  .about-fig:hover .about-fig__ico {
    background: rgba(8, 25, 47, .08);
  }
}

@media (prefers-reduced-motion: reduce) {

  .about-fig,
  .about-fig__ico {
    transition: none;
  }
}

/* ---- grafy (finanční výsledky 2018–2023) ----
   Dvě karty vedle sebe, obrat pod nimi přes celou šířku. Stejná karta
   jako u čísel nad nimi: bílá plocha na papíru, ne vlasový rastr.

   --achart-track je výška plochy grafu na jednom místě: drží ji sloupec,
   svislá osa i stupnice vlevo, aby se popisky trefily do své linky.
   --achart-flat je nejsvětlejší odstín navy pro data bez akcentu; jako
   procento navy, ne vlastní barva, ať paleta nepřibývá. */

.about-charts {
  --achart-flat: rgba(8, 25, 47, .3);
  margin-top: clamp(14px, 1.5vw, 22px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 22px);
}

.achart {
  --achart-track: clamp(120px, 11vw, 170px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.4vw, 36px);
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
  padding: clamp(24px, 2.5vw, 34px);
  background: #fff;
  border-radius: 4px;
  border: 1px solid rgba(8, 25, 47, .1);
}

.achart--wide {
  grid-column: 1 / -1;
}

/* Graf v široké kartě nejde přes celou šířku: pravá čtvrtina patří
   fotce. 75 % se trefí těsně pod hranu, kde maska fotku rozsvěcí do
   plné sytosti (fotka je 52 % široká a vytrácí se přes 55 % své
   šířky), takže si sloupce a sklo budovy nelezou do sebe. */
.achart--wide .achart__plot {
  max-width: 75%;
}

/* Dekorativní fotka leží pod grafem u pravé hrany a doleva se vytrácí
   maskou, ať pod sloupci nezůstane hrana. z-index: -1 proti .achart
   isolation, takže se nesahá na stacking celé sekce. */
.achart__deco {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: min(52%, 720px);
  height: auto;
  opacity: .5;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%);
  mask-image: linear-gradient(to right, transparent 0%, #000 55%);
  pointer-events: none;
}

.achart__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.achart__title {
  margin: 0;
  font-family: var(--f-head);
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--navy);
}

/* Stejný stupeň jako .about-fig__label — popisky sekce mluví jedním hlasem. */
.achart__sub {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* sloupcový graf */

.achart__plot {
  margin-top: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
}

/* Stupnice. Záporná marže o půl řádku nahoru i dolů rozšíří kontejner
   tak, aby space-between posadilo každý popisek na STŘED jeho linky —
   jinak by „600“ viselo pod horní hranou a „0“ nad účařím. */
.achart__scale {
  margin: -.5em 0;
  padding: 0;
  list-style: none;
  height: calc(var(--achart-track) + 1em);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
  font-size: 10.5px;
  line-height: 1;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Osa je vlas na pseudoprvcích, ne border: svislá musí končit na účaří
   grafu (ne pod letopočty) a vodorovná jím naopak prochází celá. */
.achart__bars {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 1vw, 16px);
  padding-left: 10px;
}

.achart__bars::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: var(--achart-track);
  height: 1px;
  background: var(--divider-dark);
}

.achart__bars::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: var(--achart-track);
  background: var(--divider-dark);
}

.achart__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}

.achart__track {
  width: 100%;
  height: var(--achart-track);
  display: flex;
  align-items: flex-end;
}

/* Sloupec je jen rámec o výšce --h, barvu nese ::before. Nábeh jede na
   scaleY z nuly a popisek hodnoty visí nad hranou sloupce — kdyby scaleY
   sedělo na samotném .achart__bar, roztáhlo by i text. Takhle se hýbe
   výplň a popisek zůstává mimo transformaci. */
.achart__bar {
  position: relative;
  width: 100%;
  height: var(--h);
}

.achart__bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 3px 3px 0 0;
  background: rgba(8, 25, 47, .16);
  transform-origin: bottom;
}

.achart__bar--accent::before {
  background: var(--gold);
}

/* Hodnota sedí nad hranou sloupce. */
.achart__val {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 9px;
  font-family: var(--f-head);
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.achart__year {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* podíly — vodorovné pruhy
   Stopa jde přes celou šířku karty a je vždycky 100 %, takže délka
   pruhu je přímo procento a legenda splynula s grafem: popisek a
   hodnota stojí nad svým pruhem. */

.achart__shares {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 1.8vw, 26px);
}

.achart__share {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.achart__share-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.achart__share-label {
  min-width: 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.achart__share-val {
  margin-left: auto;
  font-family: var(--f-head);
  font-size: 16px;
  font-weight: 500;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.achart__share-track {
  position: relative;
  display: block;
  height: 10px;
  border-radius: 3px;
  background: rgba(8, 25, 47, .07);
}

/* Výplň je absolutní, aby nábeh na scaleX vyjížděl od levé hrany stopy
   a nehýbal ničím dalším v řádku. */
.achart__share-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--w);
  border-radius: 3px;
  transform-origin: left;
}

/* Nábeh. Bez JS (nebo bez observeru) je graf rovnou vykreslený —
   počáteční stav se nasazuje až pod .js-anim, stejně jako u ikon
   principů, a spouští ho [data-shown] na <figure>. --rd nese posun
   celého řádku v kaskádě, kterou počítá reveal v js/main.js. */
.js-anim .achart__bar::before {
  transform: scaleY(0);
}

/* Popisek hodnoty dojde až za svým sloupcem: 62ms je zbytek jeho
   nábehu, ne odhad. */
.js-anim .achart__val {
  opacity: 0;
}

.js-anim .achart__share-fill {
  transform: scaleX(0);
}

.js-anim .achart__share-head {
  opacity: 0;
}

/* Doba rozjezdu je token --count-dur (cfg-brand.css), stejný jako u grafů
   na /cfg-v-cislech/ a u dopočítávaných čísel — grafy napříč webem nabíhají
   jedním tempem. Popisek dojde v šesti desetinách té doby, tedy ve stejném
   místě nábehu sloupce jako dřív. */
.js-anim .achart[data-shown] .achart__bar::before {
  animation: achartGrow var(--count-dur) cubic-bezier(.33, .1, .28, 1) both;
  animation-delay: calc(var(--rd, 0ms) + var(--i, 0) * 70ms);
}

.js-anim .achart[data-shown] .achart__val {
  animation: achartVal .42s ease-out both;
  animation-delay: calc(var(--rd, 0ms) + var(--i, 0) * 70ms + var(--count-dur) * .6);
}

.js-anim .achart[data-shown] .achart__share-fill {
  animation: achartGrowX var(--count-dur) cubic-bezier(.33, .1, .28, 1) both;
  animation-delay: calc(var(--rd, 0ms) + var(--i, 0) * 120ms);
}

.js-anim .achart[data-shown] .achart__share-head {
  animation: achartShareHead .42s ease-out both;
  animation-delay: calc(var(--rd, 0ms) + var(--i, 0) * 120ms);
}

.achart__col:nth-child(2) .achart__bar,
.achart__share:nth-child(2) {
  --i: 1;
}

.achart__col:nth-child(3) .achart__bar,
.achart__share:nth-child(3) {
  --i: 2;
}

.achart__col:nth-child(4) .achart__bar {
  --i: 3;
}

.achart__col:nth-child(5) .achart__bar {
  --i: 4;
}

.achart__col:nth-child(6) .achart__bar {
  --i: 5;
}

@keyframes achartGrow {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

@keyframes achartVal {
  from {
    opacity: 0;
    transform: translate(-50%, 6px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes achartGrowX {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes achartShareHead {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .js-anim .achart__bar::before,
  .js-anim .achart[data-shown] .achart__bar::before {
    transform: none;
    animation: none;
  }

  .js-anim .achart__val,
  .js-anim .achart[data-shown] .achart__val {
    opacity: 1;
    transform: translateX(-50%);
    animation: none;
  }

  .js-anim .achart__share-fill,
  .js-anim .achart[data-shown] .achart__share-fill {
    transform: none;
    animation: none;
  }

  .js-anim .achart__share-head,
  .js-anim .achart[data-shown] .achart__share-head {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---- pilíře ---- */

.about-pillars__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(28px, 3.4vw, 64px);
}

.about-pillars__intro {
  max-width: 52ch;
}

/* Tři sloupce dělené vlasem, žádné karty: sekce má stejnou řeč jako
   principy a struktura, tedy linky a vzduch místo ploch. */
.about-pillars {
  margin-top: clamp(38px, 4.2vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--divider-dark);
}

.opillar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: clamp(28px, 3vw, 44px) clamp(18px, 2.2vw, 38px) clamp(28px, 3vw, 40px);
}

.opillar+.opillar {
  border-left: 1px solid var(--divider-dark);
}

/* Ne zlatá: PRODUCT.md drží zlatou na papíru jako plochu a akcent, ne jako
   barvu textu, a v 10.5px by neprošla kontrastem. */
.opillar__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.opillar__name {
  margin: 0;
  font-family: var(--f-head);
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--navy);
}

.opillar__text {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 40ch;
}

/* Značky pod textem: vlasový obrys a 4px poloměr jako ostatní drobné
   značky v systému (.brand__chip, .hero-7). */
.opillar__tags,
.astrat__tags {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.opillar__tags span,
.astrat__tags span {
  padding: 6px 10px;
  border: 1px solid var(--divider-dark);
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---- vize ----
   Čtyři hodnoty jako karty ve dvou sloupcích. Vlasový rastr jako u čísel
   skupiny tady nestačil: hodnoty jsou čtyři abstraktní pojmy bez čísla a
   bez značky, takže potřebují vlastní plochu a jeden záchytný bod navíc —
   ikonu. Karta je bílá na papírovém pásu (.u-20 je --paper-2), takže se
   odděluje světlem, ne rámečkem.

   Karta jde shora dolů: fotka přes celou hlavu, na její spodní hraně sedí
   navy kolečko s ikonou (přesazené o polovinu průměru), pod ním text.
   Ikona je .p-ico ze styles.css (zlatý tah na mřížce 32); animace kresby
   jsou tam taky, spouští je [data-shown] na kartě — viz „ikony principů“.

   Odsazení nese ikona a text, ne karta: fotka musí sahat na hranu. Proto
   .avis nemá padding a --avis-ico drží průměr kolečka na jednom místě —
   počítá s ním i jeho záporný margin. */

/* Čtyři vedle sebe stojí jen na širokém okně: níž by karta klesla pod
   ~380px a text by se v ní zlomil na proužek. Kolaps na dvojice řeší
   media query dole. */
.about-vision {
  margin-top: clamp(38px, 4.2vw, 64px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 22px);
}

.avis {
  --avis-ico: clamp(52px, 4.4vw, 62px);
  --avis-pad: clamp(24px, 2.6vw, 38px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
  background: #fff;
  border-radius: 4px;
  /* Fotka má rohy karty, ne své vlastní. */
  overflow: hidden;
  border: 1px solid rgba(8, 25, 47, .1);
  transition:
    transform .45s cubic-bezier(.2, .7, .2, 1),
    border-color .45s cubic-bezier(.2, .7, .2, 1);
}

/* Poměr se řídí šířkou karty, ne originálem 3:2: ve čtyřech sloupcích je
   karta úzká a vysoká, tam fotka snese 16:9; ve dvou je široká a plná
   výška fotky by text utopila, tam se pás zplošťuje (viz media query).
   Výřez drží object-fit, aspect-ratio drží rastr, takže se při dotažení
   fotky nic neposune. */
.avis__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  /* Podklad pro dobu, než se fotka dotáhne (lazy). */
  background: var(--navy);
}

.avis__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

/* Kolečko s ikonou sedí na hraně fotky. aspect-ratio, ne pevná výška:
   průměr je fluidní. Bílý prstenec ho odděluje od fotky — pod ikonou
   „Inovace“ je snímek tmavý a navy kolečko by v něm zmizelo. */
.avis__ico {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--avis-ico);
  aspect-ratio: 1;
  margin-top: calc(var(--avis-ico) / -2);
  margin-inline-start: var(--avis-pad);
  border-radius: 50%;
  background: var(--navy);
  /* Druhý prstenec je v klidu nulový, na kurzor se rozevře do zlaté. */
  box-shadow:
    0 0 0 4px #fff,
    0 0 0 4px rgba(216, 161, 58, 0);
  transition:
    transform .45s cubic-bezier(.2, .7, .2, 1),
    box-shadow .45s cubic-bezier(.2, .7, .2, 1);
}

/* Ikona se v kolečku měří na ně, ne clampem jako v principech. Tah musí
   zhrubnout: 1.05 je počítaná na 52px kresbu, tady jde o polovinu. */
.avis__ico .p-ico {
  width: 54%;
  stroke-width: 1.5;
}

.avis__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(16px, 1.6vw, 22px) var(--avis-pad) clamp(28px, 3vw, 44px);
}

.avis__name {
  margin: 0;
  font-family: var(--f-head);
  font-size: clamp(20px, 1.7vw, 25px);
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--navy);
}

/* Zlatá linka pod názvem — stejná stopa jako .u-2 v očku sekce, jen
   silnější, aby v kartě obstála. Vyjíždí zleva, až karta naskočí. */
.avis__rule {
  display: block;
  width: 44px;
  height: 2px;
  margin-block: -2px 2px;
  background: var(--gold);
}

.js-anim .avis__rule {
  transform: scaleX(0);
  transform-origin: left center;
}

.js-anim .avis[data-shown] .avis__rule {
  animation: aboutRuleWipe .62s cubic-bezier(.2, .7, .2, 1) both;
  /* --rd je posun karty v kaskádě (js/main.js), 280ms je odstup za
     naskočením karty, ať linka nevyjíždí zpod ještě průhledné plochy. */
  animation-delay: calc(var(--rd, 0ms) + 280ms);
}

@keyframes aboutRuleWipe {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.avis__text {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* Na kurzor se karta nadzvedne, fotka se pomalu přiblíží a kolečko
   dostane zlatý prstenec. Na dotyku (hover: none) se nespouští nic. */
@media (hover: hover) {

  .avis:hover {
    transform: translateY(-4px);
    border-color: rgba(8, 25, 47, .2);
  }

  .avis:hover .avis__img {
    transform: scale(1.045);
  }

  .avis:hover .avis__ico {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 4px #fff,
      0 0 0 11px rgba(216, 161, 58, .14);
  }

  .avis:hover .p-ico {
    color: var(--gold-soft);
  }
}

@media (prefers-reduced-motion: reduce) {

  .js-anim .avis__rule,
  .js-anim .avis[data-shown] .avis__rule {
    transform: none;
    animation: none;
  }

  .avis,
  .avis__ico,
  .avis__img {
    transition: none;
  }
}

/* ---- strategie ----
   Pět směrů rozvoje jako karty ve dvou sloupcích: fotka na celou výšku
   vlevo, obsah vpravo. Pátý směr nemá dvojici, tak zabírá celou šířku —
   fotka v něm ubere podíl, aby se odstavec netáhl přes celou stránku.

   Karta je bílá na papíru (.u-31), stejná řeč jako hodnoty v „Kam skupinu
   vedeme“ — obě sekce stojí na fotce a ploše, ne na vlasovém rastru.

   Fotka je v gridu roztažená na výšku řádku, kterou diktuje text vedle ní,
   takže vlastní výšku mít nesmí: <img> stojí absolutně a kryje pás přes
   object-fit. Poměr dostane až v jednom sloupci pod 760 px, kde se skládá
   nad text. */

.astrat {
  --astrat-gap: clamp(14px, 1.5vw, 22px);
  margin: clamp(38px, 4.2vw, 64px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--astrat-gap);
}

.astrat__row {
  /* Kotva pro rozprostřený odkaz (.astrat__link::after). */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  min-width: 0;
  background: #fff;
  border-radius: 4px;
  /* Fotka má rohy karty, ne své vlastní. */
  overflow: hidden;
  border: 1px solid rgba(8, 25, 47, .1);
  transition:
    transform .45s cubic-bezier(.2, .7, .2, 1),
    border-color .45s cubic-bezier(.2, .7, .2, 1);
}

/* Pátý směr zůstává sám na řádku. Šířku ani rozdělení fotky nemění —
   drží míru jedné kolony a stojí uprostřed, aby řada nekončila kartou
   odsazenou k levé hraně. Buňka se roztáhne přes obě kolony, ale karta
   v ní zabírá jen jednu (proto minus jedna mezera na dva sloupce).
   :last-child, ne :nth-child(5): kdyby směrů přibylo nebo ubylo, uprostřed
   stojí vždycky ten, který zůstal sám. */
.astrat__row:last-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - var(--astrat-gap)) / 2);
}

.astrat__media {
  position: relative;
  overflow: hidden;
  /* Podklad pro dobu, než se fotka dotáhne (lazy). */
  background: var(--navy);
}

.astrat__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

.astrat__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(24px, 2.5vw, 34px);
}

/* Ordinál: navy na papíru (AA). Zlatá zůstává lince ::after. */
.astrat__num {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-head);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  color: var(--accent-on-paper);
  font-variant-numeric: tabular-nums;
}

.astrat__num::after {
  content: '';
  width: 18px;
  height: 1.5px;
  background: var(--gold);
}

.js-anim .astrat__num::after {
  transform: scaleX(0);
  transform-origin: left center;
}

.js-anim .astrat__row[data-shown] .astrat__num::after {
  animation: aboutRuleWipe .62s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--rd, 0ms) + 240ms);
}

/* flex: 1, aby margin-top: auto na .astrat__tags dosedl štítky dvojice
   na jednu linku — karty v řádku mají stejnou výšku. */
.astrat__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.astrat__name {
  margin: 0;
  font-family: var(--f-head);
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--navy);
  transition: color .45s cubic-bezier(.2, .7, .2, 1);
}

/* Odkaz na značku směru. Sedí na nadpisu, aby měl přístupný název, a
   ::after ho roztahuje na celou kartu — proto je klikatelná celá, ale
   ve stromu je jen jeden odkaz. z-index nad fotku, která je taky
   absolutní. Podtržení nemá: kartu čte jako klikatelnou hover a kurzor,
   linka pod nadpisem by ji zaměnila s odkazem v textu. */
.astrat__link {
  color: inherit;
  text-decoration: none;
}

.astrat__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Obrys nekreslí ::after — .astrat__row má overflow: hidden a obrys na
   hraně karty by se odstřihl. Drží ho text nadpisu. */
.astrat__link:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Míru řádku tady určuje kolona, ne strop ve znacích — proto max-width: none. */
.astrat__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: none;
}


/* Stejný hover jako u karet hodnot: karta se nadzvedne, fotka se pomalu
   přiblíží. Jen na kartách s odkazem (.is-linked) — zvednutí je pozvání
   ke kliknutí, na kartě bez cíle by lhalo. Na dotyku (hover: none) se
   nespouští nic. */
@media (hover: hover) {

  .astrat__row.is-linked:hover {
    transform: translateY(-4px);
    border-color: rgba(8, 25, 47, .2);
  }

  .astrat__row.is-linked:hover .astrat__img {
    transform: scale(1.045);
  }

  .astrat__row.is-linked:hover .astrat__name {
    color: var(--navy);
  }
}

@media (prefers-reduced-motion: reduce) {

  .js-anim .astrat__num::after,
  .js-anim .astrat__row[data-shown] .astrat__num::after {
    transform: none;
    animation: none;
  }

  .astrat__row,
  .astrat__img {
    transition: none;
  }
}

/* ---- mise ---- */

.about-mission {
  width: 100%;
  background: var(--navy);
  color: var(--brand-text-on-dark);
}

.about-mission__inner {
  width: 100%;
  box-sizing: border-box;
  padding-block: clamp(56px, 6.6vw, 104px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(24px, 2.6vw, 38px);
}

.about-mission__quote {
  margin: 0;
  max-width: 26ch;
  font-family: var(--f-head);
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.32;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--brand-text-on-dark);
  text-wrap: balance;
}

.about-mission__author {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.about-mission__name {
  font-family: var(--f-head);
  font-size: 17px;
  color: #fff;
}

.about-mission__role {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---- tým ---- */

.about-team__grid {
  margin-top: clamp(38px, 4.2vw, 64px);
}

.vedeni-block .about-team__grid {
  margin-top: 0;
}

/* ---- časová osa ----
   Rovná osa uprostřed. Na ní v každém milníku navy rámeček s letopočtem,
   pod ním tečka, a teprve pod nimi se obsah dělí na dvě poloviny: značka,
   zlatá linka, nadpis a text na jedné straně, fotka na druhé. Strany se
   řádek od řádku střídají.

   Osa se scrollem plynule plní navy. Podíl počítá initTimelineFill
   v js/main.js a předává ho do CSS jako --tl-fill (0 až 1); výplň na něm
   visí přes scaleY, takže se nesahá na layout. Bez JS zůstane osa šedý
   vlas a obsah je nedotčený, při prefers-reduced-motion se nastaví 1 hned.

   Osu kreslí pseudoelementy .about-tl, ne <ol>: nekončí u posledního
   milníku, ale přesahuje pod něj až na spodní hranu sekce.
   Přesah drží --tl-tail přes zápornou hodnotu bottom, takže se nesahá na
   layout, a <ol> nemusí mít jiné děti než <li>.

   Blok má strop 1040 px a stojí v ose stránky. Roztažený přes celou šířku
   .cfg-wrap se na 1920px okně četl jako plakát, ne jako časová osa. */

/* Popisek i nadpis stojí na střed, protože osa pod nimi taky. Stropuje je
   stejná šířka jako osu, aby všechny tři prvky sekce sdílely jeden sloupec
   a nadpis se na širokém okně neroztáhl přes celou .cfg-wrap.
   Popisek je sdílená .u-36 (flex), takže se centruje justify-content —
   text-align by na jeho položky nedosáhl. */
.about-tl__eyebrow {
  justify-content: center;
}

.about-tl__title {
  max-width: 1040px;
  margin-inline: auto;
  padding-bottom: clamp(30px, 3.4vw, 52px);
  text-align: center;
}

.about-tl {
  max-width: 1040px;
  margin-inline: auto;
  position: relative;
  --tl-year-h: clamp(46px, 4.4vw, 60px);
  --tl-year-w: clamp(104px, 10vw, 132px);
  /* Mezera pod rámečkem. Uprostřed ní sedí tečka, proto ji potřebuje i
     odsazení tečky — jedna hodnota drží obojí. */
  --tl-year-gap: clamp(30px, 3.6vw, 52px);
  --tl-gutter: clamp(28px, 4vw, 76px);
  --tl-dot: 9px;
  /* O kolik osa přesahuje pod poslední milník. Cílem je spodní hrana sekce,
     tedy spodní padding .u-46 (padding-block: clamp(48px, 6.29vw, 88px))
     opsaný sem — při jeho změně přepsat i tady. initTimelineFill hodnotu po
     načtení přepíše naměřenou v px, tohle je stav bez JS. */
  --tl-tail: clamp(48px, 6.29vw, 88px);
}

/* ---- osa ---- */

.about-tl__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* z-index: 0 drží osu pod milníky. Nestačí z-index na rámečku: řádky mají
   data-anim, takže jim reveal pouští animaci transformu, a ta z každého
   řádku dělá stacking context — z-index rámečku pak platí jen uvnitř
   řádku a výplň osy se malovala přes něj. Vrstvení proto řídí dvojice
   osa 0 / řádek 1. Ani .about-tl, ani seznam nemají vlastní z-index,
   takže obě čísla platí v jednom stacking contextu. */
/* Osa se necentruje přes translateX(-50%). U 1px prvku by to byl posun
   o -0,5 px, a protože transform se počítá až při vykreslení, zaokrouhlí
   se jinam než celopixelové odsazení tečky, která se pozicuje v layoutu.
   Výsledkem byl posun o pixel mezi linkou a tečkami. Levá hrana linky
   proto sedí přesně na 50 % a tečka se dopočítá k ní. */
.about-tl::before,
.about-tl::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: calc(var(--tl-tail) * -1);
  left: 50%;
  width: 1px;
  pointer-events: none;
}

.about-tl::before {
  background: var(--divider-dark);
}

/* Výplň leží na vlasu a roste shora. scaleY (ne height) proto, že
   transform neplatí layout a plnění tak nesahá na reflow. Vodorovně
   nehýbe ničím, takže osa transformu je tu jen svislá. */
.about-tl::after {
  background: var(--navy);
  transform: scaleY(var(--tl-fill, 0));
  transform-origin: top;
}

/* ---- milník ---- */

/* Rámeček s rokem přes obě poloviny a na střed, obsah pod ním ve dvou
   sloupcích. z-index staví celý řádek nad osu, takže ji neprůhledný
   rámeček i tečka přeruší. */
.about-tl__row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--tl-gutter);
  padding-bottom: clamp(44px, 5.4vw, 88px);
}

/* Milník je zlatý, dokud jím výplň osy neprojede — pak se překlopí do
   navy. data-passed nasazuje initTimelineFill ve chvíli, kdy střed
   rámečku protne stejnou referenční linku, podle které se počítá výplň,
   takže se překlopení trefí přesně do průjezdu linky.
   Text je navy, ne bílý: bílá na zlaté má kontrast 2,3:1 a neprojde.
   Bez JS zůstane osa šedý vlas a rámečky zlaté — soudržný klidový stav. */
.about-tl__year {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  box-sizing: border-box;
  min-width: var(--tl-year-w);
  height: var(--tl-year-h);
  margin-bottom: var(--tl-year-gap);
  padding-inline: clamp(18px, 2vw, 26px);
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--f-head);
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  transition: background-color .4s ease, color .4s ease;
}

.about-tl__row[data-passed] .about-tl__year {
  background: var(--navy);
  color: #fff;
}

/* Tečka na ose v mezeře pod rámečkem. Překlápí se s rámečkem, aby milník
   měnil barvu jako celek. Řádek je grid, takže absolutní pozice je
   zároveň to, co pseudoelement drží mimo mřížku.

   Odsazení se počítá na střed té 1px linky, ne na 50 %: (--tl-dot - 1px)/2
   vyjde u liché tečky celé číslo, takže mezi linkou a tečkou nevznikne
   půlpixel, na kterém se rozejdou. Řádek i seznam mají stejnou šířku,
   takže se 50 % v obou případech vyhodnotí na tutéž svislici. */
.about-tl__row::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(var(--tl-year-h) + (var(--tl-year-gap) - var(--tl-dot)) / 2);
  width: var(--tl-dot);
  height: var(--tl-dot);
  margin-left: calc((var(--tl-dot) - 1px) / -2);
  border-radius: 50%;
  background: var(--gold);
  transition: background-color .4s ease;
}

.about-tl__row[data-passed]::before {
  background: var(--navy);
}

/* Druhá a další významná událost téhož roku: letopočet se neopakuje, na
   ose po ní zůstane jen další tečka.

   Rámeček musí zůstat v layoutu (jen bez rozměru a skrytý), ne
   display: none — initTimelineFill si podle něj měří průjezd referenční
   linky, a nulový rect prvku mimo layout by milník obarvil navy hned. */
.about-tl__row--cont .about-tl__year {
  height: 0;
  min-width: 0;
  padding-inline: 0;
  visibility: hidden;
}

.about-tl__row--cont::before {
  top: calc((var(--tl-year-gap) - var(--tl-dot)) / 2);
}

/* ---- značka, nadpis, text ---- */

.about-tl__side {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.5vw, 20px);
  padding-top: clamp(8px, 1.2vw, 18px);
}

.about-tl__row:nth-child(even) .about-tl__side {
  grid-column: 2;
}

/* Značka vede blok, proto větší stupeň než dřív. Dvojice (2017, 2023)
   stojí vedle sebe a dělí ji vlas, aby to nečetlo jako jedno složené logo. */
.about-tl__brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(14px, 1.4vw, 22px);
  max-width: 100%;
}

.about-tl__logo {
  height: clamp(30px, 3.2vw, 46px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.about-tl__logo+.about-tl__logo {
  padding-left: clamp(14px, 1.4vw, 22px);
  border-left: 1px solid var(--divider-dark);
}

/* Řádek značek, který má zůstat na jedné lince. Ve výchozí výšce se do
   sloupce osy (626 px na 1440px displeji) vejdou jen dvě běžně široké
   značky — víc jich tam drží jedině nižší výška, kterou si každý takový
   řádek řekne v --brand-h. Vlas mezi značkami jde s nimi dolů, aby při
   nižších logách nebyl nápadnější než ona sama.

   --brand-h se odvozuje ze součtu poměrů log v řádku: výška × součet
   poměrů + mezery a vlasy musí zůstat pod šířkou sloupce. Nová značka
   v řádku tedy znamená hodnotu přepočítat, jinak se řádek zalomí.

   Snížení má i optický efekt: široké jednořádkové wordmarky (fintech
   asociace, CEE) mají verzálky přes polovinu výšky svého boxu, takže
   v plných 46 px působí proti dvouřádkovým lockupům přerostle.

   Fallback ve var() je povinný. Bez něj je --brand-h na řádku, který si ho
   nenastaví, guaranteed-invalid: max-height spadne na none, height: auto
   níž přebije výchozí clamp z .about-tl__logo a obrázek se vykreslí ve své
   vlastní velikosti (fintech asociace 830×98 px). */
.about-tl__brand--row {
  flex-wrap: nowrap;
  gap: clamp(10px, 1vw, 14px);
}

/* --logo-scale dorovnává jednotlivou značku proti sousedům v řádku. Výška
   boxu není optická velikost loga: dvouřádkový lockup (Dluhopisomat od
   Fundster) má verzálky přes necelou třetinu své výšky, jednořádkový
   wordmark přes polovinu, takže ve stejné výšce boxu vypadá lockup menší.
   Násobek se proto vztahuje k výšce řádku a jede s ní i při zmenšování. */
/* Musí to být height, ne height: auto + max-height. Výchozí hodnota je pak
   totožná s .about-tl__logo výš, takže stejná značka je v řádku s --row i
   bez něj stejně velká — s height: auto by se odvozovala od vlastní
   velikosti souboru a rozešla se. (Dřív to platilo dvojnásob:
   dluhopisomat-fundster.svg měl width/height v procentech, tedy vůbec
   žádnou vlastní velikost. Dnes už má pixely, ale pravidlo zůstává.) */
.about-tl__brand--row .about-tl__logo {
  height: calc(var(--brand-h, clamp(30px, 3.2vw, 46px)) * var(--logo-scale, 1));
  min-width: 0;
}

.about-tl__brand--row .about-tl__logo+.about-tl__logo {
  padding-left: clamp(10px, 1vw, 14px);
}

/* Zlatý akcent mezi značkou a nadpisem. Stejná role jako .u-2 u sekčních
   popisků, jen o pixel silnější — tady stojí sám, ne vedle textu. */
.about-tl__rule {
  display: block;
  width: 44px;
  height: 2px;
  background: var(--gold);
}

.about-tl__head {
  margin: 0;
  font-family: var(--f-head);
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--navy);
  text-wrap: balance;
}

.about-tl__body {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.2vw, 18px);
  min-width: 0;
}

/* Milníky, které na zdrojovém webu stály ve třech větách pod sebou, jsou
   tři odstavce, ne jeden blok — mezera mezi nimi drží .about-tl__body.
   text-wrap: pretty zabrání osamocenému slovu na posledním řádku. */
.about-tl__body p {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 17px);
  line-height: 1.75;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Odkaz na web značky, která v tom roce vznikla. Řádky s dvojicí značek
   (2017, 2022, 2023) mají odkazy dva. Popiskem je doména — sama o sobě
   říká, kam vede, takže nepotřebuje další slova.

   Cíl se otevírá v novém panelu podle zvyklosti zbytku webu (odchozí
   odkazy na sesterské weby mají všude target="_blank" rel="noopener").
   Vlastní tracking nepotřebují: proklik ven měří GA4 Enhanced Measurement,
   data-cta je vyhrazené hlavním CTA. */
.about-tl__links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 1.6vw, 24px);
}

/* Zlatý vlas pod řádkem drží odkaz čitelný jako odkaz, na hoveru se text
   přebarví do --gold-on-paper: tmavší odstín téže zlaté, který na papíru
   projde AA (samotná --gold má 2:1 a jako barva textu by neprošla). */
.about-tl__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-head);
  font-size: clamp(13.5px, 1.1vw, 15px);
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--gold);
  transition: color .25s ease;
}

.about-tl__link::after {
  content: '↗';
  font-size: .95em;
  line-height: 1;
  transition: transform .25s ease;
}

/* Odkaz uvnitř webu, ne na sesterskou značku: šipka vodorovně, ať nelže,
   že proklik vede ven. Posun na kurzor jde jen do strany, kam míří. */
.about-tl__link--in::after {
  content: '→';
}

.about-tl__link--in:hover::after,
.about-tl__link--in:focus-visible::after {
  transform: translateX(3px);
}

.about-tl__link:hover,
.about-tl__link:focus-visible {
  color: var(--gold-on-paper);
}

.about-tl__link:hover::after,
.about-tl__link:focus-visible::after {
  transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {

  .about-tl__link::after {
    transition: none;
  }

  .about-tl__link:hover::after,
  .about-tl__link:focus-visible::after {
    transform: none;
  }
}

/* ---- fotka ---- */

.about-tl__media {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.about-tl__row:nth-child(even) .about-tl__media {
  grid-column: 1;
}

/* Snímek webu, který je širší než okno: cover by mu ubral boky, a u náhledu
   webu jsou právě boky obsah (menu vpravo, nadpis vlevo). Okno proto dostane
   poměr snímku, takže sedí na šířku a neořezává se. Dvojitá třída kvůli
   přepisu 16/9 z mobilní media query níž.

   Poměr se předává v --shot z markupu (jeden snímek = jeden poměr), výchozí
   hodnota je snímek Firemní záložny. Modifikátor si zaslouží jen snímky, kde
   by 4/3 ukrojilo výrazný kus boků — jinak má přednost rytmus sekce. */
.about-tl__media.about-tl__media--fit {
  aspect-ratio: var(--shot, 1337 / 855);
}

/* Kotvení nahoru, ne na střed. Poměr 4/3 drží rytmus sekce, ale snímky do
   něj nesedí a cover je dořezává: 2020 (AB Pohledávky) je skoro čtverec a
   ze středu by ubral 12,5 %. U náhledů webů je nahoře hlavička se značkou,
   tedy to jediné, co je na nich poznávací. Trojici širších snímků (2010,
   2017, 2022) se ořezávají boky, na ty tohle nemá vliv.

   Snímek u roku 2014 (duvera-aktiva.webp) byl portrét 900x1200 a cover z
   něj ukazoval jen horních 56 % — zbytek se stahoval a dekódoval naprázdno.
   Soubor je proto seříznutý na 900x675, tedy přesně na 4/3. Je to nejvyšší
   poměr, který sekce používá (mobil je 16/9, tam se řeže dál), takže se
   výřez nemění; kdyby okno mělo být někdy vyšší než 4/3, potřebuje snímek
   znovu z originálu v assets-src/duvera-aktiva-original-900x1200.webp. */
.about-tl__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
  object-position: center top;
  background: var(--paper-2);
  display: block;
}

/* ---- uzávěr ---- */

/* Jediná plocha v celé sekci. Je tu proto, že osa jinak končí posledním
   milníkem a sekce se rozpadne do prázdna — uzávěr ji zavře jednou větou. */
.about-tl__close {
  position: relative;
  z-index: 1;
  margin-top: clamp(16px, 2.2vw, 34px);
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 34px);
  padding: clamp(22px, 2.6vw, 34px) clamp(24px, 3vw, 44px);
  border: 1px solid var(--divider-dark);
  border-radius: 16px;
  background: var(--paper);
}

.about-tl__close-icon {
  flex-shrink: 0;
  width: clamp(44px, 4.4vw, 60px);
  color: var(--navy);
  opacity: .45;
}

.about-tl__close-icon svg {
  width: 100%;
  height: auto;
  display: block;
}

.about-tl__close-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.5vw, 20px);
  min-width: 0;
}

/* Pod 860 px se dvě poloviny vedle sebe nevejdou: osa jde k levé hraně a
   všechno pod sebe napravo od ní. Rámeček s rokem ji zápornou marží
   přesahuje a přerušuje; svislice vede středem jeho levé čepičky, protože
   jen tam ji stadion zakrývá po celé výšce — u kraje by prosvítala v obou
   zaoblených rozích. Tečka odpadá, na jedné svislici nemá co značit. */
@media (max-width: 860px) {

  .about-tl {
    max-width: none;
    --tl-inset: calc(var(--tl-year-h) / 2);
    --tl-lane: calc(var(--tl-year-h) / 2 + clamp(20px, 5vw, 32px));
  }

  /* Jen posun k levé hraně. Transform řešit netřeba: základní pravidlo už
     vodorovně neposouvá, jede na něm výhradně svislé škálování výplně. */
  .about-tl::before,
  .about-tl::after {
    left: var(--tl-inset);
  }

  .about-tl__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(16px, 3.4vw, 24px);
    padding-left: var(--tl-lane);
  }

  .about-tl__row::before {
    display: none;
  }

  .about-tl__year {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-left: calc(var(--tl-lane) * -1);
    margin-bottom: clamp(6px, 1.4vw, 12px);
  }

  .about-tl__side,
  .about-tl__media,
  .about-tl__row:nth-child(even) .about-tl__side,
  .about-tl__row:nth-child(even) .about-tl__media {
    grid-column: 1;
    grid-row: auto;
  }

  .about-tl__media {
    aspect-ratio: 16 / 9;
  }

  .about-tl__close {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ============================================================
   Kolaps gridů. Stejné body jako zbytek systému: 1100 px pro
   dvousloupcové rozvržení, 760 px pro trojice. Navíc 1600 px, které
   patří jen hodnotám — jsou jediná čtveřice na stránce.
   ============================================================ */

/* Řada čtyř hodnot se láme na dvojice. Bod není v systému nahodile:
   .cfg-wrap ubírá po stranách až 2×56 px, takže na 1600px okně vyjde
   na kartu ~355 px — pod tím už se název „Hodnota pro trh“ láme a
   z odstavce zbývá proužek. Ve dvojicích je karta široká, takže se
   fotka zároveň zplošťuje zpátky na panoramatický pás. */
@media (max-width: 1600px) {

  .about-vision {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .avis__media {
    aspect-ratio: 5 / 2;
  }
}

@media (max-width: 1100px) {

  .about-claim__inner,
  .about-claim--story .about-claim__inner,
  .about-pillars__head,
  .about-vision__head,
  .about-strategy__head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  /* Na jednom sloupci nemá svislý vlas co dělit. */
  .about-claim__text {
    padding-left: 0;
    border-left: 0;
  }

  /* Trojice čísel se láme na dvojice. */
  .about-figs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Fotka pod grafem obratu si na užším okně bere víc plochy, než na
     kterou má — sloupce by v ní ztratily kontrast. */
  .achart__deco {
    width: 42%;
  }

  /* Karta hodnot je ve dvou sloupcích na užším okně sotva 400px široká
     a panoramatický pás by z fotky nechal proužek. */
  .avis__media {
    aspect-ratio: 2 / 1;
  }

  /* Karta směru se dělí na fotku a text, takže ve dvou sloupcích zbývá
     na odstavec sotva 250 px. Zpátky na jednu kolonu. */
  .astrat {
    grid-template-columns: minmax(0, 1fr);
  }

  .astrat__row {
    grid-template-columns: minmax(0, .5fr) minmax(0, 1fr);
  }

  /* V jedné koloně už není co centrovat: půlka šířky by z poslední karty
     udělala výjimku, ne dorovnání řady. */
  .astrat__row:last-child {
    width: auto;
  }
}

@media (max-width: 760px) {

  .about-hero__meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-figs,
  .about-charts,
  .about-pillars,
  .about-vision {
    grid-template-columns: minmax(0, 1fr);
  }

  .opillar {
    border-left: 0;
    padding-inline: 0;
  }

  .opillar+.opillar {
    border-top: 1px solid var(--divider-dark);
  }

  /* V telefonu je karta obratu úzká a fotka by lezla pod sloupce. Bez ní
     nemá graf důvod si nechávat pravou čtvrtinu volnou. */
  .achart__deco {
    display: none;
  }

  .achart--wide .achart__plot {
    max-width: none;
  }

  /* Fotka vedle textu už v telefonu nemá šířku na obojí: skládá se nad
     text. Tady jako jediná dostane vlastní poměr — v postranním sloupci
     ji roztahoval grid na výšku řádku. */
  .astrat__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .astrat__media {
    aspect-ratio: 16 / 9;
  }
}