/*!
 * RF SPIN Design System V2 — child theme skin
 * Souvisí s rfspin_dev Elementor Kit (id=1) — `RFS *` custom_colors a custom_typography.
 * Source: /home/tomas/elementormcp/rfspin-sekce/rfspin_design_system_v2.html
 * Sekce 1 (tokens) + 1b (typo) + 3 (atoms) + 4 (data-slot CSS) + 5 (block family) + 6 (grids) + tier card.
 * Sandbox chrome SKIPPED.
 */

/* =====================================================================
   1. BRAND TOKENS (would live in :root of rfspin-skin.css)
   ===================================================================== */
:root {
  /* Colors — brand red + 5 grayscale + 3 accent pastels */
  --rfs-primary:        #BB2018;
  --rfs-primary-dark:   #8C1812;  /* hover state pro primary button */
  --rfs-primary-light:  #E07770;  /* brand red pro dark contexty — kontrast 4.6:1 (AA) na #232323;
                                     použito pro eyebrow + arrow link uvnitř dark/cta block */

  /* Grayscale (5 tones + white + 1 elevated dark) */
  --rfs-dark:           #232323;  /* text strong + dark surfaces (Pillar 02 / CTA bg) */
  --rfs-dark-elev:      #2E2E2E;  /* nested surfaces uvnitř --dark blocku (data-slot, badge) */
  --rfs-text:           #232323;  /* body text — tmavá kvůli čitelnosti (tenký řez na šedém podkladu) */
  --rfs-muted:          #666B71;  /* micro-labely — AA-safe i na pink data-slotu (bylo #8F8F8F) */
  --rfs-data:           #54595F;  /* technická data: spec + data-slot header label */
  --rfs-bg-alt:         #F0F0F0;  /* section alt bg */
  --rfs-border:         #D4D4D4;  /* 1px lines + body text on dark */
  --rfs-white:          #FFFFFF;

  /* Light BG accent — 1 tone (blush). Slouží jako warm-pink surface v data-slot
     a v dark cascade (stat label → blush, attribution → blush, badge bg). */
  --rfs-blush:          #FBEFED;  /* warm pink (lightened brand red) */

  /* Typography
     8 presetů (Kit Globals) — viz Section 1.2 Type Ramp
     Base 14px, ratio ~1.333 (Perfect Fourth)
     Sizes: 11 · 13 · 14 · 18 · 25 · 32 px
     Weights v body: 400 + 600 (700 vyhrazeno UI button preset) */
  --rfs-font: 'Montserrat', system-ui, sans-serif;

  /* Radii */
  --rfs-radius-card: 10px;
  --rfs-radius-btn: 4px;
  --rfs-radius-pill: 6px;

  /* Spacing scale — 4 hodnoty sdílené pro grid gaps i vertikální spacing.
     Card paddings (40/44, 48/36, 80/48) jsou samostatná dimenze, mimo scale. */
  --rfs-space-xs:      6px;  /* atomic fine: list items, value→label, double-heading bits, stat gap */
  --rfs-space-sm:     12px;  /* block-body internal: mezi atomy v content slotu (eyebrow→title→lead→p→link) */
  --rfs-space-md:     24px;  /* section divider: thesis header→body, default grid gap, data-slot stats */
  --rfs-space-lg:     48px;  /* block-to-block stack, split grid (2-col wide gap) */

  /* Grid gap aliases — jeden scale, dvě jména. Logika "více sloupců = menší gap". */
  --rfs-gap-tight:    var(--rfs-space-sm);   /* 12px · dense grids 5+ cols */
  --rfs-gap-default:  var(--rfs-space-md);   /* 24px · standard 2-4 col grids */
  --rfs-gap-wide:     var(--rfs-space-lg);   /* 48px · 2-col s velkým content area */
}

/* =====================================================================
   1b. TYPOGRAPHY PRESETS — 8 utility classes (= Kit Globals)
       Each atom/block selektor below čerpá z těchto speců (kept inline
       for clarity, ale ekvivalent .t-* class lze použít přímo).
   ===================================================================== */
.elementor .t-micro {
  font-family: var(--rfs-font);
  font-size: 11px; font-weight: 600; line-height: 1.2;
  letter-spacing: 1px; text-transform: uppercase;
}
.elementor .t-eyebrow {
  font-family: var(--rfs-font);
  font-size: 13px; font-weight: 600; line-height: 1.2;
  letter-spacing: 1px; text-transform: uppercase;
}
.elementor .t-body {
  font-family: var(--rfs-font);
  font-size: 14px; font-weight: 400; line-height: 1.6;
  color: var(--rfs-text);
}
.elementor .t-center { text-align: center; }
.elementor .t-btn {
  font-family: var(--rfs-font);
  font-size: 14px; font-weight: 700; line-height: 1.2;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.elementor .t-lead {
  font-family: var(--rfs-font);
  font-size: 18px; font-weight: 400; line-height: 1.55;
  color: var(--rfs-dark);
}
.elementor .t-h-sm {
  font-family: var(--rfs-font);
  font-size: 18px; font-weight: 600; line-height: 1.3;
  letter-spacing: -0.3px;
}
.elementor .t-h-md {
  font-family: var(--rfs-font);
  font-size: 25px; font-weight: 600; line-height: 1.3;
  letter-spacing: -0.3px;
}
.elementor .t-h-lg {
  font-family: var(--rfs-font);
  font-size: 32px; font-weight: 600; line-height: 1.3;
  letter-spacing: -0.3px;
}


/* =====================================================================
   3. ATOMS — small primitives, jeden Elementor widget = jedna class
   ===================================================================== */

/* --- Eyebrow (s volitelným tagged pillem přes data-tag — číslo nebo zkratka) ---
   `.rfs-double-heading__small` sdílí stejnou typografii (drop redundance N5);
   pill cascade i dark cascade pokrývají oba selektory. */
.elementor .rfs-eyebrow,
.elementor .rfs-double-heading__small {
  font: 600 13px/1.2 var(--rfs-font);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rfs-primary);
  margin: 0;
}
/* Eyebrow span override: theme/Elementor cascade sets <span> to display:block
   on atomic-element descendants, which wraps the data-tag pill onto its own
   line. Force inline-flex so pill + text sit on one row. */
.elementor span.rfs-eyebrow {
  display: inline-flex;
  align-items: center;
}
.elementor .rfs-eyebrow--muted { color: var(--rfs-muted); }

/* Tagged pill přes data-tag attribute — jeden widget, žádné chainování.
   Funguje pro čísla ("01", "02"), zkratky ("API", "RF", "SDK"), i kombinace ("v3").
   Typografie = .t-micro (11/600/ls 1/upper), sjednoceno s .rfs-tier-card__tag. */
.elementor .rfs-eyebrow[data-tag]::before {
  content: attr(data-tag);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 26px;
  padding: 0 8px;
  background: var(--rfs-primary);
  color: var(--rfs-white);
  font: 600 11px/1.2 var(--rfs-font);
  letter-spacing: 1px;
  border-radius: 3px;
  margin-right: 12px;
  vertical-align: middle;
  text-transform: uppercase;
}
/* Tag-only eyebrow (prefix bez textu — eyebrow↔tag rozvázané v twigu): pill stojí
   sám, drop trailing 12px margin aby nezbýval mrtvý prostor vpravo. */
.elementor .rfs-eyebrow:empty[data-tag]::before { margin-right: 0; }

/* --- Double Heading (Hero pattern) ---
   Default: red 10px left bar + 16px padding. Modifier --no-bar dropne bar (clean text-only). */
.elementor .rfs-double-heading {
  padding-left: 16px;
  border-left: 10px solid var(--rfs-primary);
  display: flex;
  flex-direction: column;
  gap: var(--rfs-space-xs);
}
.elementor .rfs-double-heading--no-bar {
  padding-left: 0;
  border-left: 0;
}
/* .rfs-double-heading__small — typografie sdílená s .rfs-eyebrow (viz výše). */
/* base: matches .t-h-lg (Hero).
   :is(h1..h6) prefix → specificita (0,1,1) přebíjí Manufacturer theme `.man_page h1` (0,1,1) tie-break source-order. */
.elementor :is(h1, h2, h3, h4, h5, h6).rfs-double-heading__large {
  font: 600 32px/1.3 var(--rfs-font);
  letter-spacing: -0.3px;
  color: var(--rfs-dark);
  margin: 0;
  max-width: 720px;
}
/* --section variant: downsize na .t-h-md (mid-page section opener) */
.elementor .rfs-double-heading--section :is(h1, h2, h3, h4, h5, h6).rfs-double-heading__large {
  font: 600 25px/1.3 var(--rfs-font);
  letter-spacing: -0.3px;
}

