/* Krzysztof Sztorc Studio Tańca - Koszalin | ekspres demo */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-body);color:var(--text-body);background:var(--color-bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-primary600)}
h1,h2,h3{font-family:var(--font-heading);line-height:var(--lh-heading);letter-spacing:var(--tracking-heading);color:var(--text-strong);margin:0 0 var(--space-4)}
p{margin:0 0 var(--space-4)}
:root{
  --grad:linear-gradient(98deg,#EF4B7E 0%,#F7941D 52%,#FFC93C 100%);
  --grad-soft:linear-gradient(98deg,rgba(239,75,126,.14),rgba(247,148,29,.14),rgba(255,201,60,.16));
  --maxw:1140px;
}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--space-5)}
.section{padding-block:var(--space-8)}
.section--tint{background:var(--color-surface)}
.overline{font-family:'Caveat',cursive;font-size:clamp(26px,3.4vw,38px);line-height:1.5;letter-spacing:.03em;color:var(--color-primary);margin:0 0 var(--space-4)}
.h2{font-size:clamp(28px,4.4vw,var(--fs-3xl))}
.h2 .kicker{display:block;font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary);font-family:var(--font-body);font-weight:700;margin-bottom:var(--space-2)}
.lead{font-size:var(--fs-lg);color:var(--text-muted)}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border)}
.site-header .container{display:flex;align-items:center;gap:var(--space-4);padding-block:10px}
.logo-link{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-link img{width:auto;height:64px}
.main-nav{display:none}
.btn-tel{margin-left:auto;display:inline-flex;align-items:center;gap:8px;background:var(--color-primary);color:#fff;text-decoration:none;font-weight:700;padding:10px 18px;border-radius:var(--radius-pill);font-size:var(--fs-sm);white-space:nowrap;transition:background var(--motion-dur) var(--motion-ease)}
.btn-tel:hover{background:var(--color-primary600)}
.menu-toggle{border:1px solid var(--color-border);background:#fff;border-radius:10px;padding:9px 11px;cursor:pointer;line-height:0}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--text-strong);margin:4px 0;border-radius:2px}
.mobile-nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-md);display:none}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:14px var(--space-5);text-decoration:none;color:var(--text-strong);font-weight:600;border-top:1px solid var(--color-border)}
@media (min-width:920px){
  .menu-toggle,.mobile-nav{display:none!important}
  .main-nav{display:flex;gap:var(--space-5);margin-left:auto}
  .main-nav a{text-decoration:none;color:var(--text-strong);font-weight:600;font-size:var(--fs-sm);position:relative;padding-block:6px}
  .main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;border-radius:2px;background:var(--grad);transition:right .25s var(--motion-ease)}
  .main-nav a:hover::after{right:0}
  .btn-tel{margin-left:0}
}

/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#FFF8F1 0%,#FFFFFF 78%)}
.hero::before{content:"";position:absolute;inset:auto -20% -40% -20%;height:70%;background:var(--grad-soft);filter:blur(60px);pointer-events:none}
.hero .container{position:relative;display:grid;gap:var(--space-6);padding-block:var(--space-7);align-items:center}
.hero h1{font-size:clamp(44px,8.6vw,92px);font-weight:800;text-transform:uppercase;line-height:.98;margin-bottom:var(--space-4)}
.hero h1 .grad{display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:220% 100%}
.hero h1 .city{display:block;font-size:.44em;letter-spacing:.30em;color:var(--text-strong);font-weight:700;margin-top:6px}
@media (prefers-reduced-motion:no-preference){
  .hero h1 .grad{animation:gradsweep 6s var(--motion-ease) infinite alternate}
  @keyframes gradsweep{from{background-position:0% 0}to{background-position:100% 0}}
}
.hero .lead{max-width:46ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-4)}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;padding:14px 26px;border-radius:var(--radius-pill);transition:all var(--motion-dur) var(--motion-ease)}
.btn--primary{background:var(--color-primary);color:#fff}
.btn--primary:hover{background:var(--color-primary600)}
.btn--ghost{border:2px solid var(--text-strong);color:var(--text-strong)}
.btn--ghost:hover{background:var(--text-strong);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.chips li{font-size:var(--fs-sm);font-weight:600;color:var(--text-strong);border:1px solid transparent;border-radius:var(--radius-pill);padding:7px 14px;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box}
.hero-photo{position:relative}
.hero-photo img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);width:100%;object-fit:cover;aspect-ratio:4/5;max-height:560px}
.hero-photo::after{content:"";position:absolute;inset:14px -14px -14px 14px;border-radius:var(--radius-lg);background:var(--grad);opacity:.25;z-index:-1}
@media (min-width:880px){
  .hero .container{grid-template-columns:1.15fr .85fr;padding-block:var(--space-9)}
}

