/* ==========================================================================
   VHV SPEED — css/phase2-visual.css
   FÁZE 2: VIZUÁLNÍ POVÝŠENÍ (page-builder -> custom profesionál)
   --------------------------------------------------------------------------
   Nalinkovat NAKONEC (po enhancements.css i wpfc-*). Soubor sjednocuje
   6 komponent: page-header, photo-colorgrade, buttons, cards, rhythm-typo,
   icons. Brand barvy se NEMĚNÍ (red #da251d, blue #0061a5, navy #03274b,
   light #f1f7ff). Mění se jen PROVEDENÍ.

   ARCHITEKTURA SPECIFICITY:
   - Existující design-tokens.css už definuje --radius-sm/md/lg/xl/pill
     (md=10px, lg=16px, pill=999px) a --shadow-sm/md/lg/focus. TY NEPŘEPISUJI
     (používají je jiné komponenty). Nové tokeny dávám pod prefix --p2-*.
   - @layer vhv-photo-grade + @layer vhv-icons = kontejnerové úpravy, kde
     stačí nízká priorita a chceme být "pod" budoucími override.
   - page-header / buttons / cards jsou MIMO @layer + používají !important,
     protože musí přebít Kadence inline <style> (!important) a enhancements.css
     (taky !important). Vyhrávají pozdějším pořadím + ≥ specificitou.
   ========================================================================== */


/* ==========================================================================
   0) SDÍLENÉ TOKENY (jeden :root blok)
   Pouze NOVÉ tokeny (prefix --p2-), aby nedošlo ke kolizi s design-tokens.css.
   Radius/pill přebíráme z design-tokens.css s fallbackem.
   ========================================================================== */
:root {
  /* --- Radius (reuse design-tokens, fallback pro jistotu) --- */
  --p2-radius-card: var(--radius-lg, 16px);   /* karty */
  --p2-radius-pill: var(--radius-pill, 999px);/* konverzní CTA */
  --p2-radius-md:   12px;                      /* drobné inline prvky */

  /* --- Stíny: jednotná NAVY báze (#03274b => rgba(3,39,75,…)) --- */
  --p2-shadow-card:        0 4px 20px rgba(3, 39, 75, .08);
  --p2-shadow-card-hover:  0 16px 40px rgba(3, 39, 75, .12);

  /* --- Stíny tlačítek (drží brand červenou / modrou) --- */
  --p2-shadow-btn:        0 4px 14px rgba(218, 37, 29, .28);
  --p2-shadow-btn-hover:  0 8px 22px rgba(218, 37, 29, .40);
  --p2-shadow-btn-blue:   0 8px 22px rgba(0, 97, 165, .32);

  /* --- Geometrie tlačítek --- */
  --p2-btn-pad-y: 0.85rem;
  --p2-btn-pad-x: 1.8rem;
  --p2-btn-lift:  -2px;
  --p2-btn-trans: background .2s ease, color .2s ease,
                  transform .2s ease, box-shadow .2s ease, border-color .2s ease;

  /* --- Vertikální rytmus sekcí --- */
  --p2-section-py:  clamp(3.5rem, 8vw, 7rem);
  --p2-section-gap: clamp(2.5rem, 5vw, 4.5rem);

  /* --- Fluidní typo škála (poměr ~1.25) --- */
  --p2-fs-h2:   clamp(1.6rem, 1.15rem + 1.9vw, 2.25rem);  /* ~26 → 36px */
  --p2-fs-h3:   clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);  /* ~20 → 26px */
  --p2-fs-lead: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  --p2-measure: 68ch;
  --p2-heading-family: var(--global-heading-font-family, "Ubuntu", "Roboto", sans-serif);

  /* --- Ikony --- */
  --p2-icon-size:      24px;       /* jednotná velikost glyfu */
  --p2-icon-pad:       56px;       /* průměr feature podložky */
  --p2-icon-bg:        #f1f7ff;    /* brand light */
  --p2-icon-fg:        #0061a5;    /* brand blue */
  --p2-icon-fg-strong: #03274b;    /* navy */
  --p2-icon-stroke:    1.9;        /* cílová tloušťka outline tahu */
}


