/* =========================================================================
   KOMPONENTY – opakovane použiteľné bloky. Každý je zdokumentovaný
   v docs/DESIGN.md a ukázaný na stránke /_styleguide.
   ========================================================================= */

/* Nad nadpismi nie sú žiadne malé štítky. Zaradenie (kategória, dátum, typ) ide pod nadpis:
   v hlavičke podstránky .page-header__meta, v karte .label hneď pod .card__title. */

/* --- Menší nadpis sekcie: „ďalšie referencie“, „ďalšie články“ --- */
.section__subtitle {
  margin: 0;
  font-size: var(--fs-xl);
  line-height: 1.12;
}

/* --- Zvýraznenie: .hl = zelenomodrá pointa nadpisu, .mark = signál na overený fakt --- */
.hl { color: var(--color-primary); }
.mark {
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding-inline: var(--space-2);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --- Malý popisok: kategória, metrika, výsledok (bežné malé písmo, nie verzálky) --- */
.label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-dim);
}
.label--accent { color: var(--color-primary); }
.label--text { color: var(--color-text); }

/* --- Signál: šípka z loga, ikonka pred overeným výsledkom --- */
.signal {
  flex-shrink: 0;
  width: 28px;
  height: auto;
  color: var(--color-primary);
}

/* --- Hero: úvodný pás na domovskej stránke --- */
.hero { padding-block: var(--space-9) var(--space-8); }
.hero > .container > * { margin-block: 0; }
.hero > .container > * + * { margin-block-start: var(--space-6); }
.hero__title { max-width: 16ch; }
.hero__lead {
  max-width: 820px;
  font-size: var(--fs-lead);
  line-height: 1.4;
}
.hero__lead + .hero__text { margin-block-start: var(--space-4); }
.hero__text {
  max-width: 820px;
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.hero > .container > .stats { margin-block-start: var(--space-8); }

/* --- Čísla: rad veľkých čísel s popiskom --- */
.stats {
  display: grid;
  border-top: 1px solid var(--color-border);
}
@media (min-width: 640px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}
.stats, .stat dd { margin: 0; }
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) 0 0;
}
.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  /* nie 1: pri zalomení by pozadie .mark na ďalšom riadku prekrylo dĺžne a chvosty písmen (ý, j, p) */
  line-height: var(--lh-snug);
}

/* --- Page header: nadpis podstránky --- */
.page-header {
  padding-block: var(--space-9) var(--space-7);
  border-bottom: 1px solid var(--color-accent-2-line);
}
.page-header h1 { margin-bottom: var(--space-4); }
.page-header__lead {
  max-width: 60ch;
  margin: 0;
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
}
/* druhý, menej výrazný odsek úvodu pod .page-header__lead */
.page-header__text { max-width: 62ch; margin: var(--space-4) 0 0; color: var(--color-text-muted); }
/* zaradenie podstránky pod nadpisom a úvodom: „referencie · sales & care · energetika“, odkaz späť */
.page-header__meta {
  margin: var(--space-5) 0 0;
  color: var(--color-text-dim);
}
.page-header__meta a { color: var(--color-text); text-underline-offset: 4px; }
.page-header__meta a:hover { color: var(--color-primary); }

/* --- Tlačidlo --- */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn--primary:hover {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
}
.btn--secondary {
  border-color: var(--color-border-strong);
  color: var(--color-text);
  background: transparent;
  font-weight: var(--fw-medium);
}
.btn--secondary:hover {
  border-color: var(--color-text);
  color: var(--color-text);
}
/* Tmavé tlačidlo na zelenomodrej ploche (.cta) */
.btn--dark {
  background: var(--color-bg);
  color: var(--color-on-dark);
}
.btn--dark:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}
.btn--lg {
  min-height: 52px;
  padding-inline: var(--space-6);
  font-size: var(--fs-lg);
}

/* --- Odkaz so šípkou: „všetky referencie →“. Podčiarknutý, šípka sa pri prejdení myšou posunie. --- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 6px;
  transition: color var(--transition), text-decoration-color var(--transition);
}
.link-arrow::after { content: "→"; transition: transform 200ms ease; }
.link-arrow--external::after { content: "↗"; }
.link-arrow:hover { color: var(--color-primary); text-decoration-color: var(--color-primary); }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow--external:hover::after { transform: translate(2px, -2px); }
/* na zelenomodrom podklade */
.link-arrow--dark,
.link-arrow--dark:hover { color: var(--color-on-primary); text-decoration-color: currentColor; }

/* --- Rad tlačidiel a odkazov (hero, výzvy) --- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }

/* --- Pás logov klientov --- */
.logos {
  border-block: 1px solid var(--color-border);
  padding-block: var(--space-6);
}
.logos__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-7);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
}
.logos__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--color-text-dim);
}

