/* ==========================================================================
   Raška engineering s.r.o. — hlavní stylopis
   Design systém: barvy, spacing, typografie, grid, komponenty
   ========================================================================== */

/* Font Outfit stažený lokálně (fonts/), ne z Google Fonts CDN – na přání
   uživatelky (2026-09-17), aby web nevolal žádnou externí službu a nemusel
   mít cookie lištu. Jde o variabilní font (jeden soubor pokrývá všechny
   váhy 100–900), proto stačí jen 2 @font-face pravidla (latin + latin-ext
   pro českou diakritiku), ne jedno na každou váhu. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/outfit-latin-ext.woff2') format('woff2-variations'), url('fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/outfit-latin.woff2') format('woff2-variations'), url('fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. Design tokeny
   -------------------------------------------------------------------------- */
:root {
  /* Barvy */
  --color-primary: #1F4E8C;
  --color-primary-dark: #163a68;
  --color-primary-light: #2c62ab;
  --color-accent: #E06A2C;
  --color-accent-dark: #c25a22;
  --color-background: #FFFFFF;
  --color-text: #333333;
  --color-muted: #666f7a;
  --color-white: #ffffff;
  --color-bg-blue: #DCE6F2;
  --color-bg-orange: #F6DCC7;
  --color-border: #e2e5ea;

  /* Typografie */
  --font-main: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --fs-base: 1rem;
  --lh-body: 1.65;
  --lh-heading: 1.2;

  --fs-h1: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.45rem + 1.3vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
  --fs-h4: clamp(1.1rem, 1.03rem + 0.3vw, 1.25rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.25vw, 1.25rem);
  --fs-small: 0.875rem;

  /* Spacing (8px grid) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */

  /* Standardní vertikální padding obsahových sekcí na mobilu (viz sekce 15) */
  --section-padding-mobile: var(--space-12);

  /* Layout */
  --container-width: 85%;
  --container-max: 1280px;
  --content-max: 70ch;

  /* Ostatní */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(31, 78, 140, 0.08), 0 1px 2px rgba(31, 78, 140, 0.06);
  --shadow-md: 0 12px 32px -12px rgba(22, 58, 104, 0.22);
  --shadow-lg: 0 18px 44px -18px rgba(22, 58, 104, 0.28);
  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --header-height: 5.0625rem;
}

/* --------------------------------------------------------------------------
   2. Reset a základy
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-main);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
svg { display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5, h6 { font-size: 1rem; }

p {
  margin: 0 0 var(--space-4);
  max-width: var(--content-max);
  text-wrap: pretty;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-3) var(--space-6);
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Layout — kontejner a grid systém
   -------------------------------------------------------------------------- */
.container {
  width: var(--container-width);
  max-width: var(--container-max);
  margin-inline: auto;
}

.section {
  padding-block: var(--space-16);
}

.section--blue { background: var(--color-bg-blue); }

.section-head {
  max-width: 44rem;
  margin-bottom: var(--space-12);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.lead {
  font-size: var(--fs-lead);
  color: var(--color-muted);
}

.grid {
  display: grid;
  gap: var(--space-8);
}

.grid-3 { grid-template-columns: 1fr; }

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   4. Tlačítka
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid transparent;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--transition), background-color var(--transition),
    color var(--transition), border-color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}

.btn svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }

.btn-arrow { transition: transform 260ms ease; }
.btn:hover .btn-arrow { transform: translateX(4px); }

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-accent {
  /* Plný border tady vadil - i "transparent" 2px border tvořil jemný tmavší lem po stranách */
  border: none;
  padding-block: calc(0.7rem + 2px);
  padding-inline: calc(1.4rem + 2px);
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: var(--color-white);
  box-shadow: 0 14px 24px -16px rgba(224, 106, 44, 0.6);
}
.btn-accent:hover { box-shadow: 0 18px 30px -14px rgba(224, 106, 44, 0.7); }

.btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--color-white);
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--color-white); }

.btn-outline-dark {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-outline-dark:hover {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-color: transparent;
  color: var(--color-white);
}

.btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   5. Hlavička / navigace — plovoucí skleněný pruh
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.nav-shell {
  /* Přes celou šířku a až nahoru — žádná pilulka, jen poloprůhledné sklo */
  /* position+z-index nutné, jinak tento (nepozicovaný) prvek podle pravidel
     stackování vykreslí prohlížeč VŽDY pod .mobile-nav (i když .site-header
     má z-index 100) a logo i zavírací tlačítko zmizí pod otevřeným menu */
  position: relative;
  z-index: 101;
  background: rgba(22, 58, 104, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-md);
  transition: background-color var(--transition), box-shadow var(--transition);
}

.site-header.is-scrolled .nav-shell {
  background: rgba(22, 58, 104, 0.86);
  box-shadow: var(--shadow-lg);
}

/* Jen na 404.html (viz komentář u <header> tamtéž) – hned pod hlavičkou je
   bílé pozadí, ne temná fotka/gradient, takže i výchozí (nescrollovaný)
   stav má stejné plnější pozadí jako .is-scrolled jinde na webu. */
.site-header--solid .nav-shell {
  background: rgba(22, 58, 104, 0.86);
  box-shadow: var(--shadow-lg);
}

.nav-shell-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 5rem;
  /* vw-based, ne %, aby šířka obsahu odpovídala .container i uvnitř širší pilulky */
  width: min(85vw, var(--container-max));
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-logo {
  height: 3.6rem;
  width: auto;
  display: block;
}

.nav-list {
  display: none;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  font-weight: 500;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.82);
  position: relative;
  padding-block: var(--space-2);
  transition: color var(--transition);
}

.nav-list a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition);
}

.nav-list a:hover,
.nav-list a[aria-current="page"] {
  color: var(--color-white);
}

.nav-list a:hover::after,
.nav-list a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-phone-cta {
  display: none;
  padding: 0.7rem 1.4rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .nav-phone-cta { display: inline-flex; }
}

/* Přepínač jazyků CZ/EN (2026-09-18) – zobrazuje kód CÍLOVÉHO jazyka (na
   české stránce "EN" vede na anglickou verzi, na anglické "CS" zpátky na
   českou) – jednodušší než pár "CZ | EN" vedle sebe. V .nav-actions, ne v
   .nav-list, protože to je vždy vidět (i pod 1024px), na rozdíl od
   .nav-list. Cesty jsou u každé stránky napevno (viz [[project_en_translation]]),
   protože anglické URL mají jiné slugy než české (kontakt → contact), ne
   jen /en/ prefix. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}

.lang-switch:hover {
  color: var(--color-white);
  border-color: var(--color-white);
  background: rgba(255, 255, 255, 0.1);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: var(--color-white);
  flex-shrink: 0;
  margin-left: auto;
}

.nav-toggle svg { width: 1.3rem; height: 1.3rem; }
.nav-toggle .icon-close { display: none; }

.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-nav {
  position: fixed;
  inset: 0;
  background: linear-gradient(165deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  padding: calc(var(--header-height) + var(--space-8)) 7.5% var(--space-8);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--transition);
  z-index: 99;
}

.mobile-nav.is-open { transform: translateX(0); }

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.mobile-nav a {
  display: block;
  padding: var(--space-4) 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.mobile-nav a.btn {
  /* .mobile-nav a (display:block, velký font, spodní linka) má vyšší
     specificitu než .btn (jen jedna třída) – bez tohoto přebití by tlačítko
     ztratilo flex zarovnání ikony+textu a zdědilo by rozměry navigačního
     odkazu místo vlastních button paddingů. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: calc(0.7rem + 2px);
  padding-inline: calc(1.4rem + 2px);
  font-size: 1rem;
  border-bottom: none;
  margin-bottom: var(--space-4);
}

@media (min-width: 1024px) {
  .nav-list { display: flex; }
  .nav-toggle, .mobile-nav { display: none; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary-dark) 55%, var(--color-primary) 100%);
  isolation: isolate;
  /* Ostrá hranice do bílé — žádný gradientový přechod pod fotkou */
}

.hero-media {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  bottom: 0;
  width: 100%;
}

.hero-media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Vystředěno — na širokoúhlých obrazovkách se ořízne rovnoměrně z obou stran,
     aby nezmizel poslední obrázek napravo */
  object-position: center center;
}

.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11, 27, 48, 0.4) 0%, rgba(11, 27, 48, 0.15) 30%, rgba(11, 27, 48, 0.1) 60%, rgba(11, 27, 48, 0.2) 100%);
}

/* 2026-09-17: bývalý fix pro 1024–1399px (.hero-media { left: 34rem;
   width: auto }) byl odstraněn – řešil drobné zasahování fotky pod tlačítko,
   ale zmenšením boxu rozbil object-fit: cover ořez pevně kalibrované
   koláže (viz [[project_hero_collage]] – obrázek má přesnou úhlopříčnou
   geometrii navrženou pro box na celou šířku). Důsledek: v celém okně
   1024–1399px se místo fotky zobrazoval kus jejího vlastního "modrého"
   panelu jako falešná mezera mezi textem a fotkami (odhaleno až přes
   screenshot pro Open Graph, ale je to živá chyba pro reálné návštěvníky –
   1366×768 a 1280×800 jsou běžná rozlišení notebooků). Bez fixu (box na
   celou šířku, left: 0, stejně jako od 1400px výš) se text jen nepatrně
   dotýká úhlopříčného švu na 1024px (ověřeno zoomovaným screenshotem,
   čitelnost není narušená) – mnohem menší problém než ta mezera. Pro
   tablety (768–1023px) viz samostatný blok níže — tam se stejný problém
   řeší jinak (jako na mobilu). */

@media (max-width: 767px) {
  /* Mobil: koláž už NENÍ pozadí za textem, ale samostatný pruh
     (jen elektro/fotovoltaika/průmysl, bez modré) v běžném toku pod textem.
     Modrou plochu za textem dělá čistě gradient sekce .hero. Aspect-ratio
     odpovídá reálným rozměrům Obrazky/Domov/hero-photos-mobile.jpg (1200×1905 —
     stejný svislý výřez jako na desktopu, aby fotka po přesahu karty služeb
     (.services-overlap) zůstala z velké části vidět), takže se obrázek nikdy
     neořezává přes object-fit: cover. */
  .hero-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1200 / 1524;
  }
}

.hero-inner {
  position: relative;
  z-index: 1;
  /* flow-root zabrání "propadnutí" margin-top z .hero-content skrz tento box */
  display: flow-root;
  /* Celková výška sekce (dost prostoru pod pohledem, aby karty zůstaly schované) —
     vycentrování textu ale řeší .hero-content zvlášť, jen na 100vh */
  min-height: calc(100vh + 8rem);
  min-height: calc(100svh + 8rem);
  padding-bottom: calc(var(--space-24) + var(--space-8));
}

@media (max-width: 767px) {
  /* Na mobilu jde hero text přes celou šířku, ne jen na pracovní šířku webu */
  .hero-inner {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--space-6);
    /* Zrušit velkou rezervu z hlavního pravidla — ta byla potřeba jen když
       koláž byla pozadí přes celou sekci; teď má koláž svou vlastní výšku
       (.hero-media) hned pod textem. Nahoře i dole stejný padding modré
       plochy — stejná hodnota (--space-16) jako u .page-hero-content na
       podstránkách (2026-09-17, na přání uživatelky ať je vzdušnost mobilního
       hero homepage stejná jako u podstránek) — nahoře k tomu ještě
       připočtena výška hlavičky, aby se text neschoval pod fixní menu. */
    min-height: auto;
    padding-top: calc(var(--header-height) + var(--space-16));
    padding-bottom: var(--space-16);
  }
}

/* Karty přesahují přes ostrou hranici hero sekce do bílé plochy pod ní */
.services-overlap {
  position: relative;
  z-index: 2;
  margin-top: -8.6rem;
  padding-bottom: var(--space-16);
  /* Odkaz "Naše služby" v hero sekci míří na #sluzby (= tenhle element) —
     bez scroll-margin-top by prohlížeč zarovnal úplný vršek sekce (ikony karet)
     pod fixní hlavičku, takže by byly ikony napůl schované za menu. */
  scroll-margin-top: calc(var(--header-height) + var(--space-6));
}

@media (min-width: 768px) {
  .services-overlap { margin-top: -9.6rem; }
}

@media (min-width: 1024px) {
  .services-overlap { margin-top: -10.6rem; }
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Centrovat vizuálně pod menu, ne přes celou výšku obrazovky */
  margin-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  color: var(--color-white);
}

@media (max-width: 767px) {
  .hero-content {
    /* Odstup od hlavičky teď řeší padding-top na .hero-inner (symetrický
       s padding-bottom dole) — tady stačí zrušit vynucenou výšku na 100vh,
       jinak by centrování naopak roztahovalo mezery nad/pod textem */
    margin-top: 0;
    min-height: auto;
  }
}

.hero-content .eyebrow {
  color: #ffd8bc;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  /* Na úzkém desktopovém sloupci (vedle koláže) musí zůstat na jednom řádku */
  .hero-content .eyebrow { white-space: nowrap; }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  /* Anglický eyebrow je delší než český sloupec (max-width výš) – s nowrap by
     "SOLUTIONS" zajíždělo do fotky. Na širších obrazovkách se vejde. */
  html[lang="en"] .hero-content .eyebrow { white-space: normal; }
}

