/* ============================================================
   MS KRAV MAGA — style.css
   ============================================================ */

/* === RESET & ZMIENNE === */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0f0f0f;--bg2:#181818;--bg3:#222;--steel:#2a2a2a;
  --text:#fff;--muted:#a0a0a0;
  --accent:#e8541a;--accent2:#c0392b;--border:#333;
  --max-w:1280px;
  --pad:clamp(24px, 5vw, 120px);
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;line-height:1.6;overflow-x:hidden}

/* === NAWIGACJA === */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(15,15,15,.95);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);padding:0 var(--pad);
}
.nav-inner{
  max-width:var(--max-w);margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;height:64px;
}
.nav-logo{font-family:'Oswald',sans-serif;font-size:20px;font-weight:700;letter-spacing:2px}
.nav-logo span{color:var(--accent)}
.nav-links{display:flex;gap:32px;list-style:none}
.nav-links a{color:var(--muted);text-decoration:none;font-size:13px;letter-spacing:1px;text-transform:uppercase;transition:color .2s}
.nav-links a:hover{color:var(--accent)}

/* === PRZYCISK === */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;text-decoration:none;font-family:'Inter',sans-serif;
  font-weight:600;font-size:15px;border-radius:4px;border:none;
  cursor:pointer;transition:opacity .2s,transform .15s;letter-spacing:.5px;
}
.btn:hover{opacity:.9;transform:translateY(-1px)}

/* === OGÓLNE === */
section{padding:clamp(60px,6vw,120px) var(--pad)}
.container{max-width:var(--max-w);margin:0 auto}
.section-label{font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
h2{font-family:'Oswald',sans-serif;font-size:clamp(26px,3vw,52px);font-weight:700;line-height:1.1;margin-bottom:20px}
.accent-line{height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));width:60px;margin-bottom:28px}

/* === HERO === */
.hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr; /* jeden slot — wewnętrzny wrapper centruje */
  align-items:stretch;
  padding-top:64px;overflow:hidden;
  background:linear-gradient(160deg,#0f0f0f 0%,#111 60%,#0a0a0a 100%);
  position:relative;
}
.hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}

/* Wewnętrzny wrapper centruje obie kolumny jak container */
.hero-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  width:100%;
  max-width:var(--max-w);
  margin:0 auto;
  min-height:calc(100vh - 64px);
}

/* Lewa kolumna */
.hero-content{
  display:flex;flex-direction:column;justify-content:center;
  padding:80px var(--pad) 80px;
}
.hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(232,84,26,.12);border:1px solid rgba(232,84,26,.3);
  color:var(--accent);font-size:12px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;padding:6px 14px;border-radius:2px;margin-bottom:28px;
  width:fit-content;
}
.hero-tag::before{content:'';width:6px;height:6px;background:var(--accent);border-radius:50%}
h1{font-family:'Oswald',sans-serif;font-size:clamp(34px,3.5vw,72px);font-weight:700;line-height:1.05;letter-spacing:-1px;margin-bottom:24px}
h1 em{font-style:normal;color:var(--accent)}
.hero-sub{font-size:clamp(14px,1.1vw,17px);color:var(--muted);line-height:1.75;max-width:520px;margin-bottom:40px}
.hero-stats{display:flex;gap:clamp(20px,3vw,48px);margin-top:48px;padding-top:40px;border-top:1px solid var(--border)}
.stat-num{font-family:'Oswald',sans-serif;font-size:clamp(28px,2.5vw,40px);font-weight:700;color:var(--accent)}
.stat-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px}