/* --- Karta --- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-text-soft);
}
@media (min-width: 960px) {
  .card { padding: var(--space-7); }
}
.card > * { margin: 0; }
.card__title { color: var(--color-text); }
/* Celá karta je klikateľná: odkaz v nadpise s triedou .link-cover prekryje kartu */
.card { position: relative; }
.link-cover { color: inherit; text-decoration: none; }
.link-cover::after { content: ""; position: absolute; inset: 0; }
.card:has(.link-cover:hover) { border-inline-color: var(--color-border-strong); border-bottom-color: var(--color-border-strong); }
.card:has(.link-cover:hover) .card__title { color: var(--color-primary); }
.card:has(.link-cover:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.link-cover:focus-visible { outline: none; }
.card > .card__title { font-size: var(--fs-card-title); line-height: 1.15; }
/* zaradenie karty je tesne pod nadpisom (aj keď je nadpis v .card__head s číslom vpravo) */
.card__title + .label,
.card__head + .label { margin-top: calc(var(--space-2) - var(--space-5)); }
.card__head > .card__title { margin: 0; font-size: var(--fs-card-title); line-height: 1.15; }
.card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}
.card__num {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  line-height: 0.9;
}
.card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}
.card__list li { display: flex; gap: var(--space-3); }
.card__list li::before {
  content: "+";
  font-family: var(--font-display);
  color: var(--color-primary);
}
.card__foot {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.card__foot .label { margin-right: var(--space-3); }
/* Pätička s odrážkami: štítok nad zoznamom */
div.card__foot { display: flex; flex-direction: column; gap: var(--space-2); }
.card > .link-arrow,
.card > .btn { margin-top: auto; align-self: flex-start; }
/* Variant: zelenomodrá linka hore (zvýraznená karta) */
.card--accent { border-top: var(--border-accent) solid var(--color-primary); }
.card--plain { border-top: var(--border-accent) solid var(--color-text); }
/* Variant: celá karta na zelenomodrom podklade (zhrnutie eventu vedľa programu); tlačidlo v nej .btn--dark */
.card--filled { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.card--filled :is(.card__title, .facts dd) { color: var(--color-on-primary); }
.card--filled :is(.label, .label--accent, .label--text) { color: rgb(12 13 16 / 0.72); }
.card--filled > .label:first-child { color: var(--color-on-primary); font-weight: var(--fw-semibold); }
.card--filled :is(.facts, .facts__row) { border-color: var(--color-on-primary-border); }

/* --- Výsledok: signál + štítok + jedna veta (na konci karty) --- */
.result {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
}
.result .signal { margin-top: 2px; }
.result__body { display: flex; flex-direction: column; gap: var(--space-1); }
.result--bare { padding-top: 0; border-top: 0; }
/* v karte je výsledok (s linkou) vždy dole, aby bola linka vo všetkých kartách v riadku na rovnakej úrovni */
.card > .result:not(.result--bare) { margin-top: auto; }
.card > .result ~ .link-arrow { margin-top: 0; }
/* v gride so subgridom (.grid--aligned) má výsledok vlastný riadok, linka je hore v ňom */
.grid--aligned > .card > .result { margin-top: 0; }
/* Viac výsledkov pod jedným štítkom: odrážky s „+“ */
.result__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.result__list li { display: flex; gap: var(--space-2); }
.result__list li::before { content: "+"; font-family: var(--font-display); color: var(--color-primary); }

/* --- Signálny pás: jeden silný dôkaz cez celú šírku (najviac 1 na stránku) --- */
.signal-band {
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding-block: var(--space-7);
}
.signal-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-6);
}
.signal-band .signal { width: 48px; color: var(--color-on-primary); }
.signal-band__text {
  flex: 1 1 20rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-band);
  line-height: 1.25;
}
.signal-band__note {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
}

/* --- Kroky: očíslovaný zoznam s veľkým číslom --- */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--color-border);
}
.step {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border);
}
@media (min-width: 640px) {
  .step { grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-5); }
}
.step__num {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  line-height: 0.9;
  color: var(--color-primary);
}
.step__body { max-width: 820px; color: var(--color-text-soft); }
.step__body > * { margin: 0; }
.step__body > * + * { margin-top: var(--space-3); }
.step__title { font-weight: var(--fw-semibold); color: var(--color-text); }
.step__note { font-size: var(--fs-sm); color: var(--color-text-muted); }
.step__note .label { margin-right: var(--space-3); }

/* --- Referencia: karta s metrikou hore --- */
.ref-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  color: var(--color-text-soft);
}
.ref-card__metric > * { margin: 0; }
.ref-card__metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.ref-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--space-4);
  padding: var(--space-6);
}
.ref-card__body > * { margin: 0; }
.ref-card__body .result { margin-top: auto; padding-top: var(--space-4); font-size: var(--fs-sm); }
.ref-card__body .signal { width: 24px; }
.ref-card .card__title { color: var(--color-text); }
.ref-card { position: relative; }
.ref-card:has(.link-cover:hover) { border-color: var(--color-border-strong); }
.ref-card:has(.link-cover:hover) .card__title { color: var(--color-primary); }
.ref-card:has(.link-cover:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* --- Zoznam odkazov: názov + krátky popis, v mriežke alebo pod sebou --- */
.link-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}
@media (min-width: 640px) {
  .link-list--grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .link-list--grid { grid-template-columns: repeat(4, 1fr); }
}
/* Položka je <a> (odkaz) alebo <div> (zatiaľ bez podstránky) */
.link-list > li > * {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  height: 100%;
  padding: var(--space-5) var(--space-5) var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}