.hero-content h1 {
  color: var(--color-white);
  font-size: clamp(2.8rem, 2.6rem + 0.5vw, 3rem);
  margin-bottom: var(--space-8);
}

.hero-content .lead {
  color: rgba(255, 255, 255, 0.86);
}

@media (max-width: 767px) {
  .hero-content h1 {
    font-size: clamp(2rem, 1.5rem + 4vw, 2.5rem);
  }
  .hero-content .lead {
    font-size: 1rem;
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-12);
}

@media (max-width: 767px) {
  /* Tlačítka blíž textu než na desktopu – jen na homepage (.hero-content),
     .hero-actions je sdílená třída i s .page-hero-content na podstránkách,
     kde má vlastní, symetrické odsazení (viz níže u .page-hero-content). */
  .hero-content .hero-actions {
    margin-top: var(--space-4);
  }
}

@media (min-width: 768px) {
  /* Spodní hranice drží dost místa pro eyebrow na jeden řádek, škáluje výš na širších obrazovkách */
  .hero-content { max-width: clamp(29rem, 20vw, 32rem); }
  .hero-inner {
    min-height: calc(100vh + 10rem);
    min-height: calc(100svh + 10rem);
    padding-bottom: calc(var(--space-24) + var(--space-12));
  }
}

@media (min-width: 1024px) {
  .hero-inner {
    min-height: calc(100vh + 12rem);
    min-height: calc(100svh + 12rem);
    padding-bottom: calc(var(--space-24) + var(--space-16));
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet (768–1023px): stejná strukturální úprava jako na mobilu — koláž
     jako full-bleed pozadí vedle úzkého sloupce textu tu ukazovala jen tenký
     svislý pruh elektro panelu a zbytek koláže (fotovoltaika, průmysl) byl
     úplně skrytý. Řešení: text přes celou modrou plochu (bez postranního
     sloupce), koláž jako samostatný široký pruh v běžném toku POD textem —
     princip převzatý z mobilního řešení výše, jen s širším (méně vysokým)
     poměrem stran, protože tablet má na šířku mnohem víc místa než mobil. */
  .hero-content { max-width: none; }

  .hero-inner {
    /* Šířka/padding se NEpřebíjí (na rozdíl od mobilu) — necháváme běžné
       chování .container (85 %, max 1280px), aby levý/pravý okraj textu
       lícoval s kartami služeb a všemi dalšími sekcemi pod hero. Dřívější
       pevný padding (--space-8) dával textu o ~26px víc místa než 85 %
       container, takže se text rozjel oproti zbytku stránky. */
    min-height: auto;
    /* Nahoře je vidět jen --space-24 (--header-height je fixní hlavička,
       ne vizuální odsazení od textu) — dole musí být stejných --space-24,
       ať je odstup od hlavičky/nahoře a od fotky/dole opravdu stejný. Celá
       mezera před fotkou zůstává tady (ne na .hero-media jako margin) —
       ::before níže kryje gradientem přesně box .hero-inner (včetně
       paddingu), takže cokoliv za jeho hranicí by ukázalo jinou, plochou
       barvu z pozadí .hero a vzniklo by viditelné švové rozhraní. */
    padding-top: calc(var(--header-height) + var(--space-24));
    padding-bottom: var(--space-24);
  }

  /* Gradient přesunutý sem (ne jen na .hero) — .hero-media tu není absolutně
     pozicovaná, takže prodlužuje výšku celé sekce, a gradient definovaný jen
     na .hero by měl svůj světlejší konec schovaný za neprůhlednou fotkou.
     `::before` musí "prokouknout" mimo 85% šířku .hero-inner (container) do
     celé šířky obrazovky, jinak by na okraji vznikl viditelný šev proti
     ploché barvě .hero za ním — odtud trik s `left:50%/width:100vw/translateX`. */
  .hero-inner::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: -1;
    background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary-dark) 55%, var(--color-primary) 100%);
  }

  .hero-content {
    margin-top: 0;
    min-height: auto;
  }

  .hero-content .eyebrow {
    /* Bez úzkého postranního sloupce (viz výše) může eyebrow zalomit na dva
       řádky stejně jako na mobilu, když se nevejde do 85% šířky. */
    white-space: normal;
    margin-bottom: var(--space-8);
  }

  /* Sladěné rozestupy mezi eyebrow/nadpisem/textem/tlačítky — dřív 24/32/64px
     (nekonzistentní), sjednoceno na 24px (--space-6), ale to bylo na vkus
     uživatelky moc nahusto — teď jednotně 32px (--space-8) mezi každou
     dvojicí, o trochu vzdušnější. .hero-content je flex column, takže se
     sousední margins (na rozdíl od běžných blokových boxů) NEkolabují na
     větší z obou, ale sečtou se — .lead margin-bottom je proto nutné
     vynulovat, ať mezeru dělá jen .hero-actions margin-top. */
  .hero-content h1 { margin-bottom: var(--space-8); }
  .hero-content .lead { margin-bottom: 0; }
  .hero-actions { margin-top: var(--space-8); }

  .hero-media {
    position: relative;
    left: auto;
    width: 100%;
    /* Vyšší poměr stran než původních 12/5 = 2.4 (ten ukazoval jen tenký
       vodorovný pruh, cca 33 % výšky, uprostřed vysoké koláže) – ale 4/3
       (60 %) dělalo fotku tak vysokou, že přesah karet pod ní (viz
       .services-overlap) vypadal jako by karty vůbec nevyčuhovaly. 3/2
       (cca 52 % výšky) je kompromis: pořád mnohem čitelnější panely než
       12/5, ale přesah karet je vůči nižší fotce znovu vidět. */
    aspect-ratio: 3 / 2;
    /* Bez vlastního margin-top — mezera před fotkou je teď celá v
       .hero-inner padding-bottom (viz výše), aby ji celou kryl gradient
       a nevznikl na rozhraní viditelný švík. */
  }

  .hero-media img {
    /* Výchozí `center center` ukazovalo příliš z vrchu koláže (horní část
       elektro panelu) — posunuto níž ve zdrojovém obrázku (= obrázek
       vizuálně "nahoru" ve výřezu), ať je víc vidět středová část
       (fotovoltaika) a míň vrch. */
    object-position: center 65%;
  }

  .services-overlap {
    /* Karta má vykukovat přes spodní okraj fotky zřetelně (ne jen náznakem),
       ale míň než na desktopu (-9.6rem/-10.6rem, tam je vedle fotky dost
       místa i nad kartou). */
    margin-top: -6rem;
  }
}

/* --------------------------------------------------------------------------
   7. Pohotovostní pás — plovoucí výrazná karta
   -------------------------------------------------------------------------- */
.band {
  position: relative;
  z-index: 1;
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.band-inner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: linear-gradient(115deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  box-shadow: var(--shadow-lg);
  color: var(--color-white);
}

.band-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(100deg, rgba(15, 34, 61, 0.6) 0%, rgba(15, 34, 61, 0.2) 55%, rgba(15, 34, 61, 0) 100%),
    url('Obrazky/Spolecne/pohotovost-pas.jpg') center 34% / cover no-repeat;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 30%, rgba(0, 0, 0, 0.5) 52%, #000 76%);
  mask-image: linear-gradient(100deg, transparent 0%, transparent 30%, rgba(0, 0, 0, 0.5) 52%, #000 76%);
}

.band-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  box-shadow: 0 10px 22px -8px rgba(224, 106, 44, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: band-icon-pulse 2200ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.band-icon img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.band-text { position: relative; z-index: 1; flex-grow: 1; }

.band h2 { color: var(--color-white); margin-bottom: var(--space-2); }

.band p {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-lead);
  max-width: 38rem;
  margin-bottom: 0;
}

.band .btn-pulse {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  animation: band-pulse 2200ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes band-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
  100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
}

@keyframes band-icon-pulse {
  0% { box-shadow: 0 10px 22px -8px rgba(224, 106, 44, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 0 rgba(255, 255, 255, 0.5); }
  100% { box-shadow: 0 10px 22px -8px rgba(224, 106, 44, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 14px rgba(255, 255, 255, 0); }
}

@media (max-width: 767px) {
  .band-inner {
    /* Vyšší karta — text (nahoře) zůstává stejně velký a čitelný, dole
       přibude prostor, kde je přes masku dobře vidět fotka */
    min-height: 32rem;
  }
  .band-photo {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.5) 58%, #000 82%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.5) 58%, #000 82%);
    /* Úzká/vysoká mobilní karta přes "cover" na širokoúhlé desktopové fotce
       (1800×649) nemá žádnou svislou rezervu k posunu (výška se srovná
       přesně, "cover" vždy ořízne jen šířku) – jakákoli změna Y v
       background-position tam proto nic nezmění. Řešení: samostatný,
       předem oříznutý výřez (750×500, jen displej/ciferník multimetru
       + rozvaděč, bez zbytku ruky/kabelové role) jen pro mobil. */
    background-image:
      linear-gradient(100deg, rgba(15, 34, 61, 0.6) 0%, rgba(15, 34, 61, 0.2) 55%, rgba(15, 34, 61, 0) 100%),
      url('Obrazky/Spolecne/pohotovost-pas-mobile.jpg');
    background-position: 0% 0%, 50% center;
  }
}

@media (min-width: 768px) {
  .band-inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-12);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet: stejné svislé uspořádání jako na mobilu (ikona/nadpis/text nahoře,
     tlačítko pod tím, fotka jako maskovaný pruh dole) místo řádkového z
     pravidla výše — to na tomhle rozsahu bylo přehuštěné: text se lámal do
     mnoha úzkých řádků, tlačítko i fotka byly stěsnané doprostřed karty. */
  .band-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    padding: var(--space-8);
    /* Nižší než mobilních 32rem — širší sloupec zalomí text do míň řádků,
       takže by se stejná výška zbytečně roztáhla do prázdna nad fotkou. */
    min-height: 26rem;
  }

  .band-photo {
    /* Stejný svislý ořez a maska jako na mobilu (viz @media max-width:767px
       výše) — širokoúhlá desktopová fotka (1800×649) by se přes "cover" na
       vysoké kartě ořízla jen vodorovně a svislá maska by nikdy nic
       neodkryla (žádná rezerva k posunu). */
    background-image:
      linear-gradient(100deg, rgba(15, 34, 61, 0.6) 0%, rgba(15, 34, 61, 0.2) 55%, rgba(15, 34, 61, 0) 100%),
      url('Obrazky/Spolecne/pohotovost-pas-mobile.jpg');
    /* Y posunuto z "center" (50 %) na 85 % — širší tabletová karta ořízne
       tuhle vysokou fotku hodně svisle (vidět je jen ~44 % její výšky), a
       střed obrázku padá na řady jističů, ne na multimetr v ruce dole.
       Beze změny velikosti/zoomu (pořád "cover") — jen jiné okno v témže
       rámu, ať je multimetr zase vidět, ale pořád v kontextu rozvaděče. */
    background-position: 0% 0%, 50% 85%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.5) 58%, #000 82%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.5) 58%, #000 82%);
  }

  .band .btn-pulse {
    /* Tlačítko posunuté doprava — .band-inner je flex column s
       align-items:flex-start, tohle přebíjí zarovnání jen pro tento prvek. */
    align-self: flex-end;
  }
}

/* --------------------------------------------------------------------------
   8. Karty služeb — skleněné karty přesahující přes hranici hero sekce
   -------------------------------------------------------------------------- */
.service-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-radius: var(--radius-lg);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background-color var(--transition);
  height: 100%;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.6);
}

.service-card-body {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.service-card-icon {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 0 var(--space-6) 0;
}

.service-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.75))
    drop-shadow(0 0 30px rgba(255, 255, 255, 0.55))
    drop-shadow(0 3px 6px rgba(15, 34, 61, 0.18));
}

.service-card-body p { color: var(--color-muted); flex-grow: 1; font-size: var(--fs-base); }

.service-card-body .btn { margin-top: var(--space-4); align-self: flex-start; }

/* --------------------------------------------------------------------------
   9. O nás — fotka vlevo se šikmým řezem, světle modrý panel vpravo
   -------------------------------------------------------------------------- */
.about-section { position: relative; padding-block: var(--space-16); }

.about-split {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-bg-blue);
}

.about-media {
  position: relative;
  z-index: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.about-media img { width: 100%; height: 100%; object-fit: cover; object-position: left 35%; display: block; }

.about-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(31, 78, 140, 0.6) 100%);
  pointer-events: none;
}

.about-content {
  --tunnel-inset: calc((100% - min(var(--container-width), var(--container-max))) / 2);
  position: relative;
  z-index: 1;
  color: var(--color-primary-dark);
  padding: var(--space-12) var(--tunnel-inset);
}

.about-content h2 { color: var(--color-primary-dark); font-weight: 800; }

.about-content > p { font-size: var(--fs-base); color: var(--color-text); }

.about-content .btn { margin-top: var(--space-4); }

.about-watermark {
  position: absolute;
  z-index: 0;
  bottom: 3.5rem;
  right: 4%;
  width: 14rem;
  aspect-ratio: 468 / 266;
  background: url('Obrazky/Spolecne/logo-mark-light.png') center / contain no-repeat;
  opacity: 0.2;
  pointer-events: none;
}