/* ==========================================================================
   1) PAGE-HEADER — klidný moderní navy page header
   --------------------------------------------------------------------------
   Z datovaného Kadence "page title cover" (fotopozadí + šikmý navy→červený
   swoosh overlay + vlnitý spodní separátor) dělá custom navy band se
   zarovnaným bílým H1 a tenkou červenou linkou dole.

   SCOPE: výhradně první .kb-row-layout-wrap.kt-row-has-bg pod #wrapper na
   NE-home a NE-single stránkách. Tím:
   - vylučuju homepage (body.home, vlastní .vhv-hero-split),
   - vylučuju single články (body.single — drží svůj existující hero),
   - PŘEBÍJÍM existující 528px foto-hero z enhancements.css (ř. 13–86),
     který používá IDENTICKÝ selektor body:not(.home):not(.single).
   .objednavka-hero / .kontakt-hero NEjsou .kt-row-has-bg → zůstávají bespoke.
   bg-image i overlay gradient jsou v inline <head> stylu → !important nutné.
   Ověřeno: o-nas.html (ř.234), kontakt.html, sla.html.
   ========================================================================== */

/* ---- 1a. Band: zrušit foto, navy gradient, jednotná kompaktní výška ---- */
body:not(.home):not(.single) #wrapper
  > .kb-row-layout-wrap.kt-row-has-bg:first-of-type {
  background-color: #03274b !important;          /* navy fallback ZA fotkou (fotka z inline stylu zůstává) */
  border-bottom: 3px solid #da251d !important;   /* tenká brand linka místo vlny */
  /* zrušit 528px lock z enhancements.css */
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  /* horní padding kvůli transparentní fixní hlavičce (~148px) + spodní vzduch */
  padding-top: clamp(120px, 12vw, 168px) !important;
  padding-bottom: clamp(40px, 5vw, 64px) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  position: relative !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* ---- 1b. Overlay: nahradit šikmý červený swoosh ČISTÝM navy veilem
   (fotka zůstává viditelná pod ním, text je čitelný) ---- */
body:not(.home):not(.single) #wrapper
  > .kb-row-layout-wrap.kt-row-has-bg:first-of-type > .kt-row-layout-overlay,
body:not(.home):not(.single) #wrapper
  > .kb-row-layout-wrap.kt-row-has-bg:first-of-type
  > .kt-row-layout-overlay.kt-row-overlay-gradient {
  background: linear-gradient(180deg, rgba(3, 39, 75, 0.82) 0%, rgba(3, 39, 75, 0.60) 60%, rgba(0, 97, 165, 0.55) 100%) !important;
  background-image: linear-gradient(180deg, rgba(3, 39, 75, 0.82) 0%, rgba(3, 39, 75, 0.60) 60%, rgba(0, 97, 165, 0.55) 100%) !important;
  opacity: 1 !important;
  display: block !important;
  mix-blend-mode: normal !important;
}

/* ---- 1c. Vlnitý spodní + horní separátor: pryč ---- */
body:not(.home):not(.single) #wrapper
  > .kb-row-layout-wrap.kt-row-has-bg:first-of-type > .kt-row-layout-bottom-sep,
body:not(.home):not(.single) #wrapper
  > .kb-row-layout-wrap.kt-row-has-bg:first-of-type
  > .kt-row-layout-bottom-sep.kt-row-sep-type-mtns,
body:not(.home):not(.single) #wrapper
  > .kb-row-layout-wrap.kt-row-has-bg:first-of-type > .kt-row-layout-top-sep {
  display: none !important;
}

/* ---- 1d. Vnitřní wrap + sloupec: zrušit vynucené 380px výšky, obsah vlevo - */
body:not(.home):not(.single) #wrapper
  > .kb-row-layout-wrap.kt-row-has-bg:first-of-type > .kt-row-column-wrap {
  min-height: 0 !important;
  max-height: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: stretch !important;
}
body:not(.home):not(.single) #wrapper
  > .kb-row-layout-wrap.kt-row-has-bg:first-of-type .kt-inside-inner-col {
  min-height: 0 !important;
  width: 100% !important;
  max-width: var(--global-content-width, 1390px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--global-content-edge-padding, 1.5rem) !important;
  padding-right: var(--global-content-edge-padding, 1.5rem) !important;
  justify-content: center !important;
  align-items: flex-start !important;
  box-sizing: border-box !important;
}

/* ---- 1e. H1: Ubuntu, bílá, VLEVO, klidný clamp, bez stínu/center ---- */
body:not(.home):not(.single) #wrapper
  > .kb-row-layout-wrap.kt-row-has-bg:first-of-type h1,
body:not(.home):not(.single) #wrapper
  > .kb-row-layout-wrap.kt-row-has-bg:first-of-type h1[class*="kt-adv-heading"] {
  font-family: var(--p2-heading-family) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-align: left !important;
  font-size: clamp(28px, 4.4vw, 46px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5) !important;  /* čitelnost na fotce */
  margin: 0 !important;
  padding: 0 !important;
  max-width: 22ch !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ---- 1f. Mobil: nižší horní padding (hlavička nižší) ---- */
@media (max-width: 767px) {
  body:not(.home):not(.single) #wrapper
    > .kb-row-layout-wrap.kt-row-has-bg:first-of-type {
    padding-top: clamp(96px, 22vw, 128px) !important;
    padding-bottom: 32px !important;
  }
  body:not(.home):not(.single) #wrapper
    > .kb-row-layout-wrap.kt-row-has-bg:first-of-type h1,
  body:not(.home):not(.single) #wrapper
    > .kb-row-layout-wrap.kt-row-has-bg:first-of-type h1[class*="kt-adv-heading"] {
    font-size: clamp(26px, 7.5vw, 34px) !important;
  }
}


/* ==========================================================================
   2) PHOTO-COLORGRADE — sjednocení tónu fotek (NE brandu)
   --------------------------------------------------------------------------
   - jemný filter na <img> (saturate .92, contrast 1.03) = "house tone"
   - jemný NAVY overlay přes ::after wrapperu (brand #03274b, soft-light)
   - NIKDY loga (figure.wp-block-kadence-image, .kb-img) a NIKDY svg ikony
   - text na fotce (badge/eyebrow) zůstává čitelný (z-index nad overlay)
   @layer => nižší priorita, ale cílíme přímo na <img> / wrapper, takže projde.
   ========================================================================== */
@layer vhv-photo-grade {

  /* --- 2a. Filtr na samotných fotkách (jen stabilní obrazové wrappery) --- */
  .vhv-segment-img img,
  .onas-hero-image img,
  .onas-region-image img,
  .onas-infra-image img,
  .onas-milestone-image img,
  .onas-team-photo img,
  .vhv-aktu-featured-image img,
  .vhv-aktu-card-image img {
    filter: saturate(0.92) contrast(1.03) brightness(1.005);
    transition: filter 0.35s ease, transform 0.45s ease;
  }

  /* Placeholder bez fotky (barevný blok s iniciálami) NEGRADOVAT. */
  .onas-team-photo-placeholder img {
    filter: none;
  }

  /* Hover na kartách: fotka lehce ožije. */
  .vhv-segment-card:hover .vhv-segment-img img,
  .vhv-aktu-card-link:hover .vhv-aktu-card-image img,
  .vhv-aktu-featured-link:hover .vhv-aktu-featured-image img {
    filter: saturate(1.0) contrast(1.04) brightness(1.01);
  }

  /* --- 2b. Jemný navy overlay přes ::after wrapperu --- */
  .vhv-segment-img,
  .onas-hero-image,
  .onas-region-image,
  .onas-infra-image,
  .onas-milestone-image,
  .vhv-aktu-featured-image,
  .vhv-aktu-card-image {
    position: relative;          /* nutné pro ::after */
    overflow: hidden;            /* aby overlay respektoval zaoblené rohy */
  }

  .vhv-segment-img::after,
  .onas-hero-image::after,
  .onas-region-image::after,
  .onas-infra-image::after,
  .onas-milestone-image::after,
  .vhv-aktu-featured-image::after,
  .vhv-aktu-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                  rgba(3, 39, 75, 0.06) 0%,
                  rgba(3, 39, 75, 0.16) 100%);
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 1;                  /* nad fotkou, pod textem */
    border-radius: inherit;
  }

  /* Featured aktualita má přes fotku badge -> overlay držet velmi jemný. */
  .vhv-aktu-featured-image::after {
    background: linear-gradient(180deg,
                  rgba(3, 39, 75, 0.05) 0%,
                  rgba(3, 39, 75, 0.12) 100%);
  }

  /* Badge / popisky nad fotkou musí být NAD overlayem. */
  .vhv-aktu-featured-badge,
  .vhv-segment-eyebrow {
    position: relative;
    z-index: 2;
  }
}

