/* =============================================================================
   ff2.css — navigace a hlavička Fit Factory Havířov

   Načítá se za bootstrap.css a theme.min.css, scopované pod .ff2-nav.
   Prefix `ff2-` a BEM (`blok__prvek--modifikátor`) včetně stavů; `ff-` patří
   starším vrstvám webu a nesmí se míchat. Stavy přepíná ff2-nav.js.
   Mimo scope jsou jen .ff2-hero, .ff2-wrap a :root proměnné.

   Proměnné se jmenují `--ff2-<kategorie>-<co>`: color, font, size, image.
   ============================================================================= */
:root {
  --ff2-color-orange: #F60;
  --ff2-color-orangeAccent: #ff8a3d;
  --ff2-color-ink: #151925;
  --ff2-color-line: rgba(255,255,255,.12);
  --ff2-font-head: 'Oswald', Impact, sans-serif;
  --ff2-font-body: 'Open Sans', system-ui, sans-serif;

  /* 1rem = 14px — theme.min.css ma `html { font: normal 14px/24px }`.
     Root font-size nesahat, prepsalo by to typografii celeho webu. */
  /* Fallbacky, nez je prepocita ff2-nav.js. */
  --ff2-size-aboveBarHeight: 84px;   /* notifikace + topBar, tedy co odscroluje */
  --ff2-size-headerHeight: 150px;   /* celá hlavička včetně lišty */
  /* Výška samotné lišty ve zašpendleném stavu — o tolik se musí odsadit
     cokoli dalšího, co je na stránce `position: sticky`. Natvrdo, ne měřené
     JS: obě hodnoty (.ff2-bar__inner 64px na mobilu, 62px se --stuck) jsou
     v CSS konstanty a bere se ta VĚTŠÍ. Kdyby se sáhlo vedle dolů, sticky
     prvek se pod lištu schová; nahoru vznikne jen neviditelná mezera. */
  --ff2-size-barHeight: 64px;
}

/* ---------- reset uvnitř komponenty ---------------------------------------- */
/* :where() ma nulovou specificitu — reset porazi holé selektory z bootstrapu,
   ale vlastni pravidla komponenty (0,1,0) uz neprebije. */
.ff2-nav,
.ff2-nav :where(*),
.ff2-nav :where(*)::before,
.ff2-nav :where(*)::after {
  box-sizing: border-box;
}

.ff2-nav :where(ul, ol) {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ff2-nav :where(li) {
  margin: 0;
  padding: 0;
  background: none;
}

.ff2-nav :where(a) {
  text-decoration: none;
  color: inherit;
}

.ff2-nav :where(a:hover),
.ff2-nav :where(a:focus) {
  color: inherit;
}

/* Bez :where(): theme.min.css ma `a:hover` (0,1,1) a nulovy reset by prohral. */
.ff2-nav a:hover,
.ff2-nav a:focus {
  text-decoration: none;
  color: #fff;
  outline: none;
}

.ff2-nav :where(p) {
  margin: 0;
}

.ff2-nav :where(button) {
  font: inherit;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
}

.ff2-nav :where(img) {
  max-width: none;
}

.ff2-nav :where(svg) {
  display: block;
}

.ff2-nav .ff2-icon {
  width: 1em;
  height: 1em;
  display: block;
}

/* ---------- hlavička: tři vrstvy ------------------------------------------- */
/* Zaporny top: hlavicka smi vyjet nad okno o vysku vrstev nad listou, takze
   odscroluje notifikace i topBar a prisplendli se jen lista.
   .ff2-nav musi zustat primym ditetem .ak-page, jinak sticky nedela nic. */
.ff2-nav {
  position: sticky;
  top: calc(-1 * var(--ff2-size-aboveBarHeight));
  z-index: 50;

  /* Neprusvitna vzdy, i na homepage. */
  background: var(--ff2-color-ink) linear-gradient(225deg, rgba(255,102,0,.34), rgba(21,25,37,0) 52%);
  font-family: var(--ff2-font-body);
}

/* ---------- hero (slider) pod hlavickou -------------------------------------
   Vyska = min(zbytek okna, sirka / pomer): aspect-ratio + max-height.
   Sirokemu monitoru orizne vysku max-height, uzkemu rozhoduje pomer.
   `dvh` je az druhe v poradi jako progressive enhancement nad `vh`. */
.ff2-hero {
  position: relative;

  /* theme.min.css dava .tm-fullscreen `border-top: 34px solid` (oranzovy pruh)
     a box-sizing tenhle bootstrap globalne nenastavuje. */
  border: 0;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - var(--ff2-size-headerHeight));
  max-height: calc(100dvh - var(--ff2-size-headerHeight));
  overflow: hidden;
}

/* Absolutne, protoze aspect-ratio urcuje jen preferovanou vysku a obsah ji
   pretlaci — UIkit uvnitr nechava <img> s `height: auto`. */
.ff2-hero > .akslider-module {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Na telefonu je 16:9 uz jen prouzek. */
@media (max-width: 425px) {
  .ff2-hero {
    aspect-ratio: 1 / 1;
  }
}

/* UIkit slideshow si vysku zapisuje inline a prepocitava pri kazdem resize. */
.ff2-hero .akslider-module,
.ff2-hero .uk-slidenav-position,
.ff2-hero .uk-slideshow,
.ff2-hero .uk-slideshow > li {
  height: 100% !important;
  min-height: 0 !important;
}

/* box-sizing explicitne: .ff2-wrap zije i mimo scope resetu. */
.ff2-wrap {
  box-sizing: border-box;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
  width: 100%;
}

/* ---------- notifikace ------------------------------------------------------ */
.ff2-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #0f121c;
  color: #dfe3ec;
  font-size: .8125rem;
  line-height: 1.35;
  letter-spacing: .01em;
  padding: 6px 16px;
  text-align: center;
}

.ff2-notice .ff2-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  opacity: .65;
}

/* Vanocni prevlek; `.isChristmas` sazi web na <body>. */
.isChristmas .ff2-notice {
  background: #151925 linear-gradient(225deg, #151925, rgba(0,150,0,.4));
}

.isChristmas .ff2-notice .ff2-icon {
  display: none;
}

.isChristmas .ff2-notice span:hover {
  cursor: pointer;
  text-decoration: underline;
}

.isChristmas .ff2-notice span::before {
  content: "\1F384 ";
}

/* ---------- topBar ---------------------------------------------------------- */
/* Titulek zastupuje logo na telefonu a nese SEO váhu — nikdy se neskrývá. */
.ff2-topbar {
  background: rgba(0,0,0,.3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: .875rem;
}

/* Zalamovani je zapnute porad, ne az na breakpointu: dokud se obsah vejde,
   drzi space-between titulek vlevo a hodiny vpravo; po zalomeni zacina
   osamely prvek take vlevo. Zadna media query netreba. */
.ff2-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  column-gap: 18px;
  row-gap: 2px;
  padding: 6px 22px;
}

.ff2-topbar__inner > * {
  flex: 0 1 auto;
  order: 0;
  text-align: left;
}

.ff2-topbar__title {
  font-family: var(--ff2-font-head);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: .4px;
  white-space: nowrap;
  transition: transform .25s;
}

/* <strong> chodi z textoveho bloku v administraci. */
.ff2-topbar__title b,
.ff2-topbar__title strong {
  color: var(--ff2-color-orange);
  font-weight: 700;
}

.ff2-topbar__title:hover {
  transform: scale(1.04);
  color: #fff;
}

.ff2-topbar__contacts {
  display: flex;
  gap: 26px;
  align-items: center;
  color: #cfd4e0;
}

.ff2-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ff2-topbar__item .ff2-icon {
  width: 15px;
  height: 15px;
  opacity: .75;
}

.ff2-topbar__item i {
  opacity: .4;
  font-style: normal;
}

a.ff2-topbar__item:hover {
  color: var(--ff2-color-orange);
}

.ff2-topbar__hours {
  font-family: var(--ff2-font-head);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: .3px;
  white-space: nowrap;
}

/* .open / .closed sazi PHP ($txt_config_opening_hours_processed). */
.ff2-topbar__hours .open {
  color: #fff;
}

.ff2-topbar__hours .closed {
  color: #f40;
}

/* ---------- navbar ---------------------------------------------------------- */
.ff2-bar {
  transition: background .25s, box-shadow .25s;
}

/* Nasazuje ff2-nav.js na dobu mereni vysky hlavicky. */
.ff2-nav--measuring,
.ff2-nav--measuring * {
  transition: none !important;
}

.ff2-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 78px;
  transition: height .25s;
  position: relative;
}

.ff2-bar__brand img {
  display: block;
  width: 126px;
  transition: width .25s;
}

.ff2-nav--stuck .ff2-bar {
  background: #0b0e16;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

.ff2-nav--stuck .ff2-bar__inner {
  height: 62px;
}

.ff2-nav--stuck .ff2-bar__brand img {
  width: 98px;
}

/* ---------- 1. úroveň ------------------------------------------------------- */
/* Stretch na celou vysku listy kvuli zarovnani panelu: megapanel je pozicovany
   vuci .ff2-bar__inner, ostatni vuci <li>, a `top: 100%` musi u obou vyjit
   stejne. Navic tim mezi polozkou a panelem nezustane mrtva mezera. */
.ff2-menu {
  margin-left: auto;
  align-self: stretch;
  display: flex;
}

.ff2-menu__list {
  display: flex;
  align-items: stretch;
  gap: 2px;
}

.ff2-menu__item {
  position: relative;
  display: flex;
  align-items: center;
}

.ff2-menu__item--mega {
  position: static;
}

/* Padding pres promennou — visi na nem i sirka podtrzeni (::after nize). */
.ff2-menu__link {
  --ff2-size-menuLinkPadding: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff2-font-head);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 1rem;
  color: #eef0f6;
  padding: 11px var(--ff2-size-menuLinkPadding);
  border-radius: 8px;
  line-height: 1;
  position: relative;
  transition: color .18s, background .18s;
}

.ff2-menu__link:hover,
.ff2-menu__link:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.07);
  outline: none;
}

.ff2-menu__link:focus-visible {
  box-shadow: 0 0 0 2px var(--ff2-color-orangeAccent);
}

.ff2-menu__chevron {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .6;
  transition: transform .2s;
}

.ff2-menu__item--open > .ff2-menu__link .ff2-menu__chevron {
  transform: rotate(180deg);
}

.ff2-menu__item--open > .ff2-menu__link {
  color: #fff;
  background: rgba(255,255,255,.09);
}

.ff2-menu__item > .ff2-menu__link::after {
  content: "";
  position: absolute;
  bottom: 2px;
  height: 2px;
  left: var(--ff2-size-menuLinkPadding);
  right: var(--ff2-size-menuLinkPadding);
  background: var(--ff2-color-orange);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s;
}

.ff2-menu__item:hover > .ff2-menu__link::after,
.ff2-menu__item--open > .ff2-menu__link::after {
  transform: scaleX(1);
}

.ff2-menu__item--active > .ff2-menu__link {
  color: var(--ff2-color-orange);
}

.ff2-menu__item--active > .ff2-menu__link::after {
  transform: scaleX(1);
}

/* ---------- rozbalovací panel ----------------------------------------------- */
.ff2-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  background: #fff;
  color: #22262f;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  border-top: 3px solid var(--ff2-color-orange);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s, visibility .2s, transform .2s;
  overflow: hidden;
}

.ff2-menu__item--open > .ff2-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.ff2-panel--wide {
  right: auto;
  left: 50%;
  transform: translate(-50%, -8px);
  width: min(880px, calc(100% - 44px));
}

.ff2-menu__item--open > .ff2-panel--wide {
  transform: translate(-50%, 0);
}

.ff2-panel__inner {
  padding: 14px;
}

.ff2-panel--wide .ff2-panel__inner {
  padding: 18px;
}

.ff2-panel__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.ff2-panel--wide .ff2-panel__cols {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding-top: 4px;
}

.ff2-panel--wide.ff2-panel--promo .ff2-panel__cols {
  grid-template-columns: 1fr 1fr .85fr;
}