@media (max-width: 767px) {
  .about-watermark {
    /* Logo zůstává na modré ploše nad fotkou (stejně jako na desktopu je
       na plché modré ploše, ne na fotce samotné — na fotce by kvůli
       opacity 0.2 nebylo vůbec vidět). "75vw" = výška fotky (.about-media
       má aspect-ratio 4/3 na celou šířku), takže bottom: 75vw + odstup =
       logo sedí těsně nad horní hranou fotky, se stejným malým odstupem
       od spodní hrany modré plochy jako od pravého okraje. */
    width: 11rem;
    bottom: calc(75vw + var(--space-2));
    right: var(--space-2);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet: stejná skládaná struktura (text → watermark → fotka na celou
     šířku) jako na mobilu, ale fotka dřív byla mnohem vyšší než textový
     blok (aspect-ratio 4/3 na celou šířku obrazovky = 576–767px, zatímco
     text má jen ~420px) — na žádost uživatelky zkrácena na pevnou výšku,
     jen o něco vyšší než text, místo škálování s šířkou. */
  .about-media {
    aspect-ratio: auto;
    height: 28rem;
  }

  .about-media img {
    /* Výchozí `left 35%` je zděděné z ostatních šířek — na tomhle nižším,
       širším výřezu (viz aspect-ratio výše) to nechávalo v obraze zbytečně
       moc oblohy. Posunuto o kousek níž ve zdrojové fotce (= nahoru ve
       výřezu), ať je víc auta/domu a míň oblohy. */
    object-position: left 60%;
  }

  .about-watermark {
    /* Stejný princip jako v mobilním pravidle výše (bottom = výška fotky +
       odstup), ale fotka už neroste s `vw` (viz .about-media), takže i tahle
       hodnota je teď pevná, ne `vw`-based. */
    width: 11rem;
    bottom: calc(28rem + var(--space-2));
    right: var(--space-2);
  }
}

.feature-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: -3.5rem;
}

.feature-item {
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform var(--transition), box-shadow var(--transition);
}

.feature-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.feature-item-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: var(--color-white);
  margin-bottom: var(--space-3);
  box-shadow: 0 8px 18px -8px rgba(224, 106, 44, 0.6);
}

.feature-item-icon svg { width: 1.4rem; height: 1.4rem; }

.feature-item-icon img { width: 2.3rem; height: 2.3rem; object-fit: contain; }

.feature-item h3 { font-size: 1.05rem; color: var(--color-primary-dark); margin-bottom: var(--space-2); }

.feature-item p { font-size: var(--fs-base); color: var(--color-muted); margin: 0; }

@media (min-width: 640px) {
  .feature-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Na tabletu byly 4 karty vedle sebe v jednom úzkém řádku moc stěsnané
     (text se lámal do mnoha řádků) — po dvou pod sebou je čitelnější. */
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .about-content { padding: var(--space-16) var(--tunnel-inset); }
}

@media (min-width: 1024px) {
  .about-split { display: flex; min-height: 36rem; }
  .about-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    aspect-ratio: auto;
    width: 50%;
    height: 100%;
    clip-path: polygon(0 0, 100% 0, calc(100% - 4.5rem) 100%, 0 100%);
  }
  .about-media::after {
    background: linear-gradient(100deg, transparent 60%, rgba(31, 78, 140, 0.35) 100%);
  }
  .about-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    padding: var(--space-16) var(--tunnel-inset) var(--space-16) calc(50% + 4.5rem);
  }
}

/* --------------------------------------------------------------------------
   10. Naše realizace — full-bleed galerie
   -------------------------------------------------------------------------- */
.showcase-section { padding-bottom: 0; }

.showcase-gallery {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.showcase-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.showcase-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms ease;
}

.showcase-photo > img { cursor: zoom-in; }

.showcase-item:hover img { transform: scale(1.06); }

.showcase-tag {
  position: absolute;
  right: var(--space-4);
  top: var(--space-4);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  box-shadow: 0 8px 18px -8px rgba(22, 58, 104, 0.6);
  transition: transform var(--transition);
}

.showcase-tag:hover { transform: scale(1.08); }

.showcase-tag img {
  width: 2.1rem;
  height: 2.1rem;
  object-fit: contain;
}

@media (max-width: 767px) {
  /* Diagonální řez na mobilu dělal problémy (bílý proužek v místě, kde se
     posunutý transform a polygon nepřekrývaly přesně s sousední fotkou) —
     na mobilu proto standardní rovné oddělení fotek (mřížka 3×2, bez skew). */

  /* Odznaky s ikonou oboru na malé fotce zmenšit, ať ji nezakrývají */
  .showcase-tag {
    right: var(--space-2);
    top: var(--space-2);
    width: 2.25rem;
    height: 2.25rem;
  }
  .showcase-tag img {
    width: 1.25rem;
    height: 1.25rem;
  }
}

@media (min-width: 768px) {
  .showcase-gallery {
    display: flex;
    align-items: flex-start;
    --showcase-skew: 2rem;
  }

  .showcase-item {
    flex: 1 1 0%;
    min-width: 0;
  }

  .showcase-item + .showcase-item { margin-left: calc(var(--showcase-skew) * -1); }

  .showcase-photo {
    clip-path: polygon(var(--showcase-skew) 0, 100% 0, calc(100% - var(--showcase-skew)) 100%, 0 100%);
  }

  .showcase-item:first-child {
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--showcase-skew)) 100%, 0 100%);
  }

  .showcase-item:last-child {
    clip-path: polygon(var(--showcase-skew) 0, 100% 0, 100% 100%, 0 100%);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Na tabletu je všech 6 fotek vedle sebe v jednom řádku (stejně jako na
     desktopu), ale sloupec je tu jen ~1/6 šířky obrazovky (128–170px) —
     s poměrem 3/4 z toho vyšla velmi nízká, "useknutá" fotka. Vyšší poměr
     dá fotkám víc prostoru, aniž by se měnil počet sloupců nebo diagonální
     řez. */
  .showcase-photo { aspect-ratio: 3 / 6; }
}

.showcase-cta-band {
  background: var(--color-white);
  padding-top: var(--space-24);
  padding-bottom: calc(var(--space-24) + var(--space-4));
  text-align: center;
}

@media (max-width: 767px) {
  .showcase-cta-band {
    padding-top: var(--section-padding-mobile);
    padding-bottom: var(--section-padding-mobile);
  }
}

.showcase-cta-lead {
  font-size: clamp(1.15rem, 1.1rem + 0.25vw, 1.35rem);
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.showcase-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   10b. Lightbox galerie
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 18, 30, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition);
}

.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: min(88vw, 1100px);
  margin: 0;
}

.lightbox-img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  object-fit: contain;
}

.lightbox-caption {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-white);
  text-align: center;
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color var(--transition);
}

.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.25); }

.lightbox-close {
  top: var(--space-4);
  right: var(--space-4);
  width: 2.75rem;
  height: 2.75rem;
}

.lightbox-close svg { width: 1.2rem; height: 1.2rem; }

.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 3.25rem;
  height: 3.25rem;
}

.lightbox-nav svg { width: 1.5rem; height: 1.5rem; }

.lightbox-nav--prev { left: var(--space-4); }
.lightbox-nav--prev svg { transform: rotate(180deg); }
.lightbox-nav--next { right: var(--space-4); }

.lightbox-nav:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   11. Kontakt / poptávka
   -------------------------------------------------------------------------- */
.contact-section {
  background: var(--color-bg-blue);
  color: var(--color-text);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--space-24);
}


.contact-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

.contact-info h2 { color: var(--color-primary-dark); }

.contact-info .lead { color: var(--color-text); }

.contact-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.contact-form-card {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.contact-form-card h3 {
  color: var(--color-primary-dark);
  margin-bottom: var(--space-6);
}

.form-group { margin-bottom: var(--space-3); }

.form-group label:not(.checkbox-item),
.form-group-label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: var(--space-1);
  color: var(--color-primary-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-text);
  font-size: var(--fs-small);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-3);
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  line-height: 1;
  color: var(--color-text);
  cursor: pointer;
}

.checkbox-item:nth-child(1) { grid-column: 1; grid-row: 1; }
.checkbox-item:nth-child(2) { grid-column: 2; grid-row: 1; }
.checkbox-item:nth-child(3) { grid-column: 1; grid-row: 2; }
.checkbox-item:nth-child(4) { grid-column: 2; grid-row: 2; }

@media (max-width: 639px) {
  .checkbox-grid { grid-template-columns: 1fr 1fr; }
}

.checkbox-item input {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(224, 106, 44, 0.3);
}

.form-group textarea { resize: vertical; min-height: 7rem; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  font-size: var(--fs-small);
  color: var(--color-muted);
  text-align: center;
  margin-top: var(--space-3);
  margin-inline: auto;
  margin-bottom: 0;
}

/* Validace formuláře (script.js, sekce 5): hvězdička u povinných polí, chybová
   hláška pod polem a souhrnný rámeček nad tlačítkem. Formulář má novalidate,
   takže prohlížečové bubliny nejsou vidět a chyby ukazuje jen tohle. */
.form-req {
  color: var(--color-accent-dark);
  font-style: normal;
}

.form-required-note {
  font-size: var(--fs-small);
  color: var(--color-muted);
  margin: var(--space-4) 0 var(--space-3);
}

.form-error-msg {
  display: none;
  margin: var(--space-1) 0 0;
  font-size: var(--fs-small);
  color: #b3261e;
}

.form-error-msg.visible { display: block; }

.form-group.has-error input:not([type="checkbox"]),
.form-group.has-error textarea {
  border-color: #b3261e;
}

.form-alert-box { display: none; }

.form-alert-box:not(:empty) {
  display: block;
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: rgba(179, 38, 30, 0.08);
  border: 1px solid rgba(179, 38, 30, 0.35);
  color: #b3261e;
  font-size: var(--fs-small);
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 0.8fr 1.3fr; align-items: start; }

  .contact-section::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    z-index: 0;
    background-image: linear-gradient(90deg, var(--color-bg-blue) 0%, transparent 100%), url('Obrazky/Kontakt/kontakt-pozadi.jpg');
    background-size: cover;
    background-position: right center;
    pointer-events: none;
  }
}

/* Kontakt (kontakt.html) používá STEJNOU .contact-section komponentu jako
   homepage, včetně dekorativní fotky na pozadí (.contact-section::before
   výše, Obrazky/Kontakt/kontakt-pozadi.jpg) – na uživatelčino přání 2026-09-10 má
   sekce "Nezávazná poptávka" vypadat stejně jako na homepage. (Dřív měla
   tahle stránka vlastní modifikátor .contact-section--plain, který tuhle
   fotku vypínal – hero sekce tehdy používala TUTÉŽ fotku, takže by se
   opakovala dvakrát. Hero teď používá jinou fotku, karta-kontakt.jpg,
   takže důvod pro vypnutí zmizel a modifikátor byl odstraněný i z HTML.) */

/* Kontakt — 3 karty (Kontaktní údaje / Sídlo+Sledujte nás / Fakturační
   údaje): stejná .feature-item skleněná karta jako všude jinde na webu,
   3 stejně velké sloupce (mobil 1, tablet 2, desktop 3) – stejný vzor jako
   u ostatních trojkových výjimek .feature-grid na webu. Karta "Kontaktní
   údaje" je díky 4 kontaktním metodám (telefon + 3 e-maily) přirozeně
   vyšší než zbylé dvě karty – to je v pořádku (na uživatelčino přání
   2026-09-10 zkoušena i varianta s širší kartou přes celou řádku, ale
   nelíbila se, vráceno k jednoduchým stejným kartám). Zalomení dlouhých
   e-mailů řeší štítek NAD odkazem (.contact-methods-grid níže), ne šířka
   karty. */
.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

/* Vlastní ikony (Obrazky/Ikony/kontaktni-udaje.png, sidlo.png, fakturacni-
   udaje.png, doplněné 2026-09-09, zpracované stejným vzorcem jako všechny
   ostatní ikony na webu – canvas_side = round(max(content_h/0.85,
   content_w))) jsou barevné navy/oranžové, ne bílý symbol – stejný důvod
   jako u .offer-grid .feature-item-icon: bez kolečka, jinak by se bily
   s vlastní oranžovou. Podsvícení (bílý glow + tmavý stín) na přání
   uživatelky doplněno, stejné jako u .service-card-icon img na homepage
   (na rozdíl od .offer-grid/.step-number, kde podobný filtr dřív dělal
   viditelný šedý "flek" – viz komentář u .step-number – zkontrolováno
   vizuálně, že se tu stejný problém neopakuje). */
.contact-info-grid .feature-item-icon {
  width: 2.625rem;
  height: 2.625rem;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.contact-info-grid .feature-item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.75))
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.55))
    drop-shadow(0 1px 1.5px rgba(15, 34, 61, 0.18));
}

.contact-info-grid .feature-item h3 { font-size: 1.2rem; margin-bottom: var(--space-3); }

.contact-info-grid address,
.contact-info-grid p {
  font-style: normal;
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
}

.contact-info-grid address { line-height: 1.7; }

.contact-info-grid a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: none;
}

.contact-info-grid a:hover { color: var(--color-accent); }

.contact-info-grid a svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }

@media (min-width: 768px) {
  .contact-info-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .contact-info-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Malý štítek "Sledujte nás" uvnitř karty "Sídlo" – druhý blok obsahu ve
   stejné kartě (adresa nahoře, sociální sítě dole), potřebuje jen jemné
   odlišení od adresy, ne plnohodnotný nadpis jako .feature-item h3.
   Specificita MUSÍ být vyšší než ".contact-info-grid p" výše (jinak by
   tahle barva prohrála a text by zdědil obecnou šedou barvu odstavců –
   to byl přesně nahlášený bug "Sledujte nás má jinou barvu než ostatní
   nadpisy"). */
.contact-info-grid p.contact-card-subhead {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: var(--space-4) 0 var(--space-2) 0;
}

/* Kontaktní metody (telefon + 3 e-maily) v kartě "Kontaktní údaje" – každá
   metoda má vlastní malý oranžový štítek NAD odkazem (Poptávky/Servis/
   Fakturace), natrvalo (ne jen jako fallback při nedostatku místa). Dřívější
   pokus mít štítek INLINE před e-mailem (2026-09-10) se na menším monitoru
   znovu zalamoval – 3sloupcová mřížka dělá kartu užší při každé šířce mezi
   1024–~1440px, takže "administrace@raskaengineering.cz" (a na užších
   monitorech i další e-maily) se štítkem na stejném řádku nikdy spolehlivě
   nevejdou; žádná rozumná velikost písma to nevyřeší pro všechny šířky.
   Nadřazený řádek/sloupec proto NENÍ podmíněný flex-wrapem – je to natrvalo
   sloupcové uspořádání, stejné na jakémkoliv monitoru. Telefon (bez
   štítku, viz HTML) je zvýrazněný oranžově místo tmavě modře, ať je na
   první pohled odlišený od 3 e-mailů pod ním. */
.contact-methods-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.contact-method {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.contact-method--phone a {
  color: var(--color-accent);
}

.contact-method--phone a:hover {
  color: var(--color-accent-dark);
}

.contact-tag {
  display: inline-block;
  flex-shrink: 0;
  padding: 0.2em 0.7em 0.05em;
  border-radius: var(--radius-pill);
  background: var(--color-bg-orange);
  color: var(--color-accent-dark);
  font-size: 0.6625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  width: fit-content;
}

/* Sledujte nás — stejný princip jako .footer-social (kolečko, hover přejde
   na oranžový gradient), jen invertované barvy: tahle karta je na SVĚTLÉM
   skle (na rozdíl od tmavé patičky), takže výchozí kolečko je světle modré
   se tmavě modrou ikonou místo bílé na průhledné tmavé. */
.social-links {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-bg-blue);
  color: var(--color-primary-dark);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.social-links a:hover {
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: var(--color-white);
  transform: translateY(-2px);
}

.social-links svg { width: 1.25rem; height: 1.25rem; }

/* LinkedIn ikona v této kartě používá vlastní symbol #icon-linkedin-cutout:
   tmavě modrý čtverec s PRŮHLEDNÝM "in" (evenodd výřez, prosvítá kolečko –
   světle modré, při hoveru oranžový gradient), stejně jako ostatní ikony. */

/* --------------------------------------------------------------------------
   12. Patička
   -------------------------------------------------------------------------- */
.site-footer {
  background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary-dark) 55%, var(--color-primary) 100%);
  color: rgba(255, 255, 255, 0.78);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  padding-block: var(--space-16) var(--space-12);
}

.footer-brand .brand { margin-bottom: var(--space-6); }
.footer-brand .brand-logo { height: 6rem; }

.footer-brand p {
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  max-width: 20rem;
}

.footer-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 24px -16px rgba(224, 106, 44, 0);
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}

.footer-social a:hover {
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  box-shadow: 0 14px 24px -16px rgba(224, 106, 44, 0.6);
  transform: translateY(-2px);
}

/* LinkedIn ikona (karta na Kontaktu i patička) je symbol #icon-linkedin-cutout:
   čtverec s PRŮHLEDNÝM "in", takže "in" má vždy barvu kolečka pod ikonou
   (v patičce tmavá průhledná, po najetí myší oranžový gradient). */

.footer-social svg { width: 1.15rem; height: 1.15rem; }

.footer-col h3 {
  color: var(--color-white);
  font-size: 1rem;
  margin-bottom: var(--space-4);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (max-width: 1023px) {
  /* Navigace v patičce ve 2 sloupcích po 3 – vlevo služby, vpravo
     Domů/O nás/Kontakt. Pořadí v HTML zůstává beze změny (Domů, Elektro
     služby, Fotovoltaika, Průmyslová řešení, O nás, Kontakt), přeskládání
     řeší jen explicitní grid-column/row podle pořadí položek. Od 1024px
     se vrací původní jednosloupcové zarovnání na výšku (viz níže). */
  .footer-nav-col ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-6);
  }
  .footer-nav-col ul li:nth-child(1) { grid-column: 2; grid-row: 1; } /* Domů */
  .footer-nav-col ul li:nth-child(2) { grid-column: 1; grid-row: 1; } /* Elektro služby */
  .footer-nav-col ul li:nth-child(3) { grid-column: 1; grid-row: 2; } /* Fotovoltaika */
  .footer-nav-col ul li:nth-child(4) { grid-column: 1; grid-row: 3; } /* Průmyslová řešení */
  .footer-nav-col ul li:nth-child(5) { grid-column: 2; grid-row: 2; } /* O nás */
  .footer-nav-col ul li:nth-child(6) { grid-column: 2; grid-row: 3; } /* Kontakt */
}

.footer-col ul a {
  display: block;
  font-size: var(--fs-small);
  line-height: 1.8;
}

.footer-col a:hover { color: var(--color-white); }

.footer-contact-primary {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.footer-contact-primary a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-white);
  font-weight: 600;
}

.footer-contact-primary a:hover { color: var(--color-white); }

.footer-contact-primary svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  color: var(--color-accent);
}

.footer-address {
  font-style: normal;
  font-size: var(--fs-small);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.7);
}

.footer-legal {
  margin-top: var(--space-3);
  margin-bottom: 0;
  font-size: var(--fs-small);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: var(--space-6);
  text-align: center;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.55);
}

.footer-bottom p {
  margin-inline: auto;
  margin-bottom: 0;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-weight: 600;
}

.footer-bottom a:hover { color: var(--color-white); }