.link-list a:hover .link-list__title { color: var(--color-primary); }
.link-list__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}
.link-list__title--bold { font-weight: var(--fw-semibold); }
.link-list__desc { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* --- Poznámka: čiarkovaný rámik pre doplnkovú informáciu --- */
.note-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px dashed var(--color-border-strong);
}
.note-box > * { margin: 0; }
.note-box a {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--color-text);
  text-decoration: none;
}
.note-box a:hover strong { color: var(--color-primary); }

/* --- Fotka s filtrom: tlmená fotka v zelenomodrom tóne ---
   Všetky obrázky majú rovnaký rám 16 : 9 a vyplnia ho celý. Grafiky s textom
   preto ukladaj už v pomere 16 : 9 (doplnené farbou ich pozadia), aby sa text
   neorezal; fotkám v pomere 16 : 10 sa jemne oreže vrch a spodok.
   Tón vzniká filtrom priamo na obrázku (čiernobiela, sépia otočená do zelenomodrej). */
.media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg);
}
.media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) sepia(0.9) hue-rotate(112deg) saturate(1.15) contrast(1.15) brightness(0.66);
  transition: transform 400ms ease, filter 400ms ease;
}
/* jemné stmavenie spodku, aby fotka plynulo prešla do tmavej karty */
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 45%, var(--color-bg));
  opacity: 0.4;
  pointer-events: none;
}
/* v karte fotka siaha až po okraje */
.card > .media:first-child { margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 0; }
@media (min-width: 960px) {
  .card > .media:first-child { margin: calc(-1 * var(--space-7)) calc(-1 * var(--space-7)) 0; }
}
/* pri prejdení myšou sa fotka mierne priblíži a zjasní */
.card:has(.link-cover:hover) .media img {
  transform: scale(1.03);
  filter: grayscale(1) sepia(0.9) hue-rotate(112deg) saturate(1.15) contrast(1.15) brightness(0.8);
}
@media (prefers-reduced-motion: reduce) { .media img { transition: none; } }

/* --- Citát klienta --- */
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.quote::before {
  content: "„";
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  line-height: 0.6;
  color: var(--color-primary);
}
.quote__text {
  font-family: var(--font-display);
  font-size: var(--fs-quote);
  line-height: 1.4;
}
.quote__text p { margin: 0; }
.quote__author { font-size: var(--fs-sm); color: var(--color-text-muted); }
.quote__author strong { color: var(--color-text); font-weight: var(--fw-semibold); }

/* --- Slider: vodorovný pás kariet so šípkami (napr. citáty klientov) ---
   Bez JS sa dá posúvať prstom alebo trackpadom, šípky pridá main.js. */
.slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__slide { scroll-snap-align: start; min-width: 0; }
.slider__slide > .quote { height: 100%; }
/* v slideri sú autor a odkaz na referenciu vo všetkých kartách dole na rovnakej výške */
.slider__slide .quote__author { margin-top: auto; }
.quote > .link-arrow { align-self: flex-start; font-size: var(--fs-sm); }
@media (min-width: 960px) {
  .slider__track { grid-auto-columns: calc((100% - var(--space-6)) / 2); }
}
/* slider kariet (mediaroom): na mobile karta a kúsok ďalšej, od 640 px dve, od 960 px tri vedľa seba */
.slider__track--cards { gap: var(--space-5); grid-auto-columns: 85%; }
.slider__track--cards > .slider__slide { display: flex; }
.slider__track--cards > .slider__slide > .card { flex: 1; }
@media (min-width: 640px) {
  .slider__track--cards { grid-auto-columns: calc((100% - var(--space-5)) / 2); }
}
@media (min-width: 960px) {
  .slider__track--cards { grid-auto-columns: calc((100% - 2 * var(--space-5)) / 3); }
}
.slider__nav { display: flex; align-items: center; gap: var(--space-2); }
.slider__nav[hidden] { display: none; }
.slider__btn {
  display: inline-grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.slider__btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.slider__btn:disabled { opacity: 0.35; cursor: default; }
.slider__btn svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .slider__track { scroll-behavior: auto; } }

/* --- Postup ako časová os: číslo na linke, nadpis, fáza, text.
   Na mobile zvislá linka vľavo, od 960 px vodorovná linka cez čísla a kroky vedľa seba. --- */
