/* ==========================================================================
   TnUAD — skladacie bloky
   Postavené NA Bootstrape, nie vedľa neho.

   Pravidlo: čo vie Bootstrap, robí Bootstrap.
     odsadenie   -> py-*, pt-*, mb-*  (rozšírené o stupne 6–8, viď nižšie)
     mriežka     -> container, row, col-*
     zarovnanie  -> text-center, d-flex, gap-*
   Vlastné triedy sú len tam, kde Bootstrap ekvivalent nemá: značková
   typografia a farebné plochy.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Rozšírenie odsadzovacej škály
   Bootstrap končí na 5 (3rem). Sekcie potrebujú viac, tak pokračujeme
   v rovnakom systéme — používajú sa presne ako bootstrapové utility.
     6 = 4rem (64px) · 7 = 5rem (80px) · 8 = 6rem (96px)
   -------------------------------------------------------------------------- */
.p-6  { padding: 4rem !important; }
.p-7  { padding: 5rem !important; }
.p-8  { padding: 6rem !important; }

.pt-6 { padding-top: 4rem !important; }
.pt-7 { padding-top: 5rem !important; }
.pt-8 { padding-top: 6rem !important; }

.pb-6 { padding-bottom: 4rem !important; }
.pb-7 { padding-bottom: 5rem !important; }
.pb-8 { padding-bottom: 6rem !important; }

.py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.py-7 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.py-8 { padding-top: 6rem !important; padding-bottom: 6rem !important; }

.px-6 { padding-left: 4rem !important; padding-right: 4rem !important; }
.px-7 { padding-left: 5rem !important; padding-right: 5rem !important; }

.mt-6 { margin-top: 4rem !important; }
.mt-7 { margin-top: 5rem !important; }
.mb-6 { margin-bottom: 4rem !important; }
.mb-7 { margin-bottom: 5rem !important; }

/* --------------------------------------------------------------------------
   2. Farebné plochy
   Bootstrap má bg-primary / bg-light / bg-dark. Doplňujeme odtiene značky,
   ktoré v ňom nie sú. Tmavé plochy rovno prefarbia text aj nadpisy.
   -------------------------------------------------------------------------- */
.bg-tint     { background-color: var(--tn-surface-tint); }
.bg-tint-2   { background-color: var(--tn-surface-tint-2); }
.bg-tint-3   { background-color: var(--tn-surface-tint-3); }
.bg-brand    { background-color: var(--tn-blue-800); }
.bg-accent   { background-color: var(--tn-amber-400); }

