/* css/variant-a.css */

/* Grid items: prevent min-width:auto from expanding beyond track */
.about-text { min-width: 0; }
.about-carousel { min-width: 0; overflow: hidden; }

/* ── HEADER ── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 20px 0;
  transition: background var(--transition), padding var(--transition), backdrop-filter var(--transition);
}
.site-header.scrolled {
  background: rgba(13,13,13,0.95);
  backdrop-filter: blur(12px);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex; align-items: center; gap: 32px;
}
.logo img { height: 40px; width: auto; }
.nav { margin-left: auto; }
.nav-menu { display: flex; gap: 28px; }
.nav-menu a { color: var(--muted); font-size: 0.9rem; font-weight: 500; transition: color var(--transition); }
.nav-menu a:hover { color: var(--white); }
.header-cta { padding: 10px 24px; font-size: 0.9rem; }
.burger { display: none; flex-direction: column; gap: 5px; padding: 4px; }
.burger span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: all var(--transition); }

/* ── HERO ── */
.hero { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: center; padding-top: 80px; }
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.65); }
.hero-content { position: relative; z-index: 1; max-width: 700px; }
.hero-title {
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 900; line-height: 1.05;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.hero-title span { color: var(--blue); }
.hero-sub { font-size: clamp(1rem, 2vw, 1.2rem); color: var(--muted); margin-bottom: 40px; max-width: 480px; }
.hero-btn { font-size: 1.1rem; padding: 18px 44px; }
.hero-scroll {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  z-index: 1;
}
.hero-scroll span {
  display: block; width: 2px; height: 48px; background: linear-gradient(to bottom, var(--blue), transparent);
  margin: 0 auto; animation: scrollPulse 2s infinite;
}
@keyframes scrollPulse { 0%,100%{opacity:1;transform:scaleY(1)} 50%{opacity:0.4;transform:scaleY(0.7)} }

/* ── STATS ── */
.stats-bar { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 40px 0; }
.stats-inner { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.stat { text-align: center; }
.stat-num { display: block; font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; color: var(--blue); line-height: 1; }
.stat-num small { font-size: 0.6em; font-weight: 700; }
.stat-label { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 6px; }

/* ── ABOUT ── */
.about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about-text p { color: var(--muted); margin-bottom: 16px; }
.carousel-track {
  display: flex; gap: 12px; overflow-x: auto; cursor: grab;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-item { flex: 0 0 260px; }
.carousel-item img { width: 260px; height: 180px; object-fit: cover; border-radius: var(--radius); pointer-events: none; }

/* ── TRAINERS ── */
.trainers { background: var(--surface); }
.trainers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.trainer-card { background: var(--surface2); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); display: flex; gap: 24px; padding: 24px; align-items: flex-start; }
.trainer-photo img { width: 120px; height: 140px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.trainer-info h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; }
.trainer-since { color: var(--blue); font-size: 0.85rem; font-weight: 600; margin-bottom: 12px; }
.trainer-info p { color: var(--muted); font-size: 0.9rem; }

/* ── RESULTS ── */
.results-sub { color: var(--muted); margin-bottom: 32px; margin-top: -24px; }
.results-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.result-item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 8px; transition: transform var(--transition); }
.result-item:hover img { transform: scale(1.03); }

/* ── PRICES ── */
.prices { position: relative; overflow: hidden; }
.prices-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.prices-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.82); }
.prices-content { position: relative; z-index: 1; }
.prices-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 24px; }
.price-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; position: relative;
  transition: border-color var(--transition), transform var(--transition);
}
.price-card:hover { border-color: var(--blue); transform: translateY(-4px); }
.price-card.featured { border-color: var(--blue); border-width: 2px; }
.price-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: var(--white); font-size: 0.75rem; font-weight: 700;
  padding: 4px 14px; border-radius: 20px; white-space: nowrap;
}
.price-card h3 { font-size: 1rem; font-weight: 700; }
.price-amount { font-size: 1.8rem; font-weight: 900; color: var(--white); }
.price-amount span { font-size: 0.9rem; font-weight: 400; color: var(--muted); }
.price-desc { color: var(--muted); font-size: 0.85rem; flex: 1; }
.price-card .btn-primary { text-align: center; padding: 12px; }
.price-single { color: var(--muted); text-align: center; font-size: 0.95rem; }
.price-single strong { color: var(--white); }

