/* ==========================================================================
   RGc — typografický systém V3 (podle schváleného návrhu ve Figmě, stránka pro kódování)
   Společné třídy pro všechny tři stránky. Rozvržení konkrétních stránek: css/pages/*.css
   ========================================================================== */
:root {
  --bright: #309e63;        /* tlačítka a menu v hero (V3) */
  --on-bright: #122117;
  --fo: 0px;                /* volná plocha po každé straně rámu 1440 (0 pod 1441 px) */
  --ex: 0px;                /* přírůstek šířky nad 1440 px (0 … 240 px) — rozšiřuje mezery, ne písmo */
  --srw: 881px;             /* šířka motivu Sub Rosa */
  --ax1: 80px;              /* obsahová osa mřížky */
  --ax2: 243px;             /* redakční osa (nadpisy, perexy, seznamy) */
  --measure: 62ch;          /* strop délky odstavce */
  --hl-w: 1px; --hl-c: rgba(192,175,150,.5);   /* hairline: na běžném displeji 1 px v 50 % síly, na retině skutečných 0,5 px (jako ve Figmě) */
}
@media (min-resolution: 1.5dppx) { :root { --hl-w: .5px; --hl-c: #c0af96; } }
@media (min-width: 1441px) { :root { --ex: clamp(0px, calc((100vw - 1440px) * .5), 240px); --fo: calc((100vw - 1440px) / 2); --srw: min(960px, calc(881px + (100vw - 1440px) * .2)); } }

/* ---- Typografie V3 ---- */
.t-h1 { font-family: var(--font-serif); font-weight: 400; font-size: 96px; line-height: 104px; letter-spacing: .336px; }
.t-h2 { font-weight: 700; font-size: 60px; line-height: 70px; text-transform: uppercase; }
.t-h2m { font-weight: 700; font-size: 56px; line-height: 66px; text-transform: uppercase; }
.t-h3 { font-weight: 600; font-size: 34px; line-height: 42px; text-transform: uppercase; }
.t-h3n { font-weight: 500; font-size: 34px; line-height: 42px; text-transform: uppercase; }
.t-p28 { font-weight: 500; font-size: 28px; line-height: 40px; }
.t-p26 { font-weight: 500; font-size: 26px; line-height: 38px; }
.t-p22 { font-weight: 500; font-size: 22px; line-height: 33px; }
.t-p22l { font-weight: 300; font-size: 22px; line-height: 33px; }
.t-p22r { font-weight: 400; font-size: 22px; line-height: 33px; }
.t-p22i { font-weight: 500; font-style: italic; font-size: 22px; line-height: 33px; }
.t-serif56 { font-family: var(--font-serif); font-weight: 300; font-size: 56px; line-height: 66px; letter-spacing: .336px; }
.t-serif56 b, .t-serif56 strong { font-weight: 700; }
.t-serif60 { font-family: var(--font-serif); font-weight: 300; font-size: 60px; line-height: 70px; letter-spacing: .336px; }
.t-serif60 b { font-weight: 700; }
.t-serif60 .sb { font-weight: 600; }
.t-eyebrow { font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: .08em; text-transform: uppercase; }
.t-up { text-transform: uppercase; }
.t-bold { font-weight: 700; }
.t-link { font-weight: 700; font-size: 22px; line-height: 33px; }

/* Pevné zalomení z návrhu (jen široké okno; na úzkém displeji text teče přirozeně) */
.bd { display: inline; }
@media (max-width: 899px) { .bd { display: none; } }

/* obsahový pruh: 1280 při šířce návrhu, na širokém monitoru se rozšiřuje (písmo ne) */
.wrap { width: calc(1280px + var(--ex)); max-width: 100%; margin-inline: auto; }

/* ---- Rám: obsah 1440, na širších oknech se mezery rozšiřují přes --ex ---- */
.frame { padding-inline: var(--pad, 0); }
.frame--rel { position: relative; }
/* Ořez motivu: nahoře a vpravo záměrný přesah z návrhu; dole se motiv NIKDY neřeže výškou kontejneru — jen okrajem sekce.
   Výška = max(výška z návrhu, skutečný dolní okraj motivu + rezerva pro pohyb), nejvýše celá sekce. */
.sr-clip { position: absolute; left: 0; right: 0; top: 0; height: min(100%, max(var(--clip, 800px), calc(var(--srw) - 174px + 20px))); overflow: hidden; pointer-events: none; z-index: 0; }
.sr-clip .sub-rosa { position: absolute; }

/* ---- Tlačítka V3: K1 plné 48 px, K2 obrysové 52 px (16/24); velká 22/33 ---- */
.btn { height: auto; padding: 12px 24px; border-radius: 999px; font-size: 16px; line-height: 24px; border-width: 0; }
.btn--k1 { background: var(--bright); color: var(--on-bright); min-width: 160px; }
.btn--k2 { border: 2px solid var(--bright); color: var(--bright); min-width: 160px; }
.btn--k1:hover, .btn--k1:focus-visible { background: var(--cream); color: var(--green); }
.btn--k2:hover, .btn--k2:focus-visible { background: var(--bright); color: var(--on-bright); }
.btn--l { font-size: 22px; line-height: 33px; }
.btn--solid-l { background: var(--green); color: var(--cream); }
.btn--solid-l:hover, .btn--solid-l:focus-visible { background: var(--green-deep); }
.btn--outline-l { border: 2px solid var(--bright); color: var(--bright); }
.btn--outline-l:hover, .btn--outline-l:focus-visible { background: var(--bright); color: var(--on-bright); }
.btn--action-l { background: var(--bright); color: var(--on-bright); }
.btn--action-l:hover, .btn--action-l:focus-visible { background: var(--green-hover); color: var(--cream); }

/* ---- Odkaz s kruhovou šipkou 22/33 + kruh 72 ---- */
.arrow-link { font-size: 22px; line-height: 33px; gap: 10px; }
.arrow-link__t { padding-top: 4px; }
.arrow-circle--down svg { transform: rotate(90deg); }
.arrow-circle--up svg { transform: rotate(-90deg); }

/* ---- Seznamy řádků s hairline děličem ---- */
.rows { display: flex; flex-direction: column; }
.row { position: relative; display: flex; flex-direction: column; }
/* hairline děliče nezabírají místo v rozložení (jako ve Figmě: výška 0) */
.row::before, .rows > .row:last-child::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 0; border-top: .5px solid var(--rule, var(--line-grey)); pointer-events: none; }
.rows > .row:last-child::after { top: auto; bottom: 0; }

/* ---- Odkazy v textu (e-mail, telefon) ---- */
a.t-ul { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; text-decoration-thickness: 1px; transition: text-decoration-color var(--hover-time) var(--ease-out); }
a.t-ul:hover, a.t-ul:focus-visible { text-decoration-color: currentColor; }

/* ---- Scroll-řízený průběh (osy, spojovací linky): --p 0…1 nastavuje main.js ---- */
html.js [data-scrub] { --p: 0; }
@media (prefers-reduced-motion: reduce) { html.js [data-scrub] { --p: 1 !important; } }

/* ---- Základní adaptace na úzký displej (mobilní design zatím není schválený) ---- */
@media (max-width: 899px) {
  :root { --pad: 24px; }
  body { min-width: 0; }
  .t-h1 { font-size: clamp(44px, 12vw, 64px); line-height: 1.1; }
  .t-h2, .t-h2m { font-size: clamp(34px, 9vw, 44px); line-height: 1.15; overflow-wrap: anywhere; }
  .t-h3, .t-h3n { font-size: 24px; line-height: 1.25; }
  .t-p28 { font-size: 22px; line-height: 1.45; }
  .t-p26 { font-size: 20px; line-height: 1.45; }
  .t-serif56, .t-serif60 { font-size: clamp(32px, 8.5vw, 44px); line-height: 1.2; }
  .arrow-link { font-size: 18px; line-height: 1.4; }
  .arrow-circle { width: 56px; height: 56px; }
  /* základní navigace na úzkém displeji (mobilní menu zatím není schválené): jedna řádka, menší písmo */
  .nav__inner { padding: 26px 16px 0; gap: 12px; justify-content: space-between; }
  .nav a { font-size: 12.5px; line-height: 20px; white-space: nowrap; }
}


/* ==========================================================================
   SPOLEČNÝ TOP SYSTÉM (kolo 6): wrapper .top = hero + bridge band, jedna Sub Rosa přes celek.
   HERO → jemná písková linka → BRIDGE BAND → hlavní obsah. Stejná konstrukce na homepage, u Martina i na Jak pracujeme.
   ========================================================================== */
.top { position: relative; overflow: hidden; isolation: isolate; background: #20392a; }
.top > .sr-clip { z-index: 1; --clip: 4000px; }                           /* ořez = celý wrapper (hero + bridge): motiv nikde nekončí hranou hero */
.top > .sr-clip .sub-rosa { --sr-right: calc(-72px - var(--ex) * .5); }
/* hero: nahoře tmavší zelená → dolů velmi pozvolna světlejší (tóny identity: #132119 → green-deep → #20392a); stejné na všech stránkách */
.top__hero { position: relative; color: var(--cream); background: linear-gradient(180deg, #132119 0%, var(--green-deep) 40%, #20392a 100%); }
.top__hero .frame { height: 100%; }
/* bridge band: bez vlastního gradientu — zklidňující tmavě zelený overlay nad společným wrapperem (motiv jen jemně prosvítá, nekreslí se znovu) */
.top__bridge { position: relative; color: var(--cream); background: transparent; }
.top__bridge::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--green-deep); opacity: .9; }
.top__bridge::before { content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: 4; pointer-events: none; border-top: .5px solid var(--tan); opacity: .5; }   /* 0,5 px písková dělicí linka přes celou šířku */
.top__bridge > .frame, .top__bridge > .wrap { position: relative; z-index: 3; }