/* --- Stat (value + label) --- */
.elementor .rfs-stat { display: flex; flex-direction: column; gap: var(--rfs-space-xs); }
.elementor .rfs-stat__value {
  font: 600 18px/1.3 var(--rfs-font);
  letter-spacing: -0.3px;
  color: var(--rfs-dark);
  margin: 0;
}
.elementor .rfs-stat__label {
  font: 600 11px/1.2 var(--rfs-font);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rfs-muted);
  margin: 0;
}

/* --- Badge (pill) --- Sand surface chip, žádný border. Hraje s data-slot paletou. */
/* typography matches .t-eyebrow */
.elementor .rfs-badge {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  background: var(--rfs-blush);
  border-radius: var(--rfs-radius-pill);
  font: 600 13px/1.2 var(--rfs-font);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rfs-dark);
  white-space: nowrap;
}
/* Higher-specificity override: Elementor atomic-widget base styles set the
   root <div> display to `flex` (block-level), which in a flex-column parent
   (e.g. .rfs-block__body) stretches the badge to full width. div.rfs-badge
   wins specificity → keeps it inline; align-self:flex-start ensures it shrinks
   to content even when its parent is a flex container. */
.elementor div.rfs-badge {
  display: inline-flex;
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
}
/* Uvnitř --dark / --cta blocku badge flipne: cream text na lehce zvýrazněném dark surface */
.elementor :is(.rfs-block--dark, .rfs-block--cta) .rfs-badge {
  background: var(--rfs-dark-elev);
  color: var(--rfs-blush);
}

/* --- Process Points (list s › arrow) --- */
.elementor .rfs-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rfs-space-xs);
}
/* Selectors target <li> (manual <ul> usage) AND <p> (Atomic Paragraph dropped
   into rfs-process-points Container — V2 spec authoring pattern). Frontend
   `.rfs-points > p` matches Atomic Paragraph direct children; we use descendant
   selector to survive editor Marionette wrapping. */
.elementor .rfs-points li,
.elementor .rfs-points p {
  font: 400 14px/1.6 var(--rfs-font);
  color: var(--rfs-text);
  padding-left: 24px;
  position: relative;
  margin: 0;
}
/* Bullet je CSS pseudo s SVG mask (chevron right, fill-based engineering shape) —
   same pattern jako .rfs-link arrow. currentColor přes background-color. */
.elementor .rfs-points li::before,
.elementor .rfs-points p::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 11px;
  height: 14px;
  background-color: var(--rfs-primary);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='m26.67 21.72 8.48-8.49a2 2 0 0 1 2.83 0l35.35 35.36a2 2 0 0 1 0 2.82l-35.33 35.36a2 2 0 0 1 -2.83 0l-8.48-8.49a2 2 0 0 1 0-2.82l25.43-25.46-25.45-25.46a2 2 0 0 1 0-2.82z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='m26.67 21.72 8.48-8.49a2 2 0 0 1 2.83 0l35.35 35.36a2 2 0 0 1 0 2.82l-35.33 35.36a2 2 0 0 1 -2.83 0l-8.48-8.49a2 2 0 0 1 0-2.82l25.43-25.46-25.45-25.46a2 2 0 0 1 0-2.82z'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* --- Pull Quote --- centered, decorative quote mark above (in-flow, no absolute),
   t-h-md typo. Žádné modifiery — jedna varianta. Optional __attribution sub-element. */
.elementor .rfs-pull-quote {
  text-align: center;
  font: 600 25px/1.3 var(--rfs-font);
  letter-spacing: -0.3px;
  color: var(--rfs-dark);
  margin: 0;
}
.elementor .rfs-pull-quote::before {
  content: '\201C';
  display: block;
  font: 700 64px/0.8 Georgia, 'Times New Roman', serif;
  color: var(--rfs-primary);
  opacity: 0.25;
  margin-bottom: 4px;
}

/* Sub-element: __attribution (kdo to řekl, kde to bylo otištěno) */
.elementor .rfs-pull-quote__attribution {
  display: block;
  margin-top: var(--rfs-space-lg);
  font: 600 13px/1.2 var(--rfs-font);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rfs-muted);
}

/* --- Inline Link --- matches .t-btn (sjednoceno s buttony, drop --small variant).
   Arrow je pure CSS pseudo (SVG via mask-image data URI, currentColor fill) —
   ne ASCII →, ne icon font. Animuje na hover (translateX 2px). */
.elementor .rfs-link {
  font: 700 14px/1.2 var(--rfs-font);
  color: var(--rfs-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.elementor .rfs-link::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='m7 56v-12a2 2 0 0 1 2-2h54.2l-17.45-17.46a2 2 0 0 1 0-2.82l8.48-8.49a2 2 0 0 1 2.83 0l35.35 35.36a2 2 0 0 1 0 2.82l-35.35 35.36a2 2 0 0 1 -2.83 0l-8.48-8.49a2 2 0 0 1 0-2.82l17.45-17.46h-54.2a2 2 0 0 1 -2-2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='m7 56v-12a2 2 0 0 1 2-2h54.2l-17.45-17.46a2 2 0 0 1 0-2.82l8.48-8.49a2 2 0 0 1 2.83 0l35.35 35.36a2 2 0 0 1 0 2.82l-35.35 35.36a2 2 0 0 1 -2.83 0l-8.48-8.49a2 2 0 0 1 0-2.82l17.45-17.46h-54.2a2 2 0 0 1 -2-2z'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform 0.15s;
}
.elementor .rfs-link:hover { text-decoration: underline; }
.elementor .rfs-link:hover::after { transform: translateX(4px); }

/* --- Buttons --- typography matches .t-btn */
.elementor .rfs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--rfs-radius-btn);
  font: 700 14px/1.2 var(--rfs-font);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.elementor .rfs-btn--primary {
  background: var(--rfs-primary);
  color: var(--rfs-white);
  border-color: var(--rfs-primary);
}
.elementor .rfs-btn--primary:hover {
  background: var(--rfs-primary-dark);
  border-color: var(--rfs-primary-dark);
}
/* Secondary — kontextově se přizpůsobí (light bg = dark outline, dark bg = white outline) */
.elementor .rfs-btn--secondary {
  background: transparent;
  color: var(--rfs-dark);
  border-color: var(--rfs-dark);
}
.elementor .rfs-btn--secondary:hover {
  background: var(--rfs-dark);
  color: var(--rfs-white);
}
.elementor .rfs-btn--tertiary {
  background: transparent;
  color: var(--rfs-dark);
  border: 1px dashed rgba(35,35,35,0.4);
}
.elementor .rfs-btn--tertiary:hover {
  border-color: var(--rfs-dark);
  background: rgba(0,0,0,0.04);
}


/* =====================================================================
   4. CUSTOM WIDGET (PHP) — rigid 3-stat data slot
   ===================================================================== */
/* V0.9.0 (rfspin-blocks atomic Data Slot): wrapper is CSS Grid.
   Header is a normal grid item but spans full width via grid-column: 1/-1.
   Author-dropped <rfs-stat> widgets fall into remaining grid cells as direct
   children — placeholder is a direct child so G13 (nested placeholder editor
   lookup) does NOT apply. CSS vars `--rfs-data-slot-cols/rows` come from inline
   style set in twig from grid_cols / grid_rows props. */
.elementor .rfs-data-slot {
  background: var(--rfs-blush);
  border-left: 6px solid var(--rfs-primary);
  padding: 24px 28px;
  border-radius: 0 4px 4px 0;
  display: grid;
  grid-template-columns: repeat(var(--rfs-data-slot-cols, 3), 1fr);
  gap: var(--rfs-space-md);
  align-items: start;
  margin-block: 10px;
}
.elementor .rfs-data-slot__label {
  grid-column: 1 / -1;
  font: 600 11px/1.2 var(--rfs-font);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rfs-data);
  margin: 0;
}
/* Legacy stats wrapper from V1 PHP widget — kept for back-compat with any
   pre-0.9.0 markup still in the wild. New atomic widget renders stats as direct
   grid children, no nested wrapper. */
.elementor .rfs-data-slot__stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rfs-space-md);
}
/* --dark variant (standalone): mirrors the inside-a-dark-block treatment (dark cascade ~l.722)
   but keyed on the Data Slot's OWN modifier class, so a Data Slot dropped on a LIGHT section can
   be dark on its own. Higher specificity (.rfs-data-slot.rfs-data-slot--dark) guarantees the bg
   override regardless of source order. Stat children re-colored here because the .rfs-block--dark
   ancestor cascade (l.716-717) doesn't reach a standalone dark data-slot. */