.process { display: grid; gap: var(--space-7); margin: 0; padding: 0; list-style: none; }
.process__step {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  align-content: start;
}
.process__step > * { grid-column: 2; margin: 0; }
.process__step > p:last-child { margin-top: var(--space-2); color: var(--color-text-soft); }
/* linka k ďalšiemu kroku */
.process__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 48px;
  bottom: calc(-1 * var(--space-7));
  width: 2px;
  background: linear-gradient(var(--color-primary), var(--color-accent-2));
}
.process__num {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-bg-alt);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}
/* čísla sú nad putujúcou šípkou (tá ide pod nimi, neprekryje ich) */
.process__num { position: relative; z-index: 4; }
.process__step:first-child .process__num { background: var(--color-primary); color: var(--color-on-primary); }
.process__title { font-size: var(--fs-card-title); line-height: 1.15; }
@media (min-width: 960px) {
  .process { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: 0; }
  /* časti krokov v jednej línii (subgrid): číslo, nadpis, fáza, text */
  .process__step {
    grid-template-columns: minmax(0, 1fr);
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: var(--space-3);
  }
  .process__step > * { grid-column: 1; }
  .process__num { grid-row: auto; margin-bottom: var(--space-3); }
  .process__step > p:last-child { margin-top: var(--space-2); }
  .process__step:not(:last-child)::before {
    left: 56px;
    right: calc(-1 * var(--space-6) + 8px);
    top: 23px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent-2));
  }
}

/* časová os s tromi krokmi (napr. prvých 90 dní) */
@media (min-width: 960px) {
  .process--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* jedno samostatné číslo (napr. vedľa nadpisu v .split__main) */
.stats--single { grid-template-columns: 1fr !important; max-width: 22rem; }

/* --- Časté otázky: rozbaľovacie <details>, otázka ako riadok s „+“ --- */
.faq { border-bottom: 1px solid var(--color-border); }
.faq__item { border-top: 1px solid var(--color-border); }
.faq__q {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  min-height: var(--tap-min);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  flex: none;
  color: var(--color-primary);
  font-family: var(--font-display);
  transition: transform 0.2s;
}
.faq__item[open] > .faq__q::after { transform: rotate(45deg); }
.faq__q:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.faq__item > p { margin: 0 0 var(--space-5); max-width: 60ch; color: var(--color-text-soft); }
@media (prefers-reduced-motion: reduce) { .faq__q::after { transition: none; } }

/* --- Piliere: 3 až 4 krátke zásady s ikonou a nadpisom v podfarbenom bloku --- */
.pillars {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-5);
  background: var(--color-bg-alt);
  border-top: var(--border-accent) solid var(--color-primary);
}
.pillars__head { margin: 0; font-size: var(--fs-card-title); line-height: 1.15; }
.pillars__list { display: grid; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.pillars__item { display: grid; gap: var(--space-3); align-content: start; }
.pillars__item > * { margin: 0; }
.pillars__item .signal { width: 32px; }
.pillars__title { font-size: var(--fs-lg); line-height: 1.25; color: var(--color-text); }
.pillars__item p { color: var(--color-text-soft); }
.pillars > .link-arrow { justify-self: start; }
@media (min-width: 640px) {
  .pillars__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .pillars { padding: var(--space-7); }
  .pillars__list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-6); }
  .pillars__item + .pillars__item { padding-left: var(--space-6); border-left: 1px solid var(--color-border); }
}

/* --- Lišta so súhlasom s cookies: prilepená dole, kým sa návštevník nerozhodne.
   „Prijať všetky“ a „len nevyhnutné“ sú rovnako dostupné (odmietnuť je rovnako ľahké ako súhlasiť). --- */
.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  max-height: 85vh;
  overflow-y: auto;
  padding-block: var(--space-5);
  border-top: var(--border-accent) solid var(--color-primary);
  background: var(--color-bg-alt);
  box-shadow: 0 -12px 32px rgb(0 0 0 / 0.45);
}
.consent[hidden],
.consent [hidden] { display: none !important; }
.consent__inner { display: grid; gap: var(--space-5); }
.consent__text { display: grid; gap: var(--space-3); max-width: 70ch; }
.consent__text > * { margin: 0; }
.consent__title { font-size: var(--fs-lg); line-height: 1.2; }
.consent__text p { font-size: var(--fs-sm); color: var(--color-text-soft); }
.consent__options { display: grid; gap: var(--space-3); margin: var(--space-2) 0 0; padding: 0; border: 0; }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.consent__more {
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.consent__more:hover { color: var(--color-primary); }
@media (max-width: 639px) {
  .consent__actions .btn { flex: 1 1 100%; justify-content: center; }
}
@media (min-width: 960px) {
  .consent__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-8); }
  .consent__actions { flex-direction: column; align-items: stretch; }
  .consent__actions .btn { justify-content: center; }
}

/* Na zelenomodrých plochách sú odkazy a čísla krokov tmavé (zelenomodrá by na nich zanikla) */
:is(.section--accent, .card--filled, .cta, .v2-event, .v2-nudge__inner) a:not(.btn) { color: var(--color-on-primary); }
:is(.section--accent, .card--filled, .cta, .v2-event, .v2-nudge__inner) :is(.step__num, .label--accent) { color: var(--color-on-primary); }

