/* ==========================================================================
   Jak to funguje – styly jen pro tuto stránku
   (sdílené komponenty jsou v subpages.css; tady je jen to, co nepokrývají)

   (velikosti písma sdílených komponent řeší foundation centrálně; vlastní prvky stránky ≥ 16 px)
   02 Hero – popisek ve fotce
   03 Kroky – výchozí stav (karty pod sebou: bez JS, mobil, omezený pohyb)
   04 Kroky – připnutá scéna „Od fotek k penězům“ (.jtf-flow.is-scene, desktop s JS)
   05 Scéna: telefon, kalendář, cena, cesta s valníkem
   06 Náš příslib
   07 Co si připravit (koláž)
   ========================================================================== */

/* ---------- 03 Kroky – výchozí stav: kroky pod sebou ----------
   Bez JS, s omezeným pohybem a pod 1024 px je to čitelný seznam kroků přímo na stránce
   (číslo + název vlevo, úvod + body vpravo). Scéna je jen nadstavba. */

.jtf-flow {
  position: relative;
}

.jtf-progress {
  display: none;
}

.jtf-cards {
  display: grid;
  gap: var(--s-8);
}

/* bez karet – kroky stojí přímo na pozadí stránky */
.jtf-card {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--s-3) var(--s-6);
}

.jtf-card__head {
  display: grid;
  align-content: start;
  gap: var(--s-3);
}

.jtf-card__num {
  color: var(--c-idle-2);
  font-family: var(--ff-display);
  font-size: var(--fs-big-number);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.jtf-card__title {
  max-width: 14ch;
  text-wrap: balance;
}

.jtf-card__body {
  display: grid;
  align-content: start;
  gap: var(--s-3);
}

.jtf-card__intro {
  max-width: 40rem;
  color: var(--c-muted);
  text-wrap: pretty;
}

/* scéna: v klidovém stavu je vidět jen cesta s naloženým valníkem */
.jtf-stage {
  position: relative;
  margin-top: var(--s-5);
}

.jtf-flow:not(.is-scene) :is(.jtf-phone, .jtf-cal, .jtf-price) {
  display: none;
}

@media (max-width: 1023px) {
  .jtf-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .jtf-card__head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
  }

  .jtf-card__title {
    max-width: none;
  }
}

@media (max-width: 599px) {
  .jtf-card__num {
    font-size: var(--fs-h2);
  }

  .jtf-stage {
    margin-inline: calc(var(--s-2) * -1);
  }
}

/* ---------- 04 Kroky – připnutá scéna (desktop, JS přidá .is-scene) ----------
   Vlevo přepínač 01–03 a právě aktivní krok, vpravo „scéna“. Výška scény
   se vejde do okna, aby šla připnout na střed. */

.jtf-flow.is-scene {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  gap: clamp(3rem, 5vw, 6rem);
  height: min(42rem, calc(100svh - var(--s-10)));
  min-height: 34rem;
}

/* vlevo shora: drobný ukazatel kroků → text kroku hned pod ním → dole valník na své cestě */
.is-scene .jtf-flow__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--s-5);
  min-height: 0;
}

/* přepínač kroků */
.is-scene .jtf-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-1);
  max-width: 14rem;
}

.jtf-progress__btn {
  display: grid;
  gap: var(--s-1);
  width: 100%;
  min-height: 2.75rem;
  padding: 0.25rem 0 0;
  text-align: left;
  color: #566055; /* neaktivní krok zůstává čitelný (kontrast ≥ 4,5 : 1) */
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
  transition: color var(--dur) var(--ease-out);
}

.jtf-progress__btn.is-active,
.jtf-progress__btn.is-done {
  color: var(--c-ink);
}

/* lišta: hairline + zlatá výplň (scaleX řízená scrollem přes --fill) */
.jtf-progress__bar {
  position: relative;
  display: block;
  height: 2px;
  border-radius: 1px;
  background: var(--c-chip);
  overflow: hidden;
}

.jtf-progress__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-gold);
  transform: scaleX(var(--fill, 0));
  transform-origin: 0 50%;
}

.jtf-progress__btn:focus-visible {
  outline-offset: 4px;
}

@media (hover: hover) {
  .jtf-progress__btn:hover {
    color: var(--c-ink);
  }
}