.bg-brand,
.bg-brand h1, .bg-brand h2, .bg-brand h3,
.bg-brand h4, .bg-brand h5, .bg-brand h6 { color: #fff; }
.bg-brand .tn-eyebrow { color: rgba(255, 255, 255, .85); }

.bg-accent,
.bg-accent h1, .bg-accent h2, .bg-accent h3,
.bg-accent h4, .bg-accent h5, .bg-accent h6 { color: var(--tn-ink-900); }

.text-brand  { color: var(--tn-blue-800) !important; }
.text-accent { color: var(--tn-amber-500) !important; }
.text-ink    { color: var(--tn-ink-900) !important; }
.text-soft   { color: var(--tn-ink-600) !important; }

/* --------------------------------------------------------------------------
   3. Sekcia
   Obal na jeden vodorovný pás stránky. Nesie len zvislý rytmus — všetko
   ostatné (pozadie, zarovnanie) sa dopĺňa bootstrapovými triedami.
   Keďže utility majú !important, `py-4` alebo `py-8` ho vždy prebijú.

     <section class="tn-section bg-tint">
       <div class="container"> … </div>
     </section>
   -------------------------------------------------------------------------- */
.tn-section {
  position: relative;
  padding-block: 5rem;
}
@media (max-width: 991.98px) { .tn-section { padding-block: 3.5rem; } }
@media (max-width: 575.98px) { .tn-section { padding-block: 2.5rem; } }

/* --------------------------------------------------------------------------
   4. Nadpis
   Poppins v ľahkom reze; tučná je len časť textu, ktorú obalíš do <b>.
   Veľkosti: --sm (24px) · základ (28px) · --lg (40px).

     <h2 class="tn-heading"><b>Tučná časť</b> zvyšok nadpisu</h2>
   -------------------------------------------------------------------------- */
.tn-heading {
  margin: 0 0 1rem;
  font-family: var(--tn-font-heading);
  font-size: 1.75rem;          /* 28px */
  font-weight: var(--tn-fw-light);
  line-height: 1.3;
  color: inherit;
}
.tn-heading b,
.tn-heading strong { font-weight: var(--tn-fw-bold); }

/* Originál nadpisy na mobile nezmenšuje — 28px zostáva 28px aj na telefóne.
   Zmenšuje sa len stupeň --lg, ktorý v origináli náprotivok nemá. */

/* Najmenší stupeň je celý polotučný — v ľahkom reze by sa pri 17px stratil.
   Používa sa na krátke nadpisy vedľa ikony. */
.tn-heading--xs {
  font-size: 1.0625rem;                   /* 17px ako v origináli */
  font-weight: var(--tn-fw-semibold);
  line-height: 1.2;
}
.tn-heading--sm { font-size: 1.5rem; }    /* 24px */
.tn-heading--lg { font-size: 2.5rem; }    /* 40px */

@media (max-width: 575.98px) {
  .tn-heading--lg { font-size: 1.875rem; }
}

/* --------------------------------------------------------------------------
   Hlavička stránky
   Ikona, názov stránky, linka a perex. Perex je väčší než bežný text a je
   v nadpisovom písme — medzi 35px nadpisom a 17px odstavcom by inak nebol
   žiadny medzistupeň a text pod nadpisom by pôsobil ako obyčajná veta.
   -------------------------------------------------------------------------- */
/* Názov stránky je o stupeň väčší než bežný nadpis sekcie, ale menší než
   titulok v heri — inak by na podstránke prekrikoval obsah. */
.tn-pagehead .tn-heading { font-size: var(--tn-fs-5xl); }   /* 35px */
.tn-pagehead .tn-rule { margin-block: 1.375rem; }
.tn-pagehead__perex {
  font-family: var(--tn-font-heading);
  font-size: var(--tn-fs-2xl);      /* 22px */
  font-weight: var(--tn-fw-light);
  line-height: 1.5;
  color: var(--tn-ink-700);
}
@media (max-width: 575.98px) {
  .tn-pagehead .tn-heading { font-size: var(--tn-fs-4xl); }   /* 30px */
  .tn-pagehead__perex { font-size: var(--tn-fs-xl); }         /* 20px */
}

/* Nadradený text nad nadpisom */
.tn-eyebrow {
  display: block;
  margin: 0 0 .25rem;
  font-family: var(--tn-font-heading);
  font-size: 1.125rem;         /* 18px */
  font-weight: var(--tn-fw-normal);
  text-transform: uppercase;
  color: var(--tn-blue-800);
}

/* Linka pod nadpisom — 228 × 3px, čierna ako v origináli */
.tn-rule {
  width: 228px;
  height: 3px;
  border: 0;
  opacity: 1;
  background: currentColor;
  margin: .875rem 0;
}
.text-center > .tn-rule,
.tn-rule.mx-auto { margin-inline: auto; }

/* --------------------------------------------------------------------------
   5. Text
   Bežný odstavec dedí telové písmo (Roboto 17px/1.6) z theme.css.
   Bootstrapovej triede .lead dávame značkovú podobu, nech ju netreba
   nahrádzať vlastnou.
   -------------------------------------------------------------------------- */
.lead {
  font-size: 1.125rem;         /* 18px */
  font-weight: var(--tn-fw-normal);
  line-height: 1.75;
  color: var(--tn-ink-600);
}
.bg-brand .lead { color: rgba(255, 255, 255, .9); }

/* Karta na farebnom páse si drží vlastné farby textu — inak by zdedila bielu
   z pásu a na svojom bielom podklade by zmizla. Rovnako ako .card-dashed
   v prihláškovom páse, len to tu platí pre každú kartu. */
.bg-brand .card,
.bg-apply .card { color: var(--tn-ink-700); }
.bg-brand .card h1, .bg-brand .card h2, .bg-brand .card h3,
.bg-brand .card h4, .bg-brand .card h5, .bg-brand .card h6,
.bg-apply .card h1, .bg-apply .card h2, .bg-apply .card h3,
.bg-apply .card h4, .bg-apply .card h5, .bg-apply .card h6 { color: var(--tn-ink-900); }
.bg-brand .card .tn-eyebrow,
.bg-apply .card .tn-eyebrow { color: var(--tn-blue-800); }
.bg-brand .card .lead,
.bg-apply .card .lead { color: var(--tn-ink-600); }

/* Odkaz v texte na farebnom páse — modrá ani oranžová na ňom nie sú čitateľné,
   tak je biely a podčiarknutý. Tlačidlá a dlaždice majú vlastnú úpravu,
   rovnako odkazy vnútri kariet, ktoré stoja na svojom bielom podklade. */
.bg-brand a:not(.btn):not(.tn-tile),
.bg-apply a:not(.btn):not(.tn-tile) {
  color: #fff;
  text-decoration: underline;
}
.bg-brand a:not(.btn):not(.tn-tile):hover,
.bg-apply a:not(.btn):not(.tn-tile):hover { color: rgba(255, 255, 255, .85); }
.bg-brand .card a:not(.btn),
.bg-apply .card a:not(.btn) {
  color: var(--bs-link-color);
  text-decoration: none;
}
.bg-brand .card a:not(.btn):hover,
.bg-apply .card a:not(.btn):hover { color: var(--bs-link-hover-color); }

/* Obmedzenie šírky textového stĺpca, aby sa riadky dobre čítali */
.tn-measure    { max-width: 65ch; }
.tn-measure-sm { max-width: 48ch; }
.text-center > .tn-measure,
.tn-measure.mx-auto { margin-inline: auto; }

/* --------------------------------------------------------------------------
   6. Mriežka na celú šírku
   Bootstrap má container; toto je opak — sekcia, ktorá vystúpi z kontajnera
   a roztiahne pozadie cez celé okno. Obsah vnútri si dá vlastný .container.
   -------------------------------------------------------------------------- */
.tn-full {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   7. Karta
   Bootstrapová .card, len prispôsobená značke. Netreba vlastnú triedu —
   fungujú na nej všetky bootstrapové utility (h-100, text-center …).
   -------------------------------------------------------------------------- */
.card {
  --bs-card-border-color: var(--tn-line);
  --bs-card-border-radius: var(--tn-radius-lg);
  --bs-card-inner-border-radius: var(--tn-radius-lg);
  --bs-card-spacer-y: 1.5rem;
  --bs-card-spacer-x: 1.5rem;
}
.card-title {
  font-family: var(--tn-font-heading);
  font-size: 1.25rem;
  font-weight: var(--tn-fw-semibold);
  color: var(--tn-ink-900);
}
/* Fotka na hlavičke karty. Pomer strán držíme rovnaký bez ohľadu na rozmery
   pôvodného obrázka — inak by sa vedľa seba postavené karty rozišli a nadpisy
   v nich by neboli v jednej línii. */
.card-img-top {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Karta bez rámika, ale s tieňom */
.card-shadow {
  border: 0;
  box-shadow: var(--tn-shadow-lg);
}
/* Zvýraznenie spodnou hranou v akcentovej farbe */
.card-accent { border-bottom: 6px solid var(--tn-amber-400); }

/* --------------------------------------------------------------------------
   8. Zoznam s ikonami
   Bootstrapová .list-unstyled + značková fajka. Ikona je inline SVG,
   takže dedí farbu cez currentColor.
   -------------------------------------------------------------------------- */
.tn-list { list-style: none; margin: 0; padding: 0; }
.tn-list li {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .375rem 0;
  font-weight: var(--tn-fw-medium);   /* 500 — ako v origináli */
}
.tn-list li > i {
  flex: 0 0 auto;
  width: 23px;
  margin-top: .0625rem;
  font-size: 23px;
  line-height: 1;
  text-align: center;
  color: var(--tn-blue-800);
}
.bg-brand .tn-list li > i { color: var(--tn-amber-400); }
/* Zoznam ako rozcestník — odkazy nesú akcentovú farbu, aby bolo na prvý pohľad
   vidno, že sú to hlavné kroky, nie bežné odkazy v texte. Tmavší odtieň amber-600
   je tu naschvál: svetlejšia päťstovka je na bielom podklade slabo čitateľná. */
.tn-list--cta a {
  color: var(--tn-amber-600);
  font-weight: var(--tn-fw-semibold);
  text-decoration: none;
}
.tn-list--cta a:hover,
.tn-list--cta a:focus-visible { color: var(--tn-blue-800); text-decoration: underline; }
.tn-list--cta li > i { color: var(--tn-amber-600); }

/* Prerušovaná čiara medzi položkami */
.tn-list--sep li:not(:last-child) { border-bottom: 1px dashed var(--tn-line); }

/* --------------------------------------------------------------------------
   9. Štítok
   -------------------------------------------------------------------------- */
.tn-tag {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid #D5D5D5;
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-tint-3);
  font-size: 1rem;
  color: var(--tn-ink-700);
}

/* --------------------------------------------------------------------------
   10. Číselný údaj
   -------------------------------------------------------------------------- */
.tn-stat-value {
  display: block;
  font-family: var(--tn-font-heading);
  font-size: 2.5rem;
  font-weight: var(--tn-fw-semibold);
  line-height: 1.2;
  color: var(--tn-blue-800);
}
.bg-brand .tn-stat-value { color: #fff; }

/* --------------------------------------------------------------------------
   11. Accordion
   Bootstrapový komponent preladený cez jeho premenné. Oproti bootstrapovému
   vzhľadu sú položky samostatné zaoblené pilulky s medzerou, nie zlepený
   stĺpec, a znamienko plus/mínus stojí pred textom, nie za ním.
   -------------------------------------------------------------------------- */
.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: var(--tn-radius-xl);      /* 25px */
  --bs-accordion-inner-border-radius: var(--tn-radius-xl);
  --bs-accordion-btn-bg: var(--tn-blue-100);
  --bs-accordion-btn-color: var(--tn-ink-900);
  --bs-accordion-btn-padding-x: 25px;
  --bs-accordion-btn-padding-y: 15px;
  --bs-accordion-active-bg: var(--tn-blue-800);
  --bs-accordion-active-color: #fff;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(25, 107, 153, .15);
  --bs-accordion-body-padding-x: 25px;
  --bs-accordion-body-padding-y: 15px;
  /* Plus zatvorené, mínus otvorené — preto sa ikona neotáča. */
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23FFAC2C'%3e%3cpath d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23ffffff'%3e%3cpath d='M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3e%3c/svg%3e");
  --bs-accordion-btn-icon-width: 18px;
  --bs-accordion-btn-icon-transform: none;
}
/* Položky stoja samostatne, medzi nimi medzera. */
.accordion-item + .accordion-item { margin-top: 12px; }
.accordion-button {
  font-family: var(--tn-font-body);
  font-size: 1rem;
  font-weight: var(--tn-fw-semibold);
  line-height: 22px;
  border-radius: var(--bs-accordion-border-radius) !important;
  box-shadow: none;
}
/* Bootstrap dáva ikonu na koniec; flexový order ju presunie pred text. */
.accordion-button::after {
  order: -1;
  margin-left: 0;
  margin-right: 12px;
}

/* --------------------------------------------------------------------------
   12. Pásik nad menu
   Tenký pruh so sloganom a sociálnymi ikonami. Rozloženie drží Bootstrap
   (d-flex, justify-content-center, position-absolute), sem patrí len farba
   a typografia.
   -------------------------------------------------------------------------- */
.tn-topbar {
  background: var(--tn-blue-600);
  color: #fff;
  padding-block: 10px;
}
.tn-topbar__claim {
  font-family: var(--tn-font-heading);
  font-size: 1rem;
  line-height: 1.5;
}
.tn-topbar__claim b { font-weight: var(--tn-fw-bold); }
/* Na mobile sa slogan zmenší, aby sa zmestil do jedného riadka — rovnako
   ako v origináli. Sociálne ikony sú tam skryté, takže má celú šírku. */
@media (max-width: 767.98px) {
  .tn-topbar__claim { font-size: .875rem; line-height: 1.2; }
}

/* Pásik aj menu majú obsah zarovnaný na okraj kontajnera, nie do jeho
   odsadenia — logo tak začína presne na hrane 1280px mriežky. Bootstrap dáva
   kontajneru 12px po stranách, tu ho rušíme a pod 1320px nahrádzame 20px,
   aby sa obsah nedotýkal okraja okna. */
.tn-topbar .container,
.tn-navbar .container { padding-inline: 0; }
@media (max-width: 1319.98px) {
  /* Pásik nesie odsadenie sám, nie jeho kontajner: sociálne ikony sú v ňom
     absolútne umiestnené a `end-0` by ich posadilo až za jeho odsadenie. */
  .tn-topbar { padding-inline: 20px; }
  .tn-navbar .container { padding-inline: 20px; }
}

/* Sociálne ikony — holé glyfy, farbu dedia cez currentColor.
   Rozostup 6px nie je na bootstrapovej škále (4/8/16), preto je tu.
   li musí byť flex, inak okolo odkazu vznikne riadkový box a pruh narastie. */
.tn-social { gap: 6px; }
.tn-social li { display: flex; }
.tn-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .1em;
  line-height: 0;
  color: inherit;
}
/* Pevná šírka drží rozostupy rovnaké bez ohľadu na šírku glyfu. */
.tn-social i {
  display: inline-block;
  width: 20px;
  font-size: 20px;
  line-height: 1;
  text-align: center;
}
.tn-social a:hover { color: var(--tn-amber-400); }

/* --------------------------------------------------------------------------
   13. Menu
   Bootstrapová .navbar — responzívne zbalenie, hamburger aj podmenu rieši
   ona. Farby si nastavujeme sami cez jej premenné, nie cez data-bs-theme:
   tá by pri inom poradí štýlov prebila naše hodnoty a menu by zošedivelo.
   Zvyšok sú značkové detaily — oranžové podčiarknutie položky, zvislé
   oddeľovače a svetlé podmenu.
   -------------------------------------------------------------------------- */
/* Dvojica tried, nech pravidlo nezávisí od poradia načítania štýlov. */
.tn-navbar.navbar {
  --bs-navbar-padding-y: 10px;
  --bs-navbar-color: #fff;
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--tn-blue-800);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .26);
}
.tn-navbar .navbar-brand { padding: 0; }
.tn-navbar .navbar-brand img { width: 290px; max-width: 60vw; }

