/* ====== Novinka: Správne cvičenia pred operáciou srdca (scoped .cvik) ======
   Interaktívny komponent vykresľovaný do tela článku cez js/cvicenia.js.
   Načítané len na stránke noviniek (novinky/index.html). */
.cvik { --cvik-blue:#2B46A2; --cvik-red:#D32821; display:block; }

/* Dve jemné pozadia – horná (text) a spodná (taby) zóna */
.cvik-zone { border-radius:18px; padding:clamp(22px,4vw,44px); margin-top:30px; }
.cvik-zone--intro { background:#f0f4ff; border:1px solid #d9e1f6; margin-top:0; }
.cvik-zone--exercises { background:#fef4f3; border:1px solid #f3d6d3; margin-top:26px; }
.cvik-zone__label { display:block; text-align:center; font-size:.82rem; font-weight:600; letter-spacing:.8px; text-transform:uppercase; margin-bottom:18px; }
.cvik-zone--intro .cvik-zone__label { color:var(--cvik-blue); }
.cvik-zone--exercises .cvik-zone__label { color:var(--cvik-red); }

.cvik-intro { background:transparent; }
.cvik-intro h2 { color:var(--cvik-blue); font-size:clamp(1.3rem,2.6vw,1.9rem); margin:0 0 18px; font-weight:700; }
.cvik-intro h3 { color:var(--cvik-red); font-size:1.15rem; margin:26px 0 10px; font-weight:600; }
.cvik-intro p { line-height:1.8; margin:0 0 14px; color:#2a2a35; }
.cvik-intro ul { line-height:1.8; margin:0 0 14px; padding-left:22px; color:#2a2a35; list-style:disc; }
.cvik-intro li { margin-bottom:6px; }
.cvik-intro__benefits { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin:18px 0 6px; padding:0; list-style:none; }
.cvik-intro__benefits li { background:linear-gradient(135deg,#2B46A2,#3a5bc7); color:#fff; padding:16px 18px; border-radius:12px; font-weight:500; margin:0; display:flex; align-items:center; gap:10px; line-height:1.4; }
.cvik-intro__benefits li::before { content:"♥"; font-size:1.2rem; }
.cvik-intro__authors { font-style:italic; color:#666; font-size:.92rem; margin-top:22px; }

/* Odkazy na polohy (taby) */
.cvik-tabs-sentinel { height:1px; }
.cvik-links { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:0 0 4px; position:sticky; top:0; z-index:60; background:#fef4f3; padding:12px 0; transition:box-shadow .2s ease, padding .2s ease; }
.cvik-links.is-stuck { box-shadow:0 8px 18px rgba(0,0,0,.12); }
.cvik-link { display:flex; align-items:center; gap:12px; text-align:left; background:#fff; border:2px solid #e3e7f2; border-radius:14px; padding:16px 18px; cursor:pointer; font-family:inherit; font-size:1rem; color:var(--cvik-blue); font-weight:600; transition:border-color .2s, box-shadow .2s, transform .15s; }
.cvik-link:hover { border-color:var(--cvik-blue); box-shadow:0 6px 18px rgba(43,70,162,.16); }
.cvik-link.is-active { background:var(--cvik-blue); color:#fff; border-color:var(--cvik-blue); box-shadow:0 8px 22px rgba(43,70,162,.3); }
.cvik-link__num { flex-shrink:0; width:34px; height:34px; border-radius:50%; background:#eef1fa; color:var(--cvik-blue); display:flex; align-items:center; justify-content:center; font-weight:700; }
.cvik-link.is-active .cvik-link__num { background:rgba(255,255,255,.25); color:#fff; }

/* Galéria cvikov */
.cvik-steps { margin-top:24px; }
.cvik-step { display:none; }
.cvik-step.is-active { display:block; animation:cvikSlide .4s ease; }
@keyframes cvikSlide { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
.cvik-step__head { display:flex; align-items:baseline; gap:12px; margin:6px 0 20px; }
.cvik-step__head h3 { color:var(--cvik-blue); font-size:1.45rem; margin:0; font-weight:700; }
.cvik-ex { background:#fff; border-radius:15px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,.07); border:1px solid #eef0f6; margin-bottom:22px; display:grid; grid-template-columns:minmax(0,360px) 1fr; }
.cvik-ex__gallery { display:flex; flex-wrap:wrap; gap:6px; padding:10px; background:#f4f6fb; align-content:flex-start; }
.cvik-ex__gallery img { width:calc(50% - 3px); aspect-ratio:4/5; object-fit:cover; border-radius:8px; cursor:pointer; transition:transform .2s, box-shadow .2s; background:#dfe3ee; margin:0; }
.cvik-ex__gallery img:only-child { width:100%; aspect-ratio:4/3; }
.cvik-ex__gallery img:hover { transform:scale(1.02); box-shadow:0 4px 12px rgba(0,0,0,.2); }
.cvik-ex__body { padding:22px 26px; }
.cvik-ex__body h4 { color:var(--cvik-blue); font-size:1.2rem; margin:0 0 8px; font-weight:700; }
.cvik-ex__meta { display:inline-block; background:#fdecea; color:var(--cvik-red); font-size:.82rem; font-weight:600; padding:5px 12px; border-radius:20px; margin-bottom:12px; }
.cvik-ex__body p { line-height:1.75; color:#2a2a35; margin:0; }

/* Lightbox */
.cvik-lb { position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:9999; }
.cvik-lb.is-open { display:flex; }
.cvik-lb__img { max-width:92vw; max-height:88vh; border-radius:8px; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.cvik-lb__btn { position:absolute; background:rgba(255,255,255,.14); color:#fff; border:none; width:54px; height:54px; border-radius:50%; font-size:2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.cvik-lb__btn:hover { background:rgba(255,255,255,.3); }
.cvik-lb__close { top:22px; right:22px; font-size:1.8rem; }
.cvik-lb__prev { left:22px; top:50%; transform:translateY(-50%); }
.cvik-lb__next { right:22px; top:50%; transform:translateY(-50%); }
.cvik-lb__counter { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:#fff; font-size:.95rem; background:rgba(0,0,0,.4); padding:5px 14px; border-radius:20px; }

@media (max-width:880px) {
  .cvik-links { grid-template-columns:repeat(2,1fr); }
  .cvik-ex { grid-template-columns:1fr; }
  .cvik-ex__gallery { flex-direction:row; }
  /* Po prilepení na mobile/tablet: len čísla 1–4 v jednom riadku */
  .cvik-links.is-stuck { grid-template-columns:repeat(4,1fr); gap:8px; padding:10px 8px; }
  .cvik-links.is-stuck .cvik-link { justify-content:center; gap:0; padding:9px 4px; }
  .cvik-links.is-stuck .cvik-link__text { display:none; }
}
@media (max-width:560px) {
  .cvik-links { grid-template-columns:1fr; }
  .cvik-lb__prev { left:8px; } .cvik-lb__next { right:8px; }
  .cvik-lb__btn { width:46px; height:46px; }
}