/* --- Tlačidlo, ktoré v texte vyzerá ako odkaz (napr. „nastavenia cookies“) --- */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-button:hover { color: var(--color-primary-hover); }

/* --- Tabuľka údajov (zoznam cookies). Na mobile sa posúva vodorovne vo vlastnom ráme. --- */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--fs-sm); }
.data-table th,
.data-table td { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.data-table th { font-weight: var(--fw-semibold); color: var(--color-text); border-bottom-color: var(--color-border-strong); }
.data-table code { font-size: 0.95em; color: var(--color-text); }

/* --- Značky: odvetvia, kategórie --- */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tag {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
}

/* Popis a značky v jednom riadku („kto je v tíme: …“); menšie značky, na mobile sa zalomia */
.tags-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.tags-row > .label { margin: 0; }
.tags--compact { gap: var(--space-2); }
.tags--compact .tag { padding: var(--space-1) var(--space-3); white-space: nowrap; }

/* --- Výrok: jedna veta veľkým písmom medzi tenkými linkami (napr. startupy z našich projektov) --- */
.statement { padding-block: var(--space-8); border-block: 1px solid var(--color-accent-2-line); }
.statement p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(1.625rem, 1.1rem + 2.2vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 28ch;
  color: var(--color-text);
}
.statement strong { color: var(--color-primary); font-weight: var(--fw-semibold); }
/* tri firmy vždy v jednom riadku; na úzkom mobile sa riadok mierne zmenší, aby sa zmestil */
.statement__firms { white-space: nowrap; font-size: min(1em, 5.6vw); }

/* --- Rozdelený pás: text vľavo, akcia alebo značky vpravo --- */
.split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.split__main { flex: 1 1 20rem; }
.split__main > * { margin: 0; }
.split__main > * + * { margin-top: var(--space-3); }
.split__side { flex: 2 1 28rem; }
.split__title { font-size: var(--fs-xl); line-height: var(--lh-snug); }
/* na najužších telefónoch sa dlhá e-mailová adresa v nadpise (nezalamuje sa) musí zmestiť na riadok */
@media (max-width: 359px) { .split__title { font-size: 1.3125rem; } }
.split--top { align-items: flex-start; }

/* --- CTA: zelenomodrý blok s ďalším krokom a kontaktom (koniec stránky) --- */
.cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
  padding: var(--space-7) var(--space-5);
  background: var(--color-primary);
  color: var(--color-on-primary);
}
@media (min-width: 960px) {
  .cta { padding: var(--space-8) var(--space-7); }
}
.cta__main {
  flex: 3 1 20rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.cta__main > * { margin: 0; }
.cta__main .btn { align-self: flex-start; }
.cta__text { font-size: var(--fs-lg); max-width: 640px; }
.cta__contact {
  flex: 2 1 16rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 1px solid var(--color-on-primary-border);
}
.cta__contact > * { margin: 0; }
.cta__contact a { color: inherit; }
.cta__name {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
}
.cta .label { color: inherit; }

/* --- Zvýraznená sekcia na zelenomodrom pozadí (napr. pozvánka na event na úvode) ---
   Farby ako pri .cta: tmavý text, tmavé tlačidlá, zvýraznenie .hl ako inverzný štítok. */
.section--accent { background: var(--color-primary); color: var(--color-on-primary); }
.section--accent :is(h1, h2, h3, .section__lead) { color: var(--color-on-primary); }
.section--accent .hl {
  color: var(--color-primary);
  background: var(--color-on-primary);
  padding-inline: 0.15em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.section--accent .btn--secondary { border-color: var(--color-on-primary); color: var(--color-on-primary); }
.section--accent .btn--secondary:hover { background: var(--color-on-primary); color: var(--color-primary); }
.section--accent .poster { border-color: var(--color-on-primary-border); }
.section--accent a.poster:hover { border-color: var(--color-on-primary); }
/* Komponenty na zelenomodrom páse: všetko tmavé, linky a rámiky tmavé priesvitné */
.section--accent .btn--primary { background: var(--color-on-primary); color: var(--color-primary); }
.section--accent .btn--primary:hover { background: var(--color-bg-alt); color: var(--color-primary-hover); }
.section--accent :is(.card, .result, .card__list, .card__foot, .stats, .tag, .split) { border-color: var(--color-on-primary-border); }
.section--accent .card { color: var(--color-on-primary); }
.section--accent :is(.card__title, .stat__value, .result, .card__num) { color: var(--color-on-primary); }
.section--accent :is(.label, .label--accent, .label--text, .card__foot) { color: rgb(12 13 16 / 0.72); }
.section--accent .card--accent { border-top-color: var(--color-on-primary); }
.section--accent .signal { color: var(--color-on-primary); }
.section--accent .card__list li::before { color: var(--color-on-primary); }
.section--accent .mark { background: var(--color-on-primary); color: var(--color-primary); }
.section--accent .link-arrow { color: var(--color-on-primary); text-decoration-color: currentColor; }
.section--accent .link-arrow:hover { color: var(--color-on-primary); }
.section--accent .card:has(.link-cover:hover) .card__title { color: var(--color-on-primary); text-decoration: underline; }

/* --- Parametre: zoznam „kľúč – hodnota“ (nástup, úväzok, miesto, plat) --- */
.facts {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--color-border);
}
.facts__row {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 640px) {
  .facts__row { grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-4); }
}
.facts dt { margin: 0; }
.facts dd { margin: 0; min-width: 0; color: var(--color-text); }