.ff2-panel__colhead {
  font-family: var(--ff2-font-head);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .75rem;
  color: #8b91a3;
  margin: 2px 0 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid #eceef3;
}

.ff2-panel__col li a {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 11px;
  border-radius: 10px;
  transition: background .16s, color .16s;
}

.ff2-panel__col li a:hover,
.ff2-panel__col li a:focus-visible {
  background: #fff4ec;
  color: #c24d00;
  outline: none;
}

.ff2-ico {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 9px;
  background: #f3f4f8;
  display: grid;
  place-items: center;
  color: #3a4152;
  transition: background .16s, color .16s;
}

.ff2-ico .ff2-icon {
  width: 19px;
  height: 19px;
}

.ff2-panel__col li a:hover .ff2-ico {
  background: var(--ff2-color-orange);
  color: #fff;
}

.ff2-panel__col li b {
  font-family: var(--ff2-font-head);
  font-weight: 500;
  font-size: 1.0625rem;
  color: #181c26;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ff2-panel__col li a:hover b {
  color: #c24d00;
}

.ff2-panel__col li em {
  display: block;
  font-style: normal;
  font-size: .8125rem;
  color: #8b91a3;
  margin-top: 1px;
}

.ff2-ext {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .55;
}

.ff2-tag {
  font-style: normal;
  background: var(--ff2-color-orange);
  color: #fff;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 20px;
}

.ff2-panel__social {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid #eceef3;
}

.ff2-panel__social a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .875rem;
  font-weight: 600;
  color: #4a5163;
  background: #f3f4f8;
  padding: 8px 12px;
  border-radius: 8px;
  transition: .16s;
}

.ff2-panel__social a .ff2-icon {
  width: 15px;
  height: 15px;
}

.ff2-panel__social a:hover {
  background: var(--ff2-color-orange);
  color: #fff;
}

/* ---------- promo dlaždice --------------------------------------------------- */
/* Vykresluje se jen když má vyplněný titulek; jinak panel spadne na dva sloupce. */
.ff2-promo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(150deg, #1b2030, #2b1a10 70%, #4a2408);
  border-radius: 12px;
  padding: 18px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 190px;
  transition: transform .2s, box-shadow .2s;
}

/* Volitelny obrazek. Sablona ho dava do `data-ff2-promo-img`, promennou
   nastavi ff2-nav.js az pri prvnim otevreni panelu — pozadi zadane v CSS by
   se stahlo kazdemu navstevnikovi na kazde strance (panel je jen
   visibility:hidden). Bez atributu je var() neplatne a deklarace propadne. */
.ff2-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--ff2-image-promo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .55;
  filter: grayscale(.25) contrast(.95);
}

/* Pritmaveni spodku — drzi kontrast textu i na svetle fotce. */
.ff2-promo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(15,18,28,.7) 30%, rgba(15,18,28,.9) 100%);
}

.ff2-promo:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.3);
}

.ff2-promo__kicker {
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ff2-color-orangeAccent);
  margin-bottom: auto;
  font-weight: 600;
}

.ff2-promo__title {
  font-family: var(--ff2-font-head);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.75rem;
  line-height: 1.05;
  margin-bottom: 8px;
}

.ff2-promo__text {
  font-size: .8125rem;
  color: #b9bfcf;
  margin-bottom: 12px;
  line-height: 1.5;
}

.ff2-promo__cta {
  font-family: var(--ff2-font-head);
  text-transform: uppercase;
  font-size: .8125rem;
  letter-spacing: .08em;
  color: var(--ff2-color-orangeAccent);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ff2-arrow {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- hamburger -------------------------------------------------------- */
.ff2-burger {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: rgba(255,255,255,.06);
}

.ff2-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: .25s;
}

.ff2-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.ff2-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.ff2-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- drawer ----------------------------------------------------------- */
/* Clipovaci vrstva: zavreny drawer je za pravou hranou a delal by vodorovny
   posuvnik. Ne `overflow-x: hidden` na html/body — to rozbije sticky. */
.ff2-offcanvas {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 70;
}

.ff2-offcanvas > * {
  pointer-events: auto;
}

.ff2-scrim {
  position: absolute;
  inset: 0;
  background: rgba(6,8,14,.6);
  opacity: 0;
  visibility: hidden;
  transition: .25s;
}

.ff2-scrim--open {
  opacity: 1;
  visibility: visible;
}

.ff2-drawer :where(ul, ol) {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ff2-drawer :where(li) {
  margin: 0;
  padding: 0;
  background: none;
}

.ff2-drawer :where(a) {
  text-decoration: none;
  color: inherit;
}

.ff2-drawer a:hover,
.ff2-drawer a:focus {
  text-decoration: none;
}

.ff2-drawer :where(p) {
  margin: 0;
}

.ff2-drawer :where(button) {
  font: inherit;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
}

.ff2-drawer :where(svg) {
  display: block;
}

.ff2-drawer :where(*) {
  box-sizing: border-box;
}

.ff2-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 88vw);
  background: #12151f;
  color: #fff;
  z-index: 80;
  transform: translateX(101%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 50px rgba(0,0,0,.5);
  font-family: var(--ff2-font-body);
}

.ff2-drawer--open {
  transform: none;
}

.ff2-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ff2-color-line);
}

.ff2-drawer__logo {
  width: 104px;
  display: block;
}

.ff2-drawer__close {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  display: grid;
  place-items: center;
}

.ff2-drawer__close svg {
  width: 20px;
  height: 20px;
}

.ff2-drawer__nav {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}

.ff2-drawer__link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--ff2-font-head);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 1.125rem;
  padding: 13px 20px;
  color: #eef0f6;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: left;
}

.ff2-drawer__item--open > .ff2-drawer__link {
  color: var(--ff2-color-orangeAccent);
}

.ff2-drawer__item--open > .ff2-drawer__link .ff2-menu__chevron {
  transform: rotate(180deg);
}

.ff2-drawer__item--active > .ff2-drawer__link {
  color: var(--ff2-color-orange);
  box-shadow: inset 3px 0 0 var(--ff2-color-orange);
}

.ff2-drawer__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
  background: #0d1018;
}

.ff2-drawer__item--open > .ff2-drawer__sub {
  grid-template-rows: 1fr;
}

.ff2-drawer__subinner {
  overflow: hidden;
}

.ff2-drawer__subhead {
  font-family: var(--ff2-font-head);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .75rem;
  color: #6f7890;
  padding: 12px 20px 4px;
}

.ff2-drawer__sub li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  font-size: 1rem;
  color: #c6cbd8;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.ff2-drawer__sub .ff2-ico {
  flex: 0 0 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  color: var(--ff2-color-orangeAccent);
}

.ff2-drawer__sub .ff2-ico .ff2-icon {
  width: 17px;
  height: 17px;
}

.ff2-drawer__sub li a > span:last-child {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ff2-drawer__sub li a:active {
  background: rgba(255,102,0,.12);
  color: #fff;
}

.ff2-drawer__foot {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--ff2-color-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Uvnitr jsou <a href="tel:…"> z textoveho bloku — proto kontejner, ne odkaz. */
.ff2-drawer__call {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ff2-color-orange);
  color: #fff;
  font-family: var(--ff2-font-head);
  font-size: .9375rem;
  padding: 9px 12px;
  border-radius: 8px;
}

.ff2-drawer__social {
  display: flex;
  gap: 10px;
}

.ff2-drawer__social a {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 7px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
}

.ff2-drawer__social a .ff2-icon {
  width: 18px;
  height: 18px;
}


/* ---------- breakpointy ------------------------------------------------------ */
@media (max-width: 1180px) {
  .ff2-menu__link {
    --ff2-size-menuLinkPadding: 9px;
  }

  .ff2-topbar__item--wifi {
    display: none;
  }
}

@media (max-width: 1040px) {
  .ff2-bar__inner {
    height: 70px;
  }

  .ff2-menu__link {
    --ff2-size-menuLinkPadding: 6px;
    padding-top: 10px;
    padding-bottom: 10px;
    letter-spacing: .03em;
  }

  .ff2-menu__list {
    gap: 0;
  }

  .ff2-bar__brand img {
    width: 100px;
  }

  .ff2-topbar__item--mail span {
    display: none;
  }
}

/* Promo dlaždice zůstává až do 1024 včetně. */
@media (max-width: 1023.98px) {
  .ff2-panel--wide.ff2-panel--promo .ff2-panel__cols {
    grid-template-columns: 1fr 1fr;
  }

  .ff2-promo {
    display: none;
  }
}

@media (max-width: 900px) {
  .ff2-menu {
    display: none;
  }

  .ff2-burger {
    display: flex;
  }

  .ff2-topbar__contacts {
    display: none;
  }

  .ff2-topbar__inner {
    gap: 10px;
  }
}

@media (max-width: 560px) {
  .ff2-topbar__title {
    font-size: .9375rem;
  }

  .ff2-topbar__hours {
    font-size: .9375rem;
  }

  .ff2-bar__inner {
    height: 64px;
  }

  .ff2-bar__brand img {
    width: 96px;
  }
}

/* ---------- rozcestník ------------------------------------------------------- */
/* Reinterpretace megapanelu na plne sirce stranky: stejna dlazdice, vetsi ikona.
   Bezi mimo scope .ff2-nav, takze reset komponenty tady neplati. */
.ff2-hub__intro {
  margin-bottom: 26px;
}

.ff2-hub__group {
  margin-bottom: 34px;
}

.ff2-hub__groupTitle {
  font-family: var(--ff2-font-head);
  font-size: .8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #8a92a6;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e6e8ef;
}

.ff2-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.ff2-hub__tile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid #e6e8ef;
  border-radius: 12px;
  background: #fff;
  color: #22262f;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

.ff2-hub__tile:hover,
.ff2-hub__tile:focus {
  color: #22262f;
  text-decoration: none;
  border-color: var(--ff2-color-orange);
  box-shadow: 0 10px 24px rgba(21,25,37,.1);
  transform: translateY(-2px);
}

.ff2-hub__icon {
  flex: 0 0 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #f4f5f9;
  color: var(--ff2-color-orange);
  transition: background .18s;
}

.ff2-hub__tile:hover .ff2-hub__icon {
  background: rgba(255,102,0,.12);
}

.ff2-hub__icon .ff2-icon {
  width: 30px;
  height: 30px;
  display: block;
}

.ff2-hub__body {
  min-width: 0;
}

.ff2-hub__name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ff2-font-head);
  font-size: 1.125rem;
  font-weight: 500;
}

.ff2-hub__perex {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: .875rem;
  line-height: 1.4;
  color: #6d7486;
}

.ff2-hub__empty {
  color: #8a92a6;
}

.ff2-hub .ff2-ext {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .45;
}

@media (max-width: 560px) {
  .ff2-hub__grid {
    grid-template-columns: 1fr;
  }

  .ff2-hub__tile {
    padding: 13px;
    gap: 13px;
  }

  .ff2-hub__icon {
    flex: 0 0 44px;
    height: 44px;
  }

  .ff2-hub__icon .ff2-icon {
    width: 25px;
    height: 25px;
  }
}

/* ---------- otevírací doba v patičce ------------------------------------------ */

/* Nadpis bloku má celou typografii i odsazení ze škály
   (.ff2-heading4 .ff2-heading4--onDark .ff2-heading4--gap), tady nezbylo nic.
   Selektor zůstává jako háček pro případné odsazení specifické pro patičku. */

.ff2-hours__section + .ff2-hours__section {
  margin-top: 18px;
}

/* Podnadpis sekce (Svátky, Prázdniny…) je záměrně o stupeň níž než heading4 —
   kdyby dostal celou škálu, splynul by s nadpisem bloku nad sebou. */
.ff2-hours__subtitle {
  font-family: var(--ff2-font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ff2-color-orange);
  margin: 0 0 6px;
}

.ff2-hours__note {
  margin-top: 2px;
  font-size: .8125rem;
  opacity: .7;
}

.ff2-hours__table {
  width: 100%;
  max-width: 320px;
  border: 0;
  margin: 0;
}

