/* ═══════════════════════════════════════════════
   SENSET Animácia — style.css  v1.5.0
   Transparentné pozadie · Ostré hrany · Senset brand
═══════════════════════════════════════════════ */

.sa-wrap {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 36px 20px 44px;
  position: relative;
  font-family: inherit;
  box-sizing: border-box;
}

/* Label nad vodičmi */
.sa-lbl {
  text-align: center;
  margin-bottom: 14px;
}

/* ─── Rady kariet — DESKTOP ─── */
.sa-sources, .sa-drivers { display: flex; gap: 14px; }

.sa-src, .sa-drv {
  flex: 1;
  background: rgba(255,255,255,.88);
  border: 1.5px solid rgba(40,35,90,.1);
  border-radius: 0;
  /* Desktop: ikona vľavo, text vpravo */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 16px 14px;
  text-align: left;
  box-shadow: 0 2px 14px rgba(40,35,90,.07);
  position: relative;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s, transform .3s;
  cursor: default;
  box-sizing: border-box;
}

.sa-src::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #FCAF17, #F68820);
  opacity: 0; transition: opacity .3s;
}
.sa-src:hover::before { opacity: 1; }

.sa-drv::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #28235A, #F68820);
  opacity: 0; transition: opacity .3s;
}
.sa-drv:hover::after { opacity: 1; }

.sa-src:hover, .sa-drv:hover {
  border-color: rgba(246,136,32,.35);
  box-shadow: 0 6px 24px rgba(246,136,32,.12);
  transform: translateY(-3px);
}

/* Ikona — desktop */
.sa-icon {
  width: 90px;
  min-width: 90px;
  height: 80px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sa-icon svg { width: 88px; height: 78px; overflow: visible; }

/* Float animácie */
@keyframes sa-fl1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes sa-fl2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes sa-fl3 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.sa-src:nth-child(1) .sa-icon { animation: sa-fl1 3.6s ease-in-out infinite; }
.sa-src:nth-child(2) .sa-icon { animation: sa-fl2 4.2s ease-in-out infinite .55s; }
.sa-src:nth-child(3) .sa-icon { animation: sa-fl3 3.9s ease-in-out infinite 1.1s; }
.sa-drv:nth-child(1) .sa-icon { animation: sa-fl3 4.1s ease-in-out infinite .3s; }
.sa-drv:nth-child(2) .sa-icon { animation: sa-fl1 3.7s ease-in-out infinite .85s; }
.sa-drv:nth-child(3) .sa-icon { animation: sa-fl2 4.0s ease-in-out infinite .55s; }

/* Text vedľa ikony — desktop */
.sa-text-wrap {
  flex: 1;
  padding-left: 12px;
}

/* Nadpisy kariet — 20px desktop */
.sa-src .elementor-heading-title,
.sa-drv .elementor-heading-title {
  font-size: 20px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* ─── Hub (stredný prvok — nemenené) ─── */
.sa-mid {
  height: 196px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}

.sa-hub {
  background: #28235A;
  border-radius: 0;
  padding: 22px 52px;
  text-align: center;
  position: relative;
  z-index: 3;
  overflow: hidden;
  animation: sa-hub-glow 3s ease-in-out infinite;
}
@keyframes sa-hub-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(246,136,32,0), 0 8px 32px rgba(40,35,90,.35); }
  50%      { box-shadow: 0 0 0 8px rgba(246,136,32,.1), 0 8px 48px rgba(40,35,90,.55); }
}

.sa-roh {
  position: absolute; width: 24px; height: 24px;
  display: block; line-height: 0; font-size: 0;
}
.sa-roh svg { width: 24px; height: 24px; display: block; }
.sa-roh--tl { top: 0;    left: 0; }
.sa-roh--tr { top: 0;    right: 0;  transform: scaleX(-1); }
.sa-roh--bl { bottom: 0; left: 0;   transform: scaleY(-1); }
.sa-roh--br { bottom: 0; right: 0;  transform: rotate(180deg); }

.sa-hub-logo {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.sa-logo-svg { width: 100%; max-width: 200px; height: auto; display: block; }

.sa-hub-sub {
  font: 400 10px/1 'Be Vietnam Pro', sans-serif;
  color: rgba(255,255,255,.5);
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

/* SVG šípky */
#sa-svg {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}

.sa-content { position: relative; z-index: 2; }

/* ═══════════════════════════════════════════════
   MOBILNÁ VERZIA  (≤ 640px)

   • 3 karty vedľa seba hore (flex row, zostatok)
   • Hub v strede na plnú šírku
   • 3 karty s autami vedľa seba dole
   • V každej karte: ikona hore, text pod ňou (column)
   • Minimálne medzery
   • Nadpisy 16px
═══════════════════════════════════════════════ */
@media (max-width: 640px) {

  .sa-wrap { padding: 16px 8px 24px; }

  /* Rady: 3 vedľa seba, minimálna medzera */
  .sa-sources, .sa-drivers {
    flex-direction: row;
    gap: 6px;
  }

  /* Každá karta: ikona hore, text pod ňou */
  .sa-src, .sa-drv {
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 6px;
    min-width: 0; /* dôležité — zabrání pretečeniu v riadku */
  }

  /* Ikona na mobile — menšia */
  .sa-icon {
    width: 100%;
    min-width: unset;
    height: 56px;
  }
  .sa-icon svg { width: 60px; height: 54px; }

  /* Text pod ikonou — bez ľavého paddingu */
  .sa-text-wrap {
    padding-left: 0;
    padding-top: 6px;
    width: 100%;
  }

  /* Nadpisy 16px mobile */
  .sa-src .elementor-heading-title,
  .sa-drv .elementor-heading-title {
    font-size: 16px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    word-break: break-word;
  }

  /* Label nad vodičmi */
  .sa-lbl {
    font-size: 16px !important;
    margin-bottom: 8px;
  }

  /* Hub */
  .sa-mid { height: auto; padding: 18px 0; }
  .sa-hub {
    padding: 16px 20px;
    width: 100%;
    box-sizing: border-box;
  }
  .sa-logo-svg { max-width: 140px; }

  /* Šípky zostávajú (arrows.js ich kreslí po bokoch) */
  #sa-svg { display: block; }
}