/* Theme B — Soft mesh ambient.
   Bile pozadi + jemne radialni "mlhy" v brand barvach fixovane k viewportu.
   Sekce transparentni. Karty bez ramecku, soft shadow. Vytvari hloubku bez tezkych pasu. */

:root {
  --card-shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.06);
  --card-radius: 18px;
}

/* Body bily, ambient mlhy v ::before fixed na viewportu */
html body {
  background: #ffffff !important;
  position: relative;
}
body .content-bg,
body.content-style-unboxed .site { background: transparent !important; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 700px at 12% 5%,  rgba(0,97,165,.10),   transparent 65%),
    radial-gradient(800px 600px at 88% 30%, rgba(218,37,29,.045), transparent 65%),
    radial-gradient(1100px 900px at 30% 65%, rgba(0,97,165,.07),  transparent 65%),
    radial-gradient(900px 750px at 80% 95%, rgba(3,39,75,.07),    transparent 65%);
}

/* Aby obsah byl nad ambient mlhou */
body > * { position: relative; z-index: 1; }

/* Sekce vsechny transparent (sjednoceno) — pouzivame background-color aby NESHODILY
   background-image jako napr. rodina na 5_03ccd0-2f */
section.vhv-coverage,
section.vhv-process,
section.vhv-compare,
section.vhv-testimonials,
section.vhv-outage-cta,
section.vhv-facts,
section.vhv-faq,
.kb-row-layout-id5_801688-57,
.kb-row-layout-id5_5c3d6e-4f {
  background-color: transparent !important;
  background-image: none !important;
}

/* Row "Proč si nás vybrat?" 5_03ccd0-2f — PONECHAT modry gradient + rodinu (overlay 0.15 opacity)
   Jen ji posilime aby pri scrollu krasne dejchala */
.kb-row-layout-id5_03ccd0-2f {
  /* gradient + bg image overlay zustavaji, ne pretizit */
}
.kb-row-layout-id5_03ccd0-2f > .kt-row-layout-overlay {
  opacity: 0.22 !important;          /* zvyseno z 0.15 -> rodina vic vidno */
}

/* Coverage dekorativni kolo schovat (rusi clean ambient) */
section.vhv-coverage::before { display: none !important; }

/* Testimonials vertikalni gradient schovat */
section.vhv-testimonials,
section.vhv-testimonials > div { background-image: none !important; }

/* "Naše srdce bije" - overlay schovat aby prostupovala ambient */
.kb-row-layout-id5_801688-57 .kt-row-layout-overlay { display: none !important; }

/* --- Karty: bez borderu, mekky stin, slight backdrop blur pro "glass" pocit --- */
.vhv-process-inner,
.vhv-compare-inner,
.vhv-facts-inner,
.vhv-testimonial,
.vhv-outage-inner,
.vhv-faq-inner,
.vhv-coverage-inner,
.vhv-kontakt-inner,
.vhv-onas-card,
.vhv-cov-form,
.vhv-cov-result {
  border: none !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Why-us mini-karty */
.kb-row-layout-id5_801688-57 .wp-block-kadence-column,
.kb-row-layout-id5_801688-57 .kadence-column {
  background: transparent !important;
}
.kb-row-layout-id5_801688-57 .kt-inside-inner-col {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  padding: 1.5rem !important;
}

/* "Pripojeni / Internetova TV" hero-karty (row id5_d41f88-41) — VYRAZNE, brand pop bez tlusteho ramu.
   Vysoky soft shadow + brand red accent nahore + jemny vnitrni gradient + hover lift. */
.kb-row-layout-id5_d41f88-41 a.kt-blocks-info-box-link-wrap {
  border: none !important;
  border-top: 4px solid #da251d !important;       /* brand red accent stripe */
  border-radius: 20px !important;
  box-shadow:
    0 1px 3px rgba(15,23,42,.06),
    0 10px 30px rgba(0,97,165,.12),
    0 24px 60px rgba(3,39,75,.10) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f5fafd 100%) !important;
  padding: 2.4rem 1.6rem 2rem !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.kb-row-layout-id5_d41f88-41 a.kt-blocks-info-box-link-wrap:hover {
  transform: translateY(-6px) !important;
  border-top-color: #03274b !important;
  box-shadow:
    0 4px 8px rgba(15,23,42,.08),
    0 16px 40px rgba(0,97,165,.18),
    0 32px 80px rgba(3,39,75,.16) !important;
}
.kb-row-layout-id5_d41f88-41 .wp-block-kadence-infobox {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Posilit ikony v hero-kartach (vetsi, vic prostoru) */
.kb-row-layout-id5_d41f88-41 .kt-info-svg-icon svg,
.kb-row-layout-id5_d41f88-41 .kt-info-svg-icon-flip svg {
  width: 70px !important;
  height: 70px !important;
}

/* B2B teaser ponechan tmavy, ale o tonu svetlejsi a s mekkym shadowem */
.vhv-b2b-teaser {
  background: linear-gradient(135deg, #0a4a8a 0%, #1e6cb8 100%) !important;
  box-shadow: 0 20px 60px rgba(3,39,75,.18) !important;
}

@media (max-width: 600px) {
  .vhv-process-inner,
  .vhv-compare-inner,
  .vhv-facts-inner,
  .vhv-outage-inner,
  .vhv-faq-inner,
  .vhv-coverage-inner {
    border-radius: 14px !important;
  }
}

/* ===========================================================================
   .vhv-segments — 3 use-case karty: Rodina/Chata/Byty • Televize • Firmy
   Nahrazuje stare 2 karty "Pripojeni / Internetova TV". Foto + nadpis +
   tagline + 3 benefity + CTA. Top accent stripe v brand barvach per segment.
   =========================================================================== */
.vhv-segments {
  padding: 4.5rem 1.5rem 5rem;
  background: transparent;
}
.vhv-segments-inner {
  max-width: 1390px;
  margin: 0 auto;
}
.vhv-segments-head {
  text-align: center;
  margin-bottom: 3rem;
}
.vhv-segments-head h2 {
  font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem);
  color: #03274b;
  margin: 0 0 .75rem;
  font-weight: 700;
  line-height: 1.2;
}
.vhv-segments-head p {
  color: #4a5568;
  font-size: 1.05rem;
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.55;
}
.vhv-segments-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}
@media (max-width: 960px) {
  .vhv-segments-grid { grid-template-columns: 1fr; gap: 1.25rem; max-width: 480px; margin: 0 auto; }
  .vhv-segments { padding: 3rem 1.25rem 3.5rem; }
}

/* Per-segment barevne tema. Vsechny tri sdileji ramec, ale liší se akcentem,
   gradientem v karte, barvou eyebrow + checks + CTA. */
.vhv-segment-card {
  --seg-color: #0061a5;
  --seg-color-strong: #03274b;
  --seg-tint: #f0f7fc;
  --seg-stripe: linear-gradient(90deg, #0061a5, #2089d3);

  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff 0%, var(--seg-tint) 100%);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit;
  box-shadow:
    0 1px 3px rgba(15,23,42,.06),
    0 12px 32px rgba(0,97,165,.10),
    0 28px 64px rgba(3,39,75,.10);
  transition: transform .35s cubic-bezier(.2,.9,.3,1.1), box-shadow .35s ease;
  position: relative;
  isolation: isolate;
}
.vhv-segment-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--seg-stripe);
  z-index: 3;
}

