/* Kamnov — sdílené styly návrhu (_designsource/). Vytaženo z index.html 2026-10-20, načítají ho všechny stránky. */

/* Písmo — Figtree jako webový zástup za Mundial z manuálu; self-host, variabilní 400–800, latin + latin-ext */
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin-var.woff2?v=57fd1acf") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  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;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin-ext-var.woff2?v=a310474d") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* paleta z grafického manuálu (_sourcedata/KAMNOV.pdf) */
  --coal: #242f33;      /* tmavě grafitová / uhlová */
  --coal-2: #1c292b;
  --steel: #415358;
  --mist: #b5c4c8;
  --ice: #ddebf1;
  --ice-2: #e8f3f7;
  --brand: #ff4300;     /* ohnivě oranžová / call-to-action */
  --brand-text: #c23a0a; /* oranžová jako text na světlé (5,4:1 na bílé) */
  --bg: #ffffff;

  --text: var(--coal);
  --text-2: var(--steel);
  --on-coal: var(--ice-2);
  --on-coal-2: var(--mist);

  --font: "Figtree", system-ui, sans-serif;

  /* škála 1,333 */
  --fs-small: 1rem;      /* 16 */
  --fs-text: 1.0625rem;  /* 17 */
  --fs-btn: 1.1875rem;   /* 19 tučně = velký text, grafit na oranžové 4:1 projde */
  --fs-lead: 1.3125rem;  /* 21 */
  --fs-h3: 1.3125rem;    /* 21 → 28 */
  --fs-h2: 1.75rem;      /* 28 → 38 */
  --fs-h1: 2.375rem;     /* 38 → 50 → 67 */

  /* rytmus */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 40px; --s-5: 64px; --s-6: 104px;
  --section: var(--s-5);

  --wrap: 1500px;
  --gutter: 20px;
  --tap-min: 48px;

  /* sešikmený roh značky — vždy vpravo dole, 45° */
  --cut-s: 10px;
  --cut: 32px;
  --overhang: 64px;

  /* grunge textura „uhel“ přes grafit, jen tmavé plochy — SVG šum (feTurbulence): tmavé skvrny + jemné zrno,
     bezešvá dlaždice (stitchTiles), < 1 kB; náhrada za coffee-5-dsl-6.png ze starého webu (85 kB, na mobilu švy).
     color-interpolation-filters='sRGB' nutné — výchozí linearRGB z tmavých konstant udělá šedou */
  --texture: url("img/texture.svg?v=137d74d9");
  --texture-size: 720px 720px;
  --head-h: 80px;
}
@media (max-width: 479px) {
  :root { --head-h: 68px; }
}
@media (min-width: 700px) {
  :root { --fs-h1: 3.125rem; --fs-h2: 2.375rem; --fs-h3: 1.75rem; --gutter: 32px; --cut: 48px; }
}
@media (min-width: 1100px) {
  :root { --fs-h1: 4.1875rem; --gutter: 40px; --section: var(--s-6); --cut: 64px; --overhang: 104px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* kotvy nezajedou pod sticky hlavičku */
[id] { scroll-margin-top: calc(var(--head-h) + var(--s-3)); }
/* grafit + textura je pozadí celé stránky — tmavé plochy (hlavička, hero, prodejna, patička) jsou průhledné,
   takže textura plynule navazuje; světlé sekce mají vlastní pozadí */
body {
  margin: 0;
  background: var(--texture) 50% 0 / var(--texture-size), var(--coal);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-text);
  line-height: 1.6;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 {
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.15; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--s-2); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--coal); outline-offset: 3px; }
.dark :focus-visible { outline-color: var(--brand); }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.lead { font-size: var(--fs-lead); line-height: 1.5; }

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

/* vizuálně jen řádek textu, klikací plocha ≥ 44 px přes ::before (nerozhazuje rytmus pod odstavcem) */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.link::before { content: ""; position: absolute; inset: -12px -4px; }
/* odstavec s odkazem pod textem: 24 px od textu (gap 16 + 8) */
.more { margin-top: var(--s-1); }
@media (hover: hover) {
  .link:hover { color: var(--brand-text); }
  .dark .link:hover { color: var(--bg); text-decoration-color: var(--bg); }
  /* #c23a0a na ledové má jen 4,41:1 → grafit + silnější podtržení */
  .trio .link:hover { color: var(--coal); text-decoration-thickness: 4px; }
}