.elementor .rfs-data-slot.rfs-data-slot--dark {
  background: var(--rfs-dark-elev);
  border-left-color: var(--rfs-blush);
}
.elementor .rfs-data-slot--dark .rfs-data-slot__label { color: var(--rfs-blush); }
.elementor .rfs-data-slot--dark .rfs-stat__value { color: var(--rfs-white); }
.elementor .rfs-data-slot--dark .rfs-stat__label { color: var(--rfs-blush); }


/* =====================================================================
   5. BLOCK FAMILY — base + 4 semantic variants + 4 modifiers
     (cross-cutting: --dark, --top-stripe;
      variant-scoped: --media-right na --stage, --divider na --two-col)
   ===================================================================== */

.elementor .rfs-block {
  /* override .e-con's display:flex (atomic-element default would lay header+body
     in a row); each variant picks its own layout (--stage/--two-col grid, etc.) */
  display: block;
  background: var(--rfs-white);
  border: 1px solid var(--rfs-border);
  border-radius: var(--rfs-radius-card);
  padding: 40px 44px;
  overflow: hidden;
}

/* Cross-cutting modifiers */
/* Border zůstává --rfs-border napříč všemi block variantami (light + dark) — sjednocená
   "component edge" barva. Na dark bg #232323 je #D4D4D4 explicit světlý outline. */
.elementor .rfs-block--dark {
  background: var(--rfs-dark);
  /* border-color from base .rfs-block (--rfs-border) — neoverridovat */
}
/* --grey: světle šedé pozadí karty (#F0F0F0 = --rfs-bg-alt). Přebíjí base --rfs-white
   stejně jako --dark (same 0,2,0 specificity, later-wins). Variant na Thesis Block. */
.elementor .rfs-block--grey { background: var(--rfs-bg-alt); }
/* Top-stripe: --top-stripe modifier + variants s baked-in stripe (--thesis, --two-col) sdílí pravidlo */
.elementor .rfs-block--top-stripe,
.elementor .rfs-block--thesis,
.elementor .rfs-block--two-col { box-shadow: 0 -5px 0 0 var(--rfs-primary); }
/* Opt-out: --no-stripe vypne baked-in stripe (přebije všechna pravidla výše díky vyšší specificity) */
.elementor .rfs-block--no-stripe { box-shadow: none; }

/* --- Block · Thesis (top stripe + header divider, single col) --- */
.elementor .rfs-block--thesis > .rfs-block__header {
  margin-bottom: var(--rfs-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--rfs-space-sm);
}
.elementor .rfs-block--thesis > .rfs-block__body {
  border-top: 1px solid var(--rfs-border);
  padding-top: var(--rfs-space-md);
}
/* matches .t-h-md (sjednoceno se stage title; rozdíl od stage je top-stripe + header divider, ne size) */
.elementor .rfs-block--thesis :is(h1, h2, h3, h4, h5, h6).rfs-block__title {
  font: 600 25px/1.3 var(--rfs-font);
  letter-spacing: -0.3px;
}
/* matches .t-lead */
.elementor .rfs-block--thesis .rfs-block__body > p {
  font: 400 18px/1.55 var(--rfs-font);
}

/* --- Block · Stage (2-col s media; default media-LEFT) ---
   V2 spec markup (section 4.3): <article> grid with __media (col 1) + __body (col 2).
   __body is the locked Stage_Block_Body sub-element — a flex column holding the rigid
   header (eyebrow / title / lead) AND user-dropped widgets. Its children placeholder is
   a direct child of its own root, so editor + frontend both nest user widgets INSIDE
   __body, below the header. No editor fallback selectors needed (G13 resolved via the
   sub-element pattern). */
.elementor .rfs-block--stage {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}
.elementor .rfs-block--stage > .rfs-block__media {
  grid-column: 1;
  grid-row: 1 / -1;
  position: relative;
  overflow: hidden;
}
.elementor .rfs-block--stage > .rfs-block__body { padding: 48px 36px 48px 48px; }
.elementor .rfs-block--stage.rfs-block--media-right > .rfs-block__media {
  grid-column: 2;
}
.elementor .rfs-block--stage.rfs-block--media-right > .rfs-block__body {
  grid-column: 1;
  padding: 48px 48px 48px 36px;
}
/* Image from `media_image` prop fills the `__media` slot. Default mode (cover /
   contain) uses ABSOLUTE positioning: with `width: 100%; height: 100%` in the
   normal flow, an `<img>` contributes its natural aspect-ratio sized box to grid
   intrinsic sizing, forcing `__media` (and via `align-items: stretch` the entire
   row) to ≥ image natural height. With `position: absolute` the image is taken
   out of layout sizing — slot height is determined solely by the body column's
   content; image then scales into whatever the slot ends up being. `object-fit` /
   `object-position` come from inline style on `<img>` (driven by `media_fit` /
   `media_position` props). */
.elementor .rfs-block--stage > .rfs-block__media > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* When an image is set, drop the `min-height: 360px` floor that V2 spec puts on
   `__media` (so the media column genuinely follows the body column's height
   instead of forcing the whole block to be ≥360px tall). Empty case (no image)
   keeps the placeholder gradient floor. */
.elementor .rfs-block--stage > .rfs-block__media:has(> img) {
  min-height: 0;
  background: transparent;
}
/* "Fit" mode — image at natural proportions drives the parent container's
   height. Reverses the cover/contain absolute-positioning: image is in normal
   flow, contributes its full intrinsic height to grid sizing, and the body
   column stretches via `align-items: stretch` to match. No `object-fit` applies.
   media_position prop has no effect in this mode. */
.elementor .rfs-block--stage > .rfs-block__media[data-fit='fit'] {
  position: static;
  overflow: visible;
}
.elementor .rfs-block--stage > .rfs-block__media[data-fit='fit'] > img {
  position: static;
  width: 100%;
  height: auto;
}
/* --- Stage · vertical orientation (media_side = top | bottom) ---
   Image stacked ON TOP (or below) the body instead of side-by-side. The media band
   gets a Photo-Cell-style in-flow aspect-ratio FRAME so it never collapses: the base
   cover/contain <img> is position:absolute and would yield 0 height once the body no
   longer drives a sibling column. frame_bg / frame_padding come from inline --rfs-vc-*.
   Shared with the ≤767px degradation of horizontal left/right (see @media below). */
.elementor .rfs-block--stage.rfs-block--media-top,
.elementor .rfs-block--stage.rfs-block--media-bottom {
  grid-template-columns: 1fr;
}
.elementor .rfs-block--stage.rfs-block--media-top > .rfs-block__media,
.elementor .rfs-block--stage.rfs-block--media-bottom > .rfs-block__media {
  grid-column: 1;
  aspect-ratio: var(--rfs-vc-aspect, 4 / 3);
  min-height: 0;
  background: var(--rfs-vc-bg, transparent);
  padding: var(--rfs-vc-pad, 0);
}
.elementor .rfs-block--stage.rfs-block--media-top > .rfs-block__media    { grid-row: 1; }
.elementor .rfs-block--stage.rfs-block--media-top > .rfs-block__body     { grid-row: 2; grid-column: 1; }
.elementor .rfs-block--stage.rfs-block--media-bottom > .rfs-block__media { grid-row: 2; }
.elementor .rfs-block--stage.rfs-block--media-bottom > .rfs-block__body  { grid-row: 1; grid-column: 1; }
/* In-flow image (graft from .rfs-photo-cell__image): robust band height inside the
   frame. object-fit/object-position keep coming from the inline style (media_fit). */
.elementor .rfs-block--stage.rfs-block--media-top > .rfs-block__media > img,
.elementor .rfs-block--stage.rfs-block--media-bottom > .rfs-block__media > img {
  position: static;
  width: 100%;
  height: 100%;
}
/* Neutralize fit-mode in vertical: base [data-fit='fit'] forces overflow:visible +
   height:auto, which would blow the framed band out. Clamp it back. */
.elementor .rfs-block--stage.rfs-block--media-top > .rfs-block__media[data-fit='fit'],
.elementor .rfs-block--stage.rfs-block--media-bottom > .rfs-block__media[data-fit='fit'] { overflow: hidden; }
.elementor .rfs-block--stage.rfs-block--media-top > .rfs-block__media[data-fit='fit'] > img,
.elementor .rfs-block--stage.rfs-block--media-bottom > .rfs-block__media[data-fit='fit'] > img { height: 100%; }

/* Mobile (≤767px): horizontal left/right Stages degrade into the SAME vertical
   image-on-top form (single column, framed band on top, body below). media-top /
   media-bottom are already vertical and are excluded via :not(). */