/* Odsadenie položiek si .navbar-nav nastavuje sama, takže hodnoty musia byť
   na nej — na .tn-navbar by ich prebila. Od nich závisí výška celého pásu. */
.tn-navbar .navbar-nav {
  /* Vodorovné odsadenie má .navbar vlastnú premennú — --bs-nav-link-padding-x
     by prebilo pravidlo .navbar-expand-* .navbar-nav .nav-link. */
  --bs-navbar-nav-link-padding-x: 10px;
  --bs-nav-link-padding-y: 13px;
}

/* Položky: telové písmo v ľahkom reze, verzálky, 15px. */
.tn-navbar .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  font-size: .9375rem;          /* 15px */
  font-weight: var(--tn-fw-light);
  text-transform: uppercase;
  line-height: 1.35;
  white-space: nowrap;
}
/* Oranžové podčiarknutie sa objaví naraz, bez prechodu.
   Nemôže byť ::after — ten už patrí Bootstrapu ako šípka podmenu. */
.tn-navbar .nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--tn-amber-400);
  opacity: 0;
}
.tn-navbar .nav-link:hover::before,
.tn-navbar .nav-link.active::before,
.tn-navbar .nav-item:focus-within > .nav-link::before { opacity: 1; }
.tn-navbar .dropdown-toggle::after { margin-left: 10px; }