/* Tlačítko — jediná oranžová plocha s textem, malý sešikmený roh */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 calc(var(--s-3) + 4px) 0 var(--s-3);
  background: var(--brand);
  color: var(--coal-2);
  font: 700 var(--fs-btn)/1 var(--font);
  text-decoration: none;
  white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%);
}
.btn:focus-visible, .dark .btn:focus-visible { outline: 3px solid var(--coal-2); outline-offset: -7px; }
@media (hover: hover) {
  .btn:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
}

/* Hlavička — sticky; vlastní grafit + textura se stejným umístěním jako body, takže nahoře lícuje bez švu */
.head {
  position: sticky; top: 0; z-index: 20;
  background: var(--texture) 50% 0 / var(--texture-size), var(--coal);
  color: var(--on-coal);
}
.head .wrap {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: var(--head-h);
  border-bottom: 1px solid var(--steel);
}
.logo { position: relative; display: block; color: var(--on-coal); flex: none; }
/* logo je nízké (25–30 px), klikací plocha ≥ 44 px přes ::before bez vlivu na layout */
.logo::before { content: ""; position: absolute; inset: -10px -4px; }
.logo svg { display: block; width: 156px; height: auto; }
.nav { display: none; }
.nav ul { display: flex; gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
.nav a {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  text-decoration: none; font-weight: 600; font-size: var(--fs-small);
}
@media (hover: hover) {
  .nav a:hover { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 3px; text-underline-offset: 8px; }
}
.head-call { margin-left: auto; }
.head-call .full { display: none; }
.menu { position: relative; }
.menu summary {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--s-2);
  border: 2px solid var(--mist); font-weight: 700; cursor: pointer; list-style: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu ul {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 10;
  min-width: 240px; margin: 0; padding: var(--s-1) 0; list-style: none;
  background: var(--coal-2); border: 1px solid var(--steel);
}
.menu li a { display: flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--s-3); text-decoration: none; font-weight: 600; }
@media (min-width: 1100px) {
  .nav { display: block; margin-left: auto; }
  .menu { display: none; }
  .head-call { margin-left: 0; }
  .head-call .short { display: none; }
  .head-call .full { display: inline; }
}
@media (max-width: 479px) {
  .logo svg { width: 124px; }
  .head .wrap { gap: 12px; }
  .head-call { padding-inline: 14px 16px; }
  .menu summary { padding-inline: 12px; }
}
@media (max-width: 359px) {
  .logo svg { width: 104px; }
  .head .wrap { gap: 8px; }
  .head-call { padding-inline: 10px 14px; }
  .menu summary { padding-inline: 10px; }
}

/* Hero — grafit, fotka přesahuje do bílé */
/* nahoře průhledné (grafit + textura z body), bílý pás dole pod přesahem fotky */
.hero {
  background: linear-gradient(to bottom, transparent calc(100% - var(--overhang)), var(--bg) calc(100% - var(--overhang)));
  color: var(--on-coal);
}
.hero .wrap {
  display: grid;
  gap: var(--s-4);
  padding-top: var(--s-4);
}
.hero h1 span { display: block; }
.hero h1 .ember { color: var(--brand); }
/* skupiny: nadpis + perex těsně, akce odděleně, adresa patří k akci „Přijeďte“ */
.hero .text { display: grid; align-content: start; }
.hero .lead { max-width: 34ch; margin-top: var(--s-3); }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-4); }
.hero .where { font-size: var(--fs-small); color: var(--on-coal-2); margin-top: var(--s-2); }
.hero figure { margin: 0; }
.hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 60%; }
@media (min-width: 960px) {
  .hero .wrap {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-4);
    padding-top: var(--s-5);
  }
  .hero .text { grid-column: 1 / span 5; padding-bottom: calc(var(--overhang) + var(--s-4)); }
  /* fotka na celou výšku hero — od horního okraje až do přesahu do bílé */
  .hero figure { grid-column: 6 / span 7; align-self: stretch; }
  .hero img { height: 100%; aspect-ratio: auto; }
}