/* karty přes sebe v jedné buňce */
.is-scene .jtf-cards {
  display: grid;
  gap: 0;
}

.is-scene .jtf-card {
  grid-area: 1 / 1;
  align-self: start;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  padding: 0;
  background: none;
}

/* text kroku ve scéně: velké číslo nahoře duplikovalo přepínač 01–03 – místo něj velký nadpis.
   Blok stojí dole na stejné „zemi“ jako valník (spodní okraj = linka cesty). */
.is-scene .jtf-card__num {
  display: none;
}

.is-scene .jtf-card__title {
  max-width: 11ch;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.is-scene .jtf-card__intro {
  max-width: 28rem;
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.is-scene .jtf-cards {
  margin-top: var(--s-4);
}

/* užší desktop (1024–1279): víc místa scéně, body pod sebou */
@media (max-width: 1279px) {
  .jtf-flow.is-scene {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }
}

/* scéna vpravo: bez podkladového panelu, přímo na stránce; vnitřní souřadnice v jednotkách kontejneru (cqw / cqh) */
.is-scene .jtf-stage {
  container-type: size;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- 05 Scéna ---------- */

/* Telefon (ilustrace zařízení – jediné místo s větším zaoblením, jde o předmět, ne o kartu) */
.jtf-phone {
  --phone-h: 76cqh;
  position: absolute;
  left: 5cqw;
  top: auto;
  /* spodek telefonu stojí na čáře země (hodnotu měří JS podle cesty valníku) */
  bottom: var(--jtf-ground, 3rem);
  height: var(--phone-h);
  aspect-ratio: 1 / 2;
  padding: 1.2cqh;
  border-radius: 4.6cqh;
  background: var(--c-ink);
  z-index: 1;
}

.jtf-phone__screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 3.4cqh;
  background: var(--c-chip);
  overflow: hidden;
}

.jtf-phone__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
  padding: 1.75rem 1rem 0.75rem;
  border-bottom: 1px solid var(--hairline);
  background: var(--c-white);
}

/* avatar = zlatá dlaždice s třemi trámy z loga */
/* avatar v chatu = syn (na stránce O nás vyřizuje domluvu přes WhatsApp) */
.jtf-phone__avatar {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  background: #3f342b;
}

.jtf-phone__name {
  overflow: hidden;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jtf-chat {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.jtf-chat__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
}

.jtf-msg {
  position: relative;
  max-width: 86%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r);
  line-height: 1.35;
  text-wrap: pretty;
}

.jtf-msg--me {
  align-self: flex-end;
  background: var(--c-ink);
  color: var(--c-white);
}

.jtf-msg--them {
  align-self: flex-start;
  background: var(--c-white);
  color: var(--c-ink);
}

.jtf-msg--photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
  width: 86%;
  padding: 0.25rem;
}

.jtf-msg--photos img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  object-fit: cover;
}

.jtf-msg__tick {
  display: inline-flex;
  vertical-align: -0.2em;
  margin-left: 0.5rem;
  color: var(--c-gold-soft);
}

.jtf-msg__tick svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Karty vpravo od telefonu: kalendář (krémový) a cena (tmavá) přes sebe */
.jtf-cal,
.jtf-price {
  position: absolute;
  right: 5cqw;
  width: clamp(17.5rem, 46cqw, 21rem);
  border-radius: var(--r);
}

.jtf-cal {
  top: 7cqh;
  padding: 1.25rem;
  background: var(--c-cream);
}

.jtf-cal__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--s-2);
  margin-bottom: var(--s-2);
  line-height: 1.3;
}

.jtf-cal__title {
  font-weight: var(--fw-medium);
}

.jtf-cal__month {
  color: var(--c-muted-2);
}

.jtf-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.125rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.jtf-cal__grid > span {
  display: grid;
  place-items: center;
  height: min(2rem, 4.6cqh);
  border-radius: var(--r);
  line-height: 1;
}

.jtf-cal__grid > .jtf-cal__wd {
  color: var(--c-muted-2);
}

.jtf-cal__grid > .is-today {
  background: rgba(5, 17, 7, 0.06);
}

.jtf-cal__grid > .is-picked {
  background: var(--c-gold);
  color: var(--c-ink);
  font-weight: var(--fw-medium);
  transform: rotate(-4deg);
}

