/* ---- clanok.css — shared layout for /inspiracia articles ----------------------------------
   Hand-written, NOT produced by _externalize-inline.cjs. Every article part links it directly:
     <link rel="stylesheet" href="assets/css/pages/clanok.css">
   assemble stamps the ?v= hash on the built page, the same way it does for pages/<slug>.css.

   Why shared and not per-slug: the blog runs at roughly 18 articles a year
   (context/sessions/2026-08-24-backend-burza-mozgov.md). An inline <style> in each part would
   externalise to pages/<slug>.css and duplicate this block once per article, so a change to
   article typography would mean editing eighteen files that nothing keeps in step.

   The prose rules deliberately mirror .lg-doc in cookies.css / gdpr.css — same body size, line
   height and colour. An article is a document; it should not read in a different typeface from
   the legal pages. What is NOT shared: .lg-doc is 760px and has no photograph, no lead and no
   step list. Those are the article-only pieces below.
   ------------------------------------------------------------------------------------------ */

.cl-doc { max-width: 720px; }

/* Lead paragraph — one size up from body, ink rather than muted, so the first thing the eye
   lands on after the <h1> is the promise of the article and not a wall of grey. */
.cl-lead { font-family: var(--body); font-size: clamp(17px,2vw,19px); line-height: 1.62; letter-spacing: -0.2px; color: var(--ink); margin: 0; }

.cl-doc h2 { font-family: var(--display); font-weight: 500; font-size: clamp(22px,3vw,30px); line-height: 1.16; letter-spacing: -0.4px; color: var(--ink); margin: 54px 0 0; }
.cl-doc h2:first-child { margin-top: 0; }
.cl-doc h3 { font-family: var(--body); font-weight: 600; font-size: 16px; line-height: 1.4; letter-spacing: 0; color: var(--ink); margin: 32px 0 0; }
.cl-doc p { font-family: var(--body); font-size: 16px; line-height: 1.72; letter-spacing: -0.1px; color: var(--muted); margin: 16px 0 0; }
.cl-doc ul { margin: 14px 0 0; padding-left: 22px; }
.cl-doc li { font-family: var(--body); font-size: 16px; line-height: 1.72; letter-spacing: -0.1px; color: var(--muted); margin: 9px 0 0; }
.cl-doc strong { color: var(--ink); font-weight: 600; }
.cl-doc a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold-soft); transition: color .2s var(--ease); }

/* The one rule the whole article hangs on. Pulled out of the prose so it cannot be skim-read
   past — it is the difference between a saved tablecloth and a ruined one. */
.cl-rule { margin: 26px 0 0; padding: 20px 24px; background: var(--cream); border-left: 3px solid var(--gold); border-radius: 3px; }
.cl-rule p { margin: 0; color: var(--ink); }

/* Numbered first-aid steps. <ol> restyled rather than a grid: it has to stay an ordered list
   for a screen reader, and the order is the content. */
.cl-steps { list-style: none; counter-reset: cl; margin: 20px 0 0; padding: 0; }
.cl-steps li { position: relative; counter-increment: cl; padding-left: 44px; margin: 18px 0 0; font-family: var(--body); font-size: 16px; line-height: 1.72; letter-spacing: -0.1px; color: var(--muted); }
.cl-steps li::before { content: counter(cl,decimal-leading-zero); position: absolute; left: 0; top: 2px; font-family: var(--display); font-size: 15px; color: var(--gold); letter-spacing: 0.5px; }

/* One stain per block, so the reader finds "červené víno" by scanning and stops reading. */
.cl-stain { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); }
.cl-stain:first-child { padding-top: 0; border-top: 0; }
.cl-stain h3 { margin: 0; }
.cl-stain p { margin: 10px 0 0; }

/* The don't-do list. Same shape as the stain blocks but tighter, and the marker is a rule
   rather than a number — these are not steps and must not look like them. */
.cl-dont { list-style: none; margin: 22px 0 0; padding: 0; }
.cl-dont li { position: relative; padding-left: 26px; margin: 12px 0 0; font-family: var(--body); font-size: 16px; line-height: 1.72; letter-spacing: -0.1px; color: var(--muted); }
.cl-dont li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--gold); }

/* Full-bleed photograph between the header and the text. Fixed aspect so the page does not
   jump while it loads; width/height on the <img> itself is what seo:validate checks. */
.cl-photo { margin: 0; }
.cl-photo img { width: 100%; height: clamp(240px,42vw,460px); object-fit: cover; border-radius: 3px; display: block; }
/* At 1440 px the band is 2.42:1 and a 1.79:1 photograph loses a quarter of its height, split
   evenly — which beheaded the candle flame in clanok-gobelin-skvrny.jpg. This modifier keeps the
   top of the photograph and takes the loss from the bottom instead. Below ~700 px the band is
   narrower than the photograph, the crop is sideways, and this has no effect. */
.cl-photo--keep-top img { object-position: 50% 12%; }
.cl-photo figcaption { font-family: var(--body); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-top: 12px; }

/* Byline / meta line under the <h1>. */
.cl-meta { font-family: var(--body); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); margin: 0 0 6px; }