@media (min-width: 992px) {
  /* Zvislý oddeľovač medzi položkami — kratší než položka, preto pseudoprvok
     ako flexový súrodenec odkazu, nie border na položke. */
  .tn-navbar .navbar-nav .nav-item { display: flex; align-items: stretch; }
  .tn-navbar .navbar-nav .nav-item:not(:last-child)::after {
    content: "";
    align-self: center;
    border-left: 2px solid rgba(255, 255, 255, .13);
    height: 22px;
  }
  /* Podmenu sa v origináli otvára prejdením myšou, nielen klikom. */
  .tn-navbar .nav-item.dropdown:hover > .dropdown-menu,
  .tn-navbar .nav-item.dropdown:focus-within > .dropdown-menu { display: block; }
}

/* Podmenu je svetlé, hoci menu nad ním je tmavé — prehodíme mu Bootstrapu
   premenné. Rohy sú ostré, aby panel nadväzoval na oranžové podčiarknutie. */
.tn-navbar .dropdown-menu {
  --bs-dropdown-bg: #fff;
  --bs-dropdown-border-width: 0;
  --bs-dropdown-border-radius: 0;
  --bs-dropdown-padding-y: 0;
  --bs-dropdown-min-width: 0;
  --bs-dropdown-font-size: 1rem;
  --bs-dropdown-item-padding-y: 13px;
  --bs-dropdown-item-padding-x: 20px;
  --bs-dropdown-link-color: var(--tn-ink-700);
  --bs-dropdown-link-hover-bg: var(--tn-amber-400);
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-active-bg: var(--tn-amber-400);
  --bs-dropdown-link-active-color: #fff;
  /* Bootstrap umiestňuje podmenu až cez Popper pri kliknutí. Pri otvorení
     prejdením myšou Popper nebeží, tak mu polohu dáme rovno v CSS.
     Kotví sa pravým okrajom — menu je pri pravom okraji stránky, takže široký
     panel rastie doľava do stránky a nie mimo okna. */
  top: 100%;
  right: 0;
  left: auto;
  align-self: flex-start;
  /* Žiadna medzera medzi položkou a podmenu — inak by pri prechode myšou
     nadol kurzor opustil položku a podmenu by zmizlo. Takto naň nadväzuje
     hneď pod oranžovým podčiarknutím. */
  margin-top: 0;
  box-shadow: 0 7px 10px rgba(0, 0, 0, .22);
}
/* Panel je široký podľa najdlhšieho názvu — položky zostávajú na jednom
   riadku. Strop je len poistka, aby sa na úzkom okne nedostal mimo neho. */