.jtf-cal__foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--s-2);
  padding-top: 0.75rem;
  border-top: 1px solid var(--hairline);
  color: var(--c-brown);
  font-weight: var(--fw-medium);
}

.jtf-cal__foot svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

.jtf-price {
  top: auto;
  bottom: var(--jtf-ground, 3rem); /* karta ceny stojí na stejné čáře jako telefon */
  z-index: 2;
  display: grid;
  gap: 0.25rem;
  padding: 1.25rem 1.5rem 1.5rem;
  background: var(--c-ink);
  color: var(--c-white);
}

.jtf-price__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
}

.jtf-price__label {
  color: var(--c-on-dark-muted);
}

.jtf-price__chip {
  padding: 0.125rem 0.5rem;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.1);
  color: var(--c-on-dark-muted);
  line-height: 1.4;
}

.jtf-price__value {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.jtf-price__row {
  color: var(--c-on-dark-muted);
}

.jtf-price__paid {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--s-2);
  padding-top: var(--s-1);
  font-weight: var(--fw-medium);
}

.jtf-price__check {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r);
  background: var(--c-gold);
  color: var(--c-ink);
  transform: rotate(-4deg);
}

.jtf-price__check svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Cesta s valníkem (SVG) – v klidu pod kartami, ve scéně dole přes celou šířku */
.jtf-road {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.is-scene .jtf-road {
  margin-top: auto;
}

.jtf-road__ground {
  fill: none;
  stroke: rgba(5, 17, 7, 0.16);
  stroke-width: 1.5;
}

.jtf-road__tufts {
  fill: none;
  stroke: rgba(5, 17, 7, 0.22);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* valník ve stylu náklaďáku z homepage: antracit, žlutá ruka, oranžová světla, dřevo */
.jtf-truck,
.jtf-beams {
  filter: drop-shadow(0 4px 4px rgba(5, 17, 7, 0.16));
}

.jtf-truck__body {
  fill: #303336;
}

.jtf-truck__dark {
  fill: #1c1e20;
}

.jtf-truck__tyre {
  fill: #18191a;
}

.jtf-truck__rim {
  fill: #8f969b;
}

.jtf-truck__glass {
  fill: #5d6870;
}

.jtf-truck__glint {
  fill: rgba(255, 255, 255, 0.16);
}

.jtf-truck__amber {
  fill: #f0a91c;
}

.jtf-truck__crane {
  fill: #e9a823;
}

.jtf-truck__tail {
  fill: #c2412d;
}

.jtf-truck__fender {
  fill: none;
  stroke: #1c1e20;
  stroke-width: 4;
}

/* trámy: teplé dřevo jako náklad na homepage, čelo světlejší */
.jtf-beam {
  fill: #9a6a3c;
}

.jtf-beam__end {
  fill: #c99a5f;
}

/* ---------- 06 Náš příslib ---------- */

.jtf-promise__grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 5fr);
  gap: var(--s-6) clamp(3rem, 7vw, 8rem);
  align-items: center;
}

.jtf-promise__text {
  max-width: 22ch;
  color: var(--c-white);
  text-wrap: pretty;
}

.jtf-promise__media {
  width: 100%;
  max-width: 30rem;
  justify-self: end;
}

@media (max-width: 1023px) {
  .jtf-promise__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .jtf-promise__media {
    --ratio: 4 / 3 !important;
    max-width: none;
    justify-self: stretch;
  }
}

/* ---------- 07 Co si připravit ---------- */

.jtf-prep__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  gap: var(--s-6) clamp(3rem, 7vw, 8rem);
  align-items: center;
}

.jtf-prep__body > .h2 {
  max-width: 16ch;
}

.jtf-prep__body > .prose {
  margin-top: var(--s-3);
}

.jtf-prep__body > .prep-chat {
  margin-top: var(--s-5);
}

/* ---------- Ukázka SMS: rozměr, lokalita, stav ---------- */

.prep-chat {
  max-width: 27rem;
  padding: var(--s-2) var(--s-2) var(--s-2);
  border-radius: 1.5rem;
  background: var(--c-cream);
}

/* hlavička jako v telefonu */
.prep-chat__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--s-2);
  padding: 0 var(--s-1) var(--s-2);
}