@media (min-width: 640px) {
  .footer-top { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .footer-top { grid-template-columns: repeat(4, 1fr); }

  .footer-nav-col {
    display: flex;
    flex-direction: column;
  }

  .footer-nav-col ul {
    flex: 1;
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   13. (uvolněno – cookie lišta odstraněna 2026-09-17, viz stav.md: web
   nesetuje žádné cookies vyžadující souhlas, font Outfit je teď lokální)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   14. Utility
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   15. Standardní vertikální padding obsahových sekcí na mobilu
   -------------------------------------------------------------------------- */
/* Na desktopu má každá sekce svůj vlastní (často větší) padding-block/top/
   bottom nastavený výše. Na mobilu to ale zbytečně dělá sekce (O nás, CTA
   pás před kontaktem, kontaktní formulář...) vysoké a řídké. Jednotný,
   menší, ale dostatečný padding (--section-padding-mobile, 3rem/48px) proto
   sjednocuje vzhled napříč celou stránkou. Tento blok je záměrně úplně na
   konci souboru, aby (při stejné specificitě jednoho selektoru) vždy přebil
   dřívější nepodmíněná pravidla pro tytéž sekce – viz i poznámka o pořadí
   pravidel v sekci 6 (Hero). */
@media (max-width: 767px) {
  /* Jen padding-top u .section – .showcase-section si dole záměrně
     nastavuje padding-bottom:0 (galerie navazuje na CTA pás bez mezery)
     a nechceme jí to přepsat. */
  .section {
    padding-top: var(--section-padding-mobile);
  }
  .about-section {
    padding-block: var(--section-padding-mobile);
  }
  .contact-section {
    padding-block: var(--section-padding-mobile);
  }
}

/* --------------------------------------------------------------------------
   16. Standardní vertikální padding obsahových sekcí na tabletu
   -------------------------------------------------------------------------- */
/* Na desktopu má každá sekce svůj vlastní padding-block/top/bottom laděný
   zvlášť (48px u .band, 64px u .about-section/.showcase-section, 96–112px
   u .contact-section/.showcase-cta-band) — na tabletu (768–1023px; hero se
   podle zadání neřeší, viz sekce 6) ale takhle rozházené hodnoty vedle sebe
   při scrollování působí nesladěně. Sjednoceno na var(--space-16) (64px) —
   stejná hodnota, jakou už přirozeně mají .section/.about-section, jen
   přebité u tří sekcí, které se od ní na tabletu odchylovaly. Blok je
   záměrně na konci souboru (stejně jako mobilní ekvivalent v sekci 15), aby
   při stejné specificitě vždy přebil dřívější nepodmíněná pravidla. */
@media (min-width: 768px) and (max-width: 1023px) {
  .band {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
  .contact-section {
    padding-block: var(--space-16);
  }
  .showcase-cta-band {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
}

/* --------------------------------------------------------------------------
   17. Podstránky — hero, nabídka služeb, elektrorevize, FAQ, CTA pás
   -------------------------------------------------------------------------- */

/* Hero podstránky: text vlevo na tmavém gradientu, fotka vpravo se šikmým
   řezem (stejný princip jako .about-media, jen zrcadlově — fotka vpravo,
   proto se seřezává levá hrana) — sdílí vizuální jazyk s O nás místo aby
   kopíroval jedinečný full-bleed hero homepage. Homepage hero má zůstat
   největší a nejnápadnější prvek webu — hero podstránek je proto záměrně
   menší a klidnější: žádné vh-based min-height (výška plyne jen z obsahu),
   textu je vždy víc místa než fotce (58/42), protože nadpis a text
   podstránek bývají delší než krátký claim na homepage. */
.page-hero {
  position: relative;
  /* Stejný vzorec jako .hero/.site-footer, ale se stlačenými zlomy (dřív
     0/55/100 %) – na nízké ploché sekci podstránky (na rozdíl od hero na
     homepage přes celou výšku okna) padal světlejší konec (55–100 %)
     geometricky mimo viditelnou oblast (na desktopu pod fotku, jinde pod
     spodní okraj), takže gradient vždy vypadal jako plná tmavá barva. */
  background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary-dark) 15%, var(--color-primary) 55%);
  isolation: isolate;
  overflow: hidden;
  /* Sekce leží hned pod fixní hlavičkou — offset patří sem jednou, ne
     zvlášť na mobilu/tabletu/desktopu (viz poučení v sekci 6, Hero). */
  padding-top: var(--header-height);
  /* Rezerva dole, do které přesahují karty "Co nabízíme" (.offer-overlap,
     stejná technika jako .hero-inner padding-bottom + .services-overlap na
     homepage) – bez ní by přesahující karty ležely na bílém pozadí další
     sekce, ne na modrém gradientu hero. */
  padding-bottom: var(--space-16);
}

@media (max-width: 1023px) {
  /* Do 1024px nese tuhle rezervu už sama fotka (viz .page-hero-media
     padding-bottom výše, který k poměru 4:3 přičítá přesně tuhle
     hodnotu) – kdyby zůstala i tady, sečetla by se s tou ve fotce a karty
     by byly zarovnané na spodek PRÁZDNÉ rezervy za už vyšší fotkou,
     místo aby přesahovaly do samotné fotky. */
  .page-hero {
    padding-bottom: 0;
  }
}

.page-hero-split {
  /* BEZ position:relative – .page-hero-media na desktopu (1024px+) je
     position:absolute a potřebuje mít za containing block přímo .page-hero
     (kvůli jeho padding-bottom rezervě, do které má fotka sahat), ne tenhle
     mezičlánek. Kdyby tu position:relative zůstalo, staly by se z něj
     nejbližší pozicovaný předek a fotka by končila na konci textového
     sloupce (bez rezervy) – přesně to způsobovalo přetrvávající modrý pruh. */
  display: flex;
  flex-direction: column;
}

.page-hero-content {
  --tunnel-inset: calc((100% - min(var(--container-width), var(--container-max))) / 2);
  position: relative;
  z-index: 1;
  color: var(--color-white);
  /* Souměrný padding nahoře/dole (dřív space-12/space-8 – nesouměrné). */
  padding: var(--space-16) var(--tunnel-inset);
}

.page-hero-content h1 {
  color: var(--color-white);
  /* Bez vlastní velikosti by nadpis spadl na obecnou --fs-h1 škálu (až
     3.75rem/60px na desktopu) a byl by VĚTŠÍ než homepage hero (max 3rem/
     48px) – přesný opak žádoucího stavu. Homepage musí zůstat vizuálně
     nejmarkantnější, hero podstránek je proto vždy o něco menší napříč
     všemi šířkami (cca 75–83 % homepage hodnoty). */
  font-size: clamp(1.75rem, 1.5rem + 1.6vw, 2.5rem);
  margin-bottom: var(--space-6);
}

.page-hero-content .lead {
  color: rgba(255, 255, 255, 0.86);
  /* Na přání uživatelky (2026-09-17) stejná velikost jako u odstavce v
     sekci .page-cta – zděděná základní .lead škála (--fs-lead), žádný
     vlastní override. */
  margin-bottom: 0;
}

@media (max-width: 767px) {
  /* Bez tohohle by tlačítka zdědila mobilní override .hero-content
     .hero-actions (16px, laděný pro homepage) – tady chceme stejnou mezeru
     jako pod nadpisem (h1 margin-bottom: var(--space-6)), ne menší. Na
     tabletu/desktopu zůstává hero-actions na sdílených 48px beze změny. */
  .page-hero-content .hero-actions {
    margin-top: var(--space-6);
  }
}

.page-hero-media {
  position: relative;
  width: 100%;
  /* Fotka rozvaděče beze změny/ořezu (celá, přesně jak ji dodala
     uživatelka) – poměr ~0,82 (na výšku). Box na desktopu má fixní výšku
     ~640px danou textovým sloupcem, ale proměnlivou šířku (42 % viewportu),
     takže viditelný podíl fotky se breakpoint od breakpointu dost liší –
     jedno object-position tedy nesedí úplně stejně na všech šířkách, ale
     to je akceptovaný kompromis výměnou za nezořezanou fotku. */
  /* Klasický intrinsic-ratio box (padding-bottom v % šířky) místo čistého
     aspect-ratio – umožňuje k poměru 4:3 (=75 %) přičíst ještě FIXNÍCH
     --space-16 navíc, ať fotka sahá až do spodní rezervy .page-hero, do
     které přesahují karty "Co nabízíme" (.offer-overlap, margin-top:
     -4rem). Bez týhle přidané výšky ležel horní okraj karet na holém
     modrém pozadí (rezerva byla prázdná, ne fotka) místo na fotce –
     translucentní sklo karty se namíchalo s tmavě modrou místo s fotkou a
     vytvořilo nevzhledný namodralý pruh. Jen do 1024px – od 1024px řeší
     stejnou věc .page-hero-media { position:absolute; bottom:0 } níže.
     Bez explicitního height (necháno na auto) – box-sizing je border-box,
     takže by height:0 padding do celkové výšky nezapočítal a box by
     zůstal 0px vysoký; s height:auto ho auto-výška spočítá správně jako
     součet paddingu (žádný jiný obsah box nevyplňuje, img je absolutní). */
  padding-bottom: calc(75% + var(--space-16));
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Na tabletu vychází ze stejného poměru (75 % šířky) fotka v absolutních
     px vyšší než homepage (768–1023px tam roste jen 512–682px, tady
     640–831px) – opačně, než by u podstránky mělo být. Nižší procento
     dělá fotku o kus nižší, přesah karet (--space-16 fixní přídavek)
     zůstává stejný. */
  .page-hero-media {
    padding-bottom: calc(50% + var(--space-16));
  }
}

.page-hero-media img {
  /* Absolutní pozicování místo width/height:100% – v (column) flex
     kontejneru width/height:100% na img způsobovalo, že rodičovský
     aspect-ratio se vůbec neuplatnil a box se řídil nativním poměrem
     zdrojové fotky (aspect-ratio bylo v praxi bez efektu). */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

/* O nás – hero fotka dodávky (2026-09-15). Karta-o-nas.jpg je zvenku
   zarámovaná tak, že auto je nalevo a dům/plot napravo (uživatelka chtěla
   auto celé a větší, dům nemusí být celý – posléze doladěno, ať dům/plot
   nebyl úplně pryč, viz komentář u <img> v o-nas.html pro celou historii
   ořezu vč. zdrojové fotky IMG_0909.jpeg). Se sdíleným
   object-position:center 25% by .page-hero-media img na desktopu ořezávalo
   ROVNOMĚRNĚ z obou stran a uřezalo by kus auta vlevo i domu vpravo
   zároveň. Modifikátor jen pro tuhle stránku (base pravidlo pro ostatní
   podstránky beze změny) posouvá ořez na levou hranu – auto (levá část
   fotky) tak zůstává celé (nebo s minimální ztrátou vzadu na nejužší
   1024px) na všech šířkách, ořezává se především napravo (dům/plot).
   Box .page-hero-media na desktopu NENÍ jeden pevný poměr stran – kvůli
   layoutu (levý textový sloupec fixní %, box vpravo doplňuje zbytek,
   výška section je ale daná hlavně výškou TEXTU, ne šířkou) vychází box
   od cca 0,70:1 (1024px, portrétový) do 1,37:1 (1920px, na šířku) – ověřeno
   Playwright getBoundingClientRect na 1024/1100/1280/1440/1920px. Zdrojová
   fotka (1760×1160, poměr 1,52:1) je proto na 1024px ořezaná víc než na
   1920px – akceptovaný kompromis, stejný princip jako komentář u fotky
   rozvaděče výš ("jedno object-position nesedí úplně stejně na všech
   šířkách"). */
.page-hero-media--van img {
  object-position: left 25%;
}

.page-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(11, 27, 48, 0.5) 100%);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .page-hero-split {
    flex-direction: row;
  }

  .page-hero-content {
    /* Víc prostoru pro (delší) text podstránek, fotka jen doplňkově menší. */
    flex: 0 0 58%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Ještě větší souměrný padding nad nadpisem/pod tlačítky (dřív
       space-16/64px) – vyšší textový sloupec = vyšší .page-hero-split =
       vyšší .page-hero, takže karty "Co nabízíme" (přesah -4rem od spodku
       .page-hero) sklouznou o kus níž. Pravý padding (dřív 0) přidán, ať
       text nedoléhá až na hranu fotky vpravo (na přání uživatelky). */
    padding: var(--space-24) var(--space-12) var(--space-24) var(--tunnel-inset);
  }

  .page-hero-media {
    /* Absolutně přes CELOU výšku .page-hero (včetně spodní rezervy
       padding-bottom, do které přesahují karty "Co nabízíme") – stejná
       technika jako .hero-media na homepage. Dřív byla fotka jen flex
       položka v řádku vedle textu (výška = výška textového sloupce), takže
       pod ní zbývala v rezervě viditelná modrá plocha místo fotky, i když
       karty samy měly nulovou mezeru – při sebemenší odchylce výšky textu
       (jiný font/prohlížeč) se mezera znovu objevila. Absolutní pozicování
       na spodní hranu sekce (bottom:0) tohle riziko úplně odstraňuje –
       fotka VŽDY sahá až tam, kam sahá karta, bez ohledu na výšku textu. */
    position: absolute;
    top: 0;
    left: 58%;
    right: 0;
    bottom: 0;
    /* width:100% ze základního (mobilního) pravidla by jinak mělo přednost
       před dopočtem šířky z left+right a box by byl široký přes celou
       obrazovku (ověřeno getBoundingClientRect – bez tohohle byl box
       1920px místo očekávaných ~806px). */
    width: auto;
    /* Reset mobilního/tabletového triku (padding-bottom v % šířky, viz
       základní pravidlo výše) – tady je box absolutně pozicovaný přes
       top+bottom, takže by ten padding jen zbytečně přidával místo navíc. */
    padding-bottom: 0;
    aspect-ratio: auto;
    clip-path: polygon(4.5rem 0, 100% 0, 100% 100%, 0 100%);
  }

  .page-hero-media::after {
    background: linear-gradient(100deg, rgba(11, 27, 48, 0.35) 0%, transparent 22%);
  }
}

/* Děkovací stránka po odeslání formuláře (/dekujeme, /en/thank-you) – jediná
   .page-hero-split BEZ .page-hero-media (na rozdíl od ostatních podstránek
   tu není žádná relevantní fotka). Bez tohohle modifikátoru by textový
   sloupec zůstal na fixních 58 % šířky z pravidla výš (počítá s fotkou v
   pravé polovině) a napravo by na desktopu zela prázdná tmavá plocha. */
.page-hero-content--wide {
  text-align: center;
}

.page-hero-content--wide .hero-actions {
  justify-content: center;
}

@media (min-width: 1024px) {
  .page-hero-content--wide {
    flex: 1 1 auto;
    align-items: center;
    padding: var(--space-24) var(--tunnel-inset);
  }
}

/* Karty "Co nabízíme" přesahují přes spodní hranu hero sekce – stejná
   technika jako .services-overlap na homepage (záporný margin-top vytáhne
   sekci nahoru do rezervy v .page-hero padding-bottom). Menší hodnoty než
   na homepage (-8.6/-9.6/-10.6rem) – hero podstránky je menší, přesah
   úměrně skromnější. */
.offer-overlap {
  position: relative;
  z-index: 2;
  /* -4rem = přesně .page-hero padding-bottom (var(--space-16)) – karty tak
     začínají přesně na spodní hraně fotky/tlačítek (bez mezery = modrého
     pruhu pod fotkou, ale i bez zásahu DO fotky, viz předchozí dvě kola,
     kde -2rem nechávalo mezeru a -7rem řezalo do fotky). Přeměřeno
     getBoundingClientRect na 1920/1024/768/390px. */
  margin-top: -4rem;
  padding-bottom: var(--space-16);
}

/* Nabídka služeb — mřížka skleněných karet (stejná komponenta jako
   .feature-item v O nás), jen s vlastním počtem sloupců pro 6 položek. */
.offer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .offer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}

@media (min-width: 1024px) {
  .offer-grid { grid-template-columns: repeat(3, 1fr); }
}

/* "Co nabízíme" používá kartu 1:1 podle homepage (stejná .feature-item
   receptura jako v O nás – bílé sklo), ale ikony NE ve stylu bílého
   symbolu na oranžovém kolečku (feature-item-icon default) – nahrané
   ikony jsou barevné (navy/oranžová), stejně jako u velkých karet služeb
   (.service-card-icon), takže by se v kolečku bily s vlastní oranžovou.
   Místo toho ikona bez kolečka, zmenšená – karty "Co nabízíme" jsou dost
   menší než karty služeb na homepage. Podsvícení (bílý glow + tmavý stín)
   PŮVODNĚ dělalo na téhle menší 48px ikoně viditelný šedavý "flek"
   (hlášeno na mobilu jako "ikony mají jakoby pozadí a je ořezané") –
   příčina byl PŘÍLIŠ VELKÝ poloměr rozostření (4/10/18/2px) vzhledem
   k velikosti ikony, ne glow samotný. Na uživatelčino přání 2026-09-10
   vrácen zpět v mnohem menší, ikoně úměrné síle (stejné hodnoty jako
   .contact-info-grid .feature-item-icon img, viz komentář tam) – ověřeno
   přiblíženým screenshotem i na mobilu, že se flek neopakuje. */
.offer-grid .feature-item-icon {
  width: 3rem;
  height: 3rem;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.offer-grid .feature-item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.75))
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.55))
    drop-shadow(0 1px 1.5px rgba(15, 34, 61, 0.18));
}

/* "Stěhování výrobních strojů" – ikona je široká/plochá (stroj + šipky po
   stranách), takže při vynucení do stejného čtvercového 3rem plátna jako
   ostatní ikony vycházela nižší (viz komentář u karty v HTML). Místo
   deformace obsahu (zmenšování šipky) necháváme ikonu širší než ostatní,
   ale o něco menší celkově (na přání uživatelky – "o kousíček ji zmenši"),
   poměr stran zpracovaného PNG zachovaný (Obrazky/Ikony/icon-stehovani-
   stroju.png, 986×527px). */
.offer-grid .feature-item-icon--wide {
  width: 4.97rem;
  height: 2.65rem;
}

/* "5,0★ hodnocení klientů" (O nás, Fakta o firmě) – ikona o kousek
   zvětšená oproti standardním 3rem (na přání uživatelky 2026-09-12),
   poměr stran zachovaný (čtverec). Zvětšení přidává výšku jen dolů (box
   je nahoře zarovnaný stejně jako ostatní), takže bez korekce vizuálně
   "klesá" níž a nadpis pod ním sedí níž než u sousedních karet – posunuto
   zpět nahoru záporným margin-top a odečteno z margin-bottom, ať boxík
   zůstane vystředěný na stejné ose jako ty menší a nadpisy dál lícují. */
.offer-grid .feature-item-icon--lg {
  width: 3.5rem;
  height: 3.5rem;
  margin-top: -0.25rem;
  margin-bottom: 0.5rem;
}

/* "7+ let na trhu" – po --lg (3.5rem) uživatelka chtěla ještě větší, "podle
   ostatních ikon" (2026-09-15). Stejný princip zarovnání jako u --lg výš,
   jen s větším přírůstkem (3rem → 4.25rem výšky, delta 1.25rem): margin-top
   -delta/2, margin-bottom = základních 0.75rem (--space-3, viz
   .feature-item-icon) minus delta/2, ať nadpis pod ikonou zůstane na
   stejné ose jako u sousedních karet.
   2026-09-15, doladění: ikona (kalendář+hodiny) má vlastní obsah "na
   výšku" (847×1097px po ořezu) – dřívější verze PNG dávala tenhle obsah
   na ČTVERCOVÉ plátno vycentrovaný, což vypadalo v pořádku velikostně,
   ale nechávalo průhlednou mezeru VLEVO od reálné kresby → ikona
   působila posunutá doprava a její levý okraj (skutečná kresba, ne
   okraj PNG) nelícoval s levým okrajem nadpisu/textu pod ní. Icon PNG
   teď těsný ořez na obsah (bez odsazení, viz komentář u <img> v HTML),
   takže width místo dalšího čtverce odpovídá reálnému poměru stran
   obsahu (847:1097 → při výšce 4.25rem šířka 3.28rem), ať kresba
   vyplňuje box 100 % v obou směrech a její levý okraj sedí přesně na
   ose ostatního obsahu karty. */
