/* Veřejná úvodní stránka firmy (web.php) — samostatný CSS, nezávislý na
   assets/css/style.css appky, ať admin může klidně měnit vzhled appky bez
   dopadu na veřejnou stránku a naopak. */

body { color: #26313a; }
h1, h2, h3 { font-weight: 700; }
.web-logo { max-height: 64px; max-width: 220px; }
.web-subheadline { font-size: 1.15rem; color: #5a6570; margin-bottom: 1rem; }
.web-rich { line-height: 1.7; }
.web-rich a { color: var(--web-primary, #1e5c32); }
.web-rich h1, .web-rich h2, .web-rich h3 { margin-top: 1rem; }
.web-rich h1:first-child, .web-rich h2:first-child, .web-rich h3:first-child { margin-top: 0; }
.web-rich pre {
  background: #1e293b; color: #e5e7eb; padding: 1rem; border-radius: 8px;
  overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem;
}
.web-rich code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.web-preview-banner {
  background: #fff3cd; color: #664d03; text-align: center; padding: .5rem 1rem;
  font-size: .85rem; border-bottom: 1px solid #ffe69c;
}

/* ── Šablona: hero-vizitka ─────────────────────────────────────────── */
.web-hero-bg {
  position: relative; overflow: hidden;
  background-size: cover; background-position: center; background-color: #1e293b;
  min-height: 60vh; display: flex; align-items: center;
}
/* Rozmazané pozadí (volitelné, admin/web.php → blok Hero) — obrázek se
   NEROZMazává přímo (to by rozmazalo i text nad ním), ale přes samostatnou
   ::before vrstvu za obsahem; ::before přesahuje o kus mimo okraj
   (`inset:-20px`), ať po rozmazání není vidět ostrá hrana. Barevný nádech
   (::after, tmavý/světlý) zajišťuje čitelnost textu nad rozmazanou fotkou.
   Proměnné (--web-hero-bg-image/--web-hero-blur-amount) nastavuje web.php
   inline podle konkrétního bloku. */
.web-hero-blur::before {
  content: ''; position: absolute; inset: -20px; z-index: 0;
  background-image: var(--web-hero-bg-image); background-size: cover; background-position: center;
  filter: blur(var(--web-hero-blur-amount, 8px));
}
.web-hero-blur-dark::after { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(0,0,0,.4); }
.web-hero-blur-light::after { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(255,255,255,.5); }
.web-hero-overlay { position: relative; z-index: 1; width: 100%; padding: 3rem 0; }
.web-hero-panel {
  background: rgba(255,255,255,.94); border-radius: 12px; padding: 2.5rem;
  max-width: 640px;
}
.web-hero-panel h1 { color: var(--web-primary, #1e5c32); }
.web-cards-dark { background: #1a1a1a; padding: 2.5rem 0; }
.web-card-dark {
  background: #262626; border-radius: 10px; padding: 1.5rem; height: 100%; color: #e5e5e5;
}
.web-card-dark h3 { color: var(--web-secondary, #2d7a47); font-size: 1.1rem; }
.web-about-centered { text-align: center; max-width: 780px; margin: 0 auto; }

/* ── Šablona: sluzby-sloupce ────────────────────────────────────────── */
.web-plain-header { padding: 3.5rem 0 2.5rem; background: #f8f9fa; }
.web-plain-header h1 { color: var(--web-primary, #1e5c32); }
.web-section { padding: 3rem 0; }
.web-section-alt { background: #f8f9fa; }
.web-card-light {
  border: 1px solid #e3e6ea; border-radius: 10px; padding: 1.5rem; height: 100%;
}
.web-card-light h3 { color: var(--web-primary, #1e5c32); font-size: 1.1rem; }

/* ── Šablona: jednoduchy ───────────────────────────────────────────── */
.web-simple-wrap {
  min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 3rem 1rem;
}
.web-simple-inner { max-width: 640px; text-align: center; }
.web-simple-inner h1 { color: var(--web-primary, #1e5c32); }

/* ── Šablona: strana-o-nas ─────────────────────────────────────────── */
.web-split-header { padding: 3.5rem 0; }
.web-split-header h1 { color: var(--web-primary, #1e5c32); }
/* Blok "Obrázek" (web.php, case 'image') — celý obrázek musí být vždy
   vidět beze zbytku (žádné ořezání), šířka podle stránky, výška se
   dopočítá z poměru stran — proto `height: auto`, ŽÁDNÉ `object-fit:
   cover`/`max-height`, co by obrázek ořízly. */
.web-split-image { width: 100%; height: auto; border-radius: 12px; display: block; }

/* ── Blok: oddělovač ──────────────────────────────────────────────────
   Šířka VŽDY 50 % stránky (viz PROGRESS.md 2026-09-16) — zarovnání
   (vlevo/na střed/vpravo) řeší obalový flex kontejner ve web.php. Barva
   čáry = currentColor, ať ji jde přebarvit přes text_color bloku stejně
   jako u ostatních typů. */
.web-divider-wrap { padding: 1rem 0; }
.web-divider { width: 50%; margin: 0; border: none; border-top: 1px solid currentColor; opacity: .25; }

/* ── Blok: tlačítka ─────────────────────────────────────────────────── */
.web-btn-primary {
  background: var(--web-primary, #1e5c32); border-color: var(--web-primary, #1e5c32); color: #fff;
}
.web-btn-primary:hover { background: var(--web-secondary, #2d7a47); border-color: var(--web-secondary, #2d7a47); color: #fff; }
.web-btn-outline {
  background: transparent; border-color: var(--web-primary, #1e5c32); color: var(--web-primary, #1e5c32);
}
.web-btn-outline:hover { background: var(--web-primary, #1e5c32); color: #fff; }

/* ── Společné: kontakt + patička ───────────────────────────────────── */
.web-contact { padding: 2.5rem 0; background: var(--web-primary, #1e5c32); color: #fff; }
.web-contact h2 { font-size: 1.3rem; margin-bottom: .75rem; }
.web-footer { padding: 1.25rem 0; background: #1a1a1a; }
.web-footer a { color: #9aa0a6; font-size: .8rem; text-decoration: none; }
.web-footer a:hover { color: #fff; }

@media (max-width: 767.98px) {
  .web-hero-panel { padding: 1.5rem; }
  .web-hero-bg { min-height: 50vh; }
}