/* --- 2c. Pojistky MIMO @layer: loga a ikony NIKDY negradovat --- */
figure.wp-block-kadence-image img,
.kb-img,
.site-branding img,
img[alt*="logo" i] {
  filter: none !important;
}
figure.wp-block-kadence-image::after,
.site-branding::after {
  content: none !important;
}


/* ==========================================================================
   3) BUTTONS — sjednocení ~86 button tříd na jeden standard
   --------------------------------------------------------------------------
   Brand barvy NEZMĚNĚNY (red #da251d / hover #b70f07, blue #0061a5,
   navy #03274b). Pill 999px, jednotný padding, hover lift -2px, jednotný stín.
   Hierarchie: primární = plná červená; sekundární = modrá outline;
   ghost na tmavém pozadí = bílý outline. Soubor NAKONEC => !important proti
   Kadence/inline.
   Pozn.: některé třídy (vhv-tcard-cta, vhv-kombo-cta, vhv-price-cta,
   vhv-parallax-cta) v aktuálním markupu nejsou — ponechány pro budoucí použití,
   nematchnou nic = bez efektu.
   ========================================================================== */

/* ---- 3a. Společná geometrie (pill konverzní CTA) ---- */
.vhv-cta-btn,
.vhv-cta-btn.primary,
.vhv-art-cta-btn,
.vhv-local-btn,
.objednavka-hero-btn,
.objednavka-tariff-btn,
.objednavka-final-btn,
.vhv-aktu-btn,
.vhv-tcard-cta,
.vhv-kombo-cta,
.vhv-price-cta,
.vhv-plan-cta,
.vhv-segment-cta,
.vhv-cov-mini-cta,
.vhv-parallax-cta,
.vhv-cov-modal-cta,
.vhv-404-wrap .vhv-btn-primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--p2-btn-pad-y) var(--p2-btn-pad-x) !important;
  border-radius: var(--p2-radius-pill) !important;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none !important;
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--p2-btn-trans) !important;
  -webkit-tap-highlight-color: transparent;
}