.prep-chat__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-gold);
  font-family: var(--ff-display);
  font-weight: var(--fw-medium);
}

.prep-chat__head strong {
  display: block;
  font-weight: var(--fw-medium);
  line-height: 1.3;
}

.prep-chat__head small {
  display: block;
  color: var(--c-muted-2);
  font-size: var(--fs-body);
  line-height: 1.3;
}

.prep-chat__thread {
  display: grid;
  gap: var(--s-1);
}

.prep-chat__row {
  display: grid;
  justify-items: start;
}

.prep-chat__row--me {
  justify-items: end;
}

.prep-chat__bubble {
  max-width: 21rem;
  padding: 0.75rem 1rem;
  border-radius: 1.125rem 1.125rem 1.125rem 0.3rem;
  background: var(--c-white);
  color: var(--c-ink);
  line-height: 1.4;
}

.prep-chat__row--me .prep-chat__bubble {
  border-radius: 1.125rem 1.125rem 0.3rem 1.125rem;
  background: var(--c-gold);
}

.prep-chat__tag {
  margin-top: 0.125rem;
  padding-right: 0.25rem;
  color: var(--c-muted-2);
}

/* „píše…“ – tři tečky (jen během animace) */
.prep-chat__row--typing {
  display: none;
}

.prep-chat__row--typing .prep-chat__bubble {
  display: flex;
  gap: 0.25rem;
  padding-block: 1rem;
}

.prep-chat__row--typing span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--c-muted-2);
  animation: prep-dot 1s infinite ease-in-out;
}

.prep-chat__row--typing span:nth-child(2) { animation-delay: 0.15s; }
.prep-chat__row--typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes prep-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-0.25rem); opacity: 1; }
}

/* pole pro psaní – jen s JS, bez něj je vidět hotová konverzace */
.prep-chat__composer {
  display: none;
}

.prep-chat.is-live {
  display: flex;
  flex-direction: column;
}

.prep-chat.is-live .prep-chat__composer {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-top: auto;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-radius: 999px;
  background: var(--c-white);
}

.prep-chat__input {
  flex: 1;
  min-width: 0;
  min-height: 1.5em;
  overflow: hidden;
  color: var(--c-ink);
  white-space: nowrap;
  text-overflow: clip;
}

.prep-chat__input:empty::before {
  content: "Napište zprávu…";
  color: var(--c-muted-2);
}

.prep-chat__input.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: var(--c-gold);
  animation: prep-caret 0.8s steps(1) infinite;
}

@keyframes prep-caret {
  50% { opacity: 0; }
}

.prep-chat__send {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--c-chip);
  color: var(--c-ink);
  transition: background-color 0.25s var(--ease-out), transform 0.35s var(--ease-spring);
}

.prep-chat__send svg {
  width: 1rem;
  height: 1rem;
  transform: rotate(-90deg);
}

.prep-chat__send.is-ready {
  background: var(--c-gold);
}

.prep-chat__send.is-sent {
  transform: scale(0.85);
}

/* během animace: zprávy čekají, než se „odešlou“ */
.prep-chat.is-live [data-chat-msg]:not(.is-in) {
  display: none;
}

.prep-chat.is-live .prep-chat__row--typing.is-in {
  display: grid;
}

/* ---------- Hledáček: tři fotky se „cvaknou“ jedna po druhé ---------- */

.jtf-shots {
  min-width: 0;
}

.jtf-shots__frame {
  position: relative;
  border-radius: var(--r);
  overflow: clip;
  background: #2a231c;
}

.jtf-shots__slides {
  display: grid;
  gap: var(--s-2);
}

.jtf-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* hledáček, flash, zaostření a počítadlo jsou jen s JS */
.jtf-shots__flash,
.jtf-shots__af,
.jtf-shots__corner,
.jtf-shots__hint,
.jtf-shots__tabs {
  display: none;
}

.jtf-shots.is-ready .jtf-shots__frame {
  aspect-ratio: 8 / 5;
}

.jtf-shots.is-ready .jtf-shots__slides {
  display: block;
  position: absolute;
  inset: 0;
}

