/* ==========================================================================
   MR FITNESS – stroj.css
   Stránka u stroje (cíl QR kódu). Načítá se AŽ ZA style.css, odkud bere
   proměnné, reset, .container a .btn – proto tu nejsou barvy natvrdo.

   Sazba je záměrně větší než na webu: stránku čte člověk vestoje u stroje,
   telefon drží dál od očí a často má zpocené ruce.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hlavička a patička – plná navigace webu tu schválně není
   -------------------------------------------------------------------------- */

/* Hlavička NENÍ fixní (na rozdíl od webu): na malém displeji je každý
   ukrojený řádek znát a tady se nikam neskáče přes kotvy. */
.shead {
  border-bottom: 1px solid var(--c-border);
  background: rgba(10, 10, 12, .75);
}

.shead__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
}

.shead__logo img {
  width: 132px;
  height: auto;
}

.sfooter {
  margin-top: 48px;
  border-top: 1px solid var(--c-border);
  padding-block: 20px;
  color: var(--c-muted-2);
  font-size: .8rem;
}

.sfooter__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
}

.odkaz {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.odkaz:hover {
  color: var(--c-accent-300);
}

/* --------------------------------------------------------------------------
   2. Záhlaví stránky stroje
   -------------------------------------------------------------------------- */
.stroj {
  padding-block: 28px 8px;
}

.stroj__kat {
  color: var(--c-accent);
  font-family: var(--f-body);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.stroj__nazev {
  margin-top: 6px;
  font-family: var(--f-head);
  /* Název musí být čitelný na krok od telefonu, proto i na mobilu velký. */
  font-size: clamp(2.4rem, 11vw, 4rem);
  line-height: .95;
  text-transform: uppercase;
}

.stroj__uvod {
  margin-top: 14px;
  max-width: 62ch;
  color: var(--c-muted);
  font-size: 1.02rem;
}

/* --------------------------------------------------------------------------
   3. Fotka
   -------------------------------------------------------------------------- */
.stroj__foto {
  margin-top: 26px;
}

.stroj__foto img {
  width: 100%;
  /* Fotky strojů jsou na výšku a v původním poměru by na mobilu vytlačily
     celý návod pod okraj obrazovky. Rám má proto pevný poměr 3:4 a fotka
     se do něj ořízne (cover). Contain tu byl dřív a nechával po stranách
     černé pruhy – vypadalo to jako chyba. Až se stroje přefotí, foťte je
     na výšku a stroj mějte ve středu záběru, ořez bere z horní a dolní
     hrany. */
  aspect-ratio: 3 / 4;
  max-height: 62vh;
  object-fit: cover;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #000;
}

.stroj__foto-chybi {
  display: grid;
  place-items: center;
  /* Schválně nízký rámeček, ne poměr 3:4 jako u fotky: dokud fotka není,
     nemá prázdné místo vytlačit návod pod okraj obrazovky. */
  min-height: 140px;
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-muted-2);
  font-size: .86rem;
}

.stroj__foto-pozn {
  margin-top: 8px;
  color: var(--c-muted-2);
  font-size: .78rem;
}

/* --------------------------------------------------------------------------
   4. Karty s postupem
   -------------------------------------------------------------------------- */
.stroj__kroky {
  display: grid;
  gap: 16px;
  margin-top: 26px;
}

.karta {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  padding: 20px 20px 22px;
}

.karta--pozor {
  border-color: rgba(255, 38, 0, .38);
  background: linear-gradient(180deg, rgba(255, 38, 0, .10), rgba(255, 38, 0, 0) 60%), var(--c-surface);
}

.karta__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-head);
  font-size: 1.5rem;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.karta__num,
.karta__ikona {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  font-family: var(--f-body);
  font-size: .9rem;
  font-weight: 800;
  line-height: 1;
}

.karta__list {
  margin: 0;
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.karta__list li {
  position: relative;
  padding-left: 22px;
  font-size: 1rem;
  line-height: 1.55;
}

.karta__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
}

.karta--pozor .karta__list li::before {
  background: var(--c-accent-300);
}

/* --------------------------------------------------------------------------
   4b. Seznam strojů (/stroje)
   -------------------------------------------------------------------------- */
.seznam {
  margin-top: 34px;
}

.seznam__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-head);
  font-size: 1.6rem;
  text-transform: uppercase;
}

.seznam__pocet {
  color: var(--c-muted-2);
  font-family: var(--f-body);
  font-size: .78rem;
  font-weight: 800;
}

.seznam__grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  /* Dlaždice nesmí být užší než nejdelší název stroje ("Veslovací trenažer"),
     jinak se na dvou sloupcích láme na tři řádky. */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.seznam__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}

.seznam__item:hover {
  border-color: var(--c-accent);
  background: var(--c-surface-2);
}

.seznam__nazev {
  font-weight: 600;
}

.seznam__sipka {
  color: var(--c-accent);
  font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   5. Video a doložka
   -------------------------------------------------------------------------- */
.stroj__video {
  margin-top: 26px;
}

.stroj__video video {
  width: 100%;
  margin-top: 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #000;
}

.stroj__disclaimer {
  margin-top: 26px;
  color: var(--c-muted-2);
  font-size: .84rem;
}

/* --------------------------------------------------------------------------
   6. Od 992 px – fotka vlevo, návod vpravo
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .stroj {
    padding-block: 44px 8px;
  }

  .stroj__obsah {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px;
    align-items: start;
    margin-top: 30px;
  }

  .stroj__foto,
  .stroj__kroky {
    margin-top: 0;
  }

  /* Fotka zůstane na očích, i když se čte spodní karta. */
  .stroj__foto {
    position: sticky;
    top: 24px;
  }

  .stroj__foto img {
    max-height: none;
  }
}