.ff2-hours__table th {
  background: none;
  text-align: left;
  font-weight: 700;
  color: var(--ff2-color-orange);
  padding: 3px 18px 3px 0;
  white-space: nowrap;
  border: 0;
}

.ff2-hours__table td {
  background: none;
  text-align: left;
  padding: 3px 0;
  border: 0;
}

.ff2-hours__today {
  margin-top: 10px;
}

.ff2-hours__today .closed {
  color: #f40;
}

/* ---------- kontakty ---------------------------------------------------------- */

.ff2-topbar__phoneLabel {
  opacity: .65;
}

.ff2-topbar__phoneNumber {
  white-space: nowrap;
}

/* Kazde cislo v draweru je vlastni tlacitko, proto sloupec misto radku. */
.ff2-drawer__call + .ff2-drawer__call {
  margin-top: 4px;
}

.ff2-drawer__callLabel {
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Cislo doprava, at maji tlacitka stejny rytmus bez ohledu na delku popisku. */
.ff2-drawer__callNumber {
  margin-left: auto;
  font-family: var(--ff2-font-body);
  font-size: .875rem;
  opacity: .9;
}

.ff2-drawer__call .ff2-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.ff2-contact__intro p:first-child {
  margin-top: 0;
}

.ff2-contact__lines {
  margin-top: 14px;
}

.ff2-contact__social a + a {
  margin-left: 6px;
}

/* ---------- stránka Kontakty --------------------------------------------------- */

.ff2-contacts__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
  margin: 26px 0;
}

/* Typografii dodává .ff2-heading4 ze škály (§ TYPOGRAFIE), tady zůstává jen
   struktura sloupce — linka pod nadpisem drží mřížku kontaktů pohromadě.
   Barva a velikost se proto tady vědomě neuvádí. */
.ff2-contacts__title {
  padding-bottom: 10px;
  border-bottom: 1px solid #e6e8ef;
}

.ff2-contacts__line {
  margin: 0 0 6px;
}

.ff2-contacts__label {
  display: block;
  font-size: .8125rem;
  color: #8a92a6;
}

.ff2-contacts__social a + a {
  margin-left: 14px;
}

.ff2-contacts__operator {
  margin-top: 34px;
}

.ff2-contacts__table {
  border: 0;
  margin: 0;
}

.ff2-contacts__table th {
  background: none;
  text-align: left;
  font-weight: 400;
  color: #8a92a6;
  padding: 3px 22px 3px 0;
  border: 0;
  vertical-align: top;
  white-space: nowrap;
}

.ff2-contacts__table td {
  background: none;
  padding: 3px 0;
  border: 0;
}

.ff2-contacts .ff2-hours__table th {
  color: inherit;
  font-weight: 700;
}

/* `.uk-article table th` z theme.min.css má specificitu (0,2,1) a dává buňkám
   tmavé pozadí — na bílé stránce Kontakty by z popisků byly černé pruhy.
   Přebít to jde jen stejně specifickým selektorem, ne samotnou třídou. */
.uk-article .ff2-contacts__table th,
.uk-article .ff2-contacts__table td,
.uk-article .ff2-hours__table th,
.uk-article .ff2-hours__table td {
  background: none;
  border: 0;
}

.uk-article .ff2-contacts__table th {
  color: #8a92a6;
}


/* =============================================================================
   Prezentační stránka (typ Prezentace, presenter Showcase)

   Nahrazuje vrstvu `.ff-page*` / `.ff-pageGrid` / `.ff-col-*` z theme.css, která
   vznikla kvůli jediné stránce (poledance). Mřížka je tu znovu, ale jen pět
   povolených šířek a bez `.ff-col-md-*` dvojic — o zlom se stará jediné
   media query.

   `.ff-page*` v theme.css zatím zůstává; smaže se, až bude poledance ověřený
   na produkci a stará šablona pryč.
   ============================================================================= */

.ff2-showcase,
.ff2-showcase *,
.ff2-showcase__header,
.ff2-showcase__header * {
  box-sizing: border-box;
}

/* ---------- hlavička -------------------------------------------------------- */

.ff2-showcase__header {
  background: #f5f5f5;
  display: grid;
  height: 500px;
  padding: 20px 15px;
  place-items: center;
  position: relative;
  width: 100%;
}

.ff2-showcase__headerInner {
  max-width: 1250px;
  position: relative;
  width: 100%;
  z-index: 5;
}

.ff2-showcase__headerInner h1 {
  color: #fff;
  font-weight: 700;
  margin: 0;
  font-size: 64px;
  text-align: center;
  text-shadow: rgba(0, 0, 0, .2) 0 3px 8px;
}

.ff2-showcase__headerImage,
.ff2-showcase__headerVideo {
  bottom: 0;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  user-select: none;
  z-index: 2;
}

/* Oranžový závoj drží nadpis čitelný nad jakoukoli fotkou. */
.ff2-showcase__headerImage::before {
  background: rgba(255, 102, 0, .2);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}

/* Prolnutí do videa. `visibility` se přepíná až po doběhnutí opacity, jinak by
   obrázek zmizel skokem. */
.ff2-showcase__headerImage--hidden {
  opacity: 0;
  transition: opacity 1.5s, visibility .01s 1.5s;
  visibility: hidden;
}

.ff2-showcase__headerImage img {
  height: 100% !important;
  object-fit: cover;
  object-position: left center;
  width: 100%;
}

.ff2-showcase__headerVideo {
  z-index: 1;
}

.ff2-showcase__headerVideo video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 768px) {
  .ff2-showcase__header {
    height: 300px;
  }

  .ff2-showcase__headerInner h1 {
    font-size: 32px;
  }
}

/* ---------- mřížka ---------------------------------------------------------- */
/* Dvanáct dvanáctin, ale jen pět povolených šířek — víc se v administraci
   nenabízí. Řádek je flex, ne grid: sloupce se pak při součtu jiném než 12
   samy zalomí místo aby přetekly. */

/* Prezentační stránka si šířku drží sama, mimo .uk-container / .tm-main —
   ty jsou užší. Rozměry jsou stejné jako u staré `.ff-pageGrid`, aby obsah
   po převodu seděl na stejnou mřížku. */
.ff2-showcase__head,
.ff2-showcase {
  /* Reset výš je scopovaný pod .ff2-showcase__header, tyhle dva bloky pod něj
     nespadají a bootstrap box-sizing globálně nenastavuje. Bez tohohle je
     `width: 100%` obsahová šířka a 2× 15 px padding se přičte navrch — na
     320 px displeji z toho byl vodorovný scroll celé stránky. */
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 1250px;
  padding: 15px;
  width: 100%;
}

.ff2-showcase {
  display: flex;
  flex-direction: column;
}

.ff2-showcase__row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
  padding: 15px 0;
  align-items: flex-start;
}

.ff2-showcase__rowTitle {
  flex: 0 0 100%;
  margin: 0 0 10px;
  padding: 0 15px;
}

.ff2-showcase__col {
  padding: 0 15px;
}

/* Na mobilu je každý sloupec přes celou šířku. Zlom je jediný a je tu jednou,
   místo dvojic .ff-col-* / .ff-col-md-* ve staré vrstvě. */
.ff2-showcase__col {
  flex: 0 0 100%;
  max-width: 100%;
}

.ff2-showcase__col + .ff2-showcase__col {
  margin-top: 15px;
}

@media (min-width: 768px) {
  .ff2-showcase__col--3  { flex: 0 0 25%;      max-width: 25%; }
  .ff2-showcase__col--4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .ff2-showcase__col--6  { flex: 0 0 50%;      max-width: 50%; }
  .ff2-showcase__col--8  { flex: 0 0 66.6666%; max-width: 66.6666%; }
  .ff2-showcase__col--12 { flex: 0 0 100%;     max-width: 100%; }

  .ff2-showcase__col + .ff2-showcase__col {
    margin-top: 0;
  }
}

/* ---------- obsah sloupců --------------------------------------------------- */

.ff2-showcase__title {
  margin-top: 0;
}

.ff2-showcase__text p {
  margin: 0 0 4px;
}

.ff2-showcase a {
  color: #640074;
}

.ff2-showcase a:hover {
  color: #2f5aae;
}

.ff2-showcase__figure {
  margin: 0;
}

.ff2-showcase__figure img {
  border-radius: 4px;
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
}

.ff2-showcase__figure figcaption {
  color: #8a92a6;
  font-size: 13px;
  margin-top: 6px;
  text-align: center;
}

/* ---------- oddělovač ------------------------------------------------------- */

.ff2-showcase__separator {
  background: url(/images/front/FF.svg) no-repeat center center;
  background-size: 50px auto;
  display: grid;
  gap: 80px;
  grid-template-columns: 1fr 1fr;
  margin: 5px auto 0;
  max-width: 600px;
  padding-bottom: 45px;
  padding-top: 40px;
  width: 100%;
}

.ff2-showcase__separator::before,
.ff2-showcase__separator::after {
  background: #ddd;
  content: "";
  display: block;
  height: 1px;
  width: 100%;
}

/* ---------- galerie ve sloupci ---------------------------------------------- */

.ff2-showcase__gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Pruh a mřížka stojí pod textem sekce a potřebují se od něj odrazit; sloupec
   stojí vedle textu, tam by odsazení jen rozhodilo zarovnání s prvním řádkem. */
.ff2-showcase__gallery--strip,
.ff2-showcase__gallery--grid {
  margin-top: 60px;
}

.ff2-showcase__photo img {
  border-radius: 4px;
  display: block;
}

/* pruh — pevná výška, šířku si fotky nesou samy podle poměru stran */
.ff2-showcase__gallery--strip .ff2-showcase__photo img {
  height: 200px !important;
  width: auto;
}

/* mřížka — pravidelné dlaždice, dopočítá se podle šířky sloupce */
.ff2-showcase__gallery--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.ff2-showcase__gallery--grid .ff2-showcase__photo img {
  aspect-ratio: 8 / 5;
  object-fit: cover;
  width: 100%;
}

/* Na mobilu se pruh nezalamuje, ale roluje — a roluje od kraje ke kraji okna.
   Sloupec je od okna odsazený 15 px (padding .ff2-showcase + padding sloupce
   se sčítají s -15 px marginem řádku), takže se ten odstup zruší negativním
   marginem a vrátí zpátky jako padding. Fotky pak začínají zarovnané
   s textem, ale při rolování jdou až k hraně displeje.

   Stará vrstva tohle řešila 1px pseudoelementy po stranách; tady stačí
   scroll-padding, protože se posunul celý box. */