/* info strip */
.strip{background:var(--text-strong);color:#fff}
.strip .container{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);justify-content:center;padding-block:var(--space-4);font-size:var(--fs-sm)}
.strip b{color:#FFC93C}
.strip span{display:inline-flex;align-items:center;gap:8px}

/* o nas / alternating split */
.split{display:grid;gap:var(--space-6);align-items:center}
.split img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
@media (min-width:880px){
  .split{grid-template-columns:1fr 1fr;gap:var(--space-8)}
  .split--rev > .split-media{order:2}
}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-6);padding:0;list-style:none}
.stats li{text-align:center;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4) var(--space-2);background:#fff}
.stats .num{display:block;font-family:var(--font-heading);font-weight:800;font-size:var(--fs-2xl);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats .lbl{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}

/* kursy */
.cards{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform var(--motion-dur) var(--motion-ease),box-shadow var(--motion-dur) var(--motion-ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.card img{aspect-ratio:3/2;object-fit:cover;width:100%}
.card-body{padding:var(--space-4) var(--space-5) var(--space-5)}
.card h3{font-size:var(--fs-lg);margin-bottom:var(--space-2)}
.card p{font-size:var(--fs-sm);color:var(--text-muted);margin:0}
.card .tag{display:inline-block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-primary);margin-bottom:6px}

/* grafik */
.grafik{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.day{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5);box-shadow:var(--shadow-sm)}
.day h3{font-size:var(--fs-base);text-transform:uppercase;letter-spacing:.12em;padding-bottom:var(--space-2);margin-bottom:var(--space-3);border-bottom:3px solid;border-image:var(--grad) 1}
.day ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.day li{font-size:var(--fs-sm)}
.day .t{font-weight:800;font-family:var(--font-heading);color:var(--text-strong)}
.day .who{color:var(--text-muted)}
.day .start{display:block;color:var(--color-primary600);font-weight:600;font-size:var(--fs-xs)}
.lvl{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:1px 7px;background:var(--color-primary100);color:var(--color-primary600);vertical-align:1px}
.legend{margin-top:var(--space-5);font-size:var(--fs-sm);color:var(--text-muted)}
.legend b{color:var(--text-strong)}

/* opinie */
.reviews{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.review{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-6);box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.review .stars{color:var(--color-accent);letter-spacing:3px;margin-bottom:var(--space-3);font-size:var(--fs-base)}
.review blockquote{margin:0 0 var(--space-4);font-size:var(--fs-sm);color:var(--text-body)}
.review figcaption{margin-top:auto;font-weight:700;font-size:var(--fs-sm)}
.review figcaption span{display:block;font-weight:400;color:var(--text-muted);font-size:var(--fs-xs)}

/* cennik */
.price-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.price{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-6);text-align:center;box-shadow:var(--shadow-sm)}
.price h3{font-size:var(--fs-lg)}
.price p{font-size:var(--fs-sm);color:var(--text-muted)}
.price .ask{display:inline-block;margin-top:var(--space-2);font-weight:700;color:var(--color-primary600);text-decoration:none;border-bottom:2px solid;border-image:var(--grad) 1}
.note{font-size:var(--fs-sm);color:var(--text-muted);background:var(--color-surface);border:1px dashed var(--color-border);border-radius:var(--radius-sm);padding:var(--space-4) var(--space-5);margin-top:var(--space-5)}

/* kontakt */
.contact{background:var(--text-strong);color:#EDE6E6}
.contact .h2,.contact h3{color:#fff}
.contact .kicker{color:#FFC93C}
.contact-grid{display:grid;gap:var(--space-6)}
.contact a{color:#fff}
.contact ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.contact .big-tel{display:inline-block;font-family:var(--font-heading);font-weight:800;font-size:clamp(28px,5vw,40px);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-decoration:none;margin-bottom:var(--space-2)}
.socials{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
.socials a{border:1px solid rgba(255,255,255,.35);border-radius:var(--radius-pill);padding:9px 18px;text-decoration:none;font-size:var(--fs-sm);font-weight:600;transition:all var(--motion-dur) var(--motion-ease)}
.socials a:hover{background:#fff;color:var(--text-strong)}
.hours{font-size:var(--fs-sm)}
.hours b{color:#fff}
@media (min-width:880px){.contact-grid{grid-template-columns:1.2fr .8fr}}

/* footer */
.site-footer{background:#0A0808;color:#B9AFAF;font-size:var(--fs-sm)}
.site-footer .container{padding-block:var(--space-6);display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);justify-content:space-between;align-items:center}
.site-footer a{color:#E6DEDE}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--motion-ease),transform .6s var(--motion-ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}


/* =========================================================================
   Hero na fotografii
   ========================================================================= */
/* Kadr z parkietu idzie przez cale hero. Zdjecie jest ciemne i zadymione,
   wiec pismo schodzi na jasne, a welon tylko wyrownuje najjasniejsze
   miejsca - reflektor w gornym rogu potrafi przebic biel. */
.hero--foto{background:#100C0C}
.hero--foto::before{content:none}
.hero__tlo{position:absolute;inset:0;z-index:0;background-image:url('images/hero-tlo.jpg?v=1');background-size:cover;background-position:center 42%}
.hero__tlo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(12,8,8,.86) 0%,rgba(12,8,8,.72) 46%,rgba(12,8,8,.42) 100%)}
.hero--foto .container{position:relative;z-index:1}
.hero--foto .overline{color:#FFC93C}
.hero--foto h1 .city{color:#fff}
.hero--foto .btn--ghost{border-color:#fff;color:#fff}
.hero--foto .btn--ghost:hover{background:#fff;color:var(--text-strong)}
.hero--foto .hero-photo::after{opacity:.42}

/* Telefon w hero: znak plus numer, bez slowa. */
.btn--tel-duzy{font-size:var(--fs-lg);letter-spacing:.02em}
.btn--tel-duzy .znak{flex:none}
.btn-tel .znak{flex:none}
.strip .znak{flex:none;color:#FFC93C}