.offer-grid .feature-item-icon--xl {
  /* 2026-09-15: 4.25rem bylo na přání uživatelky "zase moc velké" –
     zmenšeno na 3.75rem (poměr stran 847:1097 zachovaný, width
     dopočítaná stejně jako výš), margin dopočítán stejnou formulí se
     zmenšeným delta (0.75rem místo 1.25rem). */
  width: 2.9rem;
  height: 3.75rem;
  margin-top: -0.375rem;
  margin-bottom: 0.375rem;
}

/* "Hromosvody a ochrana před bleskem" (Elektro služby, Co nabízíme) –
   ikona (blesk+dům) má obsah "na výšku" (773×1047px), na standardním
   čtvercovém 3rem plátně vyplňovala jen 63 % šířky (fill_w 0.627 proti
   0.85-0.95 u sousedních ikon) → i po dodržení stejné formule vypadala
   tenčí a menší. Uživatelka 2026-09-15 potvrdila "vypadá dost malá" a
   požádala o zvětšení. Řešení jako u --xl výš: ikona uložena jako těsný
   ořez na obsah (bez odsazení), CSS box odpovídá reálnému poměru stran
   obsahu (773:1097 → 2.51rem:3.4rem, o kousek větší než základních 3rem),
   ať kresba vyplňuje box na 100 % a je viditelně větší. Zarovnání stejnou
   formulí jako --lg/--xl (margin-top -delta/2, margin-bottom 0.75rem -
   delta/2, delta = 0.4rem). */
.offer-grid .feature-item-icon--tall {
  width: 2.51rem;
  height: 3.4rem;
  margin-top: -0.2rem;
  margin-bottom: 0.55rem;
}

/* Elektrorevize — bez fotky (dřívější fotka montáže tematicky neseděla
   k revizím a byla příliš dominantní). Karty "Provádíme revize" používají
   STEJNOU skleněnou recepturu jako .feature-item/.service-card všude jinde
   na webu (blur, border, shadow-lg, gradientové kolečko na ikonu) – dřívější
   pokus o "plochý" bezstínový vzhled i bezfotkový layout vypadaly vedle
   zbytku webu jako z jiné stránky/nekonzistentně – vráceno k ověřenému
   vzoru: fotka + text nahoře (stejná komponenta jako O nás na homepage:
   .about-split/.about-content/.about-media/.about-watermark), karty
   "Provádíme revize" přesahující přes spodní hranu fotky (.feature-grid,
   stejné karty/ikony jako O nás). Fotka: technik s multimetrem při měření
   (Obrazky/Elektro/revize-mereni.jpg) – motiv měření/kontroly sedí k revizím
   mnohem líp než dřívější fotka montáže rozvaděče. */
.revize-section {
  /* Sekce sama je BÍLÁ (bez vlastního background) – modré pozadí zůstává
     jen na úrovni fotky/textu, to dělá `.about-split` samo o sobě (base
     pravidlo, background: var(--color-bg-blue)). Karty "Provádíme revize"
     a "Jak elektrorevize probíhá" pod tím jsou tedy na bílé ploše, modrá se
     vrací až v sekci "Otázky a odpovědi" (.section--blue) pod tím. */
  /* padding-top: 0 MUSÍ být explicitní, ne jen vynechané — element má i
     třídu .about-section, jejíž padding-block:var(--space-16) (64px nahoře
     i dole) jinak platí dál (jen vynechání padding-top v tomhle pravidle ho
     nepřebije, cascade ho nechá být) – fotka by pak nesahala až na vrch
     sekce (viz 16./23. kolo). */
  padding-top: 0;
  padding-bottom: var(--space-16);
  /* margin-top (ne padding-top!) doplňuje mezeru mezi pásem "Potřebujete
     elektrikáře rychle?" a touhle sekcí, kterou by na homepage dělal
     padding-top:var(--space-16) na .about-section – tady ho ale mít
     nemůžeme (viz padding-top:0 výše, kvůli modrému pruhu). Margin na
     rozdíl od paddingu nevykresluje pozadí sekce, takže mezera zůstane
     bílá (stejně jako na homepage mezi .band a .about-section), ne modrá –
     bez rizika, že se bug s pruhem vrátí. */
  margin-top: var(--space-16);
}

@media (max-width: 767px) {
  /* Stejné zmenšení jako --section-padding-mobile u .about-section/
     .contact-section jinde na webu (sekce 15) – tahle mezera je margin
     místo padding (viz výše), takže se do stejného sdíleného pravidla
     netrefí sama, doplněno ručně. */
  .revize-section { margin-top: var(--space-12); }
}

.revize-section .about-content { padding-block: var(--space-8); }

/* Multimetr a zkoušečka napětí jsou v dolní části zdrojové fotky – vyšší
   Y posune viditelné okno níž (odkryje víc spodku, míň horní police). */
.revize-section .about-media img { object-position: center 90%; }

.revize-section .feature-grid { margin-top: -2.5rem; }

/* 5 karet (po přidání "Fotovoltaické systémy" 2026-09-15) – základní
   .feature-grid počítá se 4 (repeat(4,1fr) od 640px), takže by v posledním
   řádku zbyla 1 karta osamocená vedle prázdného sloupce (stejný problém
   jako u .fve-section/.cleaning-section, viz komentáře tam). Vlastní počet
   sloupců: 2 na tabletu (rows 2+2+1, poslední osamocená karta bez
   sousedního prázdna vedle je vizuálně v pořádku), 5 od desktopu (všech 5
   karet v jednom řádku, žádné zalomení). */
@media (min-width: 640px) and (max-width: 1023px) {
  .revize-section .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .revize-section .feature-grid { grid-template-columns: repeat(5, 1fr); }

  /* Užší sloupce (5 karet v řádku) způsobují, že se některé nadpisy
     zalomí na 2 řádky a jiné (kratší) ne – ve stejném řádku pak text pod
     nimi nezačíná ve stejné výšce a řádek karet vypadá nesourodě. Na
     tabletu/mobilu se všechny nadpisy vejdou na 1 řádek přirozeně (širší
     sloupec/plná šířka), takže tam k nesouladu nedochází a min-height by
     jen přidal zbytečnou mezeru – proto opravu omezujeme jen na tuhle
     šířku. Bez zásahu do textu (nadpisy se nemají přepisovat) sjednocena
     výška nadpisu na 2 řádky (min-height = 2 × font-size 1.05rem ×
     --lh-heading 1.2), ať i jednořádkové nadpisy zaberou stejný prostor
     a text pod nimi lícuje. */
  .revize-section .feature-item h3 { min-height: 2.52rem; }
}

/* "Fotovoltaické systémy" – ikona (panel + sluneční paprsky) má i po
   ořezu na obsah dost "vzdušna" kolem hlavní hmoty (paprsky jsou tenké a
   trčí do stran), takže i se stejným fill_h/fill_w jako sousední ikony
   opticky působí menší/řidší. Uživatelka 2026-09-15 potvrdila "malinká v
   tom kolečku" – zvětšeno jen tady (zbytek ikon v téhle mřížce sedí),
   základ .feature-item-icon img je 2,3rem. */
.revize-section .feature-item-icon--lg img {
  width: 3.1rem;
  height: 3.1rem;
}

@media (max-width: 767px) {
  /* Fotka (1024×768) má PŘESNĚ stejný poměr stran 4:3 jako výchozí
     .about-media box na mobilu – object-fit:cover proto nemá žádnou
     rezervu ke svislému ořezu a object-position:90% (viz výše) neměla na
     mobilu vůbec žádný efekt. Mírně širší poměr boxu vytvoří rezervu, aby
     šlo skutečně posunout, co je vidět nahoře/dole. */
  .revize-section .about-media { aspect-ratio: 4 / 2.3; }
  .revize-section .about-media img { object-position: center 100%; }

  /* Na mobilu sladěno s O nás na homepage (var(--space-12)/48px a
     -3.5rem přesah karet) – zmenšená "kompaktní" hodnota výše (--space-8/
     32px, -2.5rem, viz 4. kolo úprav podstránky) zůstává jen na desktopu,
     kde má tahle sekce dost místa navíc. Pravidlo musí být AŽ ZA obecným
     (viz poučení v sekci Tablet hero) – stejná specificita, jinak by ho
     pozdější obecné pravidlo v cascade přebilo. */
  .revize-section .about-content { padding-block: var(--space-12); }
  .revize-section .feature-grid { margin-top: -3.5rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Sdílené tabletové pravidlo (.about-media { height: 28rem }, laděné pro
     homepage O nás) dělalo na šířku téhle sekce (celá obrazovka, ne jen
     container) fotku nepřirozeně nízkou a širokou – skoro jako útlý pruh
     místo fotky. Vyšší hodnota jen pro tuhle sekci. */
  .revize-section .about-media { height: 30rem; }
  .revize-section .about-watermark { bottom: calc(30rem + var(--space-2)); }
  .revize-section .about-media img { object-position: center 100%; }

  /* Svislý rytmus (padding textu + přesah karet) sladěn s homepage O nás
     na tabletu (var(--space-16)/64px, -3.5rem) – kompaktní "úsporná"
     hodnota (--space-8, -2.5rem) zůstává jen na desktopu, kde má sekce
     dost místa navíc. Pravidlo AŽ ZA base .revize-section .about-content/
     .feature-grid výše (stejná specificita, jinak by ho přebily). */
  .revize-section .about-content { padding-block: var(--space-16); }
  .revize-section .feature-grid { margin-top: -3.5rem; }
}

@media (min-width: 1024px) {
  /* 26rem dělalo fotku na užších desktopech (1024–1200px) nepřirozeně
     nízkou a širokou ("pruh") – 34rem dává poměr blízký homepage O nás
     (36rem), jen mírně kompaktnější. */
  .revize-section .about-split { min-height: 34rem; }
}

/* ============================= FOTOVOLTAIKA – "FOTOVOLTAIKA NA KLÍČ" =============================
   Stejná komponenta jako .revize-section u Elektro služeb, jen vlastní
   třída (jiná podstránka, jiná fotka). Fotka karta-fotovoltaika.jpg má
   shodný poměr stran 4:3 jako revize-mereni.jpg, takže výchozí hodnoty
   (výšky, object-position) přebrané 1:1 jako rozumný start – motiv je ale
   jiný (letecký pohled na střechu, ne polička s přístroji), takže přesný
   ořez bude po prvním náhledu čekat na doladění, stejně jako to trvalo
   u Elektrorevize (viz kola úprav podstránky elektro-sluzby výše). */
.fve-section {
  padding-top: 0;
  padding-bottom: var(--space-16);
  margin-top: var(--space-16);
}

@media (max-width: 767px) {
  .fve-section { margin-top: var(--space-12); }
}

.fve-section .about-content { padding-block: var(--space-8); }

/* Zdrojová fotka (karta-fotovoltaika.jpg) je teď už oříznutá při zpracování
   tak, aby zmizel levý okraj střechy i palec fotografa v rohu záběru (dřív
   object-position nešlo použít, protože poměr stran fotky skoro přesně
   odpovídal poměru stran boxu, takže cover neměl co ořezávat). Svisle mírně
   nahoru (35 %), aby byly vidět hlavně panely, ne beton střechy dole. */
.fve-section .about-media img { object-position: center 45%; }

.fve-section .feature-grid { margin-top: -2.5rem; }

/* Základní .feature-grid počítá se 4 kartami (grid-template-columns:
   repeat(4,1fr) od 640px) – u techologií jsou jen 3 (SolaX/NORD/GoodWe),
   takže by v řádku zbyl jeden prázdný sloupec a karty by nedosáhly na
   pravý okraj containeru (přesně tenhle efekt bylo vidět předtím). Vlastní
   počet sloupců pro tuhle sekci, stejné zlomy jako .offer-grid (2 sloupce
   na tabletu, 3 od desktopu). */
@media (min-width: 640px) and (max-width: 1023px) {
  .fve-section .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .fve-section .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .fve-section .about-media { aspect-ratio: 4 / 2.3; }
  .fve-section .about-media img { object-position: center 45%; }

  .fve-section .about-content { padding-block: var(--space-12); }
  .fve-section .feature-grid { margin-top: -3.5rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .fve-section .about-media { height: 30rem; }
  .fve-section .about-watermark { bottom: calc(30rem + var(--space-2)); }
  .fve-section .about-media img { object-position: center 45%; }

  .fve-section .about-content { padding-block: var(--space-16); }
  .fve-section .feature-grid { margin-top: -3.5rem; }
}

@media (min-width: 1024px) {
  .fve-section .about-split { min-height: 34rem; }
}

/* ============================= PRŮMYSLOVÁ ŘEŠENÍ – "ČIŠTĚNÍ VODNÍCH A CHLADICÍCH OKRUHŮ" =============================
   Stejný .feature-grid problém jako u .fve-section výše – jen 3 karty
   (zařízení, u kterých se čištění provádí), základní .feature-grid počítá
   se 4 (repeat(4,1fr) od 640px), takže by zbyl prázdný sloupec a karty by
   nedosáhly na pravý okraj containeru. Stejné zlomy jako u .fve-section
   (2 sloupce na tabletu, 3 od desktopu). */
@media (min-width: 640px) and (max-width: 1023px) {
  .cleaning-section .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .cleaning-section .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================= PRŮMYSLOVÁ ŘEŠENÍ – "VÝROBA A OPRAVA TOPNÝCH TĚLES" =============================
   Stejná komponenta jako .cleaning-section výš (.about-section/.about-split,
   fotka+text + .feature-grid karty přesahující přes spodní hranu fotky).
   Karty mají stejnou ikonu (icon-topna-telesa-bila.png) na všech 6 kartách
   – žádné vlastní ikony pro jednotlivé typy těles nebyly dodané, tak se
   opakuje ikona z úvodní karty "Výroba a opravy topných těles" (offer-grid
   výš na téže stránce), jen předělaná na bílou do oranžového kolečka jako
   ostatní feature-grid ikony (viz komentář u icon-topna-telesa-bila.png
   v `stav.md`). 6 karet (sudé číslo) – na rozdíl od cleaning-section (3) tu
   base .feature-grid 4 sloupce nesedí ani náhodou, vlastní počet: 2 na
   tabletu (2×3 řádky).
   Na desktopu PŮVODNĚ 6 sloupců v jednom řádku (na přání uživatelky
   2026-09-16), ale po doplnění ikon uživatelka usoudila, že užší 1/6 karty
   mají "málo obsahu" – změněno na 4+2 (2026-09-16, druhá žádost): žádný
   vlastní `grid-template-columns` přepis, jen zdědí základní `.feature-grid`
   4 sloupce (viz pravidlo výš na řádku ~1140), takže 6 karet přirozeně
   zalomí do 4+2. Spodní 2 karty vycentrované doprostřed (`grid-column`
   na 2.–3. sloupec ze 4) přes `nth-child(5)`/`nth-child(6)` – proto je i
   pořadí karet v HTML upravené tak, aby na pozici 5–6 byly ty s
   NEJKRATŠÍM názvem ("Topné patrony" a "Čidla"), ať krátký text
   nepůsobí v osamocené vycentrované dvojici zbytečně prázdně. */

@media (min-width: 640px) and (max-width: 1023px) {
  .topeni-section .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .topeni-section .feature-item:nth-child(5) { grid-column: 2 / 3; }
  .topeni-section .feature-item:nth-child(6) { grid-column: 3 / 4; }
}

/* Pod kartami zůstal jen 40px bílého prostoru do konce sekce (bez vlastní
   dolní mezery pod .container), zatímco třeba pod FAQ (.section--blue) je
   to plných 64px (= --space-16, base .section padding-block) – rozdíl
   24px. Uživatelka nejdřív chtěla mezeru zaplnit galerií fotek (zkusili
   jsme kruhové náhledy, ale nakonec se jí to nelíbilo a galerii jsme
   odstranili), takže místo obsahu jen dorovnaná mezera na stejnou
   velikost jako pod FAQ (2026-09-16). */
.topeni-section .container { padding-bottom: var(--space-6); }

.revize-subhead {
  color: var(--color-primary-dark);
  margin-top: var(--space-24);
  margin-bottom: var(--space-8);
}

/* Jak elektrorevize probíhá — číslované kroky s vlastními ikonami čísel,
   propojené šipkou/chevronem mezi jednotlivými kroky (vodorovně v řádku od
   tabletu, svisle mezi kroky pod sebou na mobilu) – čitelný postup
   "1 → 2 → 3" místo pouhých čísel vedle sebe. */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  list-style: none;
  margin: 0 0 var(--space-6) 0;
  padding: 0;
}

.step-item { position: relative; }

.step-number {
  /* Číslice mají různý přirozený poměr stran (úzká "1" vs. širší "2"/"3") –
     pevná čtvercová plocha s object-fit:contain je proto zprostředkovaně
     centrovala různě daleko od levého okraje a nesedělo to s textem pod
     nimi. Místo toho pevná výška a šířka podle obsahu (bez centrování),
     zarovnané zleva stejně jako nadpis a text kroku. */
  display: flex;
  align-items: flex-end;
  height: 3.25rem;
  margin-bottom: var(--space-4);
}

.step-number img {
  height: 100%;
  width: auto;
  display: block;
  /* BEZ glow filtru — na rozdíl od karet "Co nabízíme" (.offer-grid
     .feature-item-icon), které leží na tmavé fotce v přesahu heroa, čísla
     kroků jsou vždy v bílé .revize-section. Původně sdílený vícevrstvý
     drop-shadow (bílá glow + tmavý stín rgba(15,34,61,0.18)) tam na bílém
     pozadí bílou složku ztratil úplně a zbyl viditelný šedavý "flek" kolem
     číslice, hlášeno jako "ikony mají jakoby pozadí a je ořezané" na
     mobilu. Na bílém pozadí žádný filtr netřeba. */
}

.step-item h4 { color: var(--color-primary-dark); margin-bottom: var(--space-3); }

.step-item p { color: var(--color-text); margin: 0; font-size: var(--fs-base); }

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-12) var(--space-6); }

  /* Vnitřní padding u každého kroku, aby sloupce vedle sebe nepůsobily
     nalepené – ke gapu mezi sloupci (space-6) přidává další odstup od
     souseda vpravo (poslednímu sloupci nevadí, jen zbyde neviditelná
     rezerva). */
  .step-item { padding-right: var(--space-6); }
}