@media (max-width: 767px) {
  .elementor .rfs-block--stage:not(.rfs-block--media-top):not(.rfs-block--media-bottom) {
    grid-template-columns: 1fr;
  }
  .elementor .rfs-block--stage:not(.rfs-block--media-top):not(.rfs-block--media-bottom) > .rfs-block__media {
    grid-row: 1;
    grid-column: 1;
    aspect-ratio: var(--rfs-vc-aspect, 4 / 3);
    min-height: 0;
    background: var(--rfs-vc-bg, transparent);
    padding: var(--rfs-vc-pad, 0);
  }
  .elementor .rfs-block--stage:not(.rfs-block--media-top):not(.rfs-block--media-bottom) > .rfs-block__media > img {
    position: static;
    width: 100%;
    height: 100%;
  }
  .elementor .rfs-block--stage:not(.rfs-block--media-top):not(.rfs-block--media-bottom) > .rfs-block__body {
    grid-row: 2;
    grid-column: 1;
    padding: 36px 32px;
  }
  /* divider → horizontal line above the body */
  .elementor .rfs-block--stage.rfs-block--divider:not(.rfs-block--media-top):not(.rfs-block--media-bottom) > .rfs-block__body {
    border-left: 0; border-right: 0; border-top: 1px solid var(--rfs-border);
  }
}

/* --- Block · Two-col (2-col grid wrapper) ---
   Architecture (v0.19.0): thin grid <article> shell whose two DIRECT children are locked
   `Column_Block` sub-elements. Each column root IS `.rfs-block__body` (atomic-tabs/stage
   pattern) — so it inherits the shared `.rfs-block__body` rules (flex-column, gap,
   p-margin:0 that defuses the manufacturer `p{margin-bottom:15px}` trap). These selectors
   therefore target the column roots as `.rfs-block__body` (not a bespoke `.rfs-block__column`).
   Grid `align-items: stretch` (default) keeps both columns equal height, so the --divider
   border-left runs full height. (A future Three_Col_Block reuses the same Column_Block.) */
.elementor .rfs-block--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rfs-gap-wide);
  padding: 44px 48px;
}
/* Each column (Column_Block root = .rfs-block__body, a direct grid child). Flex-column +
   gap + p-margin:0 come from the shared .rfs-block__body rules; here only the grid-child
   overflow guard. */
.elementor .rfs-block--two-col > .rfs-block__body {
  min-width: 0;
}
.elementor .rfs-block--two-col > .rfs-block__body > .rfs-block__column-header {
  display: flex;
  flex-direction: column;
  gap: var(--rfs-space-sm);
}
/* Match thesis title sizing (.t-h-md, sjednoceno cross-variant) */
.elementor .rfs-block--two-col .rfs-block__body :is(h1, h2, h3, h4, h5, h6).rfs-block__title {
  font: 600 25px/1.3 var(--rfs-font);
  letter-spacing: -0.3px;
  margin: 0;
}
/* Column "Middle vertical align" variant (Column_Block "↕ Middle vertical align" switch →
   `.rfs-block__body--vcenter`). Centres the column's whole content (header + dropped widgets)
   within its grid-stretched height; overrides the shared .rfs-block__body
   justify-content:flex-start base. (0,3,0) > (0,2,0) → wins regardless of source order.
   No-op when both columns are equal height (grid align-items:stretch). */
.elementor .rfs-block__body.rfs-block__body--vcenter { justify-content: center; align-self: center; }
/* --divider modifier: drop block padding + gap, columns own padding, vertical line mezi nimi.
   Funguje protože grid `align-items: stretch` (default) drží oba column roots stejně vysoké,
   border-left na druhém se táhne celou výškou. */
.elementor .rfs-block--two-col.rfs-block--divider {
  padding: 0;
  gap: 0;
}
.elementor .rfs-block--two-col.rfs-block--divider > .rfs-block__body {
  padding: 44px;
}
.elementor .rfs-block--two-col.rfs-block--divider > .rfs-block__body + .rfs-block__body {
  border-left: 1px solid var(--rfs-border);
}
/* Mobile breakpoint — collapse to single column. --divider line se přepne na horizontal border-top. */
@media (max-width: 767px) {
  .elementor .rfs-block--two-col {
    grid-template-columns: 1fr;
  }
  .elementor .rfs-block--two-col.rfs-block--divider > .rfs-block__body + .rfs-block__body {
    border-left: none;
    border-top: 1px solid var(--rfs-border);
  }
}

/* --- Block · CTA (dark + centered + actions) --- */
.elementor .rfs-block--cta {
  background: var(--rfs-dark);
  /* border-color zůstává base --rfs-border (sjednoceno napříč variantami) */
  padding: 80px 48px;
  text-align: center;
}
.elementor .rfs-block--cta > .rfs-block__body {
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
}
/* matches .t-h-lg */
.elementor .rfs-block--cta :is(h1, h2, h3, h4, h5, h6).rfs-block__title {
  font: 600 32px/1.3 var(--rfs-font);
  letter-spacing: -0.3px;
  color: var(--rfs-white);
}