/* Nabídka */
.offer { background: var(--bg); padding-block: var(--section) 0; }
.offer h2 { max-width: 16ch; }
.feature { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.feature figure { margin: 0; }
.feature img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.feature .body { display: grid; gap: var(--s-2); align-content: center; max-width: 52ch; }
.feature .links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.kinds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-3); }
.kinds li { padding-block: var(--s-1); border-top: 1px solid var(--mist); font-weight: 600; }
/* odkaz v seznamu (404) vyplní celý řádek: 44 px přes padding položky */
.kinds a { display: flex; align-items: center; min-height: 44px; margin-block: calc(-1 * var(--s-1)); }
@media (min-width: 960px) {
  .feature { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); }
  .feature figure { grid-column: 1 / span 7; grid-row: 1; }
  .feature .body { grid-column: 9 / span 4; grid-row: 1; }
  .feature-flip figure { grid-column: 6 / span 7; }
  .feature-flip .body { grid-column: 1 / span 4; }
}
/* perex pod nadpisem, ne ve vzdálených sloupcích vpravo — na širokém displeji tam visel odtržený od H2 */
.offer .head-row p { color: var(--text-2); max-width: 44ch; margin-top: var(--s-3); }

/* Komíny + služby: na mobilu Komíny → fotka → služby (fotka montáže patří ke službám), na desktopu fotka vlevo */
.trio { background: var(--ice); margin-top: var(--section); padding-block: var(--s-5); }
.trio .grid { display: grid; gap: var(--s-4); }
.trio .item { display: grid; gap: var(--s-2); align-content: start; max-width: 52ch; }
.trio h3 { padding-top: var(--s-3); border-top: 1px solid var(--steel); }
.trio figure { margin: 0; }
.trio img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 960px) {
  .trio .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); align-items: center; }
  .trio figure { grid-column: 1 / span 6; grid-row: 1 / span 2; }
  .trio .item { grid-column: 8 / span 5; }
}

/* Značky — běžící pás přes celou šířku (princip z triplehelix.cz: čisté CSS, dvě stejné sady, posun o −50 %).
   Každá sada má vpravo stejnou mezeru jako mezi štítky, jinak by na švu cukl. Druhá sada je aria-hidden. */
/* dole méně: nad vlnami je v SVG ještě bílý pruh (20–65 px podle šířky), opticky pak sedí s horní mezerou */
.brands { background: var(--bg); padding-block: var(--s-5) var(--s-4); }
@media (min-width: 1100px) { .brands { padding-bottom: var(--s-3); } }
.marquee { margin-top: var(--s-4); overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee 80s linear infinite; }
.marquee-set { display: flex; flex-shrink: 0; gap: var(--s-2); margin: 0; padding: 0 var(--s-2) 0 0; list-style: none; }
/* štítek: rámeček 1px šedomodrá + sešikmený roh jako tlačítka (vnější plocha = rámeček, ::before = bílá výplň,
   vnitřní seříznutí o 0,59 px menší, aby šikmá hrana rámečku měla taky 1 px) */