/* Technologie (SolaX/NORD/GoodWe) teď žijí jako karty přímo ve
   .fve-section .feature-grid – STEJNÝ vzhled jako "Provádíme revize" u
   Elektro služeb / feature-grid u O nás (výchozí .feature-item-icon
   kolečko, oranžový gradient). Jediná vlastní věc navíc je tahle kurzíva
   pro podtitul značky mezi h3 a dlouhým popisem – základní ".feature-item p"
   pravidlo (margin:0) by jinak slepilo podtitul a popis bez odstupu. */
.feature-grid .tech-tagline {
  color: var(--color-accent);
  font-style: italic;
  margin-bottom: var(--space-2);
}

.fve-section .feature-grid h3 { font-size: 1.25rem; }

/* ============================= CERTIFIKACE A ODBORNÁ ZPŮSOBILOST =============================
   Náhledy skutečných certifikátů (Obrazky/Certifikaty) – klikací, otevírají
   plnou velikost v nové záložce (ne přes sdílený lightbox galerie realizací
   níž, aby se šipkami "další/předchozí" nemísily dokumenty s fotkami). */
.cert-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  text-align: center;
}

@media (min-width: 768px) {
  .cert-grid { grid-template-columns: repeat(3, 1fr); }
}

.cert-thumb {
  display: block;
  max-width: 200px;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition);
}

.cert-thumb:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.cert-thumb img { width: 100%; height: auto; display: block; }

.cert-card h3 { font-size: 1.05rem; color: var(--color-primary-dark); margin-bottom: var(--space-2); }

.cert-card p { font-size: var(--fs-base); color: var(--color-muted); margin: 0; }

/* Otázky a odpovědi — accordion na <details>/<summary>, šipka rotuje při
   otevření; od 1024px ve dvou sloupcích (mobil a tablet pod sebou). Sloupce jsou od
   1024px dva NEZÁVISLÉ flex kontejnery (.faq-col), ne jeden grid o 2
   sloupcích/2 řádcích – ve sdíleném gridu roztažení jedné karty zvětšilo
   výšku celého řádku a posunulo dolů i kartu ve vedlejším sloupci ve
   stejném řádku (byť samotná neroztažená karta zůstávala nahoře díky
   align-items:start, prostor pod ní v řádku ji odsouval). Samostatné
   sloupce = otevření karty ovlivní jen její vlastní sloupec. */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  /* Karty mají měkký box-shadow, který dobarvuje pozadí pod sebou ještě
     desítky px za svou hranou – bez tohohle marginu opticky "ukusuje" ze
     spodního paddingu sekce a dělá dojem menší mezery než nahoře. */
  margin-bottom: var(--space-6);
}

/* Na mobilu a tabletu (1 sloupec, do 1023px) je .faq-col jen obalový element
   bez vizuálního významu – display:contents ho z box tree odstraní, takže
   karty (details) se stanou přímými grid items v .faq-grid. V HTML jsou ale
   seřazené po sloupcích (1., 3. otázka v prvním <div>, 2., 4. ve druhém –
   kvůli desktopu, viz komentář výše), takže bez zásahu by vyšlo pořadí
   1, 3, 2, 4 místo čtenářského 1, 2, 3, 4 – opraveno přes `order` níž
   (k-tá položka 1. sloupce = 2k-1, 2. sloupce = 2k; pokryto do 5 položek
   na sloupec, dřív jen 3+2, takže osmice otázek na Průmyslu byla na mobilu
   promíchaná). Od 1024px se karty vracejí do dvou sloupců. */
.faq-col { display: contents; }

@media (max-width: 1023px) {
  .faq-col:first-of-type > .faq-item:nth-of-type(1) { order: 1; }
  .faq-col:last-of-type > .faq-item:nth-of-type(1) { order: 2; }
  .faq-col:first-of-type > .faq-item:nth-of-type(2) { order: 3; }
  .faq-col:last-of-type > .faq-item:nth-of-type(2) { order: 4; }
  .faq-col:first-of-type > .faq-item:nth-of-type(3) { order: 5; }
  .faq-col:last-of-type > .faq-item:nth-of-type(3) { order: 6; }
  .faq-col:first-of-type > .faq-item:nth-of-type(4) { order: 7; }
  .faq-col:last-of-type > .faq-item:nth-of-type(4) { order: 8; }
  .faq-col:first-of-type > .faq-item:nth-of-type(5) { order: 9; }
  .faq-col:last-of-type > .faq-item:nth-of-type(5) { order: 10; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet: jeden sloupec, stejné pravidelné rozestupy jako mezi kartami ve
     dvou sloupcích na desktopu. */
  .faq-grid { gap: var(--space-6); }
}

.faq-item {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  padding-inline: var(--space-6);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  font-weight: 600;
  color: var(--color-primary-dark);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item .faq-icon {
  width: 1.3rem;
  height: 1.3rem;
  flex-shrink: 0;
  color: var(--color-accent);
  transition: transform var(--transition);
}

.faq-item[open] .faq-icon { transform: rotate(180deg); }

.faq-item p {
  color: var(--color-muted);
  font-size: var(--fs-base);
  padding-bottom: var(--space-4);
  margin: 0;
}

@media (min-width: 1024px) {
  .faq-grid { display: flex; align-items: flex-start; gap: var(--space-6); }
  .faq-col { display: flex; flex-direction: column; gap: var(--space-6); flex: 1; min-width: 0; }
}

/* Tablet ve 2 sloupcích: při lichém počtu karet zůstávala poslední osamocená
   vlevo vedle prázdného místa. Teď se vycentruje – stejná šířka jako ostatní
   karty (polovina řádku bez poloviny mezery), jen posunutá doprostřed přes
   celý řádek (grid-column: 1 / -1). Vzhled karty se nemění. Feature-gridy
   (mezera space-4) jsou ve 2 sloupcích od 640px, offer/contact-info (mezera
   space-6) od 768px; od 1024px jsou 3 a víc sloupců, tam se to netýká. */
@media (min-width: 640px) and (max-width: 1023px) {
  .revize-section .feature-grid > :last-child:nth-child(odd),
  .fve-section .feature-grid > :last-child:nth-child(odd),
  .cleaning-section .feature-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--space-4)) / 2);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .offer-grid > :last-child:nth-child(odd),
  .contact-info-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--space-6)) / 2);
  }
}

/* CTA pás před kontaktem na podstránkách — stejný jazyk jako kontaktní
   sekce na homepage (světle modré pozadí, tmavě modré nadpisy), jen bez
   formuláře. Tmavý gradient (dřívější verze) byl identický s pozadím
   patičky hned pod ním, takže sekce s patičkou vizuálně splývala bez
   viditelné hranice mezi nimi. */
.page-cta {
  background: var(--color-bg-blue);
  color: var(--color-text);
  text-align: center;
  /* Menší než homepage .contact-section (var(--space-24)/96px), ale větší
     než FAQ/Ukázky (64px) – uživatelka chtěla u téhle sekce výraznější
     padding, cca 80px, mezi oběma hodnotami škály. */
  padding-block: 5rem;
}

.page-cta h2 { color: var(--color-primary-dark); }

.page-cta .lead {
  color: var(--color-text);
  margin-inline: auto;
}

.page-cta-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-6) auto var(--space-8);
}

.page-cta-contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary-dark);
  font-weight: 600;
}

.page-cta-contact svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  color: var(--color-accent);
}

@media (max-width: 767px) {
  .page-cta { padding-block: var(--section-padding-mobile); }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .page-cta { padding-block: var(--space-16); }
}

/* --------------------------------------------------------------------------
   18. Stránka O nás — profilová karta, certifikáty
   -------------------------------------------------------------------------- */