/* Slots */
.elementor .rfs-block__media {
  background: var(--rfs-bg-alt);
  background-image: linear-gradient(135deg, #DDD, #BBB);
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  /* matches .t-micro */
  font: 600 11px/1.2 var(--rfs-font);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.elementor .rfs-block__body {
  display: flex;
  flex-direction: column;
  gap: var(--rfs-block-body-gap, var(--rfs-space-sm));
  justify-content: flex-start;
  padding: 0;
}
/* matches .t-body. :where() sníží specificitu na (0,0,1) aby eyebrow (0,1,0) nezasekly
   v body slot kde je `<p class="rfs-eyebrow">`. */
.elementor :where(.rfs-block__body) > p {
  font: 400 14px/1.6 var(--rfs-font);
  color: var(--rfs-text);
  margin: 0;
}
/* Zero p margins anywhere inside .rfs-block__body — Elementor text-editor widget
   wraps content in <div.elementor-widget-container><p>…</p></div>, so `> p` selector
   above never reaches the actual paragraph. Manufacturer theme adds a global
   `p { margin-bottom: 15px }` which stacks on top of the flex `gap` between widgets
   (12px gap + 15px margin = 27px between paragraphs + a 15px tail under the last one).
   Spacing belongs to .rfs-block__body's gap; descendant <p> stay margin-free. */
.elementor .rfs-block__body p {
  margin: 0;
}
.elementor .rfs-block__body > .rfs-eyebrow { margin-bottom: -2px; }
.elementor .rfs-block__body > .rfs-link,
.elementor .rfs-block__body > .rfs-actions:last-child {
  margin-top: auto;
  padding-top: var(--rfs-space-sm);
}
/* :is(h1..h6) prefix → specificita (0,1,1) přebíjí Manufacturer theme `.man_page h2/h3` */
.elementor :is(h1, h2, h3, h4, h5, h6).rfs-block__title {
  font: 600 25px/1.3 var(--rfs-font);
  letter-spacing: -0.3px;
  color: var(--rfs-dark);
  margin: 0;
}
/* Manufacturer theme globally injects `h2::after { content: ""; display: block; margin-top: 20px }`
   which adds ~21px of phantom space below every h2/h3. Kill the pseudo on ALL our atomic titles
   (block title, double-heading hero/section openers, tier + chapter card titles). Scoped to our
   .rfs-* heading classes → only affects atomic-built pages, never legacy site pages. */
.elementor :is(h1, h2, h3, h4, h5, h6).rfs-block__title::before,
.elementor :is(h1, h2, h3, h4, h5, h6).rfs-block__title::after,
.elementor :is(h1, h2, h3, h4, h5, h6).rfs-double-heading__large::before,
.elementor :is(h1, h2, h3, h4, h5, h6).rfs-double-heading__large::after,
.elementor :is(h1, h2, h3, h4, h5, h6).rfs-tier-card__title::before,
.elementor :is(h1, h2, h3, h4, h5, h6).rfs-tier-card__title::after,
.elementor :is(h1, h2, h3, h4, h5, h6).rfs-chapter-card__title::before,
.elementor :is(h1, h2, h3, h4, h5, h6).rfs-chapter-card__title::after {
  content: none;
  display: none;
  margin: 0;
}
/* matches .t-lead — subtílní intro paragraph.
   Selektor (0,2,0) — silnější než `:where(.rfs-block__body) > p` (0,0,1),
   takže lead drží svou tmavou barvu i v light context.
   Dark cascade níže (0,2,1) přebije a překlopí color → --rfs-border. */
.elementor .rfs-block__body > .rfs-block__lead {
  font: 400 18px/1.55 var(--rfs-font);
  color: var(--rfs-dark);
  margin: 0;
}

/* --- Dark cascade — atomy uvnitř .rfs-block--dark / --cta se přebarví automaticky.
       :is() umožňuje sdílet kaskádu mezi --dark a --cta beze ztráty specificity. --- */
/* BASE inherited color — bez něj dark blok nastavoval JEN background, takže jakýkoli text,
   který kaskáda níže explicitně neřeší (klasický Text editor <p> zanořený v
   .elementor-widget-container, atomický paragraf dropnutý v inner containeru, stray spany),
   dědil tmavou theme-default barvu → neviditelný na dark bg. Base color (0,2,0) dědí všechno
   nezacílené; explicitní pravidla níže (title→white, stat/data-slot→blush) ho přebijí. */
.elementor :is(.rfs-block--dark, .rfs-block--cta) { color: var(--rfs-border); }
.elementor :is(.rfs-block--dark, .rfs-block--cta) .rfs-block__title { color: var(--rfs-white); }
.elementor :is(.rfs-block--dark, .rfs-block--cta) .rfs-block__body > .rfs-block__lead { color: var(--rfs-border); }
/* Descendant ` p` (NE `> p`) — chytá i <p> zanořené v Text editor widgetu / inner containeru.
   `:where()` drží specificitu (0,2,1) < atom pravidla (0,3,0), takže stat/data-slot labely
   si nechají svou blush barvu; jen jinak nezacílené odstavce zesvětlí. */
.elementor :is(.rfs-block--dark, .rfs-block--cta) :where(.rfs-block__body) p { color: var(--rfs-border); }
.elementor :is(.rfs-block--dark, .rfs-block--cta) .rfs-block__body h3 { color: var(--rfs-white); }
.elementor :is(.rfs-block--dark, .rfs-block--cta) :is(.rfs-eyebrow, .rfs-double-heading__small) { color: var(--rfs-primary-light); }
.elementor :is(.rfs-block--dark, .rfs-block--cta) .rfs-link { color: var(--rfs-primary-light); }
.elementor :is(.rfs-block--dark, .rfs-block--cta) .rfs-stat__value { color: var(--rfs-white); }
.elementor :is(.rfs-block--dark, .rfs-block--cta) .rfs-stat__label { color: var(--rfs-blush); }
.elementor :is(.rfs-block--dark, .rfs-block--cta) .rfs-pull-quote { color: var(--rfs-white); }
.elementor :is(.rfs-block--dark, .rfs-block--cta) .rfs-pull-quote__attribution { color: var(--rfs-blush); }
.elementor :is(.rfs-block--dark, .rfs-block--cta) :is(.rfs-points li, .rfs-points p) { color: var(--rfs-border); }
.elementor :is(.rfs-block--dark, .rfs-block--cta) :is(.rfs-points li::before, .rfs-points p::before) { background-color: var(--rfs-primary-light); }
.elementor :is(.rfs-block--dark, .rfs-block--cta) .rfs-data-slot {
  background: var(--rfs-dark-elev);
  border-left-color: var(--rfs-blush);
}
.elementor :is(.rfs-block--dark, .rfs-block--cta) .rfs-data-slot__label { color: var(--rfs-blush); }
/* Secondary button na dark/cta bg = white outline */
.elementor :is(.rfs-block--dark, .rfs-block--cta) .rfs-btn--secondary {
  color: var(--rfs-white);
  border-color: var(--rfs-white);
}
.elementor :is(.rfs-block--dark, .rfs-block--cta) .rfs-btn--secondary:hover {
  background: var(--rfs-white);
  color: var(--rfs-dark);
}
/* Tertiary button na dark/cta bg = dashed white */
.elementor :is(.rfs-block--dark, .rfs-block--cta) .rfs-btn--tertiary {
  color: var(--rfs-white);
  border-color: rgba(255,255,255,0.6);
}
.elementor :is(.rfs-block--dark, .rfs-block--cta) .rfs-btn--tertiary:hover {
  border-color: var(--rfs-white);
  background: rgba(255,255,255,0.06);
}
.elementor .rfs-block--two-col.rfs-block--divider.rfs-block--dark > .rfs-block__body + .rfs-block__body,
.elementor .rfs-block--two-col.rfs-block--divider.rfs-block--dark > .rfs-block__sidebar {
  border-left-color: rgba(255,255,255,0.15);
}

/* Actions row uvnitř bloku */
.elementor .rfs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rfs-space-sm);
  margin-top: var(--rfs-space-xs);
}
.elementor .rfs-block--cta .rfs-actions { justify-content: center; }


/* =====================================================================
   6. GRIDS — Elementor container settings + brand class na dětech
   ===================================================================== */

/* Photo Cell — child v 3-col / 6-col gridu. `container-type: inline-size` zaregistruje
   cell jako container query context, takže caption + image se sami adaptují na šířku
   bez ohledu na rodičovský grid template (3-col → větší typo + subtitle visible;
   6-col / úzký sloupec → compact typo + subtitle skrytá). */
.elementor .rfs-photo-cell {
  background: var(--rfs-white);
  border: 1px solid var(--rfs-border);
  border-radius: var(--rfs-radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  container-name: rfs-photo-cell;
}
/* Image frame: shape + fit + bg + padding driven by per-instance CSS vars set
   inline from widget settings (aspect_ratio / object_fit / frame_bg / frame_padding).
   aspect-ratio drives the frame height from its width, so the image never crops
   against an arbitrary fixed height — pick the ratio matching the photo + Contain
   for a no-crop fit, with frame_bg filling any letterbox/padding gaps. */
.elementor .rfs-photo-cell__image {
  background-color: var(--rfs-pc-bg, var(--rfs-bg-alt));
  aspect-ratio: var(--rfs-pc-aspect, 4 / 3);
  padding: var(--rfs-pc-pad, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}
/* placeholder gradient — only when no <img> is present (no real photo) */
.elementor .rfs-photo-cell__image--empty {
  background-image: linear-gradient(135deg, #DDD, #BBB);
  color: rgba(255,255,255,0.6);
  font: 600 11px/1.2 var(--rfs-font);
  letter-spacing: 1px;
  text-transform: uppercase;
}
/* Real <img> fills the frame's content box; object-fit (cover/contain) chosen
   per instance. Cover crops to fill; contain shows the whole image (frame_bg
   fills the gaps). */
.elementor .rfs-photo-cell__image img {
  width: 100%;
  height: 100%;
  object-fit: var(--rfs-pc-fit, cover);
  display: block;
}
/* matches .t-h-sm */
.elementor .rfs-photo-cell__caption {
  padding: 14px 18px;
  font: 600 18px/1.3 var(--rfs-font);
  letter-spacing: -0.3px;
  color: var(--rfs-dark);
  border-top: 1px solid var(--rfs-border);
}
/* matches .t-body */
.elementor .rfs-photo-cell__caption small {
  display: block;
  font: 400 14px/1.6 var(--rfs-font);
  letter-spacing: normal;
  color: var(--rfs-muted);
  margin-top: 4px;
}
.elementor .demo-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rfs-gap-default);
}
.elementor .demo-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--rfs-gap-tight);
}

/* Compact mode pro 6-col grid (úzké cell). Container query — neaplikuje se podle
   viewport breakpointu ale podle vlastní šířky cell. Threshold 220px je test
   na ~6-col layout v běžně širokém containeru. */
@container rfs-photo-cell (max-width: 220px) {
  /* image frame height now follows aspect-ratio × width, so it shrinks on its
     own in narrow cells — no fixed-height override needed. Only the caption
     typography + the <small> subtitle get the compact treatment. */
  .elementor .rfs-photo-cell__caption {
    padding: 10px 12px;
    font: 600 14px/1.3 var(--rfs-font);
  }
  .elementor .rfs-photo-cell__caption small {
    display: none;
  }
}

/* Chapter Card — child v 4-col gridu */
.elementor .rfs-chapter-card {
  background: var(--rfs-bg-alt);
  border: 2px solid transparent;
  border-radius: var(--rfs-radius-card);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: var(--rfs-space-sm);
  position: relative;
  transition: border-color 0.2s;
}
.elementor .rfs-chapter-card:hover { border-color: var(--rfs-primary); }
/* matches .t-eyebrow — quote/credo nad nadpisem */
.elementor .rfs-chapter-card__quote {
  font: 600 13px/1.2 var(--rfs-font);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rfs-primary);
}
/* matches .t-h-sm */
.elementor :is(h1, h2, h3, h4, h5, h6).rfs-chapter-card__title {
  font: 600 18px/1.3 var(--rfs-font);
  letter-spacing: -0.3px;
  color: var(--rfs-dark);
  margin: 0;
}
/* matches .t-body */
.elementor .rfs-chapter-card p {
  font: 400 14px/1.6 var(--rfs-font);
  color: var(--rfs-text);
  margin: 0;
  flex-grow: 1;
}
/* matches .t-micro */
.elementor .rfs-chapter-card__meta {
  font: 600 11px/1.2 var(--rfs-font);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rfs-muted);
}
/* Persistent red frame on the "live" (Antenna Portal) card removed 2026-07-08 per request;
   card now matches its siblings (transparent border, red only on :hover). LIVE DEMO badge kept below. */