/* drobnější inline CTA: menší velikost, stejný pill tvar */
.vhv-cov-mini-cta {
  padding: 0.5rem 1rem !important;
  font-size: 0.85rem;
}

/* ---- 3b. Primární hierarchie = plná červená ---- */
.vhv-cta-btn,
.vhv-cta-btn.primary,
.vhv-art-cta-btn-primary,
.vhv-local-btn-primary,
.objednavka-hero-btn-primary,
.objednavka-tariff-btn,
.objednavka-final-btn,
.vhv-aktu-btn-primary,
.vhv-tcard-cta,
.vhv-kombo-cta,
.vhv-price-cta,
.vhv-plan-cta,
.vhv-cov-mini-cta,
.vhv-parallax-cta,
.vhv-cov-modal-cta--primary,
.vhv-404-wrap .vhv-btn-primary {
  background: #da251d !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: var(--p2-shadow-btn) !important;
}
.vhv-cta-btn:hover,
.vhv-cta-btn.primary:hover,
.vhv-art-cta-btn-primary:hover,
.vhv-local-btn-primary:hover,
.objednavka-hero-btn-primary:hover,
.objednavka-tariff-btn:hover,
.objednavka-final-btn:hover,
.vhv-aktu-btn-primary:hover,
.vhv-tcard-cta:hover,
.vhv-kombo-cta:hover,
.vhv-price-cta:hover,
.vhv-plan-cta:hover,
.vhv-cov-mini-cta:hover,
.vhv-parallax-cta:hover,
.vhv-cov-modal-cta--primary:hover,
.vhv-404-wrap .vhv-btn-primary:hover {
  background: #b70f07 !important;        /* WCAG: bílá na #b70f07 ~5.0:1 */
  color: #ffffff !important;
  transform: translateY(var(--p2-btn-lift)) !important;
  box-shadow: var(--p2-shadow-btn-hover) !important;
}

/* ---- 3c. Sekundární = modrá outline (světlé pozadí) ---- */
.vhv-local-btn-ghost,
.objednavka-hero-btn-ghost,
.vhv-cov-modal-cta--ghost {
  background: #ffffff !important;
  color: #0061a5 !important;
  border-color: #0061a5 !important;
  box-shadow: none !important;
}
.vhv-local-btn-ghost:hover,
.objednavka-hero-btn-ghost:hover,
.vhv-cov-modal-cta--ghost:hover {
  background: #0061a5 !important;
  color: #ffffff !important;
  border-color: #0061a5 !important;
  transform: translateY(var(--p2-btn-lift)) !important;
  box-shadow: var(--p2-shadow-btn-blue) !important;
}

/* ---- 3d. Ghost na tmavém/obrázkovém pozadí (article/aktuality CTA) ---- */
.vhv-art-cta-btn-ghost,
.vhv-aktu-btn-ghost {
  background: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: none !important;
}
.vhv-art-cta-btn-ghost:hover,
.vhv-aktu-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  color: #ffffff !important;
  transform: translateY(var(--p2-btn-lift)) !important;
}
/* .vhv-segment-cta: barvu NEPŘEPISUJI (drží per-segment var(--seg-color)),
   jen geometrie z 3a. */