/* ── FORM ── */
.form-section { background: var(--surface); }
.form-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.form-text p { color: var(--muted); margin-top: 16px; }
.form-privacy { color: var(--muted); font-size: 0.75rem; margin-top: 12px; }

/* ── FOOTER ── */
.footer { background: var(--surface); border-top: 1px solid var(--border); padding: 60px 0 0; }
.footer-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.footer-logo { margin-bottom: 20px; }
address { font-style: normal; color: var(--muted); font-size: 0.9rem; line-height: 1.7; margin-bottom: 16px; }
address a { color: var(--white); }
.footer-hours { color: var(--muted); font-size: 0.9rem; margin-bottom: 20px; }
.footer-messengers { display: flex; gap: 12px; flex-wrap: wrap; }
.messenger-btn {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 16px; font-size: 0.85rem; transition: border-color var(--transition), color var(--transition);
}
.messenger-btn:hover { border-color: var(--blue); color: var(--blue); }
.footer-map iframe { border-radius: var(--radius); border: 0; }
.footer-bottom { border-top: 1px solid var(--border); padding: 20px; text-align: center; color: var(--muted); font-size: 0.8rem; }

/* ── MOBILE STICKY CTA ── */
.sticky-cta-mobile {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 99;
  padding: 12px 20px; background: var(--surface); border-top: 1px solid var(--border);
}
.sticky-cta-mobile .btn-primary { display: block; text-align: center; padding: 14px; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .about-inner { grid-template-columns: 1fr; gap: 32px; }
  .trainers-grid { grid-template-columns: 1fr; }
  .results-grid { grid-template-columns: repeat(3,1fr); }
  .prices-grid { grid-template-columns: 1fr 1fr; }
  .form-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-inner { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  /* Navigation: header expands to fullscreen; nav-menu is absolute below the header bar.
     Avoids position:fixed-inside-fixed stacking context issues. */
  .site-header.menu-open { bottom: 0; background: var(--bg); backdrop-filter: none; }
  .nav-menu { display: none; }
  .nav-menu.open { display: flex; flex-direction: column; position: absolute; top: 80px; left: 0; right: 0; bottom: 0; padding: 24px 20px 40px; gap: 28px; overflow-y: auto; }
  .nav-menu a { font-size: 1.4rem; font-weight: 700; color: var(--white); }
  .burger { display: flex; }
  .header-cta { display: none; }

  /* Hero */
  .hero { min-height: 100svh; }
  .hero-title { font-size: clamp(1.75rem, 9vw, 2.5rem); letter-spacing: -0.01em; }
  .hero-sub { font-size: 0.9rem; margin-bottom: 28px; }
  .hero-btn { padding: 14px 28px; font-size: 1rem; width: 100%; text-align: center; }
  .hero-scroll { display: none; }

  /* Stats */
  .stats-bar { padding: 28px 0; }
  .stats-inner { grid-template-columns: repeat(2,1fr); gap: 0; }
  .stat { padding: 20px 12px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .stat:nth-child(2n) { border-right: none; }
  .stat:nth-child(3), .stat:nth-child(4) { border-bottom: none; }

  /* About */
  .section { padding: 48px 0; }
  .section-title { margin-bottom: 28px; }

  /* Trainer card */
  .trainer-card { flex-direction: column; }
  .trainer-photo img { width: 100%; height: 200px; }

  /* Results */
  .results-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .results-sub { margin-bottom: 20px; margin-top: -16px; }

  /* Prices */
  .prices-grid { grid-template-columns: 1fr; }
  .price-card { padding: 24px 16px; }
  .price-amount { font-size: 1.5rem; }

  /* Form */
  .form-inner { gap: 24px; }

  /* Footer */
  .footer-map iframe { height: 200px; }

  /* Sticky CTA + body padding to prevent hidden content */
  .sticky-cta-mobile { display: block; }
  body { padding-bottom: 76px; }
}

/* Offset anchor scroll for fixed header */
section[id], footer[id] {
  scroll-margin-top: 80px;
}