/* LIVE DEMO badge — matches .t-micro */
.elementor .rfs-chapter-card--live::before {
  content: 'LIVE DEMO';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 4px;
  background: var(--rfs-primary);
  color: var(--rfs-white);
  padding: 5px 12px;
  font: 600 11px/1.2 var(--rfs-font);
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 3px;
}
/* Whole chapter card is clickable — the single CTA link (.rfs-link) is stretched over the
   card so the hover feedback matches the real click target (added 2026-07-08 per request).
   Uses ::before because .rfs-link::after already renders the arrow glyph. */
.elementor .rfs-chapter-card { cursor: pointer; }
.elementor .rfs-chapter-card .rfs-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.elementor .demo-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--rfs-gap-default);
  margin-top: 28px;
}

/* =====================================================================
   Tier Card — comparison table (3 levels). Odvozené od chapter card
   (blush bg, hover/featured red border), s optional --tag a feature list.
   ===================================================================== */
.elementor .rfs-tier-card {
  background: var(--rfs-bg-alt);
  border: 2px solid transparent;
  border-radius: var(--rfs-radius-card);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: var(--rfs-space-sm);
  position: relative;
  transition: border-color 0.2s;
}
.elementor .rfs-tier-card:hover { border-color: var(--rfs-primary); }
.elementor .rfs-tier-card--featured {
  border-color: var(--rfs-primary);
  background: var(--rfs-white);
}

/* Optional tag — pill nad title (matches .t-micro typo) */
.elementor .rfs-tier-card__tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--rfs-primary);
  color: var(--rfs-white);
  padding: 4px 10px;
  border-radius: 3px;
  font: 600 11px/1.2 var(--rfs-font);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Title — matches .t-h-md (25/600) */
.elementor :is(h1, h2, h3, h4, h5, h6).rfs-tier-card__title {
  font: 600 25px/1.3 var(--rfs-font);
  letter-spacing: -0.3px;
  color: var(--rfs-dark);
  margin: 0;
}

/* Subtitle/lead — matches .t-body (14/400) */
.elementor .rfs-tier-card__lead {
  font: 400 14px/1.6 var(--rfs-font);
  color: var(--rfs-text);
  margin: 0;
}

/* Optional headline value (e.g. price, key metric) — matches .t-h-sm (18/600) */
.elementor .rfs-tier-card__value {
  font: 600 18px/1.3 var(--rfs-font);
  letter-spacing: -0.3px;
  color: var(--rfs-dark);
  margin: 0;
}

/* Feature list — divider line above, then check/cross items */
.elementor .rfs-tier-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--rfs-space-xs);
  margin-top: var(--rfs-space-sm);
  padding-top: var(--rfs-space-md);
  border-top: 1px solid var(--rfs-border);
  flex-grow: 1;
}
.elementor .rfs-tier-card__feature {
  font: 400 14px/1.6 var(--rfs-font);
  color: var(--rfs-text);
  margin: 0;
  padding-left: 26px;
  position: relative;
}
/* Default ✓ check (primary red SVG mask — smooth checkmark, matches arrow/chevron style) */
.elementor .rfs-tier-card__feature::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 11px;
  height: 11px;
  background-color: var(--rfs-primary);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 174.239 174.239'><path d='M74.439,157.519c-1.59,1.848-4.34,1.989-6.111,0.313L1.38,94.468c-1.771-1.676-1.848-4.496-0.173-6.267l21.33-22.539c1.676-1.771,4.496-1.848,6.267-0.173l36.571,34.611c1.771,1.676,4.521,1.535,6.111-0.313l71.447-83.015c1.59-1.848,4.404-2.059,6.251-0.468l23.518,20.242c1.848,1.59,2.059,4.404,0.468,6.252L74.439,157.519z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 174.239 174.239'><path d='M74.439,157.519c-1.59,1.848-4.34,1.989-6.111,0.313L1.38,94.468c-1.771-1.676-1.848-4.496-0.173-6.267l21.33-22.539c1.676-1.771,4.496-1.848,6.267-0.173l36.571,34.611c1.771,1.676,4.521,1.535,6.111-0.313l71.447-83.015c1.59-1.848,4.404-2.059,6.251-0.468l23.518,20.242c1.848,1.59,2.059,4.404,0.468,6.252L74.439,157.519z'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* --off modifier: ✗ cross (muted, feature není v tomto tieru). SVG matches check style.
   Cross uses full SVG canvas (na rozdíl od checkmark s vertical padding), takže explicit
   menší width/height pro vizuální balance s checkem. */
.elementor .rfs-tier-card__feature--off {
  color: var(--rfs-muted);
}
.elementor .rfs-tier-card__feature--off::before {
  width: 9px;
  height: 9px;
  top: 8px;
  background-color: var(--rfs-muted);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 174.239 174.239'><path d='M146.537,1.047c-1.396-1.396-3.681-1.396-5.077,0L89.658,52.849c-1.396,1.396-3.681,1.396-5.077,0L32.78,1.047c-1.396-1.396-3.681-1.396-5.077,0L1.047,27.702c-1.396,1.396-1.396,3.681,0,5.077l51.802,51.802c1.396,1.396,1.396,3.681,0,5.077L1.047,141.46c-1.396,1.396-1.396,3.681,0,5.077l26.655,26.655c1.396,1.396,3.681,1.396,5.077,0l51.802-51.802c1.396-1.396,3.681-1.396,5.077,0l51.801,51.801c1.396,1.396,3.681,1.396,5.077,0l26.655-26.655c1.396-1.396,1.396-3.681,0-5.077l-51.801-51.801c-1.396-1.396-1.396-3.681,0-5.077l51.801-51.801c1.396-1.396,1.396-3.681,0-5.077L146.537,1.047z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 174.239 174.239'><path d='M146.537,1.047c-1.396-1.396-3.681-1.396-5.077,0L89.658,52.849c-1.396,1.396-3.681,1.396-5.077,0L32.78,1.047c-1.396-1.396-3.681-1.396-5.077,0L1.047,27.702c-1.396,1.396-1.396,3.681,0,5.077l51.802,51.802c1.396,1.396,1.396,3.681,0,5.077L1.047,141.46c-1.396,1.396-1.396,3.681,0,5.077l26.655,26.655c1.396,1.396,3.681,1.396,5.077,0l51.802-51.802c1.396-1.396,3.681-1.396,5.077,0l51.801,51.801c1.396,1.396,3.681,1.396,5.077,0l26.655-26.655c1.396-1.396,1.396-3.681,0-5.077l-51.801-51.801c-1.396-1.396-1.396-3.681,0-5.077l51.801-51.801c1.396-1.396,1.396-3.681,0-5.077L146.537,1.047z'/></svg>");
}

/* Footer CTA — link odsazený na konec karty */
.elementor .rfs-tier-card__cta {
  margin-top: var(--rfs-space-sm);
}

/* =====================================================================
   CTA band — full-bleed dark SECTION (hand-built, NE rfs-block-cta):
   2-col split (dual-heading + lead vlevo, button vpravo). Eyebrow
   non-red na dark. Hook: class `.rfs-cta-band` na section containeru.
   ===================================================================== */
.elementor .rfs-cta-band .rfs-double-heading__small { color: var(--rfs-muted); }
.elementor .rfs-cta-band :is(h1, h2, h3, h4, h5, h6).rfs-double-heading__large { color: var(--rfs-white); }
.elementor .rfs-cta-band p { color: var(--rfs-border); }

