/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ─────────────────────────────────────────────────────────────
   Studio Inbound — child theme overrides
   Pravidlo: čo sa dá v Elementore cez UI, je v JSON-e.
   Sem ide LEN to, čo Elementor neumie (kompozitné gradienty,
   pseudo-elementy, hacky pre flex sizing tiny boxov atď.).
   ───────────────────────────────────────────────────────────── */


/* ── 01 HERO ─────────────────────────────────────────────── */

/* BG grid pattern — dvojitý linear-gradient (Elementor podporuje len 1 gradient) */
.si-hero__bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  opacity: 0.06;
  inset: 0;
}

/* Photo mask — dvojitý linear-gradient (right + top fade do navy) */
.si-hero__photo-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,
      var(--e-global-color-primary, #1A2A3A) 0%,
      rgba(26,42,58,0.55) 35%,
      transparent 62%),
    linear-gradient(to top,
      var(--e-global-color-primary, #1A2A3A) 0%,
      transparent 20%);
}

/* Eyebrow dot — flex-fix aby sa kruh nezdeformoval v row containeri */
.si-hero__eyebrow-dot {
  flex: 0 0 8px;
}

/* Primary button hover — statický lift -2px (Elementor float robí oscillating animation) */
.si-hero__btn--primary .elementor-button {
  transition: all 0.22s ease;
}
.si-hero__btn--primary .elementor-button:hover {
  transform: translateY(-2px);
}


/* ── HEADER (header-main) ────────────────────────────────── */

/* Backdrop blur — Elementor nemá UI control pre backdrop-filter */
.si-header {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* Hover lift na CTA buttone (Elementor float = oscillating, nie static) */
.si-header__cta .elementor-button {
  transition: all 0.2s ease;
}
.si-header__cta .elementor-button:hover {
  transform: translateY(-1px);
}

/* Smooth color transition pre nav linky a EN switcher */
.si-header__nav-link .elementor-button,
.si-header__lang .elementor-button {
  transition: all 0.2s ease;
}


/* ── FOOTER (footer-main) ────────────────────────────────── */

/* Smooth color transitions pre footer linky */
.si-footer__nav-link .elementor-button,
.si-footer__cta .elementor-button {
  transition: all 0.2s ease;
}

/* Social icons hover — pink border + pink icon (Elementor Social Icons widget
   nemá per-state border-color control pre custom shapes) */
.si-footer__socials .elementor-social-icon {
  transition: all 0.2s ease;
}
.si-footer__socials .elementor-social-icon:hover {
  border-color: var(--e-global-color-secondary, #D83D69) !important;
  color: var(--e-global-color-secondary, #D83D69) !important;
}
.si-footer__socials .elementor-social-icon:hover svg {
  fill: var(--e-global-color-secondary, #D83D69) !important;
}

/* Email link — kurzor pointer + hover farba (placeholder, bez mailto teraz) */
.si-footer__email {
  cursor: pointer;
}


/* ── 02 LOGOS ────────────────────────────────────────────── */

/* Grayscale + opacity efekt na logo placeholdery (Elementor nemá filter:grayscale UI) */
.si-logos__item {
  opacity: 0.6;
  filter: grayscale(100%);
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.si-logos__item:hover {
  opacity: 0.95;
  filter: grayscale(50%);
}

/* Logos track — responzívne stĺpce (Elementor nemá CSS Grid UI, len Flex) */
.si-logos__track {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: 0 40px;
  width: 100%;
  max-width: 1200px;
}
@media (max-width: 1024px) {
  .si-logos__track { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
}
@media (max-width: 600px) {
  .si-logos__track { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
}


/* ── 03 SERVICES ─────────────────────────────────────────── */

/* Service card — komplexný hover (white→navy, color flip celej karty +
   pseudo-element pink line vľavo). Elementor takéto kompozitné hover stavy
   na containeri + descendantov nezvláda cez UI. */
.si-services__card {
  position: relative;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
}
.si-services__card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--e-global-color-secondary, #D83D69);
  border-radius: 0 2px 2px 0;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s ease;
}
.si-services__card:hover {
  background: var(--e-global-color-si_navy, #2C3E50) !important;
  border-color: var(--e-global-color-si_navy, #2C3E50) !important;
}
.si-services__card:hover::before { transform: scaleY(1); }
.si-services__card:hover .si-services__name .elementor-heading-title { color: #FFFFFF !important; }
.si-services__card:hover .si-services__desc,
.si-services__card:hover .si-services__desc * { color: var(--e-global-color-si_navy_pale, #C2CCCF) !important; }
.si-services__card:hover .si-services__duration-label .elementor-heading-title { color: var(--e-global-color-secondary, #D83D69) !important; }
.si-services__card:hover .si-services__duration-value .elementor-heading-title { color: #FFFFFF !important; }
.si-services__card:hover .si-services__icon { background: rgba(255,255,255,0.08) !important; }


/* ── 04 TESTIMONIALS ─────────────────────────────────────── */

/* T-grid responzívne stĺpce (rovnaký dôvod ako pri logos) */
.si-testimonials__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}
@media (max-width: 1024px) {
  .si-testimonials__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .si-testimonials__grid { grid-template-columns: 1fr; }
}


/* ── 05 PORTFOLIO ────────────────────────────────────────── */

/* P-grid responzívne (1 wide + 2 normal). Elementor flex_wrap stačí
   pre základ, ale tu chceme klasický 1+1+1 vs 2+1 layout. */
.si-portfolio__grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 24px;
  width: 100%;
}
.si-portfolio__card--wide { grid-column: span 1; }
@media (max-width: 1024px) {
  .si-portfolio__grid { grid-template-columns: repeat(2, 1fr); }
  .si-portfolio__card--wide { grid-column: span 2; }
}
@media (max-width: 600px) {
  .si-portfolio__grid { grid-template-columns: 1fr; }
  .si-portfolio__card--wide { grid-column: span 1; }
}

/* Card hover — subtle lift */
.si-portfolio__card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.si-portfolio__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(26,42,58,0.12);
}


/* ── 06 ABOUT ────────────────────────────────────────────── */

/* Image badge — absolútne pozicovanie v rohu image wrapu (Elementor pos:abs
   v JSONe by sa dal, ale zložité offsety sú jednoduchšie v CSS) */
.si-about__img {
  position: relative;
}
.si-about__badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  box-shadow: 0 8px 24px rgba(26,42,58,0.18);
}

/* Stat number "+" suffix v <em> — pink, menší */
.si-about__stat-num em,
.si-about__stat-num .elementor-heading-title em {
  font-style: normal;
  color: var(--e-global-color-secondary, #D83D69);
  font-size: 0.6em;
  vertical-align: super;
  margin-left: 2px;
}


/* ── 07 CTA ──────────────────────────────────────────────── */

/* Button hover lift — biely "Rezervovať" button */
.si-cta__btn .elementor-button {
  transition: all 0.2s ease;
}
.si-cta__btn .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}