/* --- Dlhý text: detail pozície, článok. Nadpisy, odseky a zoznamy s „+“ --- */
.prose { max-width: 70ch; color: var(--color-text-soft); }
.prose > * { margin-block: 0; }
.prose > * + * { margin-block-start: var(--space-4); }
.prose > h2 { margin-block-start: var(--space-8); font-size: var(--fs-card-title); color: var(--color-text); }
.prose > h3 { margin-block-start: var(--space-6); color: var(--color-text); }
.prose > :first-child { margin-block-start: 0; }
.prose ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}
.prose ul li { display: flex; gap: var(--space-3); }
.prose ul li::before {
  content: "+";
  font-family: var(--font-display);
  color: var(--color-primary);
}
.prose ul.prose__no li::before { content: "−"; color: var(--color-text-dim); }
.prose__lead { font-size: var(--fs-lg); color: var(--color-text); }

/* --- Bočný panel: obsah vedľa .prose, na desktope ostáva viditeľný pri scrollovaní --- */
/* V úzkom paneli je popis nad hodnotou, aby sa e-maily a čísla zmestili do jedného riadku */
.aside-sticky .facts__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
@media (min-width: 960px) {
  .aside-sticky { position: sticky; top: var(--space-6); align-self: start; }
}
/* Na detailoch (referencia, pozícia, článok, event) je na mobile zhrnutie s hlavnou akciou
   hneď pod hlavičkou, nie až pod dlhým textom. Odkaz „všetky …“ sa tam skryje. */
@media (max-width: 959px) {
  .aside-sticky--lead { order: -1; }
  .aside-sticky--lead > p:has(> .link-arrow) { display: none; }
}

/* --- Formulár: polia s popiskom, súbor, súhlas, chyba (napr. životopis) --- */
.form { display: grid; gap: var(--space-5); }
.form__row { display: grid; gap: var(--space-5); }
@media (min-width: 640px) {
  .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.form__field { display: flex; flex-direction: column; gap: var(--space-2); }
.form__label { font-family: var(--font-display); font-size: var(--fs-sm); color: var(--color-text); }
.form__label abbr { color: var(--color-primary); text-decoration: none; }
.form__input {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
}
.form__input:hover { border-color: var(--color-text-muted); }
.form__input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 0; border-color: var(--color-accent); }
textarea.form__input { min-height: 8rem; resize: vertical; }
.form__input[type="file"] { padding: var(--space-2); cursor: pointer; }
.form__input[type="file"]::file-selector-button {
  margin-right: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border: 0;
  background: var(--color-border);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}
.form__hint { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
}
.form__check input {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--color-primary);
}
.form__error { margin: 0; font-size: var(--fs-sm); color: var(--color-error); }
.form__error:empty { display: none; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.form .btn[disabled] { opacity: 0.6; cursor: progress; }
/* Pasca na boty: pole je mimo obrazovky, človek ho nevidí ani nevyplní */
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Značky (.tags) vnútri .prose: riadok štítkov, nie zoznam s plusom */
.prose ul.tags { flex-direction: row; flex-wrap: wrap; gap: var(--space-3); }
.prose ul.tags li::before { content: none; }

/* --- Program eventu: čas, téma, spíker, popis (v .prose aj samostatne) --- */
.talks {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}
.talk {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.talk > * { margin: 0; }
.prose .talks { margin-block-start: var(--space-5); }

/* --- Program eventu ako časová os ---
   Vľavo čas, vpravo zvislá linka s bodmi. Typy položiek sú farebne odlíšené:
   .timeline__item--talk   prednáška: tmavý panel so zelenomodrou linkou hore, plný bod
   .timeline__item--qa     otázky: čiarkovaný zelenomodrý rámik, dutý zelenomodrý bod
   .timeline__item--pause  registrácia, prestávka: tlmený text bez panelu, dutý sivý bod */
.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}
.prose .timeline { margin-block-start: var(--space-6); }
.timeline__item {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  column-gap: var(--space-3);
}
@media (min-width: 640px) {
  .timeline__item { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--space-5); }
}
.timeline__item > * { margin: 0; }
.timeline__time {
  padding-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.2;
  color: var(--color-text);
}
.timeline__time span { display: block; white-space: nowrap; font-size: var(--fs-sm); color: var(--color-text-dim); }
.timeline__body {
  position: relative;
  padding: 0 0 var(--space-5) var(--space-4);
  border-left: 2px solid var(--color-border);
}
@media (min-width: 640px) {
  .timeline__body { padding-left: var(--space-5); }
}
.timeline__item:last-child .timeline__body { padding-bottom: 0; }
/* bod na linke */
.timeline__body::before {
  content: "";
  position: absolute;
  top: calc(var(--space-4) + 0.4em);
  left: -7px;
  width: 12px;
  height: 12px;
  background: var(--color-bg);
  border: 2px solid var(--color-border-strong);
}
.timeline__panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) 0 0;
}
.timeline__panel > * { margin: 0; }
.timeline__title { font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--color-text); }
:where(.timeline__panel) p { color: var(--color-text-soft); }