/* ---- 3e. Přístupnost: focus + active ---- */
.vhv-cta-btn:focus-visible,
.vhv-art-cta-btn:focus-visible,
.vhv-local-btn:focus-visible,
.objednavka-hero-btn:focus-visible,
.objednavka-tariff-btn:focus-visible,
.objednavka-final-btn:focus-visible,
.vhv-aktu-btn:focus-visible,
.vhv-tcard-cta:focus-visible,
.vhv-kombo-cta:focus-visible,
.vhv-price-cta:focus-visible,
.vhv-plan-cta:focus-visible,
.vhv-segment-cta:focus-visible,
.vhv-cov-mini-cta:focus-visible,
.vhv-parallax-cta:focus-visible,
.vhv-cov-modal-cta:focus-visible {
  outline: 3px solid #03274b !important;   /* navy — kontrastní k red i white */
  outline-offset: 2px !important;
}
.vhv-cta-btn:active,
.vhv-art-cta-btn:active,
.vhv-local-btn:active,
.objednavka-hero-btn:active,
.objednavka-tariff-btn:active,
.objednavka-final-btn:active,
.vhv-aktu-btn:active,
.vhv-tcard-cta:active,
.vhv-kombo-cta:active,
.vhv-price-cta:active,
.vhv-plan-cta:active,
.vhv-cov-mini-cta:active,
.vhv-parallax-cta:active {
  transform: translateY(0) !important;
  box-shadow: var(--p2-shadow-btn) !important;
}

/* ---- 3f. Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .vhv-cta-btn,
  .vhv-art-cta-btn,
  .vhv-local-btn,
  .objednavka-hero-btn,
  .objednavka-tariff-btn,
  .objednavka-final-btn,
  .vhv-aktu-btn,
  .vhv-tcard-cta,
  .vhv-kombo-cta,
  .vhv-price-cta,
  .vhv-plan-cta,
  .vhv-segment-cta,
  .vhv-cov-mini-cta,
  .vhv-parallax-cta,
  .vhv-cov-modal-cta {
    transition: none !important;
  }
  .vhv-cta-btn:hover,
  .vhv-art-cta-btn:hover,
  .vhv-local-btn:hover,
  .objednavka-hero-btn:hover,
  .objednavka-tariff-btn:hover,
  .objednavka-final-btn:hover,
  .vhv-aktu-btn:hover,
  .vhv-tcard-cta:hover,
  .vhv-kombo-cta:hover,
  .vhv-price-cta:hover,
  .vhv-plan-cta:hover,
  .vhv-cov-mini-cta:hover,
  .vhv-parallax-cta:hover {
    transform: none !important;
  }
}

/* ---- 3g. Mobile touch target (44px min) ---- */
@media (max-width: 768px) {
  .vhv-cta-btn,
  .vhv-art-cta-btn,
  .vhv-local-btn,
  .objednavka-hero-btn,
  .objednavka-tariff-btn,
  .objednavka-final-btn,
  .vhv-aktu-btn,
  .vhv-tcard-cta,
  .vhv-kombo-cta,
  .vhv-price-cta,
  .vhv-plan-cta {
    min-height: 44px;
  }
}


/* ==========================================================================
   4) CARDS — jeden vizuální standard pro všechny systémy karet
   --------------------------------------------------------------------------
   Jednotný radius (--p2-radius-card 16px) + měkký NAVY stín + hover lift -4px.
   Mimobrandová modrá #176CAE / #067fd3 -> brand #0061a5. Highlight
   "doporučeného" tarifu (.selected / --featured / .featured) a barevné
   top-stripe NEPŘEPISUJI — jen ladím radius/stín. Soubor NAKONEC => !important.
   Reálné třídy v markupu: vhv-pricing-card, vhv-plan-card, objednavka-tariff-card,
   vhv-reason-card, vhv-village-card, vhv-segment-card, vhv-aktu-featured,
   vhv-speed-card-featured, vhv-comp-card-featured. (vhv-price-card / vhv-tcard
   ponechány pro budoucí markup — nematchnou nic.)
   ========================================================================== */

/* ---- 4a. Společný standard: radius + měkký navy stín + hover lift ---- */
.vhv-plan-card,
.vhv-pricing-card,
.vhv-price-card,
.vhv-tcard,
.objednavka-tariff-card,
.vhv-reason-card,
.vhv-village-card {
  border-radius: var(--p2-radius-card) !important;
  box-shadow: var(--p2-shadow-card) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.vhv-plan-card:hover,
.vhv-pricing-card:hover,
.vhv-price-card:hover,
.vhv-tcard:hover,
.objednavka-tariff-card:hover,
.vhv-reason-card:hover,
.vhv-village-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--p2-shadow-card-hover) !important;
}