/* === Process Flow (R&D numbered step rail) — rfs-process-flow widget === */
.elementor .rfs-process-flow { display: flex; flex-direction: column; gap: 24px; }
.elementor .rfs-process-flow__rail {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px;
  /* border-top: 1px solid var(--rfs-border); */ padding-top: 14px;
}
.elementor .rfs-process-flow__step { display: flex; flex-direction: column; gap: 8px; position: relative; }
.elementor .rfs-process-flow__step::before {
  content: ""; position: absolute; top: -12px; left: 0; width: 36px; height: 4px; background: var(--rfs-primary);
}
.elementor .rfs-process-flow__num { font: 600 32px/1 var(--rfs-font); color: var(--rfs-primary); letter-spacing: -1px; }
.elementor :is(h1,h2,h3,h4,h5,h6).rfs-process-flow__title {
  font: 600 16px/1.3 var(--rfs-font); color: var(--rfs-dark); margin: 0; letter-spacing: -0.2px;
}
.elementor .rfs-process-flow__body { font: 400 14px/1.55 var(--rfs-font); color: var(--rfs-text); margin: 0; }
.elementor .rfs-process-flow__handoff {
  display: flex; align-items: center; gap: 12px;
  font: 600 13px/1.2 var(--rfs-font); letter-spacing: 1px; text-transform: uppercase; color: var(--rfs-muted);
}
/* h2::after phantom-gap kill extended to the two new title classes (in case tag=h2) */
.elementor :is(h1,h2,h3,h4,h5,h6).rfs-process-flow__title::after,
.elementor :is(h1,h2,h3,h4,h5,h6).rfs-process-flow__title::before { content: none; display: none; margin: 0; }

/* === Projects timeline (R&D, hand-build) — .rfs-timeline container + items === */
.elementor .rfs-timeline { display: flex; flex-direction: column; border-left: 2px solid var(--rfs-border); padding-left: 19px; margin-left: 8px; }
.elementor .rfs-timeline__item { position: relative; padding-bottom: 24px; padding-top: 0; gap: 8px; }
.elementor .rfs-timeline__item:last-child { padding-bottom: 0; }
.elementor .rfs-timeline__item::before {
  content: ""; position: absolute; left: -25px; top: 3px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--rfs-primary); box-shadow: 0 0 0 4px var(--rfs-white), 0 0 0 5px var(--rfs-border);
}
.elementor .rfs-timeline__year { font: 600 13px/1.2 var(--rfs-font); letter-spacing: 1px; color: var(--rfs-primary); text-transform: uppercase; margin: 0 0 4px; }
.elementor .rfs-timeline__title { font: 600 16px/1.4 var(--rfs-font); color: var(--rfs-dark); margin: 0; }

/* Secondary button on dark CTA band — default dark-on-dark is invisible; flip to white outline. */
.elementor .rfs-cta-band .rfs-btn--secondary { background: transparent; color: var(--rfs-white); border-color: var(--rfs-white); }
.elementor .rfs-cta-band .rfs-btn--secondary:hover { background: var(--rfs-white); color: var(--rfs-dark); }

/* Manufacturer parent theme injects `blockquote { background:#fff; box-shadow; padding:30px }`
   (cascade trap #4) which leaks into <blockquote class="rfs-pull-quote"> as a white box.
   Neutralize so the pull-quote sits transparent (esp. on dark bands). Specificity 0,2,1 > 0,0,1. */
.elementor blockquote.rfs-pull-quote { background: none; box-shadow: none; padding: 0; border: 0; }

/* Eyebrow-only double-heading: when large_text is empty, collapse the heading tag
   so the overline (small_text) stands alone (e.g. "Premium instrumentation" label). */
.elementor .rfs-double-heading__large:empty { display: none; margin: 0; }

/* Antenna Portal — fine-print strip ("No login · No download · …") + terminal header label */
.elementor .rfs-fine-print { text-align: center; color: var(--rfs-muted); font-size: 13px; line-height: 1.5; margin-top: 6px; }

/* ============================================================================
   On-dark text invert for a PLAIN flex container (NOT a .rfs-block atomic card).
   Put class `rfs-on-dark` on a container that already has its own dark
   background (Elementor Background setting). Inverts Double Heading + body copy
   to light — text only, no card bg/border/padding (unlike .rfs-block--dark,
   whose cascade only targets .rfs-block__title / .rfs-block__body > p). */
/* BASE inherited color (viz dark cascade výše) — chytne i text, který descendant pravidla
   níže explicitně neřeší (stray spany / ne-<p> obsah). <p> už řeší `:is(p,…)` descendant. */
.elementor .rfs-on-dark { color: var(--rfs-border); }
.elementor .rfs-on-dark :is(h1,h2,h3,h4,h5,h6),
.elementor .rfs-on-dark .rfs-double-heading__large { color: var(--rfs-white); }
.elementor .rfs-on-dark :is(p, .t-body, .t-lead):not(.rfs-double-heading__small) { color: var(--rfs-border); }
.elementor .rfs-on-dark :is(.rfs-double-heading__small, .rfs-eyebrow) { color: var(--rfs-primary-light); }
.elementor .rfs-on-dark .rfs-link { color: var(--rfs-primary-light); }

/* Eyebrow color override → LIGHT GREY instead of brand red. Add `rfs-eyebrow--light`
   to the Eyebrow widget itself, or to a Double Heading wrapper (recolors its overline).
   Placed after the cascade above so it wins at equal specificity on dark. */
.elementor .rfs-on-dark .rfs-eyebrow--light,
.elementor .rfs-block--dark .rfs-eyebrow--light,
.elementor .rfs-eyebrow.rfs-eyebrow--light,
.elementor .rfs-eyebrow--light .rfs-double-heading__small { color: var(--rfs-border); }

/* Hero H1 Double Heading → 56px. Targets heading_tag=h1 only (base large stays 32px,
   --section opener stays 25px, h2–h6 unaffected). Equal specificity (0,2,1) to base
   .rfs-double-heading__large rule → wins by source order. line-height inherits 1.3. Negative margin-block (em-based → škáluje s velikostí) ořízne line-height leading, aby červený levý bar obepnul H1 (cap→~descender) místo celého line-boxu. JEN na H1 — na menších nadpisech přesah není vidět. */
.elementor h1.rfs-double-heading__large { font-size: 56px; margin-top: -0.23em; margin-bottom: -0.11em; max-width: none; }

/* ============================================================================
   Thesis modifier — remove the inner header/body divider LINE, keep the gap.
   Add class `rfs-block--no-rule` to the Thesis block (the .rfs-block article).
   Removes the horizontal rule (body border-top) and the body's own padding-top,
   but KEEPS the header's natural margin-bottom (--rfs-space-md, 24px) so the
   header (eyebrow + title) and body still have a clean single gap — just no
   line. The card outline (.rfs-block border) is untouched.
   Specificity 0,4,0 > base 0,3,0 → wins. */
.elementor .rfs-block--thesis.rfs-block--no-rule > .rfs-block__body { border-top: 0; padding-top: 0; }

/* Stage divider — vertical grey rule between media and body columns.
   Enable via the Stage "Divider line" variant (class rfs-block--divider).
   Line sits on the body edge facing the media; spans full block height
   (stage grid is align-items:stretch). --media-right flips which edge. */
.elementor .rfs-block--stage.rfs-block--divider > .rfs-block__body { border-left: 1px solid var(--rfs-border); }
.elementor .rfs-block--stage.rfs-block--divider.rfs-block--media-right > .rfs-block__body { border-left: 0; border-right: 1px solid var(--rfs-border); }
/* Vertical orientation: divider runs HORIZONTALLY between the stacked image and body. */
.elementor .rfs-block--stage.rfs-block--divider.rfs-block--media-top > .rfs-block__body { border-left: 0; border-right: 0; border-top: 1px solid var(--rfs-border); }
.elementor .rfs-block--stage.rfs-block--divider.rfs-block--media-bottom > .rfs-block__body { border-left: 0; border-right: 0; border-bottom: 1px solid var(--rfs-border); }

/* Stage Body — light-grey panel variant. Enable via the Stage Body "Light grey
   background" variant; the Twig adds ONLY `rfs-block__body--grey` (this near-white
   #F0F0F0 panel fill). Text keeps its default dark colour — no `rfs-on-dark` inversion,
   which would make dark copy invisible on a light panel. Uses the existing brand token
   --rfs-bg-alt (= #F0F0F0, the "section alt bg") — same near-white the spec asked for,
   kept as a token for one source of truth. NOT meant to combine with a --dark Stage Block. */
.elementor .rfs-block__body--grey { background: var(--rfs-bg-alt); }


/* ── ECS Container-Layout conflict fix ─────────────
   Prod runs "ECS – Ele Custom Skin" (ele-custom-skin) whose Container-Layout
   module re-declares container display via .e-ecs-flex / .e-ecs-grid classes.
   It mis-tags our native Elementor GRID containers (container_type:grid) as
   .e-ecs-flex, so `.e-con.e-ecs-flex{display:flex}` (0,3,0) overrides the grid
   and the fr column ratios (e.g. 3fr 2fr / 5fr 2fr) collapse to equal flex
   children -> looks like 1fr 1fr. Dev has no ECS so it renders correctly.
   Restore grid only where Elementor itself marked it grid (.e-grid).
   Specificity 0,4,0 > ECS 0,3,0; grid-template-columns is already correct
   via Elementor's --e-con-grid-template-columns vars. */
