/*!
 * 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:           #4F4F4F;  /* body paragraphs */
  --rfs-muted:          #8F8F8F;  /* labels, captions */
  --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;
}
.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;
}
.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;
}

/* --- 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-sm);
  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: 8px 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;
}
.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-text);
  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);
}


/* =====================================================================
   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 */
}
/* 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> with __media + __body. __body is a
   flex column containing rigid header items (eyebrow / title / lead) AND user
   widgets as siblings.

   Frontend (PHP str_replace): user widgets land INSIDE __body — V2 spec exact.
   Editor (`attachBuffer` finds placeholder only at $el's direct childNodes):
   placeholder nested in __body fails the lookup → user widgets get appended as
   direct children of <article>, siblings of __body. Skin CSS rules below handle
   BOTH shapes — col 2 grid placement with matching padding either way. */
.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; }
/* Editor fallback: user widgets appended as siblings of __body. Place them in
   col 2 stacked vertically with the same horizontal padding as __body, so the
   visual flow looks continuous with the rigid header above. `!important` because
   atomic widget base styles (e-con `display: flex` etc.) compete on the same
   element and would otherwise drag user widgets into col 1 row 2. */
.elementor .rfs-block--stage > :not(.rfs-block__media):not(.rfs-block__body) {
  grid-column: 2 !important;
  padding-left: 48px;
  padding-right: 36px;
}
.elementor .rfs-block--stage > :nth-child(3):not(.rfs-block__body):not(.rfs-block__media) {
  padding-top: var(--rfs-space-sm);
}
.elementor .rfs-block--stage > :last-child:not(.rfs-block__media):not(.rfs-block__body) {
  padding-bottom: 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;
}
.elementor .rfs-block--stage.rfs-block--media-right > :not(.rfs-block__media):not(.rfs-block__body) {
  grid-column: 1 !important;
  padding-left: 36px;
  padding-right: 48px;
}
/* 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;
}
/* Mobile: stack to 1 column; body always first, media always last
   (override `--media-right` flip — at narrow widths the text-then-image order
   is the right reading flow regardless of desktop preference). */
@media (max-width: 767px) {
  .elementor .rfs-block--stage,
  .elementor .rfs-block--stage.rfs-block--media-right {
    grid-template-columns: 1fr;
  }
  .elementor .rfs-block--stage > .rfs-block__media,
  .elementor .rfs-block--stage.rfs-block--media-right > .rfs-block__media {
    grid-row: 99;
    grid-column: 1;
    min-height: 240px;
  }
  .elementor .rfs-block--stage > .rfs-block__body,
  .elementor .rfs-block--stage.rfs-block--media-right > .rfs-block__body {
    grid-column: 1;
    padding: 36px 32px;
  }
  .elementor .rfs-block--stage > :not(.rfs-block__media):not(.rfs-block__body),
  .elementor .rfs-block--stage.rfs-block--media-right > :not(.rfs-block__media):not(.rfs-block__body) {
    grid-column: 1;
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* --- Block · Two-col (2-col grid wrapper, single atomic element) ---
   Architecture: jeden element, 6 header props na parent, 2 nezávislé column wrappery
   v Twig template. Custom render() v PHP substituuje child[0] do prvního placeholderu
   (col 1), child[1] do druhého (col 2). Per-column wrappery dávají každému sloupci
   vlastní vertikální flow — empty header → header div skip → body content nahoře.
   Grid `align-items: stretch` (default) stretchne column wrappery na stejnou výšku,
   takže --divider border-left line drží full height. */
.elementor .rfs-block--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rfs-gap-wide);
  padding: 44px 48px;
}
.elementor .rfs-block--two-col > .rfs-block__column {
  display: flex;
  flex-direction: column;
  gap: var(--rfs-space-md);
  min-width: 0;
  /* default justify-content: flex-start = body sits at top of column (under header if present) */
}
/* Per-column vertical alignment modifiers (props align1/align2 in editor).
   Funguje protože grid `align-items: stretch` (default) drží oba column wrappery na stejné výšce —
   v kratším sloupci tak justify-content reálně posune jeho obsah uvnitř column flex containeru. */
.elementor .rfs-block--two-col > .rfs-block__column--align-center {
  justify-content: center;
}
.elementor .rfs-block--two-col > .rfs-block__column--align-bottom {
  justify-content: flex-end;
}
.elementor .rfs-block--two-col > .rfs-block__column > .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__column :is(h1, h2, h3, h4, h5, h6).rfs-block__title {
  font: 600 25px/1.3 var(--rfs-font);
  letter-spacing: -0.3px;
  margin: 0;
}
/* The body container (e-div-block child) needs its own flow direction (column) so its
   atomic widget children stack vertically — `.e-con` default is flex row. */
.elementor .rfs-block--two-col .rfs-block__body {
  display: flex;
  flex-direction: column;
  gap: var(--rfs-space-sm);
  min-width: 0;
}
/* --divider modifier: drop block padding + gap, columns own padding, vertical line mezi nimi.
   Funguje protože grid `align-items: stretch` (default) drží oba column wrappery stejně vysoké,
   border-left na druhém wrapperu 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__column {
  padding: 44px;
}
.elementor .rfs-block--two-col.rfs-block--divider > .rfs-block__column + .rfs-block__column {
  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__column + .rfs-block__column {
    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-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 our titles. */
.elementor :is(h1, h2, h3, h4, h5, h6).rfs-block__title::before,
.elementor :is(h1, h2, h3, h4, h5, h6).rfs-block__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. --- */
.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); }
.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;
}
/* placeholder text — matches .t-micro */
.elementor .rfs-photo-cell__image {
  background: var(--rfs-bg-alt);
  background-image: linear-gradient(135deg, #DDD, #BBB);
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  font: 600 11px/1.2 var(--rfs-font);
  letter-spacing: 1px;
  text-transform: uppercase;
}
/* 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) {
  .elementor .rfs-photo-cell__image {
    height: 120px;
  }
  .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-dark);
}
.elementor .rfs-chapter-card--live { border-color: var(--rfs-primary); }
/* 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;
}
.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);
}