/* =========================================================================
   Ing. Tomáš Hurta — Provozní řády vodních zdrojů, bazénů a wellness
   style.css — jediný zdroj stylování webu (design systém)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. FONTY (self-hosted, subsety latin + latin-ext kvůli české diakritice)
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/lora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/lora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0300-036F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0300-036F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------------------
   2. DESIGN TOKENY
   ------------------------------------------------------------------------- */
:root {
  /* Barvy */
  --color-primary: #26306B;
  --color-primary-600: #1D2657;
  --color-primary-700: #161d42;
  --color-secondary: #DCE6F5;
  --color-accent: #2E9BE6;
  --color-accent-600: #1F84CB;
  --color-accent-700: #1B6FA9;
  --color-bg: #F6F8FC;
  --color-surface: #FFFFFF;
  --color-text: #23262E;
  --color-muted: #565F72;
  --color-border: rgba(38, 48, 107, 0.12);
  --color-border-strong: rgba(38, 48, 107, 0.22);

  /* Spacing škála (4px base) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */

  /* Rádius */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.5rem;
  --radius-full: 999px;

  /* Stíny (velmi jemné) */
  --shadow-sm: 0 1px 2px rgba(23, 27, 46, 0.06);
  --shadow-md: 0 12px 28px -14px rgba(38, 48, 107, 0.28);
  --shadow-lg: 0 28px 56px -20px rgba(38, 48, 107, 0.3);

  /* Typografie */
  --font-heading: 'Lora', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-base: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-lg: 1.125rem;
  --lh-body: 1.7;
  --lh-heading: 1.15;

  /* Layout */
  --container-width: min(85%, 82.5rem);
  --container-narrow: min(85%, 46rem);

  /* Přechody */
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --transition-base: 220ms ease;
  --transition-slow: 500ms var(--ease-out);

  /* Výška hlavičky (pro scroll-margin kotev) */
  --header-height: 9.5rem;
}

/* -------------------------------------------------------------------------
   3. RESET / ZÁKLAD
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

@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 {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  overflow-x: hidden;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
  font-weight: 600;
  color: var(--color-primary);
  text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 2.05rem + 2.9vw, 4.5rem); font-weight: 600; }
h2 { font-size: clamp(2.1rem, 1.8rem + 1.3vw, 3rem); }
h3 { font-size: clamp(1.375rem, 1.24rem + 0.55vw, 1.75rem); }
h4 { font-size: clamp(1.15rem, 1.08rem + 0.3vw, 1.375rem); }
h5 { font-size: var(--fs-lg); font-family: var(--font-body); font-weight: 600; }
h6 { font-size: var(--fs-xs); font-family: var(--font-body); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

p { text-wrap: pretty; }
p:not([class]) { max-width: 62ch; }

a {
  color: var(--color-accent-700);
  text-decoration: none;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.15em;
}
a:hover { color: var(--color-accent-600); }

ul, ol { padding-left: 1.15em; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

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

::selection { background-color: var(--color-accent); color: #fff; }

/* Jednopísmenné spojky/předložky zalamuj na nový řádek */
.nbsp { white-space: nowrap; }

/* -------------------------------------------------------------------------
   4. PŘÍSTUPNOST / UTILITY
   ------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   5. LAYOUT PRIMITIVA
   ------------------------------------------------------------------------- */
.container {
  width: var(--container-width);
  margin-inline: auto;
}

.container--narrow {
  width: var(--container-narrow);
  margin-inline: auto;
}

.section {
  padding-block: var(--space-9);
  scroll-margin-top: var(--header-height);
}

.section--muted { background: linear-gradient(180deg, rgba(220, 230, 245, 0.7) 0%, var(--color-surface) 34%); }

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

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

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.eyebrow::before {
  content: '';
  width: 1.5rem;
  height: 2px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}

.section-heading--center .eyebrow::before { display: none; }
.about__body .eyebrow::before { display: none; }

.eyebrow--on-dark { color: var(--color-accent); }
.eyebrow--on-dark::before { background: var(--color-accent); }

.section-heading p:not(.eyebrow) {
  color: var(--color-muted);
  font-size: var(--fs-lg);
  margin-top: var(--space-4);
  max-width: 42ch;
}

.section-heading--center p { margin-inline: auto; }