/* ---- 4b. Segment & featured-aktualita: radius + navy hover (stripe necháváme) */
.vhv-segment-card {
  border-radius: var(--p2-radius-card) !important;
}
.vhv-segment-card:hover {
  box-shadow:
    0 4px 12px rgba(3, 39, 75, .08),
    0 18px 44px rgba(0, 97, 165, .16),
    0 32px 80px rgba(3, 39, 75, .14) !important;
}
.vhv-aktu-featured {
  border-radius: var(--p2-radius-card) !important;
  box-shadow: var(--p2-shadow-card) !important;
}
.vhv-aktu-featured:hover {
  box-shadow: var(--p2-shadow-card-hover) !important;
}

/* ---- 4c. Mimobrandová modrá -> brand #0061a5 (featured tarif + badge) ---- */
.vhv-price-card.featured {
  border-color: #0061a5 !important;
  box-shadow: 0 4px 20px rgba(0, 97, 165, .20) !important;
}
.vhv-price-card.featured:hover {
  box-shadow: var(--p2-shadow-card-hover) !important;
}
.vhv-price-badge {
  background: #0061a5 !important;
}

/* ---- 4d. Featured plan-card: slate stín -> navy/brand ---- */
.vhv-plan-card--featured {
  box-shadow: 0 12px 35px rgba(0, 97, 165, .18) !important;
}

/* ---- 4e. Zachování důrazů (jen sjednotit barvu stínu, ne zrušit highlight) - */
.vhv-tcard--featured {
  border-color: #0061a5 !important;            /* #067fd3 -> brand modrá */
  box-shadow: 0 10px 30px rgba(0, 97, 165, .18) !important;
}
.vhv-tcard--featured:hover {
  box-shadow: 0 16px 40px rgba(0, 97, 165, .22) !important;
}
.objednavka-tariff-card.selected,
.objednavka-tariff-featured {
  box-shadow: 0 20px 50px rgba(218, 37, 29, .20) !important;  /* červený highlight ZŮSTÁVÁ */
}
.objednavka-tariff-card.selected:hover,
.objednavka-tariff-featured:hover {
  box-shadow: 0 24px 56px rgba(218, 37, 29, .24) !important;
}

/* ---- 4f. Featured speed/comp karty ---- */
.vhv-speed-card-featured {
  box-shadow: 0 4px 20px rgba(0, 97, 165, .15) !important;
}
.vhv-comp-card-featured {
  border-color: #0061a5 !important;
}


/* ==========================================================================
   5) RHYTHM + TYPO — klidnější vertikální rytmus a typografie
   --------------------------------------------------------------------------
   Aditivní, konzervativní. Nesahá na vnitřní padding Kadence sloupců/řádků,
   pracuje jen s mezerami MEZI sekcemi a délkou řádku odstavců + sjednocením
   nadpisové rodiny na Ubuntu. Vysoká specificita (html body …) místo plošného
   !important. Stabilní třídy: .entry-content, .kb-row-layout-wrap (bez hashe),
   .kt-inside-inner-col, .kt-has-N-columns, .kt-adv-heading*, .vhv-*.
   ========================================================================== */

/* ---- 5a. Jemné zvětšení mezer mezi hlavními sekcemi (jen sousední dvojice) */
html body .entry-content > .kb-row-layout-wrap + .kb-row-layout-wrap {
  margin-top: var(--p2-section-gap);
}

/* Vlastní VHV sekce s jasnými hranicemi — modulární vertikální padding. */
html body .vhv-segment-cards,
html body .vhv-section,
html body section[class*="vhv-"]:not([class*="card"]):not([class*="row"]):not([class*="item"]) {
  padding-top: var(--p2-section-py);
  padding-bottom: var(--p2-section-py);
}
html body .entry-content > section[class*="vhv-"] + section[class*="vhv-"] {
  margin-top: var(--p2-section-gap);
}

/* ---- 5b. Sjednocení nadpisové rodiny na Ubuntu (jen rodina, ne velikost) - */
html body .entry-content h1,
html body .entry-content h2,
html body .entry-content h3,
html body .entry-content h4,
html body .entry-content h5,
html body .entry-content h6,
html body .kt-adv-heading-wrap .kt-adv-heading-inner,
html body .wp-block-kadence-advancedheading,
html body [class*="vhv-"] h2,
html body [class*="vhv-"] h3,
html body .vhv-section-title {
  font-family: var(--p2-heading-family);
}