.tn-navbar .dropdown-menu { max-width: calc(100vw - 2rem); }
.tn-navbar .dropdown-item { font-family: var(--tn-font-body); text-transform: none; }
.tn-navbar .dropdown-menu li:not(:last-child) .dropdown-item {
  border-bottom: 1px solid var(--tn-line);
}

/* Hamburger — v origináli oranžový kruh s bielou ikonou. */
.tn-navbar .navbar-toggler {
  --bs-navbar-toggler-padding-x: 0;
  --bs-navbar-toggler-padding-y: 0;
  --bs-navbar-toggler-border-color: transparent;
  --bs-navbar-toggler-focus-width: .2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tn-amber-400);
  line-height: 44px;
  text-align: center;
}
.tn-navbar .navbar-toggler-icon { vertical-align: middle; }

/* Rozbalené mobilné menu potrebuje odsadiť od loga. */
@media (max-width: 991.98px) {
  .tn-navbar .navbar-collapse { padding-block: .5rem 1rem; }
  .tn-navbar .dropdown-menu { margin-top: 0; }
  /* V rozbalenom menu je panel na šírku stĺpca — dlhší názov sa musí zalomiť,
     inak by pretiekol von zo stránky. */
  .tn-navbar .dropdown-item { white-space: normal; }
  /* Položky sú pod sebou — oranžový pás cez celý riadok by pôsobil ako
     oddeľovač, tak ho vymeníme za jemnú linku a farbu textu. */
  .tn-navbar .nav-link::before { display: none; }
  .tn-navbar .nav-item:not(:last-child) > .nav-link {
    border-bottom: 1px solid rgba(255, 255, 255, .15);
  }
  .tn-navbar .nav-link.active { color: var(--tn-amber-400); }
}

/* --------------------------------------------------------------------------
   14. Pätička
   Svetlá plocha s odkazmi. Stĺpce sú bootstrapová mriežka, sem patrí
   pozadie, nadpisy stĺpcov a oranžové odkazy.
   -------------------------------------------------------------------------- */
.tn-footer {
  background-image: linear-gradient(0deg, var(--tn-surface-tint-4) 21%, #fff 100%);
  padding-block: 2.5rem;
}
.tn-footer__title {
  margin: 0 0 1.25rem;
  font-family: var(--tn-font-heading);
  font-size: 1.25rem;
  font-weight: var(--tn-fw-bold);
  color: var(--tn-ink-900);
}
.tn-footer a { color: var(--tn-amber-500); }
.tn-footer a:hover { color: var(--tn-blue-800); }
.tn-footer .tn-list li > i { color: var(--tn-amber-400); }
.tn-footer .tn-social { color: var(--tn-blue-800); }
/* Na mobile je pätička zbalená — vidno len biely pásik „Kontakt“ so šípkou,
   ktorý ju rozbalí (bootstrapový collapse). Od tabletu je vždy rozbalená:
   .d-md-block prebije skrytie zbaleného collapse. */
.tn-footer__toggle {
  display: block;
  width: 100%;
  padding: 1rem 0;
  border: 0;
  border-top: 1px solid var(--tn-line);
  background: #fff;
  font-family: var(--tn-font-heading);
  font-size: 1.25rem;
  font-weight: var(--tn-fw-bold);
  color: var(--tn-ink-900);
  text-align: left;
}
.tn-footer__toggle i {
  font-size: 1rem;
  color: var(--tn-blue-800);
  transition: transform var(--tn-duration) var(--tn-ease);
}
.tn-footer__toggle[aria-expanded="true"] i { transform: rotate(180deg); }
@media (max-width: 767.98px) {
  .tn-footer { padding-block: 0; }
  .tn-footer #paticka > .container { padding-block: .5rem 2rem; }
  /* Nadpis „Kontakt“ nesie už pásik — v rozbalenom obsahu by sa opakoval. */
  .tn-footer #paticka .col-lg-5 > .tn-footer__title { display: none; }
}

/* --------------------------------------------------------------------------
   15. Ikona
   Veľká značková ikona pre karty a pásy výhod. Inline SVG dedí farbu, takže
   na tmavom podklade zoranžovie samo. Veľkosť sa mení font-size-om.
   -------------------------------------------------------------------------- */
/* Glyfy Material Symbols sú štvorcové (1em × 1em), takže ikona zaberá presne
   toľko ako v origináli a text vedľa nej začína vždy rovnako. */
.tn-icon {
  display: inline-block;
  width: 1em;
  text-align: center;
  font-size: 65px;
  line-height: 1;
  color: var(--tn-blue-800);
}
.tn-icon--sm { font-size: 40px; }
.tn-icon--lg { font-size: 88px; }
.bg-brand .tn-icon { color: var(--tn-amber-400); }
/* Na úzkom okne sa ikona zmenší, aby nedominovala nad textom vedľa seba.
   Originál skáče 65 → 40 → 50px; berieme z toho jeden krok. */
@media (max-width: 991.98px) { .tn-icon { font-size: 50px; } }

/* --------------------------------------------------------------------------
   16. Dlaždica
   Odkaz s ikonou a názvom. Bootstrapová .card na to nesedí — dlaždica je
   celá klikateľná a obsah má vycentrovaný na oboch osiach.
   -------------------------------------------------------------------------- */
.tn-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .875rem;
  height: 100%;
  min-height: 150px;
  padding: 1.5rem 1.125rem;
  text-align: center;
  background: #fff;
  border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius-md);
  color: var(--tn-ink-900);
  transition: border-color var(--tn-duration) var(--tn-ease),
              box-shadow var(--tn-duration) var(--tn-ease);
}
.tn-tile:hover {
  color: var(--tn-blue-800);
  border-color: var(--tn-blue-400);
  box-shadow: var(--tn-shadow-md);
}
.tn-tile .tn-icon { font-size: 44px; }
/* Ikona stojí vo všetkých dlaždiciach v rovnakej výške od vrchu — text pod ňou
   sa zalamuje rôzne, tak dlaždice necentrujeme zvislo. Názov má tesnejšie
   riadkovanie, aby dvoj- a trojriadkové názvy držali pokope. */
