/* =============================================================
   CE ENGINEERING — VARIANTA VZHLEDU „MĚKKÁ“ (zkrácené C)
   -------------------------------------------------------------
   Načítá se AŽ ZA shared.css a přepisuje pouze to, co se má lišit.
   Struktura, rozvržení i obsah zůstávají beze změny.
   Vypnutí varianty = odstranění jednoho řádku <link> v hlavičce.
   ============================================================= */

:root {
  /* ── Plochy: výrazné zaoblení, tlačítka do oblouku ── */
  --r:       18px;
  --r-sm:    999px;

  /* ── Podklady: teplá řada. Plátno je nejtmavší, karty nejsvětlejší,
        takže bílá navigace i bílé karty vystoupí samy od sebe. ── */
  /* Teal o odstín tmavší než v industriální variantě — na teplých
     podkladech potřebuje rezervu ke kontrastní normě. */
  --teal:    #156A80;

  --canvas:  #FAF8F5;        /* pozadí stránky — jediné číslo k ladění tónu */
  --off:     #F5F1EA;        /* panely sekcí */
  --bg:      #F7F4EE;
  --border:  #CFC5B2;        /* ztmaveno — na teplých plochách byla linka neviditelná */

  /* ── Text: měkčí modrozelená místo tmavé námořnické ── */
  --ink:     #1F4A5C;
  --muted:   #5A6670;

  /* ── Stíny varianty ── */
  --sh-card: 0 3px 8px rgba(61,50,36,0.05), 0 14px 32px rgba(61,50,36,0.08);
  --sh-hov:  0 6px 14px rgba(61,50,36,0.08), 0 20px 44px rgba(61,50,36,0.12);
}

/* Pozadí stránky */
body { background: var(--canvas); }

/* Navigace: modrý podkres, aby se odlišila od béžového plátna.
   #EAF0F8 je nejsilnější odstín, při kterém motto (teal 16 px)
   ještě drží kontrast 4,63 : 1 nad normou 4,5. */
.nav { background: rgba(234, 240, 248, 0.95); }

/* Logo je skládané — kolo nahoře, nápis pod ním. Menu vystředěné na celý
   obrázek proto sedí nad nápisem. Posuneme ho dolů na jeho úroveň. */
.nav-motto,
.nav-links { transform: translateY(var(--nav-shift, 18px)); }

body { font-size: 17px; }

/* Easter egg — tři kliknutí na motto roztočí znak.
   Kurzor ukazuje, že jde o klikatelný prvek. */
.nav-motto { cursor: pointer; }
.nav-logo img { transition: transform 0.3s ease; }
.nav-logo.logo-spin img { animation: cee-spin 2.4s cubic-bezier(.34,.06,.2,1); }
@keyframes cee-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(720deg); }
}

/* ═══ 1. KONEC VERZÁLEK ═══
   Verzálky byly nejsilnějším industriálním signálem. Zůstávají jen
   Zůstávají jen tam, kde plní roli drobného popisku. */
.nav-links a,
.footer-social-label,
.footer-nav-label,
.footer-group-label,
.office-label,
.person-role,
.invoice-label {
  text-transform: none;
  letter-spacing: 0.01em;
}
.nav-links a { font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; }

/* ═══ 2. NADPISY — lehčí a vzdušnější ═══ */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
h1 { line-height: 1.15; }

/* ═══ 3. VÍC VZDUCHU ═══ */
.section { padding: 6.5rem 0; }
.grid    { gap: 2rem; }