/* ---- 5c. Modulární škála pro běžné obsahové nadpisy (ne hero, ne adv-heading) */
html body .entry-content h2:not([class*="vhv-"]):not(.kt-adv-heading) {
  font-size: var(--p2-fs-h2);
  line-height: 1.2;
}
html body .entry-content h3:not([class*="vhv-"]):not(.kt-adv-heading) {
  font-size: var(--p2-fs-h3);
  line-height: 1.3;
}

/* ---- 5d. Omezení délky řádku textu (~68ch) ---- */
html body .entry-content .kt-inside-inner-col > p,
html body .entry-content > p,
html body .entry-content .wp-block-kadence-column > .kt-inside-inner-col > p {
  max-width: var(--p2-measure);
}
html body .entry-content .kt-inside-inner-col[style*="text-align:center"] > p,
html body .entry-content .kt-inside-inner-col.kadence-column-text-align-center > p {
  margin-left: auto;
  margin-right: auto;
}

/* Lead odstavec mírně větší pro hierarchii. */
html body .entry-content p.has-large-font-size,
html body .entry-content .vhv-lead {
  font-size: var(--p2-fs-lead);
  line-height: 1.6;
}

/* Pojistka: v multi-column gridech měřítko VYPNOUT (karty plné). */
html body .entry-content .kt-has-2-columns .kt-inside-inner-col > p,
html body .entry-content .kt-has-3-columns .kt-inside-inner-col > p,
html body .entry-content .kt-has-4-columns .kt-inside-inner-col > p {
  max-width: none;
}


/* ==========================================================================
   6) ICONS — sjednocení provedení (BEZ výměny sady; výměna = Fáze 3)
   --------------------------------------------------------------------------
   - Kadence/FA "feature" ikony: 24px glyf v kruhové brand-light podložce 56px.
   - Vlastní outline ikony (.vhv-feature-icon / .vhv-faq-icon): doladit glyf.
   - Cílí jen STABILNÍ třídy. Žádné kb-row-layout-idXXX.
   @layer => doplňuje enhancements .vhv-feature-icon, nepřebíjí jeho 56px kruh.
   !important jen na font-size (Kadence inline 70px na .kb-svg-icon-wrap).
   ========================================================================== */