.marquee-set li {
  position: relative; isolation: isolate;
  padding: var(--s-2) calc(var(--s-3) + 4px) var(--s-2) var(--s-3);
  background: var(--mist);
  font-size: var(--fs-lead); font-weight: 600; line-height: 1.2; color: var(--text-2); white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%);
}
.marquee-set li::before {
  content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--bg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-s) + 0.59px), calc(100% - var(--cut-s) + 0.59px) 100%, 0 100%);
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (hover: hover) {
  .marquee:hover .marquee-track { animation-play-state: paused; }
}
/* omezený pohyb: pás stojí, značky se zalomí do řádků v šířce obsahu */
@media (prefers-reduced-motion: reduce) {
  .marquee { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
  .marquee-track { display: block; width: auto; animation: none; }
  .marquee-set { flex-wrap: wrap; padding: 0; }
  .marquee-set[aria-hidden] { display: none; }
}

/* Vlny z výlohy prodejny — jednou, jako vstup do tmavé plochy prodejny a patičky.
   Pod poslední vlnou je SVG průhledné (maska), takže navazuje grafit + textura z body bez švu. */
/* SVG sprite s logem: v DOM musí být (use href="#logo"), vidět ne — dřív inline style=, CSP ho zakáže */
.sprite { position: absolute; }

.waves { display: block; width: 100%; height: clamp(56px, 9vw, 140px); }

/* Prodejna — na tmavé ploše, patička pod ní za linkou (jako varianta A) */
.store { color: var(--on-coal); padding-block: var(--s-4) var(--section); line-height: 1.65; }
.store .wrap { display: grid; gap: var(--s-4); }
.store .text { display: grid; gap: var(--s-3); align-content: start; }
.store h2 .line { display: block; }
.store .text > p { max-width: 52ch; }
.store dl { display: grid; gap: var(--s-2); margin: 0; }
.store dl div { display: grid; gap: 2px; padding-top: var(--s-2); border-top: 1px solid var(--steel); }
.store dt { color: var(--on-coal-2); font-size: var(--fs-small); }
.store dd { margin: 0; font-weight: 700; }
.store dd small { display: block; font-size: var(--fs-small); font-weight: 400; color: var(--on-coal-2); }
/* telefon a e-mail pod sebou: ::before by se překrýval, proto plná výška 44 px */
.store dd a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.store .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.store .pics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); align-content: start; }
.store .pics figure { margin: 0; }
.store .pics .big { grid-column: 1 / -1; }
.store .pics img { width: 100%; object-fit: cover; }
.store .pics .big img { aspect-ratio: 16 / 10; }
.store .pics .small img { aspect-ratio: 3 / 2; }
.store figcaption { margin-top: var(--s-1); font-size: var(--fs-small); color: var(--on-coal-2); }
/* úzký mobil: dvojice malých fotek by byla ~136 px — výloha na plnou šířku, stolek pryč */
@media (max-width: 479px) {
  .store .pics { grid-template-columns: 1fr; }
  .store .pics .small:last-child { display: none; }
}
@media (min-width: 960px) {
  .store .wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); align-items: start; }
  .store .text { grid-column: 1 / span 5; }
  .store .pics { grid-column: 7 / span 6; }
}

/* Patička — velké logo z manuálu v pozadí celé patičky, dole lehce uříznuté; pod 700 px vypnuté (na úzké patičce
   vychází ~66 px vysoké a půlkou pod řádkem © — působí jako useknutý zbytek) */
