/* ============================================================
   AIWORKS — Responsive Patch v6
   Bulletproof carousels, mobile hero, all-surface fixes
   ============================================================ */

/* ── 1. CAROUSEL — CSS-animation fallback (bulletproof) ──────── */
/*
  Strategy: CSS keyframe animation as primary engine.
  JS only adds drag/touch on top. Works on all mobile browsers.
  No requestAnimationFrame timing bugs, no layout thrash.
*/
.carousel-outer {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* Hardware-accelerated containment */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}
/* Fade edges */
.carousel-outer::before,
.carousel-outer::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: clamp(32px, 6vw, 64px);
  z-index: 2; pointer-events: none;
}
.carousel-outer::before {
  left: 0;
  background: linear-gradient(90deg, var(--c-bg2) 0%, transparent 100%);
}
.carousel-outer::after {
  right: 0;
  background: linear-gradient(-90deg, var(--c-bg2) 0%, transparent 100%);
}
.carousel-outer.on-dark::before { background: linear-gradient(90deg, var(--c-bg) 0%, transparent 100%); }
.carousel-outer.on-dark::after  { background: linear-gradient(-90deg, var(--c-bg) 0%, transparent 100%); }

/* The scrolling track — uses CSS animation */
.carousel-belt {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;          /* critical: don't constrain */
  gap: 0;
  /* Default animation — JS overrides transform directly when dragging */
  animation: beltScroll 30s linear infinite;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;         /* allow vertical scroll, capture horizontal */
}
.carousel-belt:active { cursor: grabbing; }
.carousel-belt.is-paused { animation-play-state: paused; }
.carousel-belt.is-dragging { animation-play-state: paused; }

@keyframes beltScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* -50% because track has 2x items */
}

/* Individual speeds via custom property */
.carousel-belt[data-speed="slow"]   { animation-duration: 40s; }
.carousel-belt[data-speed="medium"] { animation-duration: 28s; }
.carousel-belt[data-speed="fast"]   { animation-duration: 18s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .carousel-belt { animation: none !important; }
}

/* ── Logo belt items ─────────────────────────────────────────── */
.logo-belt-item {
  flex-shrink: 0;
  padding: 0 clamp(20px, 3vw, 40px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0.35;
  filter: grayscale(1) brightness(1.8);
  transition: opacity 0.3s, filter 0.3s;
}
.logo-belt-item img {
  max-height: clamp(22px, 3vw, 32px);
  width: auto; height: auto;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}
.carousel-outer:hover .logo-belt-item { opacity: 0.5; }
.logo-belt-item:hover { opacity: 0.85 !important; filter: grayscale(0) brightness(1.1) !important; }

/* ── Konferencia belt items ───────────────────────────────────── */
.konf-belt-item {
  flex-shrink: 0;
  width: clamp(200px, 28vw, 340px);
  padding: 0 clamp(6px, 1vw, 12px);
}
.konf-belt-item-inner {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  transition: transform 0.3s, box-shadow 0.3s;
}
.konf-belt-item-inner:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
}
.konf-belt-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ── 2. HERO — mobile fixes ──────────────────────────────────── */
@media (max-width: 768px) {
  .hero-section {
    min-height: 100svh;          /* safe viewport height on mobile */
    padding-top: calc(var(--nav-h) + 1rem) !important;
    padding-bottom: 3rem !important;
    align-items: flex-start;
  }
  #hero-canvas {
    opacity: 0.5 !important;     /* reduce GPU load on mobile */
    height: 100% !important;
  }
  .t-hero {
    font-size: clamp(2.2rem, 8vw, 3.2rem) !important;
  }
  /* Hero workflow preview — stack on mobile */
  .hero-wf-preview {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }
  .hero-wf-preview .workflow-node {
    font-size: 0.72rem !important;
    padding: 0.45rem 0.7rem !important;
  }
}
@media (max-width: 480px) {
  .t-hero { font-size: clamp(1.9rem, 9vw, 2.8rem) !important; }
  .hero-badge { font-size: 0.7rem !important; }
}

/* ── 3. WORKFLOW section — mobile ────────────────────────────── */
@media (max-width: 768px) {
  .wf-node-card { padding: 1.25rem 1.4rem !important; }
  .wf-node-title { font-size: 0.9rem !important; }
  .wf-node-desc  { font-size: 0.8rem !important; }
}

/* ── 4. GRID — extra breakpoints ─────────────────────────────── */
@media (max-width: 540px) {
  .grid-2.stack-mobile { grid-template-columns: 1fr !important; }
  .section { padding: clamp(3rem, 8vw, 6rem) 0 !important; }
}

/* ── 5. CALCULATOR — mobile ──────────────────────────────────── */
@media (max-width: 640px) {
  .calc-wrap { padding: 1.5rem 1.25rem !important; }
  .pkg-cards  { grid-template-columns: 1fr !important; }
  .calc-result-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── 6. ABOUT + CTA — mobile ────────────────────────────────── */
@media (max-width: 720px) {
  #cta .cta-grid    { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .about-img        { aspect-ratio: 1/1 !important; }
  .guarantee-grid   { grid-template-columns: 1fr !important; }
}

/* ── 7. FOOTER — mobile ──────────────────────────────────────── */
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* ── 8. NAV — mobile extra tight ────────────────────────────── */
@media (max-width: 360px) {
  :root { --nav-h: 60px; }
  .nav-logo { font-size: 0.85rem !important; gap: 7px !important; }
  .nav-logo-icon { width: 28px !important; height: 28px !important; }
}

/* ── 9. KONFERENCIA TV2 card — mobile ────────────────────────── */
@media (max-width: 640px) {
  .tv2-card { grid-template-columns: 1fr !important; }
  .tv2-card img { aspect-ratio: 16/9 !important; }
}

/* ── 10. Text backgrounds — always opaque relative to section bg */
.section-dark .t-body,
.section-dark p,
.section-dark li { color: var(--c-white2); }

/* Ensure no text renders over background images */
.section .container,
.section-dark .container,
.section-surface .container {
  position: relative;
  z-index: 1;
}

/* ── 11. Logo placeholder ─────────────────────────────────────── */
.nav-logo-img {
  height: 32px;
  width: auto;
  display: block;
  /* Fallback color if image missing */
  background: transparent;
}
.footer-logo-img {
  height: 28px;
  width: auto;
  display: block;
}