@media (max-width: 767px) {
  .ff2-showcase__gallery--strip {
    flex-wrap: nowrap;
    margin-left: -15px;
    margin-right: -15px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-left: 15px;
    padding-right: 15px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .ff2-showcase__gallery--strip::-webkit-scrollbar {
    display: none;
  }

  .ff2-showcase__gallery--strip .ff2-showcase__photo {
    flex: 0 0 auto;
  }

  .ff2-showcase__gallery--strip .ff2-showcase__photo img {
    height: 150px !important;
  }
}

/* pod sebou — pro úzký sloupec vedle textu */
.ff2-showcase__gallery--column {
  align-items: center;
  flex-direction: column;
  gap: 15px;
}

.ff2-showcase__gallery--column .ff2-showcase__photo img {
  max-width: 100%;
}

/* ---------- tlačítka -------------------------------------------------------- */
/* Odkazy v textovém sloupci s třídou `ff2-btns` vypadají jako tlačítka. Třídu
   nastaví editor v CKEditoru na odstavec; PHP do obsahu nesahá. Původně to
   řešil str_replace nad HTML v BasePresenteru. */

.ff2-showcase .ff2-btns a {
  background: #f60;
  border-radius: 4px;
  color: #fff;
  display: inline-flex;
  margin: 0 15px 10px 0;
  opacity: .8;
  padding: 8px 16px;
  text-decoration: none;
  transition: all .3s;
}

.ff2-showcase .ff2-btns a:hover {
  color: #fff;
  opacity: 1;
  text-decoration: none;
}

.ff2-showcase__empty {
  color: #8a92a6;
}


/* ---------- ceníkové tabulky pod zašpendlenou lištou -------------------------
   theme.css špendlí na mobilu hlavičku ceníkové tabulky (`top: 0`) a nadpis
   řádku pod ni (`top: 53px`, což je právě výška té hlavičky). Vzniklo to
   v době, kdy nad nimi nic přišpendleného nebylo.

   Od nové hlavičky (2026) je nahoře lišta, takže se obojí špendlilo POD ni
   a při rolování mizelo. Rozdíly zůstávají stejné, celé se to jen posouvá
   o výšku lišty.

   Schválně tady a ne v theme.css: ff2.css se načítá později, při stejné
   specificitě vyhrává, a nemusí se kvůli tomu přestavovat theme.min.css. */
@media (max-width: 768px) {
  .PricingTable-heading {
    top: var(--ff2-size-barHeight);
  }

  .PricingTable-title {
    top: calc(var(--ff2-size-barHeight) + 53px);
  }
}


/* =============================================================================
   TYPOGRAFIE — generická škála nadpisů
   Dominik Fenár <dominik.fenar@gmail.com> 2026-08-14

   Záměrně bez vazby na h1–h6: bootstrap.css i theme.min.css mají na tagy
   vlastní pravidla a přepisovat je globálně by sáhlo na celý web. Sémantický
   tag a vizuální stupeň jsou proto nezávislé — `<h1 class="ff2-heading2">`.

   Velikosti jsou v px, ne v rem: theme.min.css má `html { font: normal 14px/24px }`,
   takže rem by se počítal ze 14 px a škála by se rozjela.

   Odsazení řeší vždy rodič (`margin: 0`), aby se stupeň dal použít kdekoli.
   ============================================================================= */
.text-balance {
  text-wrap: balance;
}

.ff2-heading1,
.ff2-heading2,
.ff2-heading3,
.ff2-heading4 {
  color: var(--ff2-color-ink);
  font-family: var(--ff2-font-head);
  font-weight: 600;
  letter-spacing: .5px;
  line-height: 1.05;
  margin: 0;
  text-transform: uppercase;
}

.ff2-heading1 { font-size: 64px; }
.ff2-heading2 { font-size: 56px; }
.ff2-heading3 { font-size: 30px; letter-spacing: 1px; }
.ff2-heading4 { font-size: 20px; letter-spacing: 1.2px; line-height: 1.2; }

.ff2-heading1--onDark,
.ff2-heading2--onDark,
.ff2-heading3--onDark,
.ff2-heading4--onDark { color: #fff; }

/* Odsazení je opt-in. Škála má `margin: 0` zámerně, aby se dala pustit do
   libovolného bloku — jenže spousta starých šablon sází nadpis přímo do toku
   bez obalu a spoléhala na `margin: 0 0 20px` (+ `* + h2 { margin-top: 25px }`)
   z theme.css. Pro ty jsou tady dva modifikátory, místo aby se do každé šablony
   dodělával <div>:

     --gap     mezera jen pod nadpisem — nadpis sedí nad svým vlastním obsahem
     --spaced  mezera nad i pod — nadpis odděluje sekce uvnitř jednoho toku

   Použít vždy jen jeden z nich; `--spaced` mezeru pod sebou už obsahuje. */
.ff2-heading1--gap { margin-bottom: 28px; }
.ff2-heading2--gap { margin-bottom: 24px; }
.ff2-heading3--gap { margin-bottom: 18px; }
.ff2-heading4--gap { margin-bottom: 14px; }

.ff2-heading1--spaced { margin: 56px 0 28px; }
.ff2-heading2--spaced { margin: 48px 0 24px; }
.ff2-heading3--spaced { margin: 40px 0 18px; }
.ff2-heading4--spaced { margin: 28px 0 14px; }

/* Sekce nezačíná mezerou — první nadpis v toku by jinak odsunul celý blok. */
.ff2-heading1--spaced:first-child,
.ff2-heading2--spaced:first-child,
.ff2-heading3--spaced:first-child,
.ff2-heading4--spaced:first-child { margin-top: 0; }

@media (max-width: 991px) {
  .ff2-heading1 { font-size: 48px; }
  .ff2-heading2 { font-size: 42px; }
  .ff2-heading3 { font-size: 26px; }
  .ff2-heading4 { font-size: 18px; }
}

@media (max-width: 767px) {
  .ff2-heading1 { font-size: 36px; }
  .ff2-heading2 { font-size: 32px; }
  .ff2-heading3 { font-size: 22px; }
  .ff2-heading4 { font-size: 17px; }
}


/* ---------- hlavička stránky ------------------------------------------------
   Nadpis + linka pod ním, stejný vzor jako .ff2-trainers__head na /treneri —
   jen bez leda vedle. Obal existuje proto, že škála sama má margin: 0. */
.ff2-pageHead {
  border-bottom: 1px solid var(--ff2-color-lineLight);
  margin-bottom: 36px;
  padding-bottom: 26px;
}

/* Podnadpis stránky (perex, druhý řádek titulku) — sází se pod H1 uvnitř obalu. */
.ff2-pageHead__lede {
  color: #5c6070;
  font-family: var(--ff2-font-body);
  font-size: 15px;
  line-height: 1.6;
  margin: 12px 0 0;
  max-width: 60ch;
}

@media (max-width: 767px) {
  .ff2-pageHead {
    margin-bottom: 26px;
    padding-bottom: 18px;
  }
}


/* =============================================================================
   TRENÉŘI — výpis (/treneri i blok na homepage) a detail
   Dominik Fenár <dominik.fenar@gmail.com> 2026-08-14

   Nahrazuje blok `/* TRAINERS ... 2022-12-01 *\/` v theme.css. Ten tam
   zůstává jako mrtvý kód — nová šablona jeho třídy (`.ff-hp-trainer*`,
   `.ff-detail-trainer*`) už nepoužívá a přestavovat kvůli tomu theme.min.css
   nedává smysl. Smaže se při nejbližším přegenerování minifikované verze.

   Proč popisek na fotce a ne pod ní: starý bílý štítek měl pevnou šířku, takže
   dlouhé jméno zalomilo na dva řádky a karta vyrostla — sousední karty pak
   neměly společnou spodní linku. Tady má karta pevný poměr 3:4 a délka jména
   layout ovlivnit nemůže.
   ============================================================================= */

:root {
  --ff2-color-muted: #828488;
  --ff2-color-body: #33384a;
  --ff2-color-lineLight: #e7e8ec;
  --ff2-size-radius: 14px;
}

/* ---------- reset uvnitř komponent ------------------------------------------
   Stejný princip jako u .ff2-nav: :where() má nulovou specificitu, takže
   přebije holé selektory z bootstrap.css, ale vlastní pravidla komponenty ne. */
.ff2-trainers,
.ff2-trainers :where(*),
.ff2-trainers :where(*)::before,
.ff2-trainers :where(*)::after,
.ff2-trainer,
.ff2-trainer :where(*),
.ff2-trainer :where(*)::before,
.ff2-trainer :where(*)::after {
  box-sizing: border-box;
}

.ff2-trainers :where(a),
.ff2-trainer :where(a) {
  color: inherit;
  text-decoration: none;
}

/* Bez :where(): theme.min.css má `a:hover` (0,1,1) a nulový reset by prohrál. */
.ff2-trainers a:hover,
.ff2-trainers a:focus,
.ff2-trainer a:hover,
.ff2-trainer a:focus {
  outline: none;
  text-decoration: none;
}

.ff2-trainers :where(p),
.ff2-trainer :where(p) {
  margin: 0;
}


/* ---------- výpis ----------------------------------------------------------- */
.ff2-trainers {
  display: block;
}

.ff2-trainers__head {
  align-items: flex-end;
  border-bottom: 1px solid var(--ff2-color-lineLight);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  justify-content: space-between;
  margin-bottom: 36px;
  padding-bottom: 26px;
}

.ff2-trainers__lede {
  color: #5c6070;
  font-family: var(--ff2-font-body);
  font-size: 15px;
  line-height: 1.6;
  max-width: 46ch;
}

.ff2-trainers__grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(4, 1fr);
}


/* ---------- karta trenéra --------------------------------------------------- */
.ff2-trainerCard {
  aspect-ratio: 3 / 4;
  background: var(--ff2-color-ink);
  border-radius: var(--ff2-size-radius);
  display: block;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

/* Gradient odděluje text od fotky nezávisle na tom, co je pod ním — fotky
   trenérů vznikaly v různých světlech a bez něj je jméno místy nečitelné. */
.ff2-trainerCard::before {
  background: linear-gradient(to top,
              rgba(10, 12, 18, .92) 0%,
              rgba(10, 12, 18, .60) 32%,
              rgba(10, 12, 18, 0) 62%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

.ff2-trainerCard__media {
  inset: 0;
  position: absolute;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

/* !important je nutné zlo: theme.css:152 má `img { height: auto !important }`
   a normální specificita to neporazí. Stejně to řeší .ff-pageBanner-image img. */
.ff2-trainerCard__img {
  display: block;
  height: 100% !important;
  object-fit: cover;
  width: 100%;
}

.ff2-trainerCard__body {
  bottom: 0;
  left: 0;
  padding: 22px 20px;
  position: absolute;
  right: 0;
  z-index: 2;
}

.ff2-trainerCard__role {
  color: var(--ff2-color-orangeAccent);
  display: block;
  font-family: var(--ff2-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.ff2-trainerCard__name {
  color: #fff;
  display: block;
  font-family: var(--ff2-font-head);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
}

.ff2-trainerCard__rule {
  background: var(--ff2-color-orange);
  display: block;
  height: 2px;
  margin-top: 14px;
  transition: width .35s ease;
  width: 28px;
}

.ff2-trainerCard__arrow {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  bottom: 22px;
  color: #fff;
  display: flex;
  height: 34px;
  justify-content: center;
  opacity: 0;
  position: absolute;
  right: 18px;
  transform: translateX(-6px);
  transition: opacity .35s, transform .35s, background .35s, border-color .35s;
  width: 34px;
  z-index: 2;
}

.ff2-trainerCard:hover .ff2-trainerCard__media,
.ff2-trainerCard:focus-visible .ff2-trainerCard__media {
  transform: scale(1.06);
}

.ff2-trainerCard:hover .ff2-trainerCard__rule,
.ff2-trainerCard:focus-visible .ff2-trainerCard__rule {
  width: 70px;
}

.ff2-trainerCard:hover .ff2-trainerCard__arrow,
.ff2-trainerCard:focus-visible .ff2-trainerCard__arrow {
  background: var(--ff2-color-orange);
  border-color: var(--ff2-color-orange);
  opacity: 1;
  transform: none;
}

.ff2-trainerCard:focus-visible {
  outline: 3px solid var(--ff2-color-orange);
  outline-offset: 3px;
}

@media (max-width: 1319px) {
  .ff2-trainers__grid {
    gap: 24px;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) {
  .ff2-trainers__head {
    margin-bottom: 28px;
    padding-bottom: 20px;
  }

  .ff2-trainers__grid {
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
  }

  .ff2-trainerCard__name {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .ff2-trainers__grid {
    gap: 14px;
  }

  .ff2-trainerCard__body {
    padding: 16px 14px;
  }

  .ff2-trainerCard__role {
    font-size: 10px;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
  }

  .ff2-trainerCard__name {
    font-size: 17px;
  }

  .ff2-trainerCard__rule {
    margin-top: 10px;
    width: 22px;
  }

  /* Menší a nahoře, ať nekoliduje s dvouřádkovým jménem na úzké kartě. */
  .ff2-trainerCard__arrow {
    bottom: auto;
    height: 28px;
    opacity: 1;
    right: 12px;
    top: 12px;
    transform: none;
    width: 28px;
  }
}

@media (max-width: 400px) {
  .ff2-trainers__grid {
    grid-template-columns: 1fr;
  }
}

/* Na dotyku hover neexistuje, takže signál „je to proklik" musí být vidět
   staticky — jinak karta vypadá jako obrázek. */
@media (hover: none) {
  .ff2-trainerCard__arrow {
    opacity: 1;
    transform: none;
  }
}


/* ---------- detail trenéra -------------------------------------------------- */
.ff2-trainer {
  display: block;
  font-family: var(--ff2-font-body);
}

.ff2-trainer__hero {
  background: var(--ff2-color-ink);
  border-radius: var(--ff2-size-radius);
  color: #fff;
  display: grid;
  grid-template-columns: 420px 1fr;
  overflow: hidden;
}

.ff2-trainer__heroMedia {
  min-height: 480px;
  position: relative;
}

/* height !important — viz .ff2-trainerCard__img výše. */
.ff2-trainer__heroImg {
  display: block;
  height: 100% !important;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}

.ff2-trainer__heroBody {
  display: flex;
  flex-direction: column;
  gap: 22px;
  justify-content: center;
  padding: 48px;
}

.ff2-trainer__back {
  color: #8b90a0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.ff2-trainer__back:hover {
  color: var(--ff2-color-orangeAccent);
}

.ff2-trainer__role {
  align-self: flex-start;
  background: rgba(255, 102, 0, .16);
  border-radius: 100px;
  color: var(--ff2-color-orangeAccent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 6px 14px;
  text-transform: uppercase;
}

/* Sloupec `cms_team.motto`. Prázdné motto se v šabloně nevykreslí vůbec
   (n:if), takže se hlavička jen stáhne. Uvozovky se nepíšou — v obsahu by je
   musel hlídat člověk v administraci a v typografii by stejně kolidovaly
   s českými „…". */
.ff2-trainer__motto {
  color: #b9bdc9;
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  max-width: 44ch;
}

.ff2-trainer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}


/* ---------- tlačítka -------------------------------------------------------- */
.ff2-btn {
  align-items: center;
  border-radius: 100px;
  display: inline-flex;
  font-family: var(--ff2-font-body);
  font-size: 13px;
  font-weight: 700;
  gap: 9px;
  letter-spacing: 1.5px;
  padding: 13px 22px;
  text-transform: uppercase;
  transition: filter .25s, transform .25s, background .25s;
}

.ff2-btn--primary {
  background: var(--ff2-color-orange) linear-gradient(0deg, #f60, #fa3);
  color: #fff;
}

.ff2-btn--primary:hover {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.ff2-btn--ghost {
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
}

.ff2-btn--ghost:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.ff2-btn--dark {
  background: var(--ff2-color-ink);
  color: #fff;
}

/* Ne brightness: #151925 je tak tmavá, že se posvětlení filtrem prakticky
   neprojeví. Konkrétní světlejší odstín plus stejný posun jako u primárního
   tlačítka, ať se obě chovají stejně. */
.ff2-btn--dark:hover {
  background: #2b3145;
  color: #fff;
  transform: translateY(-2px);
}

.ff2-btn--block {
  justify-content: center;
  width: 100%;
}


/* ---------- tělo detailu ---------------------------------------------------- */
.ff2-trainer__main {
  display: grid;
  gap: 56px;
  grid-template-columns: 1fr 300px;
  padding-top: 52px;
}

.ff2-trainer__text {
  color: var(--ff2-color-body);
  font-size: 17px;
  line-height: 1.75;
  max-width: 68ch;
}

.ff2-trainer__text p {
  margin: 0 0 20px;
}

/* Perex — první odstavec bývá otázka nebo oslovení, nese celý text. */
.ff2-trainer__text p:first-child {
  color: var(--ff2-color-ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
}

.ff2-trainer__text h3 {
  font-family: var(--ff2-font-head);
  font-size: 22px;
  margin: 30px 0 10px;
}

/* Texty trenérů jdou z CKEditoru, takže tam může být cokoli. */
.ff2-trainer__text blockquote {
  border-left: 3px solid var(--ff2-color-orange);
  font-style: italic;
  margin: 0 0 20px;
  padding-left: 18px;
}

.ff2-trainer__text ul,
.ff2-trainer__text ol {
  margin: 0 0 20px;
  padding-left: 22px;
}

.ff2-trainer__text img {
  height: auto;
  max-width: 100%;
}

.ff2-trainer__aside {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  /* Ať se nezašpendlí pod lištu — proměnnou drží .ff2-nav. */
  top: calc(var(--ff2-size-barHeight) + 16px);
}

.ff2-trainerBox {
  background: #fff;
  border: 1px solid var(--ff2-color-lineLight);
  border-radius: 12px;
  padding: 22px;
}

.ff2-trainerBox__title {
  color: var(--ff2-color-muted);
  font-family: var(--ff2-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.ff2-trainerBox__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}

/* Bez tlačítka pod sebou by poslední řádek dělal falešné dno boxu. */
.ff2-trainerBox__row:last-child {
  margin-bottom: 0;
}

.ff2-trainerBox__label {
  color: var(--ff2-color-muted);
  font-size: 12px;
}

.ff2-trainerBox__value {
  /* Bez explicitní barvy padne dědičnost na šedou z okolí a e-mail s telefonem
     pak vypadají jako popisky, ne jako to hlavní v boxu. */
  color: var(--ff2-color-ink);
  font-size: 15px;
  font-weight: 600;
  /* Adresa je víceřádková (street / city / place_note), potřebuje vlastní proklad. */
  line-height: 1.45;
  /* Dlouhý e-mail nesmí roztáhnout panel na 300px mřížce. */
  overflow-wrap: break-word;
}

a.ff2-trainerBox__value:hover {
  color: var(--ff2-color-orange);
}

.ff2-trainerBox__action {
  margin-top: 18px;
}


/* ---------- další trenéři --------------------------------------------------- */
.ff2-trainerOthers {
  border-top: 1px solid var(--ff2-color-lineLight);
  margin-top: 64px;
  padding-top: 36px;
}

.ff2-trainerOthers__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 22px;
}

.ff2-trainerOthers__card {
  align-items: center;
  background: #fff;
  border: 1px solid var(--ff2-color-lineLight);
  border-radius: 12px;
  display: flex;
  gap: 14px;
  padding: 12px;
  transition: border-color .25s, transform .25s;
}

.ff2-trainerOthers__card:hover {
  border-color: #f9c79b;
  transform: translateY(-2px);
}

.ff2-trainerOthers__media {
  background: var(--ff2-color-ink);
  border-radius: 10px;
  flex: none;
  height: 64px;
  overflow: hidden;
  width: 64px;
}

.ff2-trainerOthers__img {
  display: block;
  height: 100% !important;
  object-fit: cover;
  width: 100%;
}

.ff2-trainerOthers__name {
  /* Karta je celá odkaz a reset dědí barvu z okolí — jméno musí zpátky na ink. */
  color: var(--ff2-color-ink);
  display: block;
  font-family: var(--ff2-font-head);
  font-size: 16px;
  font-weight: 600;
}

.ff2-trainerOthers__role {
  color: var(--ff2-color-muted);
  font-size: 12px;
}

@media (max-width: 1319px) {
  .ff2-trainer__hero {
    grid-template-columns: 360px 1fr;
  }

  .ff2-trainer__heroBody {
    padding: 38px;
  }

  .ff2-trainer__main {
    gap: 40px;
    grid-template-columns: 1fr 280px;
  }
}

@media (max-width: 991px) {
  .ff2-trainer__hero {
    grid-template-columns: 1fr;
  }

  /* Portrét v pásu na šířku — ohnisko výš, ať se neuřízne hlava. Až budou
     fotky sjednocené, chce to spíš vlastní ořez než tenhle odhad. */
  .ff2-trainer__heroMedia {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }

  .ff2-trainer__heroImg {
    object-position: center 25%;
  }

  .ff2-trainer__heroBody {
    gap: 18px;
    padding: 32px 30px 36px;
  }

  .ff2-trainer__main {
    gap: 36px;
    grid-template-columns: 1fr;
    padding-top: 36px;
  }

  .ff2-trainer__text {
    max-width: none;
  }

  .ff2-trainer__aside {
    flex-direction: row;
    position: static;
  }

  .ff2-trainerBox {
    flex: 1;
  }

  .ff2-trainerOthers__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .ff2-trainer__hero {
    border-radius: 10px;
  }

  .ff2-trainer__heroMedia {
    aspect-ratio: 4 / 5;
  }

  .ff2-trainer__heroBody {
    gap: 16px;
    padding: 24px 20px 28px;
  }

  .ff2-trainer__motto {
    font-size: 16px;
  }

  .ff2-trainer__actions {
    flex-direction: column;
    gap: 10px;
  }

  .ff2-btn {
    justify-content: center;
    padding: 14px 20px;
    width: 100%;
  }

  .ff2-trainer__main {
    padding-top: 28px;
  }

  .ff2-trainer__text {
    font-size: 16px;
    line-height: 1.7;
  }

  .ff2-trainer__text p:first-child {
    font-size: 18px;
  }

  .ff2-trainer__aside {
    flex-direction: column;
  }

  .ff2-trainerOthers {
    margin-top: 40px;
    padding-top: 26px;
  }

  .ff2-trainerOthers__grid {
    grid-template-columns: 1fr;
  }
}


/* =============================================================================
   DROBEČKOVÁ NAVIGACE
   Dominik Fenár <dominik.fenar@gmail.com> 2026-08-14

   Nahrazuje .uk-breadcrumb z theme.css (ř. ~9269). Ten tam zůstává kvůli
   `.uk-breadcrumb.gallery-tabs` v Galleries/default.latte, což je jiná
   komponenta se stejnou třídou — proto nová sada tříd a ne přepis té staré.

   Původní podoba byla bílý rámeček s bílou výplní na bílém pozadí; box nic
   neohraničoval a jen přidával šum. Tady je z toho lehká lišta.

   Rozvržení: domeček a jeho šipka stojí napevno, zbytek cesty jede ve
   vodorovném scrolleru. Cesta typu Fitcentrum → Sporty a aktivity → Poledance
   se na 320 px nevejde ani po zkrácení a lámat ji do dvou řádků vypadá jako
   chyba. Není to schované za media query — na úzkém okně na desktopu je to
   stejný problém.
   ============================================================================= */
.ff2-breadcrumb,
.ff2-breadcrumb :where(*),
.ff2-breadcrumb :where(*)::before,
.ff2-breadcrumb :where(*)::after {
  box-sizing: border-box;
}

.ff2-breadcrumb :where(a) {
  color: inherit;
  text-decoration: none;
}

.ff2-breadcrumb a:hover,
.ff2-breadcrumb a:focus {
  outline: none;
  text-decoration: none;
}

.ff2-breadcrumb {
  align-items: center;
  display: flex;
  font-family: var(--ff2-font-body);
  margin: 24px 0;
  /* Bez tohohle by flex položku nešlo zúžit pod obsah a scroller by přetekl. */
  min-width: 0;
}

.ff2-breadcrumb__home {
  align-items: center;
  color: var(--ff2-color-muted);
  display: flex;
  flex: none;
  padding: 4px 0;
  transition: color .2s;
}

.ff2-breadcrumb__home:hover,
.ff2-breadcrumb__home:focus-visible {
  color: var(--ff2-color-orange);
}

.ff2-breadcrumb__home:focus-visible {
  outline: 2px solid var(--ff2-color-orange);
  outline-offset: 3px;
}

.ff2-breadcrumb__icon {
  display: block;
  height: 15px;
  width: 15px;
}

/* Šipka za domečkem je jeho součástí, aby zůstala stát i při odscrolované cestě
   — jinak by scroller začínal odděleným textem bez vazby na domeček. */
.ff2-breadcrumb__home::after {
  border-right: 1.5px solid #cfd2d9;
  border-top: 1.5px solid #cfd2d9;
  content: "";
  display: block;
  flex: none;
  height: 5px;
  margin: 0 12px;
  transform: rotate(45deg);
  width: 5px;
}

.ff2-breadcrumb__scroller {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  /* Posuvník je přes celou šířku lišty a v tomhle kontextu jen ruší. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ff2-breadcrumb__scroller::-webkit-scrollbar {
  display: none;
}

.ff2-breadcrumb__list {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Aby scroller měřil šířku obsahu, ne svoji. */
  width: max-content;
}

.ff2-breadcrumb__item {
  align-items: center;
  color: var(--ff2-color-muted);
  display: flex;
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Oddělovač je nakreslený, ne znak: lomítko ani › nesedí ve všech fontech
   stejně na účaří a v uppercase řádku to bylo vidět. První položka ho nemá,
   tu odděluje pevná šipka za domečkem. */
.ff2-breadcrumb__item + .ff2-breadcrumb__item::before {
  border-right: 1.5px solid #cfd2d9;
  border-top: 1.5px solid #cfd2d9;
  content: "";
  display: block;
  flex: none;
  height: 5px;
  margin: 0 12px;
  transform: rotate(45deg);
  width: 5px;
}

.ff2-breadcrumb__link {
  color: var(--ff2-color-muted);
  display: block;
  padding: 4px 0;
  transition: color .2s;
}

.ff2-breadcrumb__link:hover,
.ff2-breadcrumb__link:focus-visible {
  color: var(--ff2-color-orange);
}

.ff2-breadcrumb__link:focus-visible {
  outline: 2px solid var(--ff2-color-orange);
  outline-offset: 3px;
}

.ff2-breadcrumb__current {
  color: var(--ff2-color-ink);
  display: block;
  padding: 4px 0;
}

/* Domeček je pořád odkaz na úvod — text zůstává pro čtečky a pro title. */
.ff2-breadcrumb__srOnly {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (max-width: 767px) {
  .ff2-breadcrumb {
    margin: 16px 0;
  }

  .ff2-breadcrumb__home::after,
  .ff2-breadcrumb__item + .ff2-breadcrumb__item::before {
    margin: 0 9px;
  }

  .ff2-breadcrumb__item {
    font-size: 10px;
    letter-spacing: 1px;
  }
}


/* =============================================================================
   PŘEMOSTĚNÍ DO STARŠÍ VRSTVY `ff-`
   Dominik Fenár <dominik.fenar@gmail.com> 2026-08-15

   Bloky, které si dál drží značkování z theme.css, ale nadpis už berou ze škály.
   Nic se tu nepřepisuje kvůli specificitě — ff2.css se načítá až za theme.css,
   takže při stejné specificitě (0,1,0) vyhrává tenhle soubor. Pravidla jsou
   proto úmyslně na konci: kdyby přišla dřív než sekce TYPOGRAFIE, přebila by je
   samotná škála.

   Do theme.css se nesahá schválně — je to zamrzlá vrstva (§5 CLAUDE.md).
   ============================================================================= */

/* ---------- služby na homepage: karty -------------------------------------- */
/* Nadpis nese .ff2-heading4, ale spodní mezera musí zůstat 20px — pod titulkem
   je gradientové pravítko (::after, top: 120%) a hned za ním popisek. */
.ff-services-scroll-item-title {
  margin: 0 0 20px;
}

/* ---------- služby na homepage: overlay (popin) ----------------------------- */
/* Padding vpravo drží místo pro křížek, proto se přebíjí jen shora a zdola. */
.ff-popin-title {
  margin: 0;
  padding: 4px 80px 14px 0;
}

/* ---------- patička --------------------------------------------------------- */
/* theme.css sází `.tm-footer .uk-panel h3` (0,2,1) — samotná škála (0,1,0) by
   prohrála na specificitě, ne na pořadí. Proto se tady velikost i barva musí
   zopakovat pod stejně hlubokým selektorem. Hodnoty drží krok s .ff2-heading4;
   kdyby se škála přenastavovala, musí se sáhnout i sem. */
/* Jediné místo na webu, kde se škála váže i na holé tagy — a jen protože obsah
   prvního sloupce patičky je HTML z administrace (`footer_block_1`), takže tam
   žádnou třídu doplnit nejde. Scope je `.tm-footer .uk-panel`, ven z patičky to
   nesahá; pravidlo z §5 CLAUDE.md („žádná vazba na h1–h6") tím zůstává v
   platnosti pro zbytek webu. */
.tm-footer .uk-panel .ff2-heading4,
.tm-footer .uk-panel h1,
.tm-footer .uk-panel h2,
.tm-footer .uk-panel h3,
.tm-footer .uk-panel h4 {
  color: #fff;
  font-family: var(--ff2-font-head);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1.2px;
  line-height: 1.2;
  margin: 0 0 14px;
  text-transform: uppercase;
}

@media (max-width: 991px) {
  .tm-footer .uk-panel .ff2-heading4,
  .tm-footer .uk-panel h1,
  .tm-footer .uk-panel h2,
  .tm-footer .uk-panel h3,
  .tm-footer .uk-panel h4 { font-size: 18px; }
}

@media (max-width: 767px) {
  .tm-footer .uk-panel .ff2-heading4,
  .tm-footer .uk-panel h1,
  .tm-footer .uk-panel h2,
  .tm-footer .uk-panel h3,
  .tm-footer .uk-panel h4 { font-size: 17px; }
}

/* ---------- nadpisy v obsahu z administrace --------------------------------- */
/* Druhá — a poslední — vazba škály na holé tagy, ze stejného důvodu jako
   u patičky výše: obsah těchhle bloků píše editor v CKEditoru, takže tam nejde
   doplnit třídu. Scope je vždy konkrétní obal jednoho obsahového bloku, nikdy
   ne dokument. Mapování:

     h1, h2  →  .ff2-heading3   (nadpis sekce uvnitř textu)
     h3–h6   →  .ff2-heading4   (podnadpis)

   H1 se sem počítá schválně: editoři ho v textu občas použijí, i když skutečný
   H1 stránky je nad blokem v šabloně. Vizuálně nemá být větší než sekce.

   Scope musí být VŽDY konkrétní třída. `.uk-article > div h1` vypadá lákavě,
   ale má specificitu (0,1,1), takže přebije `.ff2-heading2` (0,1,0) a srazí H1
   stránky na velikost sekce — přesně tohle se stalo na /galerie a /kontakty.
   Obecný obal pro text z administrace, který nemá vlastní komponentu, se jmenuje
   `.ff2-cmsText`; nový typ stránky patří do tohohle seznamu, jinak zůstane na
   starých pravidlech z theme.css. */
.ff2-showcase__text h1,
.ff2-showcase__text h2,
.ff2-cmsText h1,
.ff2-cmsText h2,
.ff2-hub__intro h1,
.ff2-hub__intro h2,
.ff2-contacts__intro h1,
.ff2-contacts__intro h2,
.ff-article-text h1,
.ff-article-text h2,
.ff-popin-text h1,
.ff-popin-text h2 {
  color: var(--ff2-color-ink);
  font-family: var(--ff2-font-head);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.05;
  margin: 40px 0 18px;
  text-transform: uppercase;
}

.ff2-showcase__text h3, .ff2-showcase__text h4, .ff2-showcase__text h5, .ff2-showcase__text h6,
.ff2-cmsText h3, .ff2-cmsText h4, .ff2-cmsText h5, .ff2-cmsText h6,
.ff2-hub__intro h3, .ff2-hub__intro h4, .ff2-hub__intro h5, .ff2-hub__intro h6,
.ff2-contacts__intro h3, .ff2-contacts__intro h4, .ff2-contacts__intro h5, .ff2-contacts__intro h6,
.ff-article-text h3, .ff-article-text h4, .ff-article-text h5, .ff-article-text h6,
.ff-popin-text h3, .ff-popin-text h4, .ff-popin-text h5, .ff-popin-text h6 {
  color: var(--ff2-color-ink);
  font-family: var(--ff2-font-head);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1.2px;
  line-height: 1.2;
  margin: 28px 0 14px;
  text-transform: uppercase;
}

/* První nadpis v bloku nesmí odsunout celý blok od toho, co je nad ním. */
.ff2-showcase__text > :first-child,
.ff2-cmsText > :first-child,
.ff2-hub__intro > :first-child,
.ff2-contacts__intro > :first-child,
.ff-article-text > :first-child,
.ff-popin-text > :first-child {
  margin-top: 0;
}


/* =============================================================================
   NOVINKY — výpis článků
   Dominik Fenár <dominik.fenar@gmail.com> 2026-08-15

   Nahrazuje inline <style> v News/default.latte a starou vrstvu `.ff-article*`.

   Dvě věci, se kterými musí komponenta počítat, protože data je nemají jak
   sjednotit:

   1) DÉLKA TEXTU. `cms_articles` nemá perex — je tam jen `text`, celý článek.
      Jedna novinka jsou dvě věty, druhá dvacet řádků. Ve mřížce se stejně
      vysokými řádky z toho vznikaly stovky pixelů prázdna. Text se proto ořízne
      na pevnou výšku a rozbalí se na místě (detail novinky neexistuje — v
      bootstrap.php pro něj není routa a `NewsPresenter::actionDetail()` je mrtvý
      kód, takže odkazovat není kam).

   2) POMĚR STRAN OBRÁZKU. Skutečná data jdou od 800×369 po 410×600, půl na půl
      fotky a grafické plakáty. Ořez `cover` uřízne plakátu polovinu sdělení,
      `contain` na bílé nechá po stranách prázdné pruhy. Rámeček proto vyplní
      rozmazaná zvětšenina téhož obrázku a ostrá verze leží celá na ní. Je to
      jeden a týž `src`, takže se nestahuje dvakrát — a je to i tentýž soubor,
      který otevře lightbox (typ 99), takže zvětšení jde z cache.
   ============================================================================= */

/* Reset komponenty. `box-sizing` není na webu globální (§5 CLAUDE.md) a karta
   má šířku 100 % i padding — bez tohohle by přetekla přesně o padding. */
.ff2-news,
.ff2-news *,
.ff2-news *::before,
.ff2-news *::after {
  box-sizing: border-box;
}

.ff2-news {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 0 36px;
}

@media (max-width: 1319px) {
  .ff2-news {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* ---------- karta ----------------------------------------------------------- */
/* `align-self: start` je tu schválně: bez něj grid roztáhne kartu na výšku
   řádku a rozbalený článek by natáhl i sousední kartu vedle sebe. */
.ff2-news__card {
  align-self: start;
  background: #fff;
  border: 1px solid var(--ff2-color-lineLight);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.ff2-news__card:hover {
  border-color: rgba(255,102,0,.45);
  box-shadow: 0 10px 28px rgba(3,7,18,.09);
  transform: translateY(-2px);
}

/* ---------- obrázek --------------------------------------------------------- */

.ff2-news__media {
  background: #0f1220;
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* aspect-ratio řeší výšku moderním prohlížečům; padding-top je fallback pro ty
   staré, na které tenhle web pořád cílí. Proto `position: absolute` na obou
   vrstvách — sedí na obojím. */
.ff2-news__media::before {
  content: "";
  display: block;
  padding-top: 62.5%;   /* 16:10 */
}

@supports (aspect-ratio: 16 / 10) {
  .ff2-news__media {
    aspect-ratio: 16 / 10;
  }

  .ff2-news__media::before {
    display: none;
  }
}

/* Rozmazaná výplň rámečku. `scale` odřízne měkké okraje, které blur vytvoří na
   hranách, jinak by kolem byl světlý lem. */
.ff2-news__blur,
.ff2-news__img {
  height: 100% !important;   /* theme.css:152 má `img { height: auto !important }` */
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.ff2-news__blur {
  filter: blur(24px) saturate(1.4) brightness(.75);
  object-fit: cover;
  transform: scale(1.15);
}

.ff2-news__img {
  object-fit: contain;
  transition: transform .3s;
}

.ff2-news__card:hover .ff2-news__img {
  transform: scale(1.02);
}

/* Odkaz kolem ostré verze otevírá lightbox — proto musí ležet nad rozmazanou. */
.ff2-news__zoom {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

/* ---------- tělo karty ------------------------------------------------------ */

.ff2-news__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 22px 24px 24px;
}

.ff2-news__date {
  color: var(--ff2-color-orange);
  font-family: var(--ff2-font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  margin: 0 0 8px;
  text-transform: uppercase;
}

/* Velikost dodává .ff2-heading3 ze škály, tady zůstává jen odsazení. */
.ff2-news__title {
  margin: 0 0 14px;
}

.ff2-news__rule {
  background: var(--ff2-color-orange);
  display: block;
  height: 2px;
  margin-bottom: 18px;
  width: 44px;
}

/* ---------- text ------------------------------------------------------------ */
/* Ořez je `max-height`, ne `-webkit-line-clamp`: obsah je HTML z CKEditoru
   (odstavce, tučné řádky, občas seznam) a line-clamp na blokových potomcích se
   v prohlížečích, na které tenhle web cílí, chová nespolehlivě. Pevná výška je
   hloupá, ale funguje všude stejně.

   Třídu `--clamped` dává až JS, a jen když text opravdu přetéká — jinak by se
   u dvouvětné novinky ukázalo tlačítko, které nic nerozbaluje. Bez JS se tedy
   nic neořízne a celý článek je vidět: degraduje to správným směrem. */
.ff2-news__text {
  color: #4a4e5c;
  line-height: 1.65;
  position: relative;
}

.ff2-news__text p {
  margin: 0 0 10px;
}

.ff2-news__text > :last-child {
  margin-bottom: 0;
}

.ff2-news__card--clamped .ff2-news__text {
  max-height: 170px;
  overflow: hidden;
}

/* Přechod do ztracena místo tvrdé hrany na useknutém řádku. */
.ff2-news__card--clamped .ff2-news__text::after {
  background: linear-gradient(rgba(255,255,255,0), #fff);
  bottom: 0;
  content: "";
  height: 56px;
  left: 0;
  position: absolute;
  right: 0;
}

.ff2-news__card--open .ff2-news__text {
  max-height: none;
  overflow: visible;
}

.ff2-news__card--open .ff2-news__text::after {
  display: none;
}

/* ---------- rozbalovací tlačítko -------------------------------------------- */
/* `margin-top: auto` přišpendlí tlačítko ke dnu karty, aby u různě dlouhých
   textů ve dvou sloupcích neposkakovalo v půlce výšky. */
.ff2-news__more {
  align-self: flex-start;
  background: none;
  border: 0;
  color: var(--ff2-color-orange);
  cursor: pointer;
  display: none;
  font-family: var(--ff2-font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  margin-top: auto;
  padding: 16px 0 0;
  text-transform: uppercase;
}

.ff2-news__card--clamped .ff2-news__more {
  display: block;
}

.ff2-news__more:hover,
.ff2-news__more:focus {
  color: var(--ff2-color-orangeAccent);
  text-decoration: underline;
}

.ff2-news__more::after {
  content: " ↓";
}

.ff2-news__card--open .ff2-news__more::after {
  content: " ↑";
}

/* ---------- stránkování ------------------------------------------------------ */

.ff2-news__pager {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.ff2-news__pagerLink {
  background: none;
  border: 2px solid var(--ff2-color-lineLight);
  border-radius: 10px;
  color: var(--ff2-color-ink);
  display: inline-block;
  font-family: var(--ff2-font-head);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  padding: 14px 34px;
  text-transform: uppercase;
  transition: border-color .2s, color .2s;
}

.ff2-news__pagerLink:hover,
.ff2-news__pagerLink:focus {
  border-color: var(--ff2-color-orange);
  color: var(--ff2-color-orange);
  text-decoration: none;
}

@media (max-width: 767px) {
  .ff2-news__body {
    padding: 18px 18px 20px;
  }

  .ff2-news__card--clamped .ff2-news__text {
    max-height: 140px;
  }
}


/* =============================================================================
   SLUŽBY NA HOMEPAGE — carousel + modal
   Dominik Fenár <dominik.fenar@gmail.com> 2026-08-15

   Náhrada za `.ff-services-*` a `.ff-popin-*` v theme.css. Ty tam zůstávají jako
   mrtvý kód, dokud se nová verze neodzkouší na produkci — theme.css je zamrzlá
   vrstva a nesahá se do ní (§5 CLAUDE.md).

   Tři věci, kvůli kterým to není jen přejmenování:

   1) KARTA JE <button>. Dřív to byl <div> s click listenerem, takže se modal
      nedal otevřít z klávesnice vůbec. Proto ten rozsáhlý reset níž — tlačítko
      si nese vlastní font, pozadí, rámeček i zarovnání.

   2) MODAL SE PŘESUNUL VEN ZE SCROLLERU. Dřív ležel uvnitř `.ff-services-scroll-item`,
      tedy uvnitř kontejneru s `overflow: auto`. `position: fixed` tam funguje
      jen do chvíle, než nějaký předek dostane `transform`, `filter` nebo
      `will-change` — pak se fixed vztáhne k němu a modal se zavře do scrolleru.
      Teď jsou modaly sourozenci tracku, přímo v sekci.

   3) PŘETEČENÍ ŘEŠÍ OBAL, NE PANEL. Starý `.ff-popin-body` neměl max-height ani
      overflow a seděl v gridu s `place-items: center`, takže delší text utekl
      nad horní okraj okna a nedal se doscrollovat. Tady scrolluje celý
      `.ff2-svcModal` a panel se centruje přes `margin: auto` — to na rozdíl od
      `align-items: center` nikdy neuřízne horní část.
   ============================================================================= */

.ff2-svc,
.ff2-svc *,
.ff2-svc *::before,
.ff2-svc *::after,
.ff2-svcModal,
.ff2-svcModal *,
.ff2-svcModal *::before,
.ff2-svcModal *::after {
  box-sizing: border-box;
}

.ff2-svc {
  background: #fff;
  padding: 64px 0;
  width: 100%;
}

.ff2-svc__inner {
  margin: 0 auto;
  max-width: 1320px;
  width: 100%;
}

.ff2-svc__viewport {
  position: relative;
}

/* ---------- šipky ------------------------------------------------------------ */

.ff2-svc__arrow {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid var(--ff2-color-lineLight);
  border-radius: 50%;
  color: #8a92a6;
  cursor: pointer;
  display: block;
  font: inherit;
  height: 48px;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: color .2s, border-color .2s, box-shadow .2s;
  width: 48px;
  z-index: 10;
}

.ff2-svc__arrow:hover,
.ff2-svc__arrow:focus-visible {
  border-color: var(--ff2-color-orange);
  box-shadow: 0 6px 18px rgba(3,7,18,.10);
  color: var(--ff2-color-orange);
}

/* Šipka je nakreslená ze dvou proužků, ne fontem: FontAwesome se na tenhle web
   dotahuje pozdě a do té doby svítily v kroužku prázdné čtverečky. */
.ff2-svc__arrow::before {
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  content: "";
  height: 12px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 12px;
}

.ff2-svc__arrow--prev { left: -64px; }
.ff2-svc__arrow--next { right: -64px; }

.ff2-svc__arrow--prev::before { transform: translate(-40%, -50%) rotate(45deg); }
.ff2-svc__arrow--next::before { transform: translate(-60%, -50%) rotate(-135deg); }

.ff2-svc__arrow--hidden {
  display: none;
}

/* ---------- track ------------------------------------------------------------ */

.ff2-svc__track {
  -ms-overflow-style: none;
  scrollbar-width: none;
  display: flex;
  gap: 20px;
  overflow: auto;
  padding: 20px 0;
  scroll-snap-type: x mandatory;
  width: 100%;
}

.ff2-svc__track::-webkit-scrollbar {
  display: none;
}

/* ---------- karta ------------------------------------------------------------ */
/* Reset <button> do posledního detailu — bez něj si karta nese systémový font,
   zarovnání na střed a vlastní rámeček. */
.ff2-svc__card {
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(to top, #fff5f4, #fff);
  border: 2px solid #fff5e4;
  border-radius: 12px;
  box-shadow: 0 0 1px rgba(3,7,18,.04),
              0 2px 3px rgba(3,7,18,.03),
              0 4px 7px rgba(3,7,18,.02),
              0 6px 13px rgba(3,7,18,.02),
              0 10px 20px rgba(3,7,18,.01);
  color: inherit;
  cursor: pointer;
  display: block;
  flex: 0 0 var(--ff2-svc-cardWidth, 315px);
  font: inherit;
  margin: 0;
  padding: 16px;
  scroll-snap-align: start;
  text-align: left;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
  width: var(--ff2-svc-cardWidth, 315px);
}

.ff2-svc__card:hover {
  background: linear-gradient(to top, #efe5e4, #fff);
  border-color: rgba(255,102,0,.35);
}

.ff2-svc__card:focus-visible {
  border-color: var(--ff2-color-orange);
  outline: 2px solid var(--ff2-color-orange);
  outline-offset: 2px;
}

.ff2-svc__card:last-of-type {
  scroll-snap-align: end;
}

/* Potomci karty jsou <span>: uvnitř <button> smí být jen řádkový obsah, blok
   by prohlížeč z tlačítka vystrčil. Zalomení proto dělá display: block. */
.ff2-svc__media {
  aspect-ratio: 2 / 1;
  display: block;
  width: 100%;
}

.ff2-svc__img {
  height: 100% !important;   /* theme.css:152 má `img { height: auto !important }` */
  object-fit: contain;
  width: 100%;
}

/* Velikost dodává .ff2-heading4 ze škály; tady je jen podtržení a odsazení. */
.ff2-svc__title {
  display: block;
  margin: 0 0 20px;
  position: relative;
}

.ff2-svc__title::after {
  background: linear-gradient(to right, #ffb686, rgba(255,255,255,0));
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: 120%;
  width: 100%;
}

.ff2-svc__meta {
  color: #5c6070;
  display: block;
  padding: 0 8px;
}

/* ---------- modal ------------------------------------------------------------ */

.ff2-svcModal {
  display: none;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 16px;
  position: fixed;
  z-index: 500;
}

.ff2-svcModal--open {
  display: flex;
}

.ff2-svcModal__backdrop {
  animation: ff2SvcFade 200ms ease-out 1;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background: rgba(100,40,0,.7);
  border: 0;
  cursor: pointer;
  inset: 0;
  padding: 0;
  position: fixed;
  z-index: 0;
}

/* `margin: auto` uvnitř flexu vycentruje na obou osách a na rozdíl od
   `align-items: center` neuřízne horní část, když je panel vyšší než okno. */
.ff2-svcModal__panel {
  animation: ff2SvcPop 200ms ease-out 1;
  background: linear-gradient(to top, #f0c588, #fff);
  border: 2px solid #f0c588;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(3,7,18,.25);
  color: #333;
  margin: auto;
  max-width: 540px;
  padding: 18px;
  position: relative;
  width: 100%;
  z-index: 1;
}

@keyframes ff2SvcFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ff2SvcPop {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ff2-svcModal__backdrop,
  .ff2-svcModal__panel {
    animation: none;
  }
}

.ff2-svcModal__close {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 0;
  border-radius: 4px;
  color: #888;
  cursor: pointer;
  font: inherit;
  height: 32px;
  padding: 0;
  position: absolute;
  right: 18px;
  top: 18px;
  transition: color .2s, transform .2s;
  width: 32px;
  z-index: 1;
}

.ff2-svcModal__close:hover {
  color: #bb1414;
  transform: scale(1.05);
}

.ff2-svcModal__close:focus-visible {
  outline: 2px solid var(--ff2-color-orange);
  outline-offset: 2px;
}

.ff2-svcModal__close::before,
.ff2-svcModal__close::after {
  background: currentColor;
  content: "";
  height: 2px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 60%;
}

.ff2-svcModal__close::before { transform: translate(-50%, -50%) rotate(-45deg); }
.ff2-svcModal__close::after  { transform: translate(-50%, -50%) rotate(45deg); }

.ff2-svcModal__title {
  margin: 0;
  padding: 4px 80px 14px 0;
}

.ff2-svcModal__text p {
  margin: 0 0 10px;
}

.ff2-svcModal__text > :last-child {
  margin-bottom: 0;
}

.ff2-svcModal__cta {
  background: var(--ff2-color-orange);
  border-radius: 8px;
  color: #fff;
  display: block;
  font-family: var(--ff2-font-head);
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 18px;
  padding: 13px 20px;
  text-align: center;
  text-transform: uppercase;
  transition: background .2s;
}

.ff2-svcModal__cta:hover,
.ff2-svcModal__cta:focus {
  background: var(--ff2-color-orangeAccent);
  color: #fff;
  text-decoration: none;
}

/* Zamknutí stránky pod otevřeným modalem. `padding-right` dorovnává šířku
   zmizelého scrollbaru, jinak by obsah pod modalem poskočil — hodnotu počítá
   ff2-services.js, protože se liší podle systému a nastavení. */
.ff2-scrollLock {
  overflow: hidden !important;
}

/* ---------- breakpointy ------------------------------------------------------ */

@media (max-width: 1462px) {
  .ff2-svc__inner { max-width: 1136px; }
  .ff2-svc { --ff2-svc-cardWidth: 269px; }
}

@media (max-width: 1279px) {
  .ff2-svc__inner { max-width: 100%; }
  .ff2-svc__arrow--prev { left: 0; }
  .ff2-svc__arrow--next { right: 0; }

  /* Odsazení na krajích se dělá prázdnými pseudoprvky ve flexu, aby první a
     poslední karta nekončila nalepená na okraj okna. */
  .ff2-svc__track {
    --ff2-svc-edge: 64px;
    scroll-padding: 0 var(--ff2-svc-edge);
  }

  .ff2-svc__track::before,
  .ff2-svc__track::after {
    content: "";
    flex: 0 0 var(--ff2-svc-edge);
    width: var(--ff2-svc-edge);
  }

  .ff2-svc__track::before { scroll-snap-align: start; }
  .ff2-svc__track::after  { scroll-snap-align: end; }

  .ff2-svc__card:last-of-type { scroll-snap-align: start; }
}

@media (max-width: 767px) {
  .ff2-svc__track { --ff2-svc-edge: 32px; }
  .ff2-svc { --ff2-svc-cardWidth: 320px; }
}

@media (max-width: 499px) {
  .ff2-svc { padding: 32px 0; --ff2-svc-cardWidth: calc(90vw - 32px); }
  .ff2-svc__track { --ff2-svc-edge: 16px; }
  .ff2-svc__track::before { margin-right: -20px; }
  .ff2-svc__track::after  { margin-left: -20px; }
  .ff2-svcModal { padding: 16px 12px; }
  .ff2-svcModal__panel { padding: 14px; }
  .ff2-svcModal__close { right: 14px; top: 14px; }
  .ff2-svcModal__title { padding-right: 64px; }
}


/* =============================================================================
   GALERIE 2026 — výpis (/galerie) a detail galerie
   -----------------------------------------------------------------------------
   Přepsáno 23. 8. 2026 z `.rg-gm-*` (rokgallery, 2016), které stálo na
   floatech a rozpěrkách `.cleaner` každé tři položky.

   Dvě věci, které z toho dělají vlastní komponentu, ne modifikátor karty
   trenéra:

   1) POMĚR STRAN. Karta trenéra je 3:4 (portrét), galerie 16:10 — přesně
      poměr náhledu typu 108 (400×250), takže se nic nedopočítává ani
      nedeformuje. Sdílená karta by potřebovala modifikátor na mřížku,
      na výšku i na velikost písma.

   2) DLAŽDICE FOTKY na detailu není odkaz na stránku, ale spouštěč lightboxu,
      a nese popisek. Vizuálně je to táž dlaždice, chová se ale jinak.

   Mřížka je záměrně jedna (.ff2-gal__grid) pro výpis i pro fotky — obě stránky
   tak mají stejný rytmus a mění se na jednom místě.
   ============================================================================= */

/* Reset komponenty. `box-sizing` na webu globální není (§5 CLAUDE.md).
   :where() má nulovou specificitu, takže přebije holé selektory z bootstrapu,
   ale vlastní pravidla komponenty ne. */
.ff2-gal,
.ff2-gal :where(*),
.ff2-gal :where(*)::before,
.ff2-gal :where(*)::after {
  box-sizing: border-box;
}

.ff2-gal :where(a) {
  color: inherit;
  text-decoration: none;
}

/* Bez :where(): theme.min.css má `a:hover` (0,1,1) a nulový reset by prohrál. */
.ff2-gal a:hover,
.ff2-gal a:focus {
  outline: none;
  text-decoration: none;
}

.ff2-gal :where(p) {
  margin: 0;
}

.ff2-gal {
  display: block;
  margin-bottom: 48px;
}

.ff2-gal__text {
  margin-bottom: 36px;
  max-width: 70ch;
}

.ff2-gal__grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(3, 1fr);
}

/* Fotky uvnitř jedné galerie jsou drobnější zrno než celé galerie. */
.ff2-gal__grid--photos {
  gap: 18px;
  grid-template-columns: repeat(4, 1fr);
}


/* ---------- dlaždice: společný rámeček -------------------------------------- */
/* `aspect-ratio` řeší výšku moderním prohlížečům, `padding-top` je fallback pro
   ty staré, na které web pořád cílí — proto jsou obě vrstvy `absolute`. */
.ff2-galCard,
.ff2-galPhoto {
  background: var(--ff2-color-ink);
  border-radius: var(--ff2-size-radius);
  display: block;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.ff2-galCard::after,
.ff2-galPhoto::after {
  content: "";
  display: block;
  padding-top: 62.5%;   /* 16:10 = poměr náhledu typu 108 */
}

@supports (aspect-ratio: 16 / 10) {
  .ff2-galCard,
  .ff2-galPhoto {
    aspect-ratio: 16 / 10;
  }

  .ff2-galCard::after,
  .ff2-galPhoto::after {
    display: none;
  }
}

/* !important je nutné zlo: theme.css:152 má `img { height: auto !important }`
   a normální specificita to neporazí. Stejně to řeší .ff2-trainerCard__img. */
.ff2-galCard__img,
.ff2-galPhoto__img {
  display: block;
  height: 100% !important;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
  width: 100%;
}

.ff2-galCard:hover .ff2-galCard__img,
.ff2-galCard:focus-visible .ff2-galCard__img,
.ff2-galPhoto:hover .ff2-galPhoto__img,
.ff2-galPhoto:focus-visible .ff2-galPhoto__img {
  transform: scale(1.06);
}

.ff2-galCard:focus-visible,
.ff2-galPhoto:focus-visible {
  outline: 3px solid var(--ff2-color-orange);
  outline-offset: 3px;
}


/* ---------- karta galerie (výpis) ------------------------------------------- */
/* Gradient odděluje text od fotky nezávisle na tom, co je pod ním — náhledy
   galerií vznikaly v různých světlech a bez něj je název místy nečitelný. */
.ff2-galCard__media::before {
  background: linear-gradient(to top,
              rgba(10, 12, 18, .92) 0%,
              rgba(10, 12, 18, .55) 38%,
              rgba(10, 12, 18, 0) 70%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

.ff2-galCard__media {
  inset: 0;
  position: absolute;
}

.ff2-galCard__body {
  bottom: 0;
  left: 0;
  padding: 20px 22px;
  position: absolute;
  right: 56px;   /* místo pro šipku, ať se dlouhý název nepodlézá */
  z-index: 2;
}

.ff2-galCard__count {
  color: var(--ff2-color-orangeAccent);
  display: block;
  font-family: var(--ff2-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.ff2-galCard__name {
  color: #fff;
  display: block;
  font-family: var(--ff2-font-head);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .5px;
  line-height: 1.15;
  text-transform: uppercase;
}

.ff2-galCard__rule {
  background: var(--ff2-color-orange);
  display: block;
  height: 2px;
  margin-top: 12px;
  transition: width .35s ease;
  width: 28px;
}

.ff2-galCard:hover .ff2-galCard__rule,
.ff2-galCard:focus-visible .ff2-galCard__rule {
  width: 70px;
}

.ff2-galCard__arrow {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  bottom: 20px;
  color: #fff;
  display: flex;
  height: 34px;
  justify-content: center;
  opacity: 0;
  position: absolute;
  right: 18px;
  transform: translateX(-6px);
  transition: opacity .35s, transform .35s, background .35s, border-color .35s;
  width: 34px;
  z-index: 2;
}

.ff2-galCard:hover .ff2-galCard__arrow,
.ff2-galCard:focus-visible .ff2-galCard__arrow {
  background: var(--ff2-color-orange);
  border-color: var(--ff2-color-orange);
  opacity: 1;
  transform: none;
}


/* ---------- dlaždice fotky (detail) ----------------------------------------- */

/* Popisky jdou od dvou slov po ctyri radky technickych rozmeru (galerie VW).
   Ctyri radky prekryji pul dlazdice, proto se orezavaji na dva — cely text je
   videt v lightboxu, kam dlazdice stejne vede.

   Proc je uvnitr jeste jeden span: `-webkit-line-clamp` funguje jen na
   `display: -webkit-box`, jenze absolutne pozicovany prvek prohlizec
   "blockifikuje" (computed display vyjde `flow-root`) a orez se zahodi. Pruh
   s gradientem tedy pozicuje, orezava az vnitrni prvek. `max-height` je
   fallback pro prohlizece bez clampu — usekne to bez tri tecek. Bez padding-bottom
   na vnitrnim prvku, jinak by se treti radek vykreslil do nej a byl videt. */
.ff2-galPhoto__caption {
  background: linear-gradient(to top, rgba(10, 12, 18, .88), rgba(10, 12, 18, 0));
  bottom: 0;
  color: #fff;
  font-family: var(--ff2-font-body);
  font-size: 12px;
  left: 0;
  line-height: 1.4;
  padding: 26px 14px 12px;
  position: absolute;
  right: 0;
  z-index: 2;
}

.ff2-galPhoto__captionText {
  display: -webkit-box;
  max-height: 34px;   /* 2 radky po 16.8px */
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Lupa hlásí, že dlaždice otevírá zvětšeninu. Na dotykových displejích není
   hover, proto je vidět pořád — jen decentněji než v hoveru. */
.ff2-galPhoto__zoom {
  align-items: center;
  background: rgba(10, 12, 18, .55);
  border-radius: 50%;
  color: #fff;
  display: flex;
  height: 34px;
  justify-content: center;
  opacity: .75;
  position: absolute;
  right: 12px;
  top: 12px;
  transition: opacity .3s, background .3s;
  width: 34px;
  z-index: 2;
}

.ff2-galPhoto__zoom svg {
  height: 18px;
  width: 18px;
}

.ff2-galPhoto:hover .ff2-galPhoto__zoom,
.ff2-galPhoto:focus-visible .ff2-galPhoto__zoom {
  background: var(--ff2-color-orange);
  opacity: 1;
}


/* ---------- responzivita ----------------------------------------------------
   `sizes` u náhledů se neuvádí (jeden typ 108 pro všechny šířky), takže se tu
   mění jen počet sloupců. */

@media (max-width: 1319px) {
  .ff2-gal__grid {
    gap: 22px;
  }

  .ff2-gal__grid--photos {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) {
  .ff2-gal__grid {
    gap: 18px;
    grid-template-columns: repeat(2, 1fr);
  }

  .ff2-galCard__name {
    font-size: 19px;
  }
}

@media (max-width: 767px) {
  .ff2-gal__grid {
    gap: 14px;
  }

  .ff2-gal__grid--photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .ff2-galCard__body {
    padding: 14px 16px;
    right: 48px;
  }

  .ff2-galCard__count {
    font-size: 10px;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
  }

  .ff2-galCard__name {
    font-size: 17px;
  }

  .ff2-galCard__rule {
    margin-top: 9px;
    width: 22px;
  }

  /* Menší a nahoře, ať nekoliduje s dvouřádkovým názvem na úzké kartě. */
  .ff2-galCard__arrow {
    bottom: auto;
    height: 28px;
    right: 12px;
    top: 12px;
    width: 28px;
  }
}

/* Karta galerie nese nazev pres fotku, takze pod ~300px sirky se nazev lame
   na tri radky a prekryje celou dlazdici — vypis proto prechazi na jeden
   sloupec drive nez mrizka fotek, ktera zadny text nenese. */
@media (max-width: 599px) {
  .ff2-gal__grid {
    grid-template-columns: 1fr;
  }

  .ff2-gal__grid--photos {
    grid-template-columns: repeat(2, 1fr);
  }
}