/* -------------------------------------------------------------------------
   6. TLAČÍTKA
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), color var(--transition-base);
}

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

.btn--primary {
  background-color: var(--color-accent);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn--primary:hover { background-color: var(--color-accent-600); color: #fff; }

.btn--ghost {
  background-color: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-border-strong);
}
.btn--ghost:hover { background-color: var(--color-surface); border-color: var(--color-primary); color: var(--color-primary); }

.btn--on-dark {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.btn--on-dark:hover { background-color: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }

.btn--glass {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: var(--shadow-sm);
}
.btn--glass:hover { background-color: rgba(255, 255, 255, 0.28); border-color: #fff; }

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

/* -------------------------------------------------------------------------
   7. HLAVIČKA / NAVIGACE
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), backdrop-filter var(--transition-base);
}

.site-header.is-scrolled {
  background-color: rgba(246, 248, 252, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* Hlavička plave nad hero fotkou, dokud se nescrolluje */
.site-header:not(.is-scrolled) .nav__toggle {
  color: #fff;
}
.site-header:not(.is-scrolled) .nav__toggle:hover {
  background-color: rgba(255, 255, 255, 0.16);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.logo { display: flex; align-items: center; }

.logo__img { height: 8rem; width: auto; }

.logo__img--white { display: none; }
.site-header:not(.is-scrolled) .logo__img--color { display: none; }
.site-header:not(.is-scrolled) .logo__img--white { display: block; }

.nav__toggle {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-primary);
}
.nav__toggle:hover { background-color: var(--color-secondary); }
.nav__toggle svg { width: 1.5rem; height: 1.5rem; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

.nav__panel {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  z-index: 150;
  background-color: var(--color-bg);
  padding: var(--space-7) var(--space-5);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}
.nav__panel.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* Pojistka: dokud je mobilní menu otevřené, hlavička nesmí mít backdrop-filter
   (na některých mobilních prohlížečích vytváří pro potomky s position:fixed
   nový containing block a rozbíjí jim pozici/průhlednost) */
.site-header:has(.nav__panel.is-open) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: var(--color-bg);
}
.site-header:has(.nav__panel.is-open) .logo__img--color { display: block; }
.site-header:has(.nav__panel.is-open) .logo__img--white { display: none; }

.nav__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nav__list a {
  display: block;
  padding: var(--space-4) var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-border);
}

.nav__list a.nav__list-highlight {
  background-color: var(--color-accent);
  border-radius: var(--radius-md);
  border-bottom: none;
  color: #fff;
}
.nav__list a:hover { color: var(--color-accent-700); }

/* -------------------------------------------------------------------------
   8. HERO — fotka přes celou šířku, text v překryvu
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(64svh, 34rem);
  margin-top: calc(-1 * var(--header-height));
  padding-top: calc(var(--space-9) + var(--header-height));
  padding-bottom: var(--space-9);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.1) saturate(1.25) contrast(1.06);
}

.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 32, 0.4) 0%, rgba(10, 14, 32, 0) 9%),
              linear-gradient(90deg, rgba(14, 18, 43, 0.72) 0%, rgba(17, 22, 50, 0.44) 28%, rgba(17, 22, 50, 0.12) 50%, rgba(17, 22, 50, 0) 62%),
              linear-gradient(0deg, rgba(10, 14, 32, 0.45) 0%, rgba(10, 14, 32, 0) 30%);
}

.hero__inner { position: relative; }

.hero__content { max-width: 38rem; }

.hero__content .eyebrow { color: var(--color-secondary); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3); }
.hero__content .eyebrow::before { background: var(--color-secondary); }

.hero__content h1 { color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35); }

/* Na nejužších telefonech (~320px) se "Provozní řády" nevejde na řádek při základní velikosti nadpisu */
@media (max-width: 22rem) {
  .hero__content h1 { font-size: 2.3rem; }
}

.hero__content p {
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.32);
  font-size: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  margin-top: var(--space-5);
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
}


/* -------------------------------------------------------------------------
   9. SLUŽBY — střídavé řádky foto / text
   ------------------------------------------------------------------------- */
.service-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

.service-row {
  display: grid;
  gap: var(--space-6);
}

.service-row__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.service-row__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.service-row__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15, 19, 43, 0.72) 0%, rgba(15, 19, 43, 0) 32%);
}

.service-row__caption {
  position: absolute;
  z-index: 1;
  right: var(--space-4);
  bottom: var(--space-3);
  max-width: calc(100% - 2 * var(--space-4));
  text-align: right;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: #b8bcc6;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.service-row__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-row__content h3 { margin-bottom: var(--space-5); }

.service-row__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--color-text);
}

.service-row__list li {
  display: flex;
  gap: var(--space-3);
}

.service-row__list li svg {
  width: 1.1rem; height: 1.1rem;
  margin-top: 0.3em;
  flex-shrink: 0;
  color: var(--color-accent);
}

/* -------------------------------------------------------------------------
   10. O MNĚ
   ------------------------------------------------------------------------- */
.about .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.about__media { position: relative; }

.about__media::before {
  content: '';
  position: absolute;
  inset: var(--space-5) calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-5);
  background-color: var(--color-secondary);
  border-radius: var(--radius-lg);
  z-index: -1;
}

