/* ==========================================================================
   BioRelax — blog (12. 9. 2026)
   --------------------------------------------------------------------------
   Článok je dlhý text, preto typografia na čítanie: 18 px / 1,72, riadok do
   66 znakov. Kostra je z podstránok (hero ps-hero--pas, bočná lišta s obsahom
   článku), aby blog nepôsobil ako iný web. Sklo a farbu dostávajú len boxy,
   ktoré nesú význam: „V skratke", pozvánka na metódu a výhrada.

   Načítava sa ZA podstranka.css a premium.css (podstranka.py, meta css:).
   ========================================================================== */

/* ── meta pod perexom (dátum, čas čítania) ─────────────────────────────── */
.cl-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  margin: 0; font-size: 13.5px; color: var(--br-tlmene);
}
.cl-meta > * + *::before { content: ""; display: inline-block; width: 3px; height: 3px; margin-right: 16px;
  border-radius: 50%; background: currentColor; opacity: .55; vertical-align: middle; translate: 0 -2px; }

/* hero článku: perex a meta pod sebou, nie perex | CTA */
.cl .ps-hero-spodok { grid-template-columns: minmax(0, 58ch); gap: 14px; }

/* ── telo článku ───────────────────────────────────────────────────────── */
.cl-telo { font-size: 18px; line-height: 1.72; color: var(--br-atrament); }
.cl-telo > :first-child { margin-top: 0; }
.cl-telo p { margin: 0 0 1.15em; max-width: 66ch; text-wrap: pretty; }
.cl-telo h2 {
  margin: 2.1em 0 .55em; max-width: 26ch;
  font-size: clamp(26px, 2.6vw, 34px); font-weight: 300; line-height: 1.14; letter-spacing: -.022em;
  text-wrap: balance; scroll-margin-top: 100px;
}
.cl-telo h3 { margin: 1.6em 0 .4em; font-size: 19px; font-weight: 600; line-height: 1.35; }
.cl-telo ul, .cl-telo ol { margin: 0 0 1.2em; padding-left: 1.25em; max-width: 64ch; }
.cl-telo li { margin: .35em 0; padding-left: .2em; }
.cl-telo li::marker { color: var(--br-akcent-text); }
.cl-telo ol > li::marker { font-weight: 600; font-size: .9em; }
.cl-telo a:not([class]) {
  color: var(--br-akcent-text); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .2em;
}
@media (hover: hover) { .cl-telo a:not([class]):hover { text-decoration-thickness: 2px; } }
.cl-telo strong, .cl-telo b { font-weight: 600; }
.cl-telo figure { margin: 1.9em 0; }
.cl-telo figure .ps-ram img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.cl-telo figcaption { margin-top: 10px; font-size: 13px; color: var(--br-tlmene); }

/* ── „V skratke" ───────────────────────────────────────────────────────── */
.cl-skratka { max-width: 44rem; margin: 0 0 2em; padding: 22px 24px 20px; border-radius: 22px; }
.cl-skratka > b {
  display: block; margin-bottom: .6em;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--br-akcent-text);
}
.cl-skratka ul { margin: 0; }
.cl-skratka li { font-size: 16px; line-height: 1.55; }

/* ── pozvánka na metódu uprostred článku ───────────────────────────────── */
.cl-cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 24px;
  max-width: 44rem; margin: 2.2em 0; padding: 24px 26px; border-radius: 24px;
  background: linear-gradient(100deg, rgba(191, 228, 232, .55), rgba(204, 197, 240, .55));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.cl-cta p { margin: 0; max-width: none; font-size: 15.5px; line-height: 1.55; color: var(--br-tlmene); }
.cl-cta p b { display: block; margin-bottom: 2px; font-size: 19px; font-weight: 600; color: var(--br-atrament); }
.cl-cta .dk-btn-primarny { white-space: nowrap; }

/* ── výhrada na konci ──────────────────────────────────────────────────── */
.cl-vyhrada {
  margin: 2.4em 0 0; padding-top: 1.2em;
  border-top: var(--br-linka-hr, 1px) solid var(--br-linka);
  font-size: 14px; line-height: 1.6; color: var(--br-tlmene);
}