/* Prawa kolumna hero — pełne wypełnienie, rozmycie po lewej i dole */
.hero-photos{
  position:relative;overflow:hidden;background:#0a0a0a;
}
/* rozmycie po lewej — płynne przejście do tła hero */
.hero-photos::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:clamp(80px,12%,200px);
  background:linear-gradient(90deg,#0f0f0f 0%,rgba(15,15,15,.7) 60%,transparent 100%);
  z-index:2;
}
/* rozmycie na dole */
.hero-photos::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:35%;
  background:linear-gradient(transparent,rgba(10,10,10,.85) 70%,#0f0f0f 100%);
  z-index:2;
}
/* rozmycie po prawej */
.hero-photo-frame::after{
  content:'';position:absolute;top:0;right:0;bottom:0;
  width:clamp(80px,15%,220px);
  background:linear-gradient(270deg,#0f0f0f 0%,rgba(15,15,15,.6) 50%,transparent 100%);
  z-index:2;
}
.hero-photo-frame{
  position:absolute;inset:0; /* wypełnia całą kolumnę */
}
.photo-main{
  width:100%;height:100%;
  object-fit:cover;object-position:center 15%;
  filter:brightness(.82) contrast(1.08) saturate(1.05);
}
.photo-overlay-strip{display:none} /* zastąpiony przez ::after */
.photo-badge{
  position:absolute;bottom:28px;right:28px;z-index:3;
  background:rgba(10,10,10,.85);border:1px solid rgba(232,84,26,.4);
  border-radius:6px;padding:12px 18px;font-size:13px;color:var(--muted);
  backdrop-filter:blur(10px);
  text-decoration:none;display:block; /* działa jako <a> i <div> */
  transition:border-color .2s,color .2s;
}
.photo-badge:hover{border-color:var(--accent);color:var(--text)}
.photo-badge strong{display:block;color:var(--accent);font-family:'Oswald',sans-serif;font-size:15px;letter-spacing:1px}

/* === KARUZELA ZDJĘĆ — JS infinite scroll (brak przeskoku) === */
.photo-strip-wrapper{
  background:var(--bg);
  padding:clamp(32px,4vw,72px) 0;
  overflow:hidden;
  position:relative;
  display:flex;          /* track + klon siedzą obok siebie w jednym rzędzie */
  align-items:stretch;
}
/* Maska rozmycia na krawędziach */
.photo-strip-wrapper::before,
.photo-strip-wrapper::after{
  content:'';position:absolute;top:0;bottom:0;
  width:clamp(60px,8vw,160px);z-index:2;pointer-events:none;
}
.photo-strip-wrapper::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.photo-strip-wrapper::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}

/* Track — JS ustawia translateX, padding-right = gap żeby koniec setu łączył się z początkiem */
.photo-strip-track{
  display:flex;
  flex-shrink:0;
  gap:clamp(10px,1.2vw,20px);
  padding-right:clamp(10px,1.2vw,20px);
  will-change:transform;
}

/* Tryb statyczny — gdy za mało zdjęć na karuzelę */
.strip-static{display:flex !important;justify-content:center;align-items:flex-start}
.strip-static .photo-strip-track{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  width:auto !important;
  padding:0 var(--pad);
  gap:clamp(10px,1.2vw,20px);
}
.strip-static .strip-img{
  width:clamp(140px,18vw,240px);
  flex-shrink:0;
}

.strip-img{
  flex-shrink:0;
  overflow:hidden;position:relative;border-radius:12px;
  aspect-ratio:9/16;
  width:clamp(160px,16vw,280px);
  display:block;text-decoration:none;cursor:pointer;
}
.strip-img img{
  width:100%;height:100%;
  object-fit:cover;object-position:var(--focus, center 20%);
  filter:brightness(.75) contrast(1.15) saturate(.9);
  transition:filter .4s, transform .4s;
}
.strip-img:hover img{filter:brightness(.5) contrast(1.1) saturate(.8);transform:scale(1.04)}
.strip-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(transparent 55%,rgba(0,0,0,.6));
  border-radius:12px;
  pointer-events:none;
}
/* Overlay IG — pojawia się na hover */
.strip-ig{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;opacity:0;transition:opacity .3s;pointer-events:none;
}
.strip-img:hover .strip-ig{opacity:1}
.strip-ig::before{
  content:'';display:block;width:44px;height:44px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.strip-ig::after{
  content:'Zobacz na Instagramie';
  color:rgba(255,255,255,.9);font-family:'Inter',sans-serif;
  font-size:12px;font-weight:500;letter-spacing:.5px;text-align:center;
}

/* === O MNIE === */
.about{background:var(--bg2)}
.about-grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(40px,5vw,100px);
  align-items:start;
}

