/* ============================================================
   Why-us section — vizuální unifikace s contacts footerem.
   Soubor přepisuje `.why-us` z minifikovaného main.css, aby obě
   tmavé sekce sdílely stejnou design-token rodinu, ale zachovaly
   vertikální hierarchii:

      hero      ─ nejhlubší black
      ────────
      content   ─ bílá (clarity)
      ────────
      why-us    ─ medium dark surface   ← tato sekce
      ──── subtle step separator ───
      contacts  ─ deepest dark floor

   Varianta `.why-us--light` (např. orbitalni-svarovani.php) zůstává
   nedotčená — má vlastní světlé pozadí a nemá cíl se sjednocovat
   s contacts footerem.
   ============================================================ */

/* ---------- Shared design tokens ---------- */
.why-us {
  --section-dark-bg:              #171a1f;
  --section-surface:              rgba(255, 255, 255, 0.05);
  --section-surface-strong:       rgba(255, 255, 255, 0.015);
  --section-surface-hover:        rgba(255, 255, 255, 0.075);
  --section-surface-hover-accent: rgba(32, 156, 148, 0.045);
  --section-border:               rgba(255, 255, 255, 0.085);
  --section-border-hover:         rgba(32, 156, 148, 0.5);
  --section-accent:               var(--color-green-3, #209c94);
  --section-accent-strong:        var(--color-green-6, #177f78);

  /* 1px inner-highlight line nad kartou — působí jako „ořezaná ze
     slitku" místo „nalepená", drobný premium detail. */
  --section-card-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.045);

  /* Premium easing — plynulejší než default `ease`, zachytí tempo
     ostatních micro-interakcí. */
  --section-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Pozadí sekce ---------- */
.why-us:not(.why-us--light) {
  background: var(--section-dark-bg);
}

/* Radial glow — subtilnější, s novou paletou nemá přetlačit title. */
.why-us:not(.why-us--light)::before {
  background: radial-gradient(circle,
    rgba(32, 156, 148, 0.2) 0%,
    transparent 62%);
}

/* ---------- Section title — accent-bar z main.css, tokenová zeleň. ---------- */
.why-us:not(.why-us--light) .why-us--title::after {
  background: var(--section-accent);
}

/* ---------- Karty (why-us--item) ---------- */
.why-us:not(.why-us--light) .why-us--item {
  background: linear-gradient(155deg,
    var(--section-surface) 0%,
    var(--section-surface-strong) 100%);
  border: 1px solid var(--section-border);
  box-shadow: var(--section-card-highlight);
  transition: transform 0.4s var(--section-ease),
              border-color 0.4s var(--section-ease),
              background 0.4s var(--section-ease),
              box-shadow 0.4s var(--section-ease);
}

.why-us:not(.why-us--light) .why-us--item:hover {
  transform: translateY(-3px);
  background: linear-gradient(155deg,
    var(--section-surface-hover) 0%,
    var(--section-surface-hover-accent) 100%);
  border-color: var(--section-border-hover);
  box-shadow: var(--section-card-highlight),
              0 18px 36px -22px rgba(0, 0, 0, 0.55);
}

/* Zelený top-bar na kartě — jednotný s contacts cards. */
.why-us:not(.why-us--light) .why-us--item::before {
  background: linear-gradient(90deg,
    var(--section-accent) 0%,
    var(--section-accent-strong) 100%);
}

/* Číslovaný counter – harmonizovat barvou s tokenovou zelení. */
.why-us:not(.why-us--light) .why-us--item::after {
  color: var(--section-accent);
  -webkit-text-stroke: 0.6px var(--section-accent);
}