/* =========================================================
   Pätička — spoločný komponent

   Do 25. 8. 2026 bola pätička skopírovaná v dvanástich súboroch štýlov
   (blog.css, case-study.css a desať súborov v css/pages/). Kópie sa už začali
   rozchádzať, takže tento súbor je odteraz jediný zdroj pravdy.

   Trinásta kópia je v detect-konfigurator/css/configurator.css. Tá tu zostáva:
   konfigurátor má vlastnú pätičku a triedu .footer-watermark používa na
   textovom <div>, nie na obrázku. Zlúčiť sa dá až s vizuálnou kontrolou tých
   dvoch stránok.

   Pravidlá, ktoré tu zámerne NIE SÚ, lebo platia len pre časť stránok, a preto
   zostali v stránkových súboroch:
     - css/blog.css, css/case-study.css, css/pages/home.css
         .footer-watermark { opacity: 0.11 } a jeho mobilná veľkosť
     - css/pages/about.css, css/pages/contact.css
         footer.footer-creative { background-color } a .footer-main s vyšším
         odsadením — obe stránky nemajú v pätičke CTA pruh

   Načítava sa vo všetkých 47 slovenských stránkach hneď za components/header.css.
   Poradie podľa CSS_ARCHITECTURE.md.
   ========================================================= */

.footer-creative { position: relative; overflow: hidden; padding-top: 0 !important; }
.footer-creative::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(180, 141, 255, 0.6) 50%, transparent 100%);
}
.footer-creative::after {
  content: ""; position: absolute; bottom: -40%; left: 50%; transform: translateX(-50%);
  width: 120%; height: 80%;
  background: radial-gradient(ellipse at center, rgba(118, 77, 240, 0.18) 0%, transparent 60%);
  pointer-events: none; z-index: 0;
}
.footer-creative > * { position: relative; z-index: 1; }

.footer-cta-banner { padding: 70px 0 60px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); position: relative; }
.footer-cta-eyebrow {
  display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: #b48dff; margin-bottom: 12px;
}
.footer-cta-title {
  font-size: 2.2rem; line-height: 1.15; margin: 0;
  background: linear-gradient(180deg, #ffffff 0%, #b48dff 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
@media (max-width: 767px) {
  .footer-cta-title { font-size: 1.6rem; }
  .footer-cta-banner { padding: 50px 0 40px; }
}

.footer-main { padding: 60px 0 50px; }
.footer-heading {
  position: relative; font-size: 0.85rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: #b48dff; margin-bottom: 22px; padding-left: 14px;
}
.footer-heading::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 14px; background: linear-gradient(180deg, var(--primary-color), #b48dff); border-radius: 2px;
}

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
/* Odsadenie pri prejdení myšou robíme transformáciou, nie padding-om.
   padding-left na inline prvku mení, kde sa text zalomí, takže "Naše cloudové
   služby" — jediný odkaz v pätičke dosť dlhý na zalomenie — pri hoveri
   preskočil z jedného riadka na tri. Transformácia do rozloženia nevstupuje,
   takže sa nemá čo prelomiť. Pomlčka musí mať left: -20px: pri transformácii sa
   posúva spolu s boxom a pri left: 0 by skončila pod textom. */
.footer-links a {
  position: relative; display: inline-block;
  color: rgba(255, 255, 255, 0.72); text-decoration: none;
  font-size: 0.95rem; transition: color .3s ease, transform .3s ease;
}
.footer-links a::before {
  content: ""; position: absolute; left: -20px; top: 50%; transform: translateY(-50%);
  width: 0; height: 1px; background: #b48dff; transition: width .3s ease;
}
.footer-links a:hover { color: #ffffff; transform: translateX(20px); }
.footer-links a:hover::before { width: 14px; }

.footer-contact-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(180, 141, 255, 0.18);
  border-radius: 14px; padding: 22px 22px; backdrop-filter: blur(8px);
  max-width: 380px; /* karta obopne obsah – adresa ostane na jednom riadku */
}
.footer-contact-item { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; }
.footer-contact-item + .footer-contact-item { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.footer-contact-item .footer-contact-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(118, 77, 240, 0.25), rgba(180, 141, 255, 0.15));
  display: flex; align-items: center; justify-content: center;
  color: #b48dff; font-size: 1rem;
}
.footer-contact-item .footer-contact-text { font-size: 0.92rem; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }
.footer-contact-item .footer-contact-text a { color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color .25s ease; }
.footer-contact-item .footer-contact-text a:hover { color: #b48dff; }
.footer-contact-item .footer-contact-label {
  display: block; font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: rgba(180, 141, 255, 0.82); margin-bottom: 2px;
}

/* Tlačidlo v pätičke (CTA pruh) — musí ostať biele. Téma nastavuje farbu
   odkazov v pätičke cez `.dark-scheme footer a` (css/style.css:1370). To je
   špecificita 0-1-2 a prebíja `a.btn-main` (0-1-1, css/style.css:3155), takže
   tlačidlo prevzalo farbu bežného odkazu aj s jej priehľadnosťou:
   rgba(255,255,255,0.75) na #764DF0 je 3,60:1. Nižšie je 0-2-2, čo vyhráva.
   Popis pri prejdení myšou je v ::before (content: attr(data-hover)) a farbu
   dedí z odkazu, rovnako ako <span> s pokojným popisom.
   Patrí to sem, nie do css/style.css: legacy tému načítavajú aj en/ a de/. */
.dark-scheme footer a.btn-main { color: #ffffff; }

.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid transparent; box-shadow: inset 0 0 0 1px rgba(180, 141, 255, 0.35);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; transition: all .3s ease;
}
.footer-social a:hover {
  background: linear-gradient(135deg, var(--primary-color), #b48dff);
  border-color: transparent; color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(118, 77, 240, 0.4);
}

/* Obrázkový vodoznak. Selektor musí byť img.footer-watermark: konfigurátor
   používa tú istú triedu na textovom <div> s vlastným štýlom v
   detect-konfigurator/css/configurator.css, a neselektívne pravidlo by mu
   prepísalo šírku aj sýtosť. */
img.footer-watermark {
  position: absolute; bottom: -9.5vw; left: 50%; transform: translateX(-50%);
  width: 82vw; max-width: 1500px; height: auto;
  opacity: 0.06; pointer-events: none; user-select: none; z-index: 0;
}

.footer-creative .subfooter {
  border-top: none;
  padding: 22px 0; position: relative; z-index: 2;
}
.footer-creative .subfooter a { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color .25s ease; }
.footer-creative .subfooter a:hover { color: #b48dff; }