.about__figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 3 / 4;
}
.about__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(1.05) saturate(1.12) contrast(1.06);
}

.about__body p:not(.eyebrow) {
  color: var(--color-text);
  font-size: var(--fs-lg);
  margin-bottom: var(--space-5);
}

.about__stats {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.about__stat {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.about__stat:first-child { padding-top: 0; border-top: none; }

.about__stat-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 0.2em;
}

.about__stat svg {
  width: 1.5rem; height: 1.5rem;
  color: var(--color-accent);
}

.about__stat-text {
  display: flex;
  flex-direction: column;
}

.about__stat-text strong {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  font-size: clamp(1.5rem, 1.4rem + 0.5vw, 1.875rem);
  color: var(--color-primary);
  white-space: nowrap;
}

.about__stat-text span {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  margin-top: 0.2rem;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   11. FAQ / AKORDEON
   ------------------------------------------------------------------------- */
.accordion-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-5);
}

.accordion-item {
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-2);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  text-align: left;
  padding: var(--space-4) var(--space-1);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--color-primary);
}

.accordion-trigger__icon {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-secondary);
  color: var(--color-primary);
  transition: transform var(--transition-base), background-color var(--transition-base);
}
.accordion-trigger__icon svg { width: 0.9rem; height: 0.9rem; }

.accordion-trigger[aria-expanded="true"] .accordion-trigger__icon {
  transform: rotate(180deg);
  background-color: var(--color-accent);
  color: #fff;
}

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-slow);
}
.accordion-panel.is-open { grid-template-rows: 1fr; }

.accordion-panel__inner {
  overflow: hidden;
}

.accordion-panel p {
  color: var(--color-muted);
  padding: 0 var(--space-1) var(--space-5);
  max-width: 60ch;
}

/* -------------------------------------------------------------------------
   12. KONTAKT
   ------------------------------------------------------------------------- */
.contact .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
}

.contact__card {
  background: linear-gradient(155deg, var(--color-primary), var(--color-primary-700));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  box-shadow: var(--shadow-lg);
}

.contact__card h2 {
  color: #fff;
  font-weight: 700;
  font-size: clamp(2rem, 1.8rem + 1vw, 2.75rem);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.contact__card h3 { color: #fff; margin-bottom: var(--space-2); }
.contact__card > p { color: rgba(255, 255, 255, 0.78); font-size: var(--fs-lg); margin-top: var(--space-3); margin-bottom: var(--space-7); }

.contact__list { list-style: none; padding: 0; display: grid; gap: var(--space-5); }

.contact__list a, .contact__list span {
  color: #fff;
  font-weight: 700;
  font-size: 1.1875rem;
}

.contact__list span.contact__list-name { color: var(--color-accent); font-size: 1.5rem; }

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

.contact__list-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--color-accent);
}
.contact__list-icon svg { width: 1.5rem; height: 1.5rem; }

.contact__list a { transition: color var(--transition-base); }
.contact__list a:hover { color: var(--color-accent); }

.contact__list small { display: block; color: rgba(255, 255, 255, 0.62); font-size: var(--fs-xs); font-weight: 400; margin-top: 0.15rem; }

.form {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  box-shadow: var(--shadow-sm);
}

.form h3 { margin-bottom: var(--space-6); }

.form__row { display: grid; gap: var(--space-5); }
.form__row + .form__row,
.form__row + .form__group { margin-top: var(--space-6); }
.form__group { display: flex; flex-direction: column; gap: var(--space-2); }

.form__group label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-primary);
}

.form__group input,
.form__group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border-strong);
  background-color: var(--color-bg);
  font-size: var(--fs-base);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form__group input:focus,
.form__group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(46, 155, 230, 0.16);
}

.form__group textarea { resize: vertical; min-height: 8rem; }

/* honeypot - skryté pole proti spamu, mimo zorné pole i čtečky */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__submit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.form__submit .btn { width: 100%; }

.form__note { font-size: var(--fs-xs); color: var(--color-muted); text-align: center; }