/* prednáška */
.timeline__item--talk .timeline__body::before { background: var(--color-primary); border-color: var(--color-primary); }
.timeline__item--talk .timeline__panel {
  padding: var(--space-4);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
}
.timeline__item--talk .timeline__time { color: var(--color-primary); }
.timeline__item--talk .timeline__title { font-size: var(--fs-xl); }
@media (min-width: 640px) {
  .timeline__item--talk .timeline__panel,
  .timeline__item--qa .timeline__panel { padding: var(--space-5); }
}
/* otázky */
.timeline__item--qa .timeline__body::before { border-color: var(--color-primary); }
.timeline__item--qa .timeline__panel {
  padding: var(--space-4);
  border: 1px dashed var(--color-primary);
}
/* registrácia, prestávka */
.timeline__item--pause .timeline__time { font-size: var(--fs-base); color: var(--color-text-muted); }
.timeline__item--pause .timeline__title { font-size: var(--fs-base); color: var(--color-text-muted); }

/* fotka rečníka bez rámika (ako na vizuáloch karuselu).
   Mobil: menšia hlavička panelu na stred (celá hlava a ramená), dole sa stráca do panelu, text je až pod ňou.
   Od 640 px: vpravo dole v pozadí panelu, ľavý okraj sa stráca cez masku.
   Pozadie fotky je o odtieň svetlejšie než panel: contrast ho stiahne a blend „lighten“
   ho zleje s panelom, takže nevidno obdĺžnik. */
.timeline__item--talk .timeline__panel { position: relative; overflow: hidden; isolation: isolate; }
.timeline__photo {
  display: block;
  width: 200px;
  max-width: 100%;
  height: 190px;
  margin: 0 auto;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1) contrast(1.17);
  mix-blend-mode: lighten;
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent);
  mask-image: linear-gradient(to bottom, #000 65%, transparent);
  pointer-events: none;
}
.timeline__panel > :not(.timeline__photo) { position: relative; z-index: 1; }
@media (min-width: 640px) {
  .timeline__photo {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: auto;
    max-width: 28%;
    height: 67%;
    margin: 0;
    object-position: top center;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 40%);
    mask-image: linear-gradient(to right, transparent, #000 40%);
  }
  .timeline__panel:has(.timeline__photo) > :not(.timeline__photo) { margin-right: 28%; }
}
@media (min-width: 1200px) {
  .timeline__panel:has(.timeline__photo) > :not(.timeline__photo) { margin-right: 23%; }
}

/* prínos pre návštevníka na konci prednášky */
.timeline__takeaway {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.timeline__takeaway .label { display: block; margin-bottom: var(--space-1); }
.timeline__panel .timeline__takeaway { color: var(--color-text); }
/* registrácia, prestávka: krátky popis tlmene */
.timeline__item--pause .timeline__panel p { font-size: var(--fs-sm); color: var(--color-text-dim); }

/* rečník: štvorček s iniciálami, meno a pozícia */
.timeline__speaker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.timeline__speaker strong { display: block; color: var(--color-text); font-weight: var(--fw-semibold); }
.timeline__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  object-fit: cover;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
}

/* --- Plagát eventu: hotová grafika (pozvánka) bez filtra, v pôvodnom pomere strán --- */
.poster { display: block; width: 100%; height: auto; border: 1px solid var(--color-border); }
a.poster img { display: block; width: 100%; height: auto; }
.poster--small { flex: 0 1 260px; max-width: 260px; transition: border-color var(--transition); }
/* na mobile a menšom tablete: pozvánka pod textom, širšia a na stred */
@media (max-width: 959px) {
  .poster--small { flex: 1 1 100%; max-width: 420px; margin-inline: auto; }
}
a.poster:hover { border-color: var(--color-primary); }

/* --- Prípadová štúdia v krokoch: východisko, riešenie, výsledok, čo ďalej ---
   Rovnaký vizuálny jazyk ako program eventu: zvislá linka s bodmi, krok je očíslovaný.
   .case__step--start     východisko: tlmený dutý bod
   .case__step--solution  riešenie: zelenomodrý dutý bod
   .case__step--result    výsledok: plný bod a zvýraznený panel (najdôležitejšia časť)
   .case__step--next      čo ďalej: čiarkovaný rámik */