.e-con.e-grid.e-ecs-flex:not([class*="elementor-hidden-"]) { display: grid; }

/* === Dark-context label mirror (MUST be last — wins by source order) ===
   `--rfs-muted` (#666B71) is tuned for AA on LIGHT backgrounds. Several dark-context
   rules (e.g. .rfs-cta-band .rfs-double-heading__small at the Inline Link block) reference
   it directly and would go too dark on a near-black band. Restore the light mirror #8F8F8F
   (4.86:1 on #232323) for label roles on dark surfaces. Body/lead on dark stay handled by
   --rfs-border / blush rules elsewhere. */
.elementor .rfs-block--dark .rfs-double-heading__small,
.elementor .rfs-block--cta .rfs-double-heading__small,
.elementor .rfs-cta-band .rfs-double-heading__small { color: #8F8F8F; }

/* Data-slot palette on ANY dark surface (the `--dark` data-slot modifier OR a plain
   data-slot nested inside a `.rfs-block--dark` Stage, which the dark cascade paints with
   the #2E2E2E elevated panel). Labels → warm blush (#FBEFED, >12:1 on #2E2E2E — the #8F8F8F
   label mirror is only 4.2:1 there, sub-AA), values → white. Must be last so it wins. */
.elementor .rfs-data-slot--dark .rfs-data-slot__label,
.elementor .rfs-data-slot--dark .rfs-stat__label,
.elementor .rfs-block--dark .rfs-data-slot__label,
.elementor .rfs-block--cta .rfs-data-slot__label,
.elementor .rfs-block--dark .rfs-stat__label,
.elementor .rfs-block--cta .rfs-stat__label { color: var(--rfs-blush); }
.elementor .rfs-data-slot--dark .rfs-stat__value,
.elementor .rfs-block--dark .rfs-stat__value,
.elementor .rfs-block--cta .rfs-stat__value { color: var(--rfs-white); }


/* rfs-link Download variant (v0.29.0) — inline download SVG appended in twig (link.html.twig); hide default CSS arrow ::after */
.elementor .rfs-link--download::after { display: none; }


/* Language switcher options must NOT show the default rfs-link arrow */

/* =====================================================================
   Service Card — ikona + nadpis + text v bílé kartě
   =====================================================================
   Nahrazuje ekit_wb_262 („MOPRECO Services"). Rozměry jsou přeneseny
   z předchůdce měřením, ne odhadem: padding 34, radius 10, spodní pruh
   5px, stín 0 6px 61px 6px rgba(0,0,0,.1), ikona 60px, nadpis 20/26
   s marginem 13/28.

   Rozdíl proti předchůdci: barva pruhu bere --rfs-primary, takže se
   přebarví s paletou webu. Dřív visela na nastavení každé instance
   (globals/colors?id=primary), a nová karta ji musela dostat ručně.
   ===================================================================== */
.elementor .rfs-service-card {
  background: var(--rfs-white);
  padding: 34px;
  border-radius: var(--rfs-radius-card);
  border-bottom: 5px solid var(--rfs-primary);
  box-shadow: 0 6px 61px 6px rgba(0, 0, 0, .1);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.elementor .rfs-service-card__icon { line-height: 0; }
.elementor .rfs-service-card__icon img,
.elementor .rfs-service-card__icon svg { height: 60px; width: auto; display: inline-block; }
.elementor .rfs-service-card .rfs-service-card__title {
  font-family: var(--rfs-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: var(--rfs-text);
  margin: 13px 0 28px;
}
/* zděděný phantom-gap kill (téma přidává ::before/::after k nadpisům) */
.elementor :is(h1,h2,h3,h4,h5,h6).rfs-service-card__title::after,
.elementor :is(h1,h2,h3,h4,h5,h6).rfs-service-card__title::before { content: none; display: none; margin: 0; }
.elementor .rfs-service-card__text {
  font-family: var(--rfs-font);
  font-size: 16px;
  line-height: 26px;
  color: var(--rfs-text);
  margin: 0;
}
/* dark cascade — uvnitř tmavého bloku se karta obrátí */
.elementor .rfs-block--dark .rfs-service-card,
.elementor .rfs-block--cta .rfs-service-card {
  background: var(--rfs-dark-elev);
  border-bottom-color: var(--rfs-primary-light);
}
.elementor .rfs-block--dark .rfs-service-card .rfs-service-card__title,
.elementor .rfs-block--cta .rfs-service-card .rfs-service-card__title { color: var(--rfs-white); }
.elementor .rfs-block--dark .rfs-service-card__text,
.elementor .rfs-block--cta .rfs-service-card__text { color: var(--rfs-border); }

/* =====================================================================
   Photo Showcase — velký snímek + mřížka miniatur, která ho přepíná
   =====================================================================
   Nahrazuje dvojici ucaddon_content_slider_new + ucaddon_content_grid2
   z Unlimited Elements (spárovanou přes „remote parent"). Rozměry jsou
   přenesené z nastavení předchůdců, ne odhadnuté: stage 398px, překryv
   #1D74B8CC, šipka 40px se symbolem 20px, mřížka 2 sloupce s mezerou 10px,
   aktivní miniatura rámeček 4px.

   Překryv i rámeček dnes berou --rfs-primary, takže se přebarví s paletou.
   U předchůdců byla modrá zapsaná v každé instanci zvlášť.
   ===================================================================== */
.elementor .rfs-photo-showcase {
  --rfs-ps-height: 398px;
  --rfs-ps-cols: 2;
  display: grid;
  /* 2:1 — poměr převzatý z předchůdců (slider 733px : mřížka 366px v kontejneru 1140px).
     Mezera z designové škály; originál měl 40px, --rfs-gap-wide je 48px a rozdíl je
     pod prahem postřehnutelnosti. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--rfs-gap-wide);
  align-items: start;
}
.elementor .rfs-photo-showcase__stage {
  position: relative;
  height: var(--rfs-ps-height);
  overflow: hidden;
  border-radius: var(--rfs-radius-btn);
}
.elementor .rfs-photo-showcase__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease;
}
.elementor .rfs-photo-showcase__slide.is-active { opacity: 1; visibility: visible; }
.elementor .rfs-photo-showcase__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.elementor .rfs-photo-showcase__slide figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 400px;
  margin: 12px 20px 20px;
  padding: 14px 18px;
  background: var(--rfs-primary); /* fallback pro prohlížeče bez color-mix */
  background: color-mix(in srgb, var(--rfs-primary) 80%, transparent);
  color: var(--rfs-white);
  font-family: var(--rfs-font);
  font-size: 15px;
  line-height: 22px;
}
.elementor .rfs-photo-showcase__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  border-radius: 0;          /* téma zaobluje všechna <button> — předchůdce měl nav_arrow_radius 0 */
  background: var(--rfs-primary); /* fallback pro prohlížeče bez color-mix */
  background: color-mix(in srgb, var(--rfs-primary) 80%, transparent);
  color: var(--rfs-bg-alt);
  transition: background .15s ease;
}
.elementor .rfs-photo-showcase__nav:hover { background: var(--rfs-primary); }
.elementor .rfs-photo-showcase__nav:focus-visible { outline: 2px solid var(--rfs-white); outline-offset: -4px; }
.elementor .rfs-photo-showcase__nav--prev { left: 20px; }
.elementor .rfs-photo-showcase__nav--next { right: 20px; }
.elementor .rfs-photo-showcase__thumbs {
  display: grid;
  grid-template-columns: repeat(var(--rfs-ps-cols), minmax(0, 1fr));
  gap: 10px;
}
.elementor .rfs-photo-showcase__thumb {
  padding: 0;
  border: 4px solid transparent;
  background: none;
  cursor: pointer;
  line-height: 0;
  transition: border-color .15s ease;
}
.elementor .rfs-photo-showcase__thumb img { width: 100%; height: 120px; object-fit: cover; display: block; }
.elementor .rfs-photo-showcase__thumb.is-active { border-color: var(--rfs-primary); }
.elementor .rfs-photo-showcase__thumb:hover { border-color: var(--rfs-border); border-color: color-mix(in srgb, var(--rfs-primary) 45%, transparent); }
.elementor .rfs-photo-showcase__thumb:focus-visible { outline: 2px solid var(--rfs-primary); outline-offset: 2px; }
@media (max-width: 767px) {
  .elementor .rfs-photo-showcase { grid-template-columns: 1fr; }
  .elementor .rfs-photo-showcase__stage { height: calc(var(--rfs-ps-height) * .7); }
  .elementor .rfs-photo-showcase__thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .elementor .rfs-photo-showcase__thumb img { height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .elementor .rfs-photo-showcase__slide { transition: none; }
}