.form__status {
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin-top: var(--space-5);
}
.form__status[hidden] { display: none; }
.form__status--ok { background-color: var(--color-secondary); color: var(--color-primary); }
.form__status--error { background-color: #FBE7E7; color: #B33A3A; }

/* -------------------------------------------------------------------------
   13. PATIČKA
   ------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: linear-gradient(165deg, var(--color-primary), var(--color-primary-700));
  color: rgba(255, 255, 255, 0.78);
  padding-block: var(--space-9) var(--space-6);
}

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

.site-footer .logo__img { margin-top: -1.5rem; }

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

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

.footer__lead { max-width: 34ch; font-size: var(--fs-lg); color: rgba(255, 255, 255, 0.62); margin-top: var(--space-4); }

.footer__heading {
  color: var(--color-accent);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}

.footer__list { list-style: none; padding: 0; display: grid; gap: var(--space-3); }

.footer__list a {
  position: relative;
  display: inline-block;
  color: rgba(255, 255, 255, 0.78);
  transition: color var(--transition-base);
}
.footer__list a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1px;
  background-color: var(--color-accent);
  transition: right var(--transition-base);
}
.footer__list a:hover { color: #fff; }
.footer__list a:hover::after { right: 0; }

.site-footer address { font-style: normal; }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: var(--space-4);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  justify-content: space-between;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
}

.footer__credit { color: inherit; }
.footer__credit a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 2px; }
.footer__credit a:hover { text-decoration-color: currentColor; }

/* -------------------------------------------------------------------------
   14. SCROLL REVEAL / ZPĚT NAHORU
   ------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

.back-to-top {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 90;
  width: 3rem; height: 3rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base), background-color var(--transition-base);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background-color: var(--color-accent-600); }
.back-to-top svg { width: 1.2rem; height: 1.2rem; }

/* -------------------------------------------------------------------------
   15. CHYBOVÁ STRÁNKA (404)
   ------------------------------------------------------------------------- */
.error-page {
  min-height: calc(100vh - var(--header-height));
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--space-9);
}

.error-page__icon {
  width: 5rem; height: 5rem;
  color: var(--color-accent);
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.error-page p {
  color: var(--color-muted);
  font-size: var(--fs-lg);
  max-width: 40ch;
  margin-inline: auto;
  margin-block: var(--space-5) var(--space-7);
}

/* =========================================================================
   BREAKPOINTY (mobile-first)
   sm: 40rem / md: 48rem / lg: 64rem / xl: 80rem / 2xl: 90rem
   ========================================================================= */

/* --- Tablet (≥48rem / 768px) --- */
@media (min-width: 48rem) {
  .service-row {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-8);
  }

  /* sudé řádky mají fotku vpravo — text a foto se v každém dalším řádku prohodí (cik-cak) */
  .service-row--reverse .service-row__media { order: 2; }

  .about .container { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); }

  .about__stats { flex-direction: row; flex-wrap: wrap; gap: var(--space-5) var(--space-7); }

  .about__stat {
    padding-top: 0;
    border-top: none;
    padding-left: var(--space-6);
    border-left: 1px solid var(--color-border);
  }
  .about__stat:first-child { padding-left: 0; border-left: none; }

  .contact .container { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }

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

  .footer__grid { grid-template-columns: 1fr auto; align-items: start; }
  .footer__links { grid-template-columns: repeat(2, auto); gap: var(--space-9); margin-right: var(--space-8); }

  .form__row--2 { grid-template-columns: 1fr 1fr; }
}

/* --- Desktop (≥64rem / 1024px) --- */
@media (min-width: 64rem) {
  .nav__toggle { display: none; }

  .nav__panel {
    position: static;
    inset: auto;
    padding: 0;
    background: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }

  .nav__list a {
    padding: var(--space-2) 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--color-text);
    border-bottom: none;
    position: relative;
    transition: color var(--transition-base);
  }

  .nav__list a::after {
    content: '';
    position: absolute;
    left: 0; right: 100%;
    bottom: -4px;
    height: 2px;
    background-color: var(--color-accent);
    transition: right var(--transition-base);
  }
  .nav__list a:hover { color: var(--color-primary); }
  .nav__list a:hover::after { right: 0; }

  .nav__list a.nav__list-highlight {
    padding: 0.55rem 1.15rem;
    background-color: var(--color-accent);
    border-radius: var(--radius-full);
    color: #fff;
    box-shadow: var(--shadow-sm);
  }
  .nav__list a.nav__list-highlight::after { display: none; }
  .nav__list a.nav__list-highlight:hover { background-color: var(--color-accent-600); color: #fff; }

  .site-header:not(.is-scrolled) .nav__list a {
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
  }
  .site-header:not(.is-scrolled) .nav__list a:hover { color: #fff; }
  .site-header:not(.is-scrolled) .nav__list a::after { background-color: #fff; }

  .site-header:not(.is-scrolled) .nav__list a.nav__list-highlight {
    text-shadow: none;
  }
}

/* --- Velký desktop (≥80rem / 1280px) --- */
@media (min-width: 80rem) {
  .contact .container { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); }
}

/* --- 4K / velmi široké obrazovky (≥90rem / 1440px) --- */
@media (min-width: 90rem) {
  :root { --container-width: min(85%, 88rem); }
  body { font-size: 1.0625rem; }
}