/* ── bočná lišta článku ────────────────────────────────────────────────── */
.cl-bok-cta { display: grid; gap: 8px; padding: 20px; border-radius: 22px; }
.cl-bok-cta small {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--br-akcent-text);
}
.cl-bok-cta b { font-size: 18px; font-weight: 600; line-height: 1.3; }
.cl-bok-cta span { font-size: 13.5px; line-height: 1.5; color: var(--br-tlmene); }
.cl-bok-cta .dk-btn-primarny { justify-content: center; width: 100%; box-sizing: border-box; margin-top: 6px; }

/* ── karty článkov (súvisiace aj prehľad blogu) ────────────────────────── */
.bl-mriezka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.bl-karta {
  display: grid; grid-template-rows: auto 1fr;
  border-radius: 24px; overflow: hidden;
  background: rgba(255, 255, 255, .74);
  box-shadow: var(--br-tien-karta, 0 4px 30px rgba(51, 65, 92, .08));
  color: inherit; text-decoration: none;
  transition: translate .4s var(--br-ease), box-shadow .4s var(--br-ease);
}
.bl-karta-foto { aspect-ratio: 16 / 10; overflow: hidden; background: var(--br-papier); }
.bl-karta-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--br-ease); }
.bl-karta-telo { display: grid; align-content: start; gap: 8px; padding: 20px 22px 22px; }
.bl-karta-telo .br-kicker { margin: 0; font-size: 11px; }
.bl-karta h3 { margin: 0; font-size: 20px; font-weight: 400; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.bl-karta p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--br-tlmene); }
.bl-karta .cl-meta { margin-top: 4px; font-size: 12.5px; }
@media (hover: hover) {
  .bl-karta:hover { translate: 0 -3px; box-shadow: 0 0 0 .5px rgba(51, 65, 92, .06), 0 22px 44px -26px rgba(51, 65, 92, .38); }
  .bl-karta:hover .bl-karta-foto img { scale: 1.04; }
}
.bl-karta:focus-visible { outline: 2px solid var(--br-akcent-text); outline-offset: 3px; }
@supports (corner-shape: superellipse(1.25)) { .bl-karta { corner-shape: superellipse(1.25); } }

/* hlavný článok na prehľade — cez celú šírku, fotka vľavo */
.bl-karta.bl-hlavny { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto; }
.bl-hlavny .bl-karta-foto { aspect-ratio: auto; min-height: 340px; }
.bl-hlavny .bl-karta-telo { align-content: center; padding: clamp(24px, 3.2vw, 48px); gap: 12px; }
.bl-hlavny h3 { font-size: clamp(26px, 2.8vw, 38px); font-weight: 300; line-height: 1.12; letter-spacing: -.022em; }
.bl-hlavny p { font-size: 16px; }

.cl-suvisiace { padding: clamp(20px, 3vw, 40px) var(--br-okraj) clamp(56px, 8vw, 110px); max-width: var(--br-os); margin-inline: auto; }
.cl-suvisiace > h2 {
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  font-size: clamp(26px, 2.6vw, 34px); font-weight: 300; letter-spacing: -.022em;
}
.bl-index { padding-bottom: clamp(56px, 8vw, 110px); }

/* ── responzivita ──────────────────────────────────────────────────────── */
@media (max-width: 1000px) { .bl-mriezka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .cl-telo { font-size: 17px; line-height: 1.7; }
  .cl-telo h2 { max-width: none; font-size: clamp(24px, 7vw, 30px); }
  .cl-cta { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .cl-cta .dk-btn-primarny { justify-content: center; white-space: normal; }
  .bl-karta.bl-hlavny { grid-template-columns: minmax(0, 1fr); }
  .bl-hlavny .bl-karta-foto { aspect-ratio: 16 / 10; min-height: 0; }
}
@media (max-width: 640px) { .bl-mriezka { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .bl-karta, .bl-karta-foto img { transition: none; } }