.foot { position: relative; isolation: isolate; color: var(--on-coal-2); font-size: var(--fs-small); overflow: hidden; }
.foot .wrap { display: grid; gap: var(--s-3) var(--s-4); padding-block: var(--s-4) var(--s-3); }
.foot .wrap:first-child { border-top: 1px solid var(--steel); }
.foot .logo svg { width: 140px; }
.foot .claim { margin-top: var(--s-2); color: var(--on-coal); font-weight: 700; font-size: var(--fs-lead); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; }
.foot li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-coal); text-decoration: none; }
@media (hover: hover) {
  .foot li a:hover { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 5px; }
}
.foot h2 { font-size: var(--fs-text); color: var(--on-coal); letter-spacing: 0; margin-bottom: var(--s-1); }
/* vpravo místo pro tlačítko nahoru (52 px + mezera), jinak by na konci stránky zakrylo „Web: …“ */
.foot .legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); padding-block: var(--s-2) var(--s-3);
  padding-right: calc(var(--gutter) + 52px + var(--s-2));
}
/* #34434a: na grafitu jen 1,3:1 (vodoznak), text přes něj drží ≥ 5,7:1 */
/* spodní ořez dělá viewBox (250 z 299 jednotek), ne transform — ten by se počítal z výšky patičky */
.bigmark { position: absolute; inset: var(--s-3) 0 0; z-index: -1; color: #34434a; pointer-events: none; }
.bigmark svg { display: block; width: 100%; height: 100%; }
@media (max-width: 699px) {
  .bigmark { display: none; }
}
@media (min-width: 900px) {
  .foot .wrap { grid-template-columns: 4fr 3fr 3fr 2fr; }
}

/* Tlačítko nahoru — vzhled jako „Menu“ (grafit, rámeček šedomodrá), vpravo dole; skryté, dokud je vidět hero */
.totop {
  position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 20;
  display: grid; place-items: center; width: 52px; height: 52px;
  background: var(--coal-2); color: var(--on-coal); border: 2px solid var(--mist);
}
.totop[hidden] { display: none; }
.totop svg { width: 22px; height: 22px; }
.totop:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
@media (hover: hover) {
  .totop:hover { border-color: var(--on-coal); }
}

/* ===== Podstránky ===== */

/* nadpis jen pro čtečky (struktura nadpisů), vizuálně skrytý */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* aktivní položka menu — stejné podtržení jako hover, i v rozbaleném menu (jedna značka pro jeden stav;
   oranžový text na #1c292b má jen 4,3:1, oranžové podtržení jako netextový prvek ≥ 3:1 stačí) */
.nav a[aria-current="page"], .menu li a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 3px; text-underline-offset: 8px; }
/* Úvod podstránky — mechanika hero z homepage (grafit, fotka přesahuje do bílé), H1 o stupeň menší */
.hero-sub h1 { font-size: min(var(--fs-h1), 3.125rem); }
.hero-sub .lead { max-width: 40ch; }
@media (min-width: 960px) {
  .hero-sub figure { min-height: 30rem; }
}
/* výřez fotky s motivem vpravo */
.hero .pos-right { object-position: 72% 50%; }

/* obsahová sekce na bílé */
.section { background: var(--bg); padding-block: var(--section); }
.section-head h2 { max-width: 20ch; }
.section-head p { color: var(--text-2); max-width: 44ch; margin-top: var(--s-3); }
.section-head + .more { margin-top: var(--s-3); }
/* poslední bílá sekce nad vlnami — dole méně, v SVG vln je ještě bílý pruh (jako .brands) */
.section.pre-waves { padding-bottom: var(--s-4); }
@media (min-width: 1100px) { .section.pre-waves { padding-bottom: var(--s-3); } }

/* .feature jako první blok sekce — bez horního odsazení (to dává padding sekce) */
.section .feature:first-child { margin-top: 0; }

/* dlouhý seznam (značky) — od 700 px tři sloupce, menší písmo */
@media (min-width: 700px) {
  .kinds-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.band .kinds-3 li { padding-block: var(--s-1); }

/* sloupce služeb: nadpis s linkou, krátký text, seznam pod sebou */
.cols { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
.cols .col { display: grid; gap: var(--s-2); align-content: start; max-width: 52ch; }
.cols h3 { padding-top: var(--s-3); border-top: 2px solid var(--coal); }
.cols .kinds { grid-template-columns: 1fr; margin-top: var(--s-1); }
@media (min-width: 960px) {
  .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-4); }
}
/* dvě skupiny (grily × udírny) — seznam uvnitř zase ve dvou sloupcích jako u .feature */
@media (min-width: 700px) {
  .cols-2 .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* čtyři kroky služeb jako páteř stránky — 2 × 2, od 1100 px v řadě; číslo jako u .steps */
@media (min-width: 960px) {
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cols-steps { counter-reset: step; }
.cols-steps .col { counter-increment: step; }
.cols-steps h3::before { content: counter(step) ". "; color: var(--brand-text); }
/* doplňující poznámka pod mřížkou (není rovnocenná položka) */
.cols-note { max-width: 52ch; margin-top: var(--s-4); color: var(--text-2); }

/* ledový pás: text vlevo, mřížka položek vpravo */
.band { background: var(--ice); padding-block: var(--s-5); }
.band .wrap { display: grid; gap: var(--s-4); }
.band .text { display: grid; gap: var(--s-3); align-content: start; max-width: 52ch; }
.band .kinds { gap: 0 var(--s-4); align-content: start; }
.band .kinds li { padding-block: var(--s-2); border-top-color: var(--steel); }
/* úzký mobil: delší položky („přetlakové pro plynové kotle“) by se v půlsloupci lámaly — jeden sloupec;
   krátké značky (.kinds-3) zůstávají ve dvou */
@media (max-width: 479px) {
  .band .kinds:not(.kinds-3) { grid-template-columns: 1fr; }
}
@media (min-width: 960px) {
  .band .wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); }
  .band .text { grid-column: 1 / span 5; }
  .band .kinds { grid-column: 7 / span 6; }
  /* pás jen s textem */
  .band-solo .text { grid-column: 1 / span 7; }
}

/* kroky postupu — číslo jako součást nadpisu, žádné ikony */
.steps { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-4); counter-reset: step; }
.steps li { display: grid; gap: var(--s-1); align-content: start; padding-top: var(--s-3); border-top: 1px solid var(--mist); counter-increment: step; }
.steps h3::before { content: counter(step) ". "; color: var(--brand-text); }
.steps p { color: var(--text-2); }
@media (min-width: 600px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); }
}
@media (min-width: 1100px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Galerie prodejny — mřížka různých velikostí (2 / 4 sloupce, pevná výška řádku), bez JS a lightboxu;
   .w2 = 2 sloupce, .h2 = 2 řádky, .big = 2 × 2; dense dorovná mezery */
.gallery {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 17vw, 280px);
  grid-auto-flow: dense; gap: var(--s-2); margin: var(--s-5) 0 0; padding: 0; list-style: none;
}
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery .w2, .gallery .big { grid-column: span 2; }
.gallery .h2, .gallery .big { grid-row: span 2; }
@media (min-width: 700px) {
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Kontaktní údaje velké a klikací (úvod stránky Kontakt) */
.contact { display: grid; gap: var(--s-3); margin: var(--s-4) 0 0; }
.contact div { display: grid; gap: 2px; padding-top: var(--s-2); border-top: 1px solid var(--steel); }
.contact dt { color: var(--on-coal-2); font-size: var(--fs-small); }
.contact dd { margin: 0; font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; }
.contact dd small { display: block; margin-top: 4px; font-size: var(--fs-small); font-weight: 400; color: var(--on-coal-2); }
.contact dd a { position: relative; text-decoration: none; }
/* každý odkaz je v samostatné položce (mezera + dt mezi nimi), ::before se nepřekrývá */
.contact dd a::before { content: ""; position: absolute; inset: -10px -4px; }
/* delší e-mail se na úzkém sloupci zalomí, nepřeteče */
.contact dd a[href^="mailto:"], .store dd a[href^="mailto:"] { overflow-wrap: anywhere; }
@media (hover: hover) {
  .contact dd a:hover { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 3px; text-underline-offset: 6px; }
}
@media (min-width: 600px) {
  .contact { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); }
}

/* Kontakt pod úvodem: letecký snímek jako odkaz do map vlevo, fakturační údaje a odkazy vpravo */
.where-map { display: grid; gap: var(--s-4); }
.where-map figure { margin: 0; }
.where-map img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.where-map figcaption { margin-top: var(--s-1); font-size: var(--fs-small); color: var(--text-2); }
.where-map .text { display: grid; gap: var(--s-2); align-content: start; font-size: var(--fs-small); color: var(--text-2); }
.where-map .links { display: grid; justify-items: start; gap: var(--s-3); margin-top: var(--s-2); font-size: var(--fs-text); color: var(--text); }
@media (min-width: 960px) {
  .where-map { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); }
  .where-map figure { grid-column: 1 / span 7; }
  .where-map .text { grid-column: 9 / span 4; }
}

/* výzva na tmavé ploše pod vlnami — díly bloku prodejny (.store), údaje vpravo místo fotek */
@media (min-width: 960px) {
  .cta .text { grid-column: 1 / span 6; }
  .cta dl { grid-column: 8 / span 5; }
}