.tn-tile { justify-content: flex-start; }
.tn-tile > span { line-height: 1.3; }
/* Namiesto ikony môže v dlaždici stáť logo fakulty. Výšku mu držíme rovnakú
   pre všetky logá, šírku si dopočíta samo, aby sa nedeformovalo. */
.tn-tile img { height: 52px; width: auto; }

/* Fotka, ktorá má vedľa dlhého textu vyplniť celú výšku stĺpca — inak by
   pri sedempoložkovom zozname vedľa nej ostal veľký prázdny pás. Orezanie
   rieši object-fit, aby sa nedeformovala; na úzkom okne, kde stĺpce idú
   pod seba a percentuálna výška nemá z čoho počítať, drží výšku minimum. */
.tn-photo-fill {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
}
/* Na úzkom okne by fotka na výšku zabrala niekoľko obrazoviek — orežeme ju. */
@media (max-width: 991.98px) {
  .tn-photo-fill { max-height: 460px; }
}
/* Vedľa textu sa fotka do výšky stĺpca nezapočítava — inak by fotka na výšku
   natiahla celý riadok a pod textom by ostal prázdny pás. Výšku určí text,
   fotka ju len vyplní. */
@media (min-width: 992px) {
  :has(> .tn-photo-fill) { position: relative; min-height: 340px; }
  .tn-photo-fill {
    position: absolute; top: 0; left: calc(var(--bs-gutter-x) * .5);
    width: calc(100% - var(--bs-gutter-x)); height: 100%; min-height: 0;
  }
}

/* Kruhová fotka osoby. Vlastná trieda preto, že theme.css dáva obrázkom
   height:auto — atribúty width/height by fotku sploštili na elipsu. */
.tn-avatar {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
}
.tn-avatar--lg { width: 112px; height: 112px; }

/* --------------------------------------------------------------------------
   17. Časová os
   Kroky vedľa seba, na úzkom okne sa posúvajú do strán. Zastavovanie rieši
   scroll-snap, nie skript.
   -------------------------------------------------------------------------- */
.tn-timeline {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: thin;
}
.tn-timeline > * {
  flex: 0 0 clamp(240px, 30%, 340px);
  scroll-snap-align: start;
}
.tn-step__num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--tn-amber-400);
  color: #fff;
  font-family: var(--tn-font-heading);
  font-size: 1.25rem;
  font-weight: var(--tn-fw-bold);
}

/* --------------------------------------------------------------------------
   18. Formulár
   Bootstrapové .form-control, .form-label, .form-select a .form-check,
   preladené cez ich vlastné premenné.
   -------------------------------------------------------------------------- */
.form-label {
  font-family: var(--tn-font-heading);
  font-weight: var(--tn-fw-medium);
  color: var(--tn-ink-900);
  margin-bottom: .35rem;
}
.form-control,
.form-select {
  --bs-border-color: var(--tn-line);
  border-radius: var(--tn-radius-sm);
  padding: .7rem .9rem;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--tn-blue-400);
  box-shadow: 0 0 0 .2rem rgba(25, 107, 153, .15);
}
.form-check-input:checked {
  background-color: var(--tn-blue-800);
  border-color: var(--tn-blue-800);
}
.form-check-input:focus {
  border-color: var(--tn-blue-400);
  box-shadow: 0 0 0 .2rem rgba(25, 107, 153, .15);
}

/* --------------------------------------------------------------------------
   19. Hero s videom
   Úvodná plocha cez väčšinu okna, na pozadí video alebo obrázok. Rozloženie
   obsahu rieši Bootstrap (d-flex, align-items-end, text-center), sem patrí
   len prekrytie a orezanie videa.

   Záporné z-indexy držia poradie vrstiev:
     obrázok (pozadie sekcie) < video (-2) < stmavenie (-1) < obsah
   -------------------------------------------------------------------------- */
.tn-hero {
  position: relative;
  isolation: isolate;
  min-height: 80vh;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
.tn-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: .3;
  mix-blend-mode: luminosity;
  z-index: -1;
}
/* Čím nižší hero pri tej istej šírke, tým menej sa pozadie približuje —
   preto sa výška zmenšuje po krokoch, nie skokom. */
@media (max-width: 1199.98px) { .tn-hero { min-height: 60vh; } }
@media (max-width:  991.98px) { .tn-hero { min-height: 45vh; } }
@media (max-width:  575.98px) { .tn-hero { min-height: 35vh; } }

/* Video musí pokryť plochu bez ohľadu na pomer okna: šírka 100vw a k nej
   16:9 výška, plus min-width počítaná z výšky okna pre vysoké obrazovky. */