/* RODINA = brand red theme */
.vhv-segment--rodina {
  --seg-color: #da251d;
  --seg-color-strong: #b70f07;
  --seg-tint: #fff5f4;
  --seg-stripe: linear-gradient(90deg, #da251d, #ed5151);
}
/* TV = brand blue theme */
.vhv-segment--tv {
  --seg-color: #0061a5;
  --seg-color-strong: #03274b;
  --seg-tint: #eff7fd;
  --seg-stripe: linear-gradient(90deg, #0061a5, #2089d3);
}
/* FIRMY = navy + steel theme */
.vhv-segment--firmy {
  --seg-color: #03274b;
  --seg-color-strong: #051a30;
  --seg-tint: #f1f4f8;
  --seg-stripe: linear-gradient(90deg, #03274b, #0a4a8a);
}

.vhv-segment-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 4px 12px rgba(15,23,42,.08),
    0 20px 48px rgba(0,97,165,.18),
    0 36px 90px rgba(3,39,75,.16);
}
.vhv-segment-card:focus-visible {
  outline: 3px solid var(--seg-color);
  outline-offset: 4px;
}

.vhv-segment-img {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #eef2f7;
  position: relative;
}
.vhv-segment-img::after {
  /* jemny barevny tint na fotku v segment barve aby ladila s kartou */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, var(--seg-tint) 100%);
  opacity: .55;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.vhv-segment-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.vhv-segment-card:hover .vhv-segment-img img {
  transform: scale(1.06);
}

.vhv-segment-body {
  padding: 1.7rem 1.6rem 1.65rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Eyebrow label — barevny segment marker nad nadpisem */
.vhv-segment-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--seg-color);
  margin-bottom: .6rem;
  padding: .35rem .65rem .35rem .65rem;
  background: color-mix(in srgb, var(--seg-color) 10%, transparent);
  border-radius: 50px;
  align-self: flex-start;
}
.vhv-segment-eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--seg-color);
}

.vhv-segment-body h3 {
  font-size: 1.4rem;
  color: var(--seg-color-strong);
  margin: 0 0 .55rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.vhv-segment-tagline {
  color: #4a5568;
  margin: 0 0 1.1rem;
  font-size: .98rem;
  line-height: 1.55;
}

.vhv-segment-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.vhv-segment-benefits li {
  padding-left: 1.7rem;
  position: relative;
  color: #2d3748;
  font-size: .94rem;
  line-height: 1.5;
}
.vhv-segment-benefits li::before {
  content: "";
  position: absolute;
  left: 0; top: .15rem;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--seg-color) 15%, transparent);
}
.vhv-segment-benefits li::after {
  content: "✓";
  position: absolute;
  left: .25rem; top: .07rem;
  color: var(--seg-color);
  font-weight: 800;
  font-size: .85rem;
  line-height: 1.3;
}

/* CTA — vyrazne tlacitko v segment barve */
.vhv-segment-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: #fff;
  background: var(--seg-color);
  font-weight: 700;
  font-size: 1rem;
  padding: .75rem 1.2rem;
  border-radius: 50px;
  transition: background .25s, transform .25s, box-shadow .25s;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--seg-color) 30%, transparent);
}
.vhv-segment-card:hover .vhv-segment-cta {
  background: var(--seg-color-strong);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--seg-color) 40%, transparent);
}
.vhv-segment-cta svg { transition: transform .25s ease; }
.vhv-segment-card:hover .vhv-segment-cta svg { transform: translateX(4px); }

/* (preview badge odstranen — produkcni rezim) */