/* ═══════════════════════════════════════════════════
   UP2U MEDIA – style.css
   Własne klasy + media queries (Tailwind CDN jako baza)
═══════════════════════════════════════════════════ */

/* ─── Base ─── */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  background-color: #0D0D0D;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
}

/* ─── Navigation ─── */
.nav-accent-line {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #8A2BE2 50%, transparent 100%);
}

.nav-active { position: relative; }
.nav-active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 2px;
  background: #8A2BE2;
}

/* Hamburger lines */
.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  transition: transform 0.25s ease, opacity 0.25s ease, width 0.25s ease;
}
#menu-btn[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
#menu-btn[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
#menu-btn[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  width: 24px;
}

/* Mobile menu slide-in */
#mobile-menu {
  border-top: 1px solid #1f1f1f;
}

/* ─── Animations ─── */
.scroll-bounce { animation: scrollBounce 2s ease-in-out infinite; }
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(7px); }
}

/* ─── Components ─── */

/* Placeholder – ciemne pudełko zamiast zdjęcia */
.ph {
  background: #0f0f18;
  border: 1px solid #2d1f4e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #3d2a6b;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.65rem;
  font-weight: 600;
}

/* Kafelek – efekt hover */
.card-hover { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.card-hover:hover {
  border-color: #8A2BE2;
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.2);
}

/* Kółko influencera */
.inf-ring {
  border: 2px solid #8A2BE2;
  box-shadow: 0 0 22px rgba(138, 43, 226, 0.35);
}

/* Fioletowa kreska pod nagłówkiem sekcji */
.section-sep {
  width: 3.5rem;
  height: 2px;
  background: #8A2BE2;
  margin-bottom: 2.25rem;
}

/* Eyebrow label */
.eyebrow {
  color: #8A2BE2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: block;
}

/* Przycisk CTA z fioletową ramką */
.btn-purple {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid #8A2BE2;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  padding: 1rem 3rem;
  transition: background 0.3s ease;
}
.btn-purple:hover { background: #8A2BE2; }

/* Przycisk biały (hero – "Zobacz portfolio") */
.btn-white {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  color: #000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 1rem 1.75rem;
  transition: background 0.2s ease;
}
.btn-white:hover { background: #e5e5e5; }

/* Przycisk konturowy (hero – "Skontaktuj się") */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid #fff;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 1rem 1.75rem;
  transition: background 0.3s ease, color 0.3s ease;
}
.btn-outline:hover { background: #fff; color: #000; }

/* ─── "W budowie" – podstrony ─── */
.coming-soon-box {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  min-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.25rem;
}
@media (min-width: 640px) {
  .coming-soon-box { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 1024px) {
  .coming-soon-box {
    padding-left: clamp(2rem, 6vw, 5rem);
    padding-right: clamp(2rem, 6vw, 5rem);
  }
}

/* ─── Responsive Media Queries ─── */

/* Tablet i mniejszy (poniżej 1024px) */
@media (max-width: 1023px) {
  /* Hero heading skalujemy przez Tailwind responsive prefix  */
  /* Sekcje: pionowe paddingsy */
  .section-pad { padding-top: 5rem; padding-bottom: 5rem; }
}

/* Mobile (poniżej 640px) */
@media (max-width: 639px) {
  /* Buttons full-width na mobile */
  .btn-white,
  .btn-outline {
    width: 100%;
    justify-content: center;
  }

  /* Influencer nicknamy – małe czcionki */
  .inf-nick { font-size: 10px; padding: 0.3rem 0.9rem; }

  /* Stat numbers mniejsze */
  .stat-num { font-size: 2.25rem; }

  /* Scroll bounce indicator – ukryty na mobile */
  .scroll-indicator { display: none; }
}