/* ═══ 4. KARTY — měkký stín místo rámečku ═══ */
.service-card,
.role-card,
.spec-card,
.career-card,
.position-card,
.office-card,
.cei-benefit,
.cert-card {
  border: none;
  box-shadow: var(--sh-card);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.service-card:hover,
.role-card:hover,
.career-card:hover,
.position-card:hover,
.office-card:hover,
.cert-card:hover {
  box-shadow: var(--sh-hov);
  transform: translateY(-3px);
}

/* Prostornější vnitřek */
.service-card  { padding: 2.75rem 2.25rem 2.25rem; }
.role-card,
.career-card,
.position-card,
.office-card   { padding: 2.25rem; }
.cei-benefit   { padding: 1.75rem; }

/* ═══ 5. TLAČÍTKA — plná a oblá ═══ */
.btn { padding: 0.9rem 1.9rem; font-weight: 600; letter-spacing: 0.01em; }
.btn-primary {
  background: var(--teal);
  color: var(--white);
  box-shadow: 0 3px 10px rgba(21,106,128,0.22);
}
.btn-primary:hover { background: #0F5567; box-shadow: 0 5px 16px rgba(21,106,128,0.30); }

/* Obrysové tlačítko → jemná výplň bez rámečku */
.btn-outline {
  background: #F2EEE7;
  color: var(--teal);
  border: none;
}
.btn-outline:hover { background: #EBE5DB; color: #0F5567; }

.btn-outline-light { border-color: rgba(255,255,255,0.55); }

/* Textový odkaz se šipkou zůstává bez výplně */
.btn-ghost { background: none; box-shadow: none; padding-left: 0; padding-right: 0; }
.btn-ghost:hover { background: none; }

/* ═══ 6. IKONY V BAREVNÉ PLOŠCE ═══
   Klíčový znak varianty. Použije se všude, kde ikona existuje. */
.team-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: #F1ECE4;
  display: flex; align-items: center; justify-content: center;
  padding: 13px;
  margin: 0 auto 1.35rem;
}
.cei-benefit-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: #F1ECE4;
  display: flex; align-items: center; justify-content: center;
  padding: 9px;
}

/* ═══ 7. DROBNOSTI ═══ */
.category-tag {
  border: none;
  background: #F2EEE7;
  color: var(--teal);
  font-weight: 600;
  box-shadow: none;
}
.back-to-top { box-shadow: 0 4px 16px rgba(21,106,128,0.28); }

/* Navigace: zaoblení se na pruh přes celou šířku nehodí */
.nav { border-radius: 0; }

/* Oddělovací linky mezi položkami zjemnit */
.pillar, .value-item, .service-item { border-top-color: var(--border); }

/* ═══ 9. PLOVOUCÍ PANELY ═══
   Barevné plochy přestávají být pruhy přes celou šířku a stávají se
   zaoblenými deskami na bílém podkladu. Bílé sekce žádnou desku nemají —
   splynou s pozadím a oddělí je mezera.
   Vnitřní .container zůstává beze změny, HTML se nemění. */

:root {
  --panel-r:   28px;   /* zaoblení desek — větší než u karet (18 px) */
  --panel-gap: 1.5rem; /* odsazení od okraje okna i mezi deskami */
}

.hero,
.section-alt,
.section-dark,
.cta-band {
  margin-left: var(--panel-gap);
  margin-right: var(--panel-gap);
  border-radius: var(--panel-r);
  /* fotky uvnitř se ořežou do rohů — .hero i .section-with-bg
     mají overflow: hidden už v shared.css */
}

/* Hero: zaoblený i nahoře, tedy odsazený i od navigace */
.hero { margin-top: var(--panel-gap); }

/* Mezery mezi sousedními deskami */
.section-alt,
.section-dark,
.cta-band { margin-top: var(--panel-gap); margin-bottom: var(--panel-gap); }

/* Bílé sekce nemají desku → dělicí vlásovou linku už nepotřebují,
   oddělení obstará bílá mezera mezi panely */
.has-divider { border-top: none; }

/* Technická mřížka se v měkké variantě ruší — výkresový rastr si odporuje
   se zaoblením, měkkými stíny a teplou paletou. Navíc leží pod textem
   a i při slabém krytí zhoršuje čtení delších odstavců.
   V industriální variantě zůstává v plné síle. */
.section-alt { background-image: none; }

/* Patička zůstává přes celou šířku — je to pata stránky, ne obsah */
footer { border-radius: 0; margin: 0; }

/* ═══ 10. TMAVÉ PODKLADY ═══
   Přepisy výše počítají se světlým podkladem. V hero, tmavé sekci
   a výzvovém pruhu by světlá výplň potkala bílý text ze shared.css
   a text by zmizel. Zde se to uvádí na pravou míru. */

/* Obrysové tlačítko na tmavém → průsvitná bílá výplň, bílý text */
.hero-actions .btn-outline,
.section-dark .btn-outline,
.cta-band .btn-outline {
  background: rgba(255,255,255,0.12);
  color: var(--white);
  border: none;
}
.hero-actions .btn-outline:hover,
.section-dark .btn-outline:hover,
.cta-band .btn-outline:hover {
  background: var(--white);
  color: var(--ink);
}

/* Světlé obrysové tlačítko (výzvový pruh) → stejný jazyk */
.btn-outline-light {
  background: rgba(255,255,255,0.12);
  border: none;
  color: var(--white);
}
.btn-outline-light:hover { background: var(--white); color: var(--ink); }

/* Ikony výhod skupiny: na tmavém tmavá ploška + světlá ikona */
.section-dark .cei-benefit-icon {
  background: rgba(255,255,255,0.10);
  color: var(--teal-lt);
}

/* Karty na tmavém nemají stín (na tmavé ploše není vidět) — vrátit obrys */
.section-dark .cei-benefit {
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
}
.section-dark .cei-benefit:hover {
  border-color: var(--teal-lt);
  box-shadow: none;
  transform: none;
}

/* ═══ 11. MOBIL ═══ */
@media (max-width: 768px) {
  /* obnovit velikost písma v rozbalené nabídce (jinak by ji přebil přepis výše) */
  .nav-links a { font-size: 14px; }

  /* Posun menu na úroveň nápisu v logu platí jen na velkých obrazovkách —
     na telefonu je .nav-links rozbalovací panel a posun by ho utrhl od navigace. */
  .nav-links { transform: none; }
  .nav-motto { transform: none; }

  /* Na telefonu jsou boční okraje luxus — desky jdou od kraje ke kraji.
     Zaoblení se zmenší, aby na úzké ploše nepůsobilo bublinatě. */
  :root { --panel-gap: 0rem; --panel-r: 0px; }
  .hero { margin-top: 0; }
  .section-alt,
  .section-dark,
  .cta-band { margin-top: 0; margin-bottom: 0; }

  .section { padding: 3.5rem 0; }
  .grid { gap: 1.25rem; }
  .service-card { padding: 2rem 1.5rem 1.75rem; }
  .role-card,
  .career-card,
  .position-card,
  .office-card { padding: 1.75rem; }
}