/* TCM Kolečka – jedna sada textů, dvě rozložení.
   Přepnutí na mobilní variantu: @media (max-width: 767px) dole. */

.tcmk {
  --tcmk-active: #c32d2a;
  --tcmk-idle: #B59D7D;
  --tcmk-idle-hover: #c2ab8a;
  --tcmk-text: #7a7a7a;
  --tcmk-more-bg: #e8ddd0;
  --tcmk-more-bg-hover: #d9cabb;
  --tcmk-more-text: #9e8d73;
  --tcmk-size: 130px;
  --tcmk-dir: 1;
  --tcmk-font-heading: 'Cormorant Garamond', Georgia, serif;
  --tcmk-font-body: 'Nunito Sans', sans-serif;
  font-family: var(--tcmk-font-body);
  max-width: 900px;
  margin: 0 auto;
  padding: 2.5rem 1rem;
  box-sizing: border-box;
  container-type: inline-size;
}
.tcmk *, .tcmk *::before, .tcmk *::after { box-sizing: border-box; }

/* ---------- Kolečka (desktop) ---------- */
.tcmk .tcmk-circles {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 2.5rem;
  padding: 0 1rem;
}
.tcmk .tcmk-btn {
  flex: 0 1 var(--tcmk-size);
  width: var(--tcmk-size);
  min-width: 0;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
  background: var(--tcmk-idle);
  color: #fff;
  font-family: var(--tcmk-font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  font-size: clamp(15px, 2.7cqi, 20px); /* zmenší se, když se kolečka musí smrsknout */
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  padding: 0.5rem;
  position: relative;
  transition: background 0.22s, transform 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.tcmk .tcmk-btn:nth-child(odd) { margin-top: 28px; }
.tcmk .tcmk-btn + .tcmk-btn { margin-left: -14px; }
.tcmk .tcmk-btn:focus { background: var(--tcmk-idle); color: #fff; outline: none; }
.tcmk .tcmk-btn:hover { background: var(--tcmk-idle-hover); color: #fff; transform: scale(1.07); z-index: 10; }
.tcmk .tcmk-btn.is-active,
.tcmk .tcmk-btn.is-active:hover,
.tcmk .tcmk-btn.is-active:focus { background: var(--tcmk-active); z-index: 10; }
.tcmk .tcmk-btn:focus-visible,
.tcmk .tcmk-arrow:focus-visible,
.tcmk .tcmk-nav-dot:focus-visible,
.tcmk .tcmk-more:focus-visible { outline: 2px solid var(--tcmk-active); outline-offset: 3px; }

/* ---------- Tělo ---------- */
.tcmk .tcmk-body { display: flex; align-items: center; gap: 2rem; }
.tcmk .tcmk-content { flex: 1; min-width: 0; }

/* Všechny panely leží na sobě v jedné buňce gridu ->
   výška boxu = nejdelší text, při přepínání nic neskáče. */
.tcmk .tcmk-panels,
.tcmk .tcmk-more-row { display: grid; }
.tcmk .tcmk-panel,
.tcmk .tcmk-more-slot { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.tcmk .tcmk-panel.is-active,
.tcmk .tcmk-more-slot.is-active { visibility: visible; opacity: 1; }
.tcmk .tcmk-panel.is-active,
.tcmk .tcmk-more-slot.is-active { animation: tcmk-fade 0.28s ease; }

@keyframes tcmk-fade {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tcmk .tcmk-text {
  font-family: var(--tcmk-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--tcmk-text);
}
.tcmk .tcmk-text p { margin: 0 0 0.8em; }
.tcmk .tcmk-text p:last-child { margin-bottom: 0; }
.tcmk .tcmk-text a { color: var(--tcmk-idle); font-weight: 700; text-decoration: none; }
.tcmk .tcmk-text a:hover { text-decoration: underline; }

.tcmk .tcmk-more-row { padding-top: 1rem; }
.tcmk .tcmk-more-slot { display: flex; justify-content: flex-end; }
.tcmk .tcmk-more {
  display: inline-block;
  border-radius: 999px;
  padding: 0.5rem 1.75rem;
  font-family: var(--tcmk-font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  background: var(--tcmk-more-bg);
  color: var(--tcmk-more-text);
  text-decoration: none;
  transition: background 0.2s;
}
.tcmk .tcmk-more:hover,
.tcmk .tcmk-more:active { background: var(--tcmk-more-bg-hover); color: var(--tcmk-more-text); }

/* ---------- Šipky ---------- */
.tcmk .tcmk-arrow,
.tcmk .tcmk-arrow:hover,
.tcmk .tcmk-arrow:focus,
.tcmk .tcmk-arrow:active {
  background: none;
  border: none;
  box-shadow: none;
  outline: none;
}
.tcmk .tcmk-arrow {
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tcmk-idle);
  transition: color 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.tcmk .tcmk-arrow:hover { color: var(--tcmk-idle-hover); }
.tcmk .tcmk-arrow svg { display: block; pointer-events: none; }

/* ---------- Tablet / užší desktop ---------- */
@media (max-width: 1024px) {
  .tcmk { padding-left: 0.5rem; padding-right: 0.5rem; }
  .tcmk .tcmk-circles { padding: 0; }
  .tcmk .tcmk-body { gap: 0.75rem; }
}

/* Mobilní prvky jsou na desktopu schované */
.tcmk .tcmk-mhead,
.tcmk .tcmk-nav { display: none; }

/* ================= MOBIL ================= */
@media (max-width: 767px) {
  .tcmk { max-width: 460px; padding: 1.5rem 1rem; }

  .tcmk .tcmk-circles,
  .tcmk .tcmk-arrow { display: none; }

  .tcmk .tcmk-mhead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 2rem;
  }
  .tcmk .tcmk-dot { border-radius: 50%; background: var(--tcmk-idle); flex-shrink: 0; }
  .tcmk .tcmk-dot--tiny  { width: 18px; height: 18px; opacity: 0.55; }
  .tcmk .tcmk-dot--small { width: 34px; height: 34px; opacity: 0.75; }
  .tcmk .tcmk-dot--big {
    width: 120px; height: 120px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 8px;
  }
  .tcmk .tcmk-big-label {
    font-family: var(--tcmk-font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.25;
    color: #fff;
    text-align: center;
  }

  .tcmk .tcmk-body { display: block; }
  .tcmk .tcmk-panels { overflow: hidden; touch-action: pan-y; align-items: start; transition: height 0.3s ease; }
  .tcmk .tcmk-panel { padding-bottom: 1.75rem; }
  .tcmk .tcmk-text { text-align: center; }

  /* swipe animace: starý text odjede, nový přijede ze směru pohybu */
  .tcmk .tcmk-panel.is-active { animation: tcmk-in 0.32s ease 0.28s backwards; }
  .tcmk .tcmk-panel.is-leaving { visibility: visible; animation: tcmk-out 0.32s ease forwards; }
  .tcmk .tcmk-more-slot.is-active { animation: none; }

  .tcmk .tcmk-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 1.75rem;
  }
  .tcmk .tcmk-nav-dot,
  .tcmk .tcmk-nav-dot:hover,
  .tcmk .tcmk-nav-dot:focus {
    width: 11px; height: 11px; min-width: 0;
    padding: 0; border: none; border-radius: 50%; box-shadow: none;
    background: var(--tcmk-idle);
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .tcmk .tcmk-nav-dot.is-active { background: var(--tcmk-active); opacity: 1; transform: scale(1.2); }

  .tcmk .tcmk-more-row { padding-top: 0; }
  .tcmk .tcmk-more-slot { justify-content: center; }
}

@keyframes tcmk-in {
  from { transform: translateX(calc(40px * var(--tcmk-dir))); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes tcmk-out {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(calc(-40px * var(--tcmk-dir))); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tcmk .tcmk-panel, .tcmk .tcmk-more-slot, .tcmk .tcmk-btn { animation: none !important; transition: none !important; }
}