/* Kolumna zdjęć — 3 zdjęcia ułożone wertykalnie ze staggerem */
.about-photos{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:clamp(8px,1vw,14px);
}
/* Duże zdjęcie — zajmuje obie kolumny, proporcje 3:2 (poziome, jak w screenie) */
.about-photo-big{
  grid-column:1/-1;
  border-radius:12px;overflow:hidden;
  aspect-ratio:3/2;
}
.about-photo-big img{
  width:100%;height:100%;
  object-fit:cover;object-position:var(--focus, center 20%);
  filter:brightness(.9) contrast(1.1);transition:transform .4s;
}
.about-photo-big:hover img{transform:scale(1.03)}

/* Małe zdjęcia — proporcje 4:5 (lekko portretowe, estetyczne) */
.about-photo-sm{
  border-radius:12px;overflow:hidden;
  aspect-ratio:4/5;
}
.about-photo-sm img{
  width:100%;height:100%;
  object-fit:cover;object-position:var(--focus, center 20%);
  filter:brightness(.85) contrast(1.1);transition:transform .4s;
}
.about-photo-sm:hover img{transform:scale(1.04)}

.about-text p{color:var(--muted);line-height:1.8;margin-bottom:16px;font-size:clamp(14px,1vw,16px)}
.cert-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.cert-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(232,84,26,.08);border:1px solid rgba(232,84,26,.2);
  color:var(--text);font-size:13px;font-weight:500;
  padding:8px 16px;border-radius:4px;
  white-space:nowrap; /* zapobiega łamaniu na mobile */
}
.about-highlight{background:#222;border-left:3px solid var(--accent);padding:20px 24px;border-radius:0 6px 6px 0;margin-top:24px}
.about-highlight p{color:var(--muted);font-size:14px;font-style:italic;margin:0}

/* === OFERTY === */
.offers{background:var(--bg)}
.offers-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.offer-card{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:clamp(24px,2vw,40px);transition:border-color .2s,transform .2s}
.offer-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.offer-card.featured{border-color:rgba(232,84,26,.4);background:linear-gradient(135deg,#1a1210,var(--bg2))}
.offer-icon{width:44px;height:44px;background:rgba(232,84,26,.12);border-radius:6px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.offer-icon svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.offer-card h3{font-family:'Oswald',sans-serif;font-size:clamp(20px,1.8vw,28px);font-weight:600;margin-bottom:12px;letter-spacing:.5px}
.offer-card p{color:var(--muted);font-size:14.5px;line-height:1.7;margin-bottom:20px}
.offer-list{list-style:none}
.offer-list li{display:flex;align-items:flex-start;gap:10px;color:var(--muted);font-size:14px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.offer-list li::before{content:'→';color:var(--accent);font-weight:700;flex-shrink:0;margin-top:1px}
.offer-meta{display:flex;gap:16px;margin-top:20px;padding-top:20px;border-top:1px solid var(--border);flex-wrap:wrap}
.offer-meta-item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.offer-meta-item svg{width:14px;height:14px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* === OPINIE === */
.reviews{background:var(--bg2)}
.reviews-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.review-card{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:clamp(20px,2vw,36px);transition:border-color .2s}
.review-card:hover{border-color:rgba(232,84,26,.3)}
.review-stars{display:flex;gap:3px;margin-bottom:16px}
.star{width:14px;height:14px;fill:var(--accent)}
.review-text{color:var(--muted);font-size:14.5px;line-height:1.75;font-style:italic;margin-bottom:20px}
.review-author{font-weight:600;font-size:14px;color:var(--text);letter-spacing:.5px}

/* === FAQ === */
.faq{background:var(--bg)}
.faq-list{margin-top:40px;display:flex;flex-direction:column;gap:2px}
.faq-item{background:var(--bg2);border:1px solid var(--border);border-radius:6px;overflow:hidden;transition:border-color .2s}
.faq-item.open{border-color:rgba(232,84,26,.3)}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;cursor:pointer;font-weight:500;font-size:15px;gap:16px}
.faq-q:hover{color:var(--accent)}
.faq-icon{width:20px;height:20px;flex-shrink:0;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;transition:transform .25s}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.open .faq-a{max-height:300px}
.faq-a-inner{padding:0 24px 20px;color:var(--muted);font-size:14.5px;line-height:1.75;border-top:1px solid var(--border)}

/* === CTA === */
.cta-section{background:linear-gradient(135deg,#1a0e0a,#111);padding:clamp(48px,6vw,100px) var(--pad);text-align:center;border-top:1px solid #2a1a10}

/* === STOPKA === */
footer{background:#080808;border-top:1px solid var(--border);padding:clamp(40px,4vw,80px) var(--pad)}
.footer-inner{max-width:var(--max-w);margin:0 auto}
.footer-top{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start;margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid var(--border)}
.footer-logo{font-family:'Oswald',sans-serif;font-size:22px;font-weight:700;letter-spacing:2px;margin-bottom:10px}
.footer-logo span{color:var(--accent)}
.footer-desc{color:var(--muted);font-size:14px;max-width:360px;line-height:1.6}
.contact-items{display:flex;flex-direction:column;gap:14px}
.contact-item{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14.5px;text-decoration:none;transition:color .2s}
.contact-item:hover{color:var(--text)}
.contact-item svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px}

/* Sekcja "Instruktor Collegium Krav Maga" */
.footer-ckm{
  padding-bottom:24px;
  margin-bottom:24px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.footer-ckm-badge{
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px 20px;
  transition:border-color .2s;
}
.footer-ckm-badge:hover{border-color:rgba(255,255,255,.2)}
.footer-ckm-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
.footer-ckm-link{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;

    color:#555;
    text-decoration:none;
    font-size:13px;
}
.footer-ckm-logo{
  height:28px;
  width:auto;
  /* logo jest białe — świetnie na ciemnym tle */
  filter:brightness(1);
  transition:opacity .2s;
}
.footer-ckm-link:hover .footer-ckm-logo{opacity:.8}

/* === 2K / 4K (>1600px) === */
@media(min-width:1600px){
  .strip-img{width:clamp(240px,14vw,320px)}
  .about-photo-big{aspect-ratio:16/9}
}

/* === TABLET / MOBILE (<800px) === */
@media(max-width:800px){
  :root{--pad:20px}
  .hero{grid-template-columns:1fr}
  .hero-inner{grid-template-columns:1fr;min-height:auto}
  .hero-content{padding:100px var(--pad) 40px;}

  /* Hero foto na mobile — stała wysokość, zdjęcie wyśrodkowane */
  .hero-photos{height:65vw;min-height:240px;max-height:400px}
  .hero-photos::before{display:none} /* brak rozmycia bocznego */
  .hero-photos::after{height:50%} /* mocniejszy gradient na dole */
  .photo-main{object-position:center center} /* wyśrodkuj na mobile */
  .photo-badge{bottom:16px;right:16px;font-size:12px;padding:10px 14px}

  /* about */
  .about-grid{grid-template-columns:1fr}
  .about-photos{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .about-photo-big{aspect-ratio:16/10}
  .about-photo-sm{aspect-ratio:4/5}

  /* cert-badges */
  .cert-badges{gap:6px}
  .cert-badge{font-size:12px;padding:6px 12px;white-space:normal;text-align:center}

  .offers-grid{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
  .photo-strip-wrapper{padding:20px 0}
  .strip-img{width:clamp(130px,42vw,200px)}
  .footer-top{grid-template-columns:1fr}
  .nav-links{display:none}
}