.tn-hero__video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -2;
  pointer-events: none;
}
.tn-hero__video video,
.tn-hero__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;          /* 16:9 */
  min-width: 177.78vh;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  object-fit: cover;
  pointer-events: none;
}

/* Popiska a šípka nadol. Kruh a zarovnanie sú bootstrapové triedy v HTML,
   tu zostáva len farba, tieň textu a poskakovanie. */
.tn-hero__label {
  font-family: var(--tn-font-heading);
  font-size: 1.25rem;
  font-weight: var(--tn-fw-bold);
  letter-spacing: 1.4px;
  color: #fff;
  text-shadow: 0 0 13px #000;
}
@media (max-width: 767.98px) { .tn-hero__label { font-size: 1.125rem; } }

.tn-hero__scroll {
  width: 48px;
  height: 48px;
  border: 1px solid var(--tn-amber-400);
  background: rgba(255, 255, 255, .92);
  color: var(--tn-amber-400);
  animation: tn-bounce 2s infinite;
}
.tn-hero__scroll i { font-size: 20px; line-height: 1; }
@keyframes tn-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) { .tn-hero__scroll { animation: none; } }

/* Drobná poznámka v hero — napr. informácia o financovaní projektu nad logami
   donorov. Tlmená, aby nesúperila s nadpisom a odrážkami; šírku má ako logá
   pod ňou, teda celý stĺpec. */
.tn-hero__note {
  margin: 0 0 1rem;
  font-size: var(--tn-fs-xs);
  line-height: var(--tn-lh-normal);
  color: var(--tn-ink-600);
}
@media (max-width: 575.98px) {
  .tn-hero__note { font-size: .75rem; color: var(--tn-ink-500); text-align: center; }
}

/* Nadradený text v hero je dvojnásobný (36px) — nesie názov pracoviska. */
.tn-hero .tn-eyebrow { font-size: 2.25rem; line-height: 1.2; margin-bottom: .5rem; }
@media (max-width: 575.98px) {
  .tn-hero .tn-eyebrow { font-size: 1.75rem; }
}

/* Zoznam v hero je na telefóne o stupeň menší — pri piatich odrážkach by
   inak text zabral celú prvú obrazovku. */
@media (max-width: 575.98px) {
  .tn-hero .tn-list li { padding-block: .25rem; font-size: var(--tn-fs-sm); }
  .tn-hero .tn-list li > i { width: 19px; font-size: 19px; margin-top: .125rem; }
}

/* Svetlý variant — fotka zostáva svetlá a text na nej je tmavý. Namiesto
   stmavenia celej plochy zosvetľujeme len tú stranu, kde stojí text, aby
   zvyšok fotky zostal čitateľný. Na úzkom okne text prekryje celú šírku,
   tak sa zo strany stane rovnomerný závoj. */
.tn-hero--light::before {
  background: linear-gradient(90deg,
              rgba(255, 255, 255, .94) 0%,
              rgba(255, 255, 255, .82) 40%,
              rgba(255, 255, 255, 0) 70%);
  opacity: 1;
  mix-blend-mode: normal;
}
/* Text na druhej strane — závoj sa otočí. */
.tn-hero--light.tn-hero--right::before {
  background: linear-gradient(270deg,
              rgba(255, 255, 255, .94) 0%,
              rgba(255, 255, 255, .82) 40%,
              rgba(255, 255, 255, 0) 70%);
}
@media (max-width: 991.98px) {
  .tn-hero--light::before,
  .tn-hero--light.tn-hero--right::before { background: rgba(255, 255, 255, .9); }
}

/* --------------------------------------------------------------------------
   20. Tvarový oddeľovač
   Vlnovka na spodnom okraji sekcie. Kreslená je zhora, preto sa obal otáča
   o 180°. Spodok je na -1px, aby subpixelové zaokrúhlenie nenechalo vlásočnicu.
   Farbu preberá z nasledujúcej sekcie — meníš ju cez fill na .tn-shape__fill.
   -------------------------------------------------------------------------- */
.tn-shape {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  line-height: 0;
  overflow: hidden;
  z-index: 0;
  transform: rotate(180deg);
  pointer-events: none;
}
.tn-shape svg {
  display: block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: calc(217% + 1.3px);
  height: 152px;
}
.tn-shape__fill { fill: var(--tn-surface-tint); }
@media (max-width: 575.98px) { .tn-shape svg { height: 40px; } }

/* --------------------------------------------------------------------------
   21. Spodný pruh
   Tmavý prúžok pod pätičkou s copyrightom a právnymi odkazmi. Odsadenie
   nesie pruh, nie kontajner — rovnako ako pri pásiku nad menu.
   -------------------------------------------------------------------------- */
.tn-footbar {
  background: var(--tn-blue-800);
  color: #fff;
  padding: 14px 20px;
  font-size: 1rem;
  line-height: 1.2;
}
.tn-footbar .container { padding-inline: 0; }
.tn-footbar a { color: inherit; }
.tn-footbar a:hover { color: var(--tn-amber-400); }
/* Zvislá čiarka medzi právnymi odkazmi */
.tn-footbar__legal li + li {
  margin-inline-start: 14px;
  padding-inline-start: 14px;
  border-inline-start: 1px solid rgba(255, 255, 255, .35);
}
/* Na mobile sa oba riadky vycentrujú pod seba — zalomené vedľa seba
   pôsobili rozhádzane. Menšie písmo, aby sa každý zmestil na jeden riadok. */
@media (max-width: 767.98px) {
  .tn-footbar { padding-block: 1rem; font-size: .8125rem; line-height: 1.4; }
  .tn-footbar .container { flex-direction: column; justify-content: center !important; gap: .5rem !important; text-align: center; }
  .tn-footbar__legal { justify-content: center; }
  .tn-footbar p { text-wrap: balance; }
}

