/* ---------- 1. SEKCE ---------- */
.solve {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(340px, 46vw, 620px);
  display: grid;
  place-items: center;
  background-size: cover;
  background-position: center;
}
/* jemné ztmavení, aby žlutá držela kontrast na jakékoli fotce */
.solve::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
}

.solve__inner {
  position: relative; z-index: 2;
  /* grid: dva sloupce přesně na šířku obsahu, dvojice vždy na středu */
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;              /* "Vyřešíte" sedí na aktivní položce */
  justify-content: center;
  gap: clamp(14px, 2.6vw, 56px);
  padding-inline: clamp(16px, 4vw, 64px);
  width: 100%;
  box-sizing: border-box;
}

/* Breakdance obal shortcodu se defaultně zmenší na obsah a sedí vlevo
   → roztáhneme ho na celou šířku sekce */
.bde-shortcode:has(> .solve) {
  width: 100%;
  align-self: stretch;
}

/* ---------- 2. TYPOGRAFIE ---------- */
.solve__inner {
  --fs: clamp(30px, 5.4vw, 56px);   /* jedna velikost pro obě strany */
  --lh: 1.34;                        /* výška slotu = fs * lh          */
  --slots: 5;                        /* kolik řádků je vidět (liché!)  */
  font-size: var(--fs);
  line-height: var(--lh);
  letter-spacing: -1.12px;
}

.solve__static {
  margin: 0;
  font-weight: 500;
  color: rgba(243, 239, 129, 1);
  white-space: nowrap;
}

/* ---------- 3. ROTÁTOR ---------- */
.rotator {
  /* šířka = nejdelší položka; dřív se roztahoval do zbytku řádku,
     takže celá skupina "Vyřešíte + obor" ujížděla doleva */
  min-width: 0;
  max-width: 100%;
  height: calc(var(--fs) * var(--lh) * var(--slots));
  overflow: hidden;
  /* fade nahoře i dole — jeden mask místo počítání opacity po položkách */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.35) 16%, #000 42%, #000 58%, rgba(0,0,0,.35) 84%, transparent 100%);
          mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.35) 16%, #000 42%, #000 58%, rgba(0,0,0,.35) 84%, transparent 100%);
}

.rotator__list {
  margin: 0; padding: 0; list-style: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform var(--dur, 700ms) cubic-bezier(.66,0,.24,1);
}
.rotator__list[data-jump] { transition: none; }   /* tichý skok při zacyklení */

.rotator__item {
  height: calc(var(--fs) * var(--lh));
  display: flex; align-items: center;
  white-space: nowrap;
  font-weight: 500;
  color: rgba(243, 239, 129, 0.6);
  transition: color 420ms ease, font-weight 420ms ease, opacity 420ms ease;
}
.rotator__item.is-active {
  font-weight: 500;
  color: rgba(243, 239, 129, 1);
}

/* krátké varianty textu pro mobil */
.rotator__item .is-short { display: none; }
@media (max-width: 640px) {
  .rotator__item .is-full  { display: none; }
  .rotator__item .is-short { display: inline; }
  .solve__inner { --fs: clamp(26px, 8.2vw, 44px); gap: 12px; }
}

/* ---------- 4. PŘÍSTUPNOST ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .rotator__list { transition: none; }
  .rotator__item { transition: none; }
}

/* ---------- 5. RESPONZIVITA ---------- */
/* Měníme proměnnou --fs, ne font-size: z --fs se počítá i výška slotů
   a okna rotátoru, jinak by text a řádky nesouhlasily. */
@media (max-width: 479px) {
  .solve__inner { --fs: 25.97px; }
}