.jtf-shots.is-ready .jtf-shot {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

.jtf-shots.is-ready .jtf-shot img {
  height: 100%;
  object-fit: cover;
}

.jtf-shots.is-ready .jtf-shot.is-active {
  visibility: visible;
  z-index: 2;
}

.jtf-shots.is-ready .jtf-shot.is-leaving {
  visibility: visible;
  z-index: 1;
}

.jtf-shots.is-ready .jtf-shot.is-entering {
  animation: jtf-shot-in 0.9s var(--ease-in-out) both;
}

.jtf-shots.is-ready .jtf-shot.is-entering img {
  animation: jtf-shot-zoom 1.1s var(--ease-out) both;
}

@keyframes jtf-shot-in {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes jtf-shot-zoom {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

.jtf-shots.is-ready .jtf-shots__flash {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.jtf-shots__flash.is-fire {
  animation: jtf-flash 0.7s var(--ease-out) both;
}

@keyframes jtf-flash {
  0%   { opacity: 0.8; }
  100% { opacity: 0; }
}

/* zaostřovací rámeček uprostřed */
.jtf-shots.is-ready .jtf-shots__af {
  display: block;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: clamp(4rem, 10%, 6.5rem);
  aspect-ratio: 1;
  margin: calc(clamp(4rem, 10%, 6.5rem) / -2) 0 0 calc(clamp(4rem, 10%, 6.5rem) / -2);
  border: 1.5px solid var(--c-gold);
  border-radius: 0.375rem;
  opacity: 0;
  pointer-events: none;
}

.jtf-shots__af.is-fire {
  animation: jtf-af 1.1s var(--ease-out) both;
}

@keyframes jtf-af {
  0%   { opacity: 0; transform: scale(1.7); }
  35%  { opacity: 1; transform: scale(1); }
  75%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* rohy hledáčku */
.jtf-shots.is-ready .jtf-shots__corner {
  display: block;
  position: absolute;
  z-index: 3;
  width: 1.5rem;
  height: 1.5rem;
  border: 0 solid rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

.jtf-shots.is-ready .jtf-shots__corner--tl { left: var(--s-2); top: var(--s-2); border-width: 2px 0 0 2px; }
.jtf-shots.is-ready .jtf-shots__corner--tr { right: var(--s-2); top: var(--s-2); border-width: 2px 2px 0 0; }
.jtf-shots.is-ready .jtf-shots__corner--bl { left: var(--s-2); bottom: var(--s-2); border-width: 0 0 2px 2px; }
.jtf-shots.is-ready .jtf-shots__corner--br { right: var(--s-2); bottom: var(--s-2); border-width: 0 2px 2px 0; }

.jtf-shots.is-ready .jtf-shots__hint {
  display: block;
  margin-top: var(--s-2);
  color: var(--c-muted);
  min-height: 1.5em;
}

.jtf-shots.is-ready .jtf-shots__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.jtf-shots__tab {
  position: relative;
  padding: var(--s-2) 0 0;
  background: none;
  border: 0;
  color: var(--c-muted-2);
  font: inherit;
  font-weight: var(--fw-medium);
  text-align: left;
  cursor: pointer;
  transition: color 0.3s var(--ease-out);
}

.jtf-shots__tab:hover,
.jtf-shots__tab.is-active {
  color: var(--c-ink);
}

.jtf-shots__tab:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 4px;
  border-radius: 2px;
}

.jtf-shots__n {
  font-family: var(--ff-display);
  font-variant-numeric: tabular-nums;
  color: var(--c-gold);
  margin-right: 0.25rem;
}

/* ukazatel: pruh nad popiskem, u aktivní fotky se plní do dalšího „cvaknutí“ */
.jtf-shots__bar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: 2px;
  background: var(--c-chip);
  overflow: hidden;
}

.jtf-shots__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
}

.jtf-shots__tab.is-active .jtf-shots__bar::after {
  transform: scaleX(1);
}

.jtf-shots.is-playing .jtf-shots__tab.is-active .jtf-shots__bar::after {
  animation: jtf-bar var(--shot-time, 4.5s) linear both;
}

@keyframes jtf-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (max-width: 1023px) {
  .jtf-prep__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jtf-shots.is-ready .jtf-shot.is-entering,
  .jtf-shots.is-ready .jtf-shot.is-entering img,
  .jtf-shots__flash.is-fire,
  .jtf-shots__af.is-fire {
    animation: none;
  }
}