/* "Fakta o firmě" (karty přesahující hero) – plain .feature-item/.offer-grid
   skleněná karta, stejná jako "Co nabízíme" na ostatních podstránkách
   (2026-09-12: dřív měly vlastní velké oranžové číslo nad nadpisem přes
   .stat-value/.stat-card, na přání uživatelky zrušeno – hodnota je teď
   součástí textu nadpisu). Ikony viz .feature-item-icon--lg níže. Karty
   dřív měly i inline odkaz uvnitř <p> ("Přečtěte si reference/více ↓",
   vlastní stylování `.offer-grid .feature-item p a`) – odstraněno
   2026-09-12 na přání uživatelky, CSS pravidlo smazáno jako nepoužívané. */

/* "Kdo za Raška engineering stojí" – jedna centrovaná karta se skutečnou
   fotkou Zdeňka (dřív iniciálový avatar "ZR", nahrazeno 2026-09-23, jakmile
   uživatelka dodala portrét), stejná skleněná receptura jako .feature-item,
   jen větší/širší. Na .section--blue (plná barva, ne fotka) blur nemá co
   rozostřovat, ale poloprůhledná bílá i tak dá vizuálně odlišenou kartu
   od pozadí – přijatelné, stejný princip jako .contact-form-card. */
.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  max-width: 53rem;
  margin-inline: auto;
  padding: var(--space-8);
  text-align: center;
  /* Jemně světlemodré sklo (ne bílé) – sekce je od 2026-09-11 plain bílá
     (dřív .section--blue), karta musí barvu nést sama, aby se odlišila. */
  background: rgba(220, 230, 242, 0.55);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 0.5px solid rgba(190, 210, 235, 0.6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* .profile-top drží avatar + text (nadpis/role/medailonek). Kontaktní
   tlačítka jsou 2026-09-23 vyvedena jako samostatný řádek pod tímto blokem
   (ne uvnitř .profile-body), aby fotka na desktopu mohla být vysoká přesně
   od nadpisu po konec medailonku, bez tlačítek – viz .profile-avatar níže. */
.profile-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
}

/* Kontejner má overflow:hidden a obrázek uvnitř je jemně přiblížený
   transformem (scale) – schová to tenký polopropustný okraj kruhového
   výřezu fotky (viditelný jako světlý prstýnek), aniž by se musel
   samotný soubor fotky oříznout/upravit. Fotka je od zdroje kruhový
   výřez (viz komentář u .profile-card), proto zůstává kruhová i na
   desktopu (jen větší) – NE zaoblený obdélník, ten by s kruhovým
   výřezem fotky neseděl (2026-09-23, na přání uživatelky vráceno zpět
   z předchozí "vysoký obdélník" varianty). */
.profile-avatar {
  flex-shrink: 0;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 18px -8px rgba(15, 23, 42, 0.45);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}

.profile-body h3 { color: var(--color-primary-dark); margin-bottom: var(--space-1); }

.profile-role {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-4);
}

.profile-bio { color: var(--color-text); margin: 0; }

.profile-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
}

@media (min-width: 768px) {
  /* align-items zděděné z mobilní verze bylo "center" – u .profile-contact
     s width:100% + margin-left to řádek jen vycentrovalo (posun o polovinu
     zamýšlené vzdálenosti), místo aby ho posunulo přesně pod text. */
  .profile-card { text-align: left; align-items: flex-start; }
  .profile-top { flex-direction: row; align-items: center; }
  .profile-avatar { width: 14rem; height: 14rem; border-radius: 50%; }
  .profile-role { margin-bottom: var(--space-3); }
  /* Odsazeno o šířku avataru + mezeru, ať tlačítka začínají pod textem,
     ne pod fotkou (ta je teď mimo .profile-body, viz .profile-top výš). */
  .profile-contact { justify-content: flex-start; margin-left: calc(14rem + var(--space-6)); }
}

/* "Zkušenosti a certifikace" (O nás) – reálné naskenované certifikáty (ne
   ikony), proto vlastní jednodušší karta na PLAIN bílém pozadí (ne
   skleněná .feature-item receptura – ta je laděná na to, že pod ní něco
   prosvítá; tady je fotka certifikátu vždy uvnitř karty, ne pod ní).
   Pojmenováno "credential-*", NE "cert-*" – fotovoltaika.html už má
   VLASTNÍ, jinak stavěnou "Certifikace a odborná způsobilost" sekci se
   třídami .cert-grid/.cert-card/.cert-thumb (viz sekce výš, "CERTIFIKACE
   A ODBORNÁ ZPŮSOBILOST"); dřívější použití stejných jmen na téhle
   stránce se s ní v cascade tiše bilo (např. .cert-card p přepisovalo
   fotovoltaika.html fs-base na fs-small) – opraveno přejmenováním, ne
   přejmenováním té starší sekce. */
.credential-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .credential-grid { grid-template-columns: repeat(3, 1fr); }
}

.credential-card {
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.credential-card > a {
  display: block;
  margin-bottom: var(--space-4);
}

.credential-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
}

.credential-card h3 { font-size: 1.05rem; color: var(--color-primary-dark); margin-bottom: var(--space-2); }

.credential-card p { font-size: var(--fs-small); color: var(--color-muted); margin: 0; }

/* Prostřední karta (osvědčení o kvalifikaci) – jen přední strana je vidět
   jako náhled, zadní strana je "jen zadní strana" a otevře se až po
   kliknutí jako mini galerie (#cert-lightbox, obsluha ve script.js). */
.cert-gallery-trigger {
  display: block;
  width: 100%;
  margin-bottom: var(--space-4);
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: zoom-in;
}

/* Kotvy pro odkazy "Přečtěte si reference"/"Přečtěte si více" v kartách
   "Hodnocení klientů"/"Odborná způsobilost" nad hero (viz o-nas.html) —
   stejný scroll-margin-top vzorec jako #sluzby na homepage
   (.services-overlap), ať sekce nezmizí pod fixní hlavičkou. */
#reference,
#certifikace {
  scroll-margin-top: calc(var(--header-height) + var(--space-6));
}

/* -- Reference (recenze z Firmy.cz) -- */

/* Souhrnná karta (skóre + hvězdy + "10 hodnocení" + odkaz na Firmy.cz) je
   od 2026-09-12 (na přání uživatelky) jedna z rovnocenných karet
   v .review-track, ne samostatná karta nad ním – .review-card--summary je
   modifikátor .review-card, ne vlastní komponenta. Všechny karty mají
   stejné jemně světlemodré sklo (sekce je plain bílá, karta musí barvu
   nést sama, stejný princip jako .profile-card).
   2026-09-11: přibyly 2 další recenze (celkem 6 karet vč. souhrnné) – na
   4 sloupce v gridu se přestaly vejít přehledně na 1 řádek, takže mřížka
   (.review-grid) nahrazena horizontálním carouselem (.review-carousel =
   šipky + .review-track). Šířka jednotlivé karty zůstala STEJNÁ jako dřív
   dávala grid-column šablona (1/2/4 na mobil/tablet/desktop) – jen teď je
   karet víc, než se vejde, a přebytek se odscrolluje (swipe/scroll-snap)
   nebo šipkami .review-carousel-nav (JS v script.js, sekce 7). */
.review-carousel {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.review-track {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  flex: 1 1 auto;
  min-width: 0;
  /* overflow-x:auto počítá i overflow-y jako auto (spec: pokud jedna osa
     není visible, obě se chovají jako auto) – karty se tak ořezávaly
     přesně v hraně tracku a jejich box-shadow (--shadow-md, dosahuje
     přes hranu karty) byl nahoře/dole vidět jen z půlky. Padding dá
     stínu místo, kam "dopadnout", než ho overflow ustřihne – ale JEN
     nahoře/dole (padding-inline zůstává 0, viz níže proč). Záporný
     margin vyrovnává padding, ať se okolní layout neposune. */
  padding-block: var(--space-6) var(--space-8);
  margin-block: calc(var(--space-6) * -1) calc(var(--space-8) * -1);
  /* Horizontální padding se sem záměrně NEDÁVÁ (byly 2 problémy):
     1) scroll-snap container se svým paddingem nekamarádí – Chromium
        při načtení stránky sám odscrolloval přesně o tolik, o kolik byl
        padding-left, aby "start" hrana 1. karty seděla na hraně tracku
        (scrollLeft vyšel 8px místo 0) – levá a pravá mezera k šipkám
        pak vyšly různě (4px vs 20px), přesně bug, který uživatelka
        nahlásila ("proč je levá a pravá šipka jinak daleko"). Na
        vertikální (nescrollovanou) osu se tohle netýká, proto tam
        padding zůstal.
     2) Boční stín karet (co by ten padding měl zachránit) stejně nemá
        kam "dopadnout" smysluplně – u karty uprostřed tracku ho stejně
        pohltí gap (var(--space-6), 24px) k sousední kartě, a u krajní
        (scrollnuté) karty je stín beztak vidět jen do půlky, což
        vypadá jako artefakt. Uživatelka proto navrhla boční stín
        rovnou nechat ořezávat (žádná zvláštní CSS úprava stínu není
        potřeba – stačí tenhle padding nedávat). */
  /* Skrytý nativní scrollbar – navigace je přes šipky/swipe, ne přes
     viditelný pruh (stejný princip jako .showcase-track by mělo mít,
     kdyby scrollbar vadil i tam – tady konzistentně schovaný). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.review-track::-webkit-scrollbar { display: none; }

.review-track .review-card {
  scroll-snap-align: start;
  flex: 0 0 100%;
  /* Bez min-width:0 by defaultní "min-width:auto" flex položky nechal
     kartu se souhrnným tlačítkem ("Zobrazit všechna hodnocení", .btn má
     white-space:nowrap) roztáhnout na šířku textu tlačítka namísto
     zadané flex-basis – karta pak byla širší než track a rozbíjela
     rozvržení (přetékala přes šipky na mobilu). */
  min-width: 0;
}

.review-card--summary .btn {
  /* Uvnitř úzké karty by nowrap z .btn tlačítko roztáhl přes okraj karty
     (viz komentář u min-width výše) – tady se text má směle zalomit. */
  white-space: normal;
  text-align: center;
}

@media (min-width: 768px) {
  .review-track .review-card { flex: 0 0 calc((100% - var(--space-6)) / 2); }
}

@media (min-width: 1024px) {
  .review-track .review-card { flex: 0 0 calc((100% - 3 * var(--space-6)) / 4); }
}

.review-carousel-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  background: var(--color-white);
  color: var(--color-primary);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.review-carousel-nav:hover {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-color: transparent;
  color: var(--color-white);
}

.review-carousel-nav svg { width: 1.25rem; height: 1.25rem; }

.review-carousel-nav--prev svg { transform: rotate(180deg); }

.review-carousel-nav:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 767px) {
  /* Na přání uživatelky (2026-09-14): pole s textem recenze má být na
     mobilu co nejširší, šipky jen tak velké, ať se vejdou. .review-carousel
     proto na mobilu vybočí ven z .container (ten má width:85%, takže po
     stranách nechává 7,5vw prázdna) – stejný princip "tunelu" jako
     .about-content jinde na webu, jen záporným marginem místo paddingu.
     -4,5vw znamená, že z původních 7,5vw mezery zbydou po stranách 3vw,
     zbytek připadne kartám. Šipky se zároveň zmenší (44px → 36px) a gap
     k nim se zúží, ať uberou trocku ze šířky, kterou dostane .review-track. */
  .review-carousel {
    margin-inline: -4.5vw;
    gap: var(--space-2);
  }

  .review-carousel-nav {
    width: 2.25rem;
    height: 2.25rem;
  }

  .review-carousel-nav svg {
    width: 1rem;
    height: 1rem;
  }
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: rgba(220, 230, 242, 0.55);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 0.5px solid rgba(190, 210, 235, 0.6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.review-card--summary {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.review-card--summary p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-muted);
}

.review-summary-score {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1;
}

.review-stars {
  display: flex;
  justify-content: flex-start;
  gap: 0.15rem;
  color: var(--color-accent);
}

.review-card--summary .review-stars { justify-content: center; }

.review-stars svg { width: 1.1rem; height: 1.1rem; }

.review-text {
  flex-grow: 1;
  color: var(--color-text);
  font-style: italic;
  margin: 0;
}

.review-author {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-primary-dark);
  margin: 0;
}

/* --------------------------------------------------------------------------
   19. Chybová stránka 404
   -------------------------------------------------------------------------- */
.error-page {
  text-align: center;
  /* Sekce leží hned pod fixní plovoucí hlavičkou (viz .site-header, sekce
     5) – bez odsazení o --header-height by ikona/nadpis byly nalepené
     hned pod menu (uživatelčino připomínka 2026-09-17). Navíc velká
     vlastní rezerva (--space-24), ať má stránka nahoře vzduch, ne jen
     těsné odlepení od hlavičky. */
  padding-top: calc(var(--header-height) + var(--space-24));
  padding-bottom: var(--space-24);
}

.error-page-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.error-page-icon img {
  /* Uživatelka 2026-09-17 dodala vlastní dvoubarevnou (navy/oranžová)
     verzi ikony přímo v barvách webu – bez kolečka/pozadí kolem, jen
     samotná ikona, výrazně větší. */
  width: 11rem;
  height: auto;
  object-fit: contain;
}

.error-page .lead {
  max-width: var(--content-max);
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

@media (max-width: 767px) {
  .error-page { padding-top: calc(var(--header-height) + var(--section-padding-mobile)); padding-bottom: var(--section-padding-mobile); }
}