/* Bootstrap má pomery 1x1, 4x3, 16x9 a 21x9. Originál používa 3:2, tak ho
   dopĺňame do tej istej sústavy — cez jeho vlastnú premennú. */
.ratio-3x2 { --bs-aspect-ratio: 66.6667%; }

/* --------------------------------------------------------------------------
   22. Prekryv sekcií
   Prvok visí do susednej sekcie, takže jej pozadie sa podsunie pod neho.
   Robí to záporné odsadenie; z-index ho drží nad pozadím tej druhej sekcie,
   inak by ho prekrylo.

   Susedná sekcia pod prekryvom dostane .pt-overlap — odsadenie si dopočíta
   sama z premennej --tn-overlap, takže nemusíš hľadať správne číslo.
   -------------------------------------------------------------------------- */
.tn-overlap-down,
.tn-overlap-up {
  position: relative;
  z-index: 1;
}
.tn-overlap-down { margin-bottom: calc(var(--tn-overlap) * -1); }
.tn-overlap-up   { margin-top: calc(var(--tn-overlap) * -1); }

/* Odsadenie sekcie, ktorá je pod prekryvom — počíta s ním, takže nemusíš
   hľadať správne číslo. Mení sa spolu s --tn-overlap. */
.pt-overlap { padding-top: calc(var(--tn-overlap) + 1.25rem) !important; }

@media (max-width: 767.98px) { :root { --tn-overlap: 40px; } }

/* --------------------------------------------------------------------------
   23. Prihláškový pás
   Sekcia s oranžovým prechodom, v prvom stĺpci nadpis a vedľa karty
   s prerušovaným rámikom. Karta je bootstrapová .card, len s iným rámikom —
   patrí do tej istej rodiny ako .card-shadow a .card-accent.
   -------------------------------------------------------------------------- */
.bg-apply {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(154deg, #DF8154 34%, var(--tn-amber-400) 100%);
}

/* Vodoznak — v origináli je nad prechodom ešte jedna vrstva s obrysovou
   kresbou. Násobené miešanie a šesťpercentné krytie ju vpíja do oranžovej,
   takže je len tušená a text nad ňou zostáva čitateľný.

   Obrázok je SVG bez rozmerov, len s viewBoxom — prehliadač ho preto sám
   zmenší na výšku pásu (ako pri background-size: contain) a odsadenie 12vw
   ho posunie od ľavého okraja. Záporný z-index ho drží nad pozadím sekcie,
   ale pod obsahom; isolation na páse zabráni, aby prepadol ešte nižšie. */
.bg-apply::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/FIT.svg");
  background-position: 12vw 0;
  background-repeat: no-repeat;
  opacity: .06;
  mix-blend-mode: multiply;
  z-index: -1;
  pointer-events: none;
}
/* Na užších oknách už 12vw nie je kam odsadiť — vodoznak ide k ľavému okraju. */
@media (max-width: 991.98px) {
  .bg-apply::before { background-position: 0 0; }
}
/* Nízky pás, kde by kresba vychádzala orezaná na pár čiar — necháme ho hladký. */
.bg-apply--plain::before { content: none; }
.bg-apply,
.bg-apply h1, .bg-apply h2, .bg-apply h3,
.bg-apply h4, .bg-apply h5, .bg-apply h6 { color: #fff; }
.bg-apply .tn-eyebrow { color: rgba(255, 255, 255, .85); }
.bg-apply .lead { color: rgba(255, 255, 255, .9); }

/* Karta si farbu textu nastavuje sama — inak by zdedila bielu z pásu
   a na svetlom podklade by zmizla. */
.card-dashed {
  --bs-card-border-radius: var(--tn-radius-xl);       /* 25px */
  --bs-card-inner-border-radius: var(--tn-radius-xl);
  border: 2px dashed var(--tn-blue-800);
  background-image: linear-gradient(180deg, #fff 38%, var(--tn-surface-tint-4) 100%);
  color: var(--tn-ink-700);
  min-height: 350px;
}
.card-dashed .tn-icon { font-size: 55px; }

/* --------------------------------------------------------------------------
   24. Karta fakulty
   Logo navrchu, pod ním názov a štítky. Oranžová hrana zdola je hrubšia,
   logo je odfarbené a farbu naberie až pri prejdení myšou — ako v origináli.
   Znova len modifikátor bootstrapovej .card.
   -------------------------------------------------------------------------- */
.card-faculty {
  --bs-card-border-radius: 35px;
  --bs-card-inner-border-radius: 35px;
  --bs-card-border-color: var(--tn-amber-400);
  --bs-card-spacer-x: 25px;
  --bs-card-spacer-y: 25px;
  /* Bootstrap má šírky okraja len do 5px, desiatku musíme napísať. */
  border-bottom-width: 10px;
  transition: box-shadow var(--tn-duration) var(--tn-ease);
}
.card-faculty:hover { box-shadow: 0 0 10px 0 rgba(0, 0, 0, .33); }
/* Logo naberie farbu až pri prejdení myšou. */
.card-faculty img {
  filter: grayscale(1);
  transition: filter var(--tn-duration) var(--tn-ease);
}
.card-faculty:hover img,
.card-faculty:focus-within img { filter: none; }
/* Názov je v telovom písme, nie v nadpisovom — tak to má originál. */
.card-faculty .card-title {
  font-family: var(--tn-font-body);
  font-weight: var(--tn-fw-bold);
  transition: color var(--tn-duration) var(--tn-ease);
}
.card-faculty:hover .card-title { color: var(--tn-amber-400); }