.case { counter-reset: case-step; }
.prose .case { margin-block-start: 0; }
.case__step {
  position: relative;
  counter-increment: case-step;
  padding: 0 0 var(--space-7) var(--space-6);
  border-left: 2px solid var(--color-border);
}
.case__step:last-child { padding-bottom: 0; border-left-color: transparent; }
.case__step > * { margin: 0; }
.case__step > * + * { margin-top: var(--space-3); }
.case__step::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: -7px;
  width: 12px;
  height: 12px;
  background: var(--color-bg);
  border: 2px solid var(--color-border-strong);
}
.case__step > h2 { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--fs-card-title); color: var(--color-text); }
.case__step > h2::before {
  content: counter(case-step, decimal-leading-zero);
  font-size: var(--fs-sm);
  color: var(--color-text-dim);
}
.case__step--solution::before { border-color: var(--color-primary); }
.case__step--solution > h2::before,
.case__step--result > h2::before { color: var(--color-primary); }
.case__step--result::before { background: var(--color-primary); border-color: var(--color-primary); }
.case__step--result > :not(h2) { color: var(--color-text); }
.case__step--result > h2 + * { margin-top: var(--space-4); }
.case__step--result > ul,
.case__step--result > p {
  padding: var(--space-5);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
}
.case__step--next > p,
.case__step--next > ul { padding: var(--space-4) var(--space-5); border: 1px dashed var(--color-primary); }
.case__step--next > ul { list-style-position: inside; }

/* Štítok ako odkaz (filter kategórií) */
a.tag { color: var(--color-text); text-decoration: none; display: inline-block; }
a.tag:hover { border-color: var(--color-primary); color: var(--color-primary); }
.page-header .tags { margin-top: var(--space-6); }
.page-header__actions { margin-top: var(--space-6); }
/* číslo v karte na zelenomodrom páse: bez inverzného štítku, len tmavé */
.section--accent .card__num.hl { background: none; padding: 0; color: var(--color-on-primary); }

/* --- Putujúca Aston šípka (js/trail.js): úvod a podstránky so značkou data-trail --- */
.has-trail { position: relative; }
.trail { position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none; overflow: visible; }
.trail path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trail__ahead { stroke: var(--color-accent-2); stroke-width: 1.5; stroke-dasharray: 2 10; opacity: 0.9; }
.trail__under { stroke: var(--color-bg); stroke-width: 6; opacity: 0.6; }
.trail__done { stroke: var(--color-primary); stroke-width: 2; }
.trail__arrow path { fill: var(--color-primary); stroke: var(--color-bg); stroke-width: 26; paint-order: stroke; stroke-linejoin: round; }
.trail.is-rail .trail__ahead { opacity: 0.4; }

/* --- šípka ukáže na hlavné tlačidlo: keď k nemu dorazí, tlačidlo zapulzuje --- */
[data-trail-target] { position: relative; }
[data-trail-target].is-pointed { animation: trail-pulse 1.4s ease-out 2; }
@keyframes trail-pulse {
  0% { box-shadow: 0 0 0 0 rgb(12 13 16 / 0.55); transform: translateX(0); }
  15% { transform: translateX(4px); }
  30% { transform: translateX(0); }
  100% { box-shadow: 0 0 0 18px rgb(12 13 16 / 0); }
}
@media (prefers-reduced-motion: reduce) { [data-trail-target].is-pointed { animation: none; } }

/* srdiečko cez fotku pri citátoch: hrubšia zelenomodrá čiara s tmavým lemom */
.trail__heart-under { fill: none; stroke: var(--color-on-primary); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.trail__heart { fill: none; stroke: var(--color-primary); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
/* miesto na malé srdiečko šípky (napr. pravý dolný roh sekcie s citátmi); len od 960 px, kde je pri okraji voľné miesto */
.trail-heart-spot { display: none; }
@media (min-width: 960px) {
  .container:has(> .trail-heart-spot) { position: relative; }
  .trail-heart-spot { display: block; position: absolute; right: 0; bottom: -56px; width: 120px; height: 110px; margin: 0 !important; pointer-events: none; }
}

/* Doplnková fialová (cca 10 %): veľké čísla, úvodzovky citátov, druhé kľúčové slovo a linka pätičky.
   Fialová je len na tmavom podklade, nikdy na zelenomodrej ploche ani ako bežný text. */
.v2 .v2-numbers dt,
.v2 .v2-case__num,
:not(.section--accent) > .container .stat__value:not(:has(.mark)) { color: var(--color-accent-2); }
.v2 .v2-case:hover .v2-case__num { color: var(--color-primary); }
.v2 .v2-pair__item:nth-child(2) .v2-pair__word { color: var(--color-accent-2); }
.quote::before { color: var(--color-accent-2); }
.quote { border-top-color: var(--color-accent-2-line); }
.v2-section .v2-quote blockquote p::before,
.v2-section .v2-quote blockquote p::after { color: var(--color-accent-2); }
.site-footer { border-top: 3px solid var(--color-accent-2); }