@layer vhv-icons {

  /* ---- 6a. Kadence / Font Awesome feature ikony ---- */
  .wp-block-kadence-icon.kt-svg-icons {
    text-align: center;
  }
  .wp-block-kadence-icon .kb-svg-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--p2-icon-pad);
    height: var(--p2-icon-pad);
    margin: 0 auto 0.85rem;
    background: var(--p2-icon-bg);
    border-radius: 50%;
    color: var(--p2-icon-fg);
    line-height: 0;
    font-size: var(--p2-icon-size) !important;  /* přebít Kadence inline 70px */
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
  }
  .wp-block-kadence-icon .kb-svg-icon-wrap > svg {
    width: var(--p2-icon-size);
    height: var(--p2-icon-size);
    fill: currentColor;
    display: block;
  }
  .wp-block-kadence-column:hover .kb-svg-icon-wrap {
    background: var(--p2-icon-fg);
    color: #fff;
    transform: translateY(-2px);
  }

  /* ---- 6b. Vlastní outline ikony (.vhv-feature-icon) ---- */
  .vhv-feature-icon {
    color: var(--p2-icon-fg);
  }
  .vhv-feature-icon svg {
    width: var(--p2-icon-size);
    height: var(--p2-icon-size);
    stroke: currentColor;
    fill: none;
  }
  .vhv-feature-item:hover .vhv-feature-icon {
    background: var(--p2-icon-fg);
    color: #fff;
  }

  /* ---- 6c. Normalizace stroke-width inline outline SVG v obsahu ---- */
  .vhv-feature-icon svg[stroke],
  .vhv-faq-icon svg[stroke],
  .vhv-cov-result svg[stroke] {
    stroke-width: var(--p2-icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ---- 6d. FAQ ikona — jen barva (rotace zůstává z enhancements) ---- */
  .vhv-faq-icon {
    color: var(--p2-icon-fg);
  }
}

/* ---- 6e. Responzivita: na mobilu menší feature podložky ---- */
@media (max-width: 600px) {
  @layer vhv-icons {
    :root { --p2-icon-pad: 48px; --p2-icon-size: 22px; }
  }
}

/* ---- 6f. Reduced motion: vypnout hover transformy ikon ---- */
@media (prefers-reduced-motion: reduce) {
  @layer vhv-icons {
    .wp-block-kadence-icon .kb-svg-icon-wrap,
    .wp-block-kadence-column:hover .kb-svg-icon-wrap {
      transition: none;
      transform: none;
    }
  }
}

/* ==========================================================================
   KONEC phase2-visual.css
   ========================================================================== */
/* ==========================================================================
   PHASE 2 — kontakt.html má vlastní .kontakt-hero (ne Kadence .kt-row-has-bg)
   → sjednotit s navy page-headerem (bez fota/swooshe/vlny).
   ========================================================================== */
.kontakt-hero {
  background-color: #03274b !important;        /* navy fallback; fotka z inline stylu zůstává */
  background-size: cover !important;
  background-position: center center !important;
  border-bottom: 3px solid #da251d !important;
  min-height: 0 !important;
  display: block !important;
  position: relative !important;
  padding-top: clamp(120px, 12vw, 168px) !important;
  padding-bottom: clamp(40px, 5vw, 64px) !important;
}
.kontakt-hero::before {
  display: block !important;
  background: linear-gradient(180deg, rgba(3, 39, 75, 0.82) 0%, rgba(3, 39, 75, 0.60) 60%, rgba(0, 97, 165, 0.55) 100%) !important;
  opacity: 1 !important;
}
.kontakt-hero .hero-bottom-sep { display: none !important; }
.kontakt-hero h1 {
  text-align: left !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5) !important;
  color: #fff !important;
  position: relative !important;
  z-index: 2 !important;
  font-family: var(--global-heading-font-family, "Ubuntu", sans-serif) !important;
  font-size: clamp(28px, 4.4vw, 46px) !important;
  line-height: 1.15 !important;
  max-width: var(--global-content-width, 1390px) !important;
  margin: 0 auto !important;
  padding: 0 var(--global-content-edge-padding, 1.5rem) !important;
}
@media (max-width: 767px) {
  .kontakt-hero { padding-top: clamp(96px, 22vw, 128px) !important; padding-bottom: 32px !important; }
  .kontakt-hero h1 { font-size: clamp(26px, 7.5vw, 34px) !important; }
}

/* ==========================================================================
   PHASE 2 — .objednavka-hero (bespoke banner na televize / objednavka /
   internet-pro-firmy) → sjednotit s navy page-headerem.
   ========================================================================== */
.objednavka-hero {
  background-color: #03274b !important;        /* navy fallback; fotka z inline stylu zůstává */
  background-size: cover !important;
  background-position: center center !important;
  border-bottom: 3px solid #da251d !important;
  min-height: 0 !important;
  display: block !important;
  position: relative !important;
  padding-top: clamp(120px, 12vw, 168px) !important;
  padding-bottom: clamp(40px, 5vw, 64px) !important;
}
.objednavka-hero::before {
  display: block !important;
  background: linear-gradient(180deg, rgba(3, 39, 75, 0.82) 0%, rgba(3, 39, 75, 0.60) 60%, rgba(0, 97, 165, 0.55) 100%) !important;
  opacity: 1 !important;
}
.objednavka-hero .hero-bottom-sep { display: none !important; }
.objednavka-hero h1 {
  text-align: left !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5) !important;
  color: #fff !important;
  position: relative !important;
  z-index: 2 !important;
  font-family: var(--global-heading-font-family, "Ubuntu", sans-serif) !important;
  font-size: clamp(28px, 4.4vw, 46px) !important;
  line-height: 1.15 !important;
  padding: 0 var(--global-content-edge-padding, 1.5rem) !important;
  max-width: var(--global-content-width, 1390px) !important;
  margin: 0 auto !important;
}
@media (max-width: 767px) {
  .objednavka-hero { padding-top: clamp(96px, 22vw, 128px) !important; padding-bottom: 32px !important; }
  .objednavka-hero h1 { font-size: clamp(26px, 7.5vw, 34px) !important; }
}

/* ---- Inline success panel po odeslání formuláře (Fáze 4) ---- */
.vhv-form-success {
  background: linear-gradient(135deg, #eff7fd 0%, #ffffff 100%);
  border: 1px solid #c4daea;
  border-left: 4px solid #0a7c3f;
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  margin: 0.75rem 0;
  color: #03274b;
  font-size: 1.02rem;
  box-shadow: 0 6px 22px rgba(3, 39, 75, .07);
}
.vhv-form-success strong { color: #03274b; }