/* ZnanyTrener — demo. Paleta i typografia zgodne z mockiem produktowym. */
:root{
  --bg:#f6f6f3; --surface:#fff; --ink:#0f1110; --muted:#6b706d; --line:#e6e8e4;
  --accent:#dfff45; --accent-2:#b8ff1f; --dark:#111513;
  --radius:24px; --radius-sm:14px; --shadow:0 10px 30px rgba(0,0,0,.08);
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}
h1,h2,h3,h4{font-family:Manrope,Inter,sans-serif;letter-spacing:-.035em;margin:0;line-height:1.08}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
img,video{display:block;max-width:100%}
.container{width:min(var(--maxw),calc(100% - 32px));margin:0 auto}
.muted{color:var(--muted)}
.kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}

/* --- demo banner --- */
.demobar{background:var(--dark);color:#e9ece9;font-size:12.5px;letter-spacing:.01em;padding:9px 0;text-align:center}
.demobar b{color:var(--accent)}
.demobar a{text-decoration:underline;text-underline-offset:3px}

/* --- topbar --- */
.topbar{position:sticky;top:0;z-index:60;background:rgba(246,246,243,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{height:74px;display:flex;align-items:center;gap:20px}
.brand{font-family:Manrope,sans-serif;font-weight:800;font-size:25px;letter-spacing:-.045em;line-height:1;white-space:nowrap}
.brand span{background:var(--accent);padding:0 4px;border-radius:5px}
.brand small{display:block;font-size:8.5px;letter-spacing:.09em;font-weight:700;color:var(--muted);margin-top:5px}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;flex:1;justify-content:center}
.navlinks a{opacity:.75;padding:6px 0;border-bottom:2px solid transparent}
.navlinks a:hover{opacity:1}
.navlinks a.active{opacity:1;border-bottom-color:var(--ink)}
.actions{display:flex;align-items:center;gap:8px}
.btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 16px;cursor:pointer;font-weight:700;font-size:14px;transition:transform .12s ease,background .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn.dark{background:var(--dark);color:#fff;border-color:var(--dark)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#111}
.btn.ghost{background:transparent}
.btn.sm{padding:7px 13px;font-size:13px}
.burger{display:none}

/* --- hero --- */
.hero{position:relative;overflow:hidden;background:var(--dark);color:#fff;border-radius:0 0 34px 34px}
.hero:before{content:"";position:absolute;inset:0;background:
  radial-gradient(900px 480px at 78% 18%,rgba(223,255,69,.22),transparent 62%),
  radial-gradient(700px 520px at 12% 88%,rgba(120,220,180,.14),transparent 60%),
  linear-gradient(140deg,#0c100e 0%,#151b17 58%,#1b221d 100%)}
.hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr .7fr;gap:44px;align-items:center;padding:64px 0 72px}
.hero .eyebrow{font-size:12.5px;text-transform:uppercase;letter-spacing:.17em;font-weight:800;color:#c9cfc8}
.hero h1{font-size:clamp(38px,6vw,66px);margin:16px 0 18px;max-width:14ch}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{font-size:18px;color:#d3d8d2;max-width:52ch;margin:0 0 26px}
.search{display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:7px 7px 7px 18px;max-width:560px;box-shadow:var(--shadow)}
.search input{flex:1;border:0;outline:0;padding:11px 0;color:var(--ink);background:transparent;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chips button{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#eef1ed;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer}
.chips button:hover{background:rgba(255,255,255,.15)}
.hero-side{display:grid;gap:14px}
.stat-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:20px 22px}
.stat-card b{display:block;font-family:Manrope,sans-serif;font-size:34px;letter-spacing:-.04em}
.stat-card span{font-size:13px;color:#c2c8c1}
.camp-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-left:3px solid var(--accent);color:#fff;border-radius:var(--radius);padding:22px}
.camp-card .camp-top{font-size:11px;font-weight:800;letter-spacing:.16em}
.camp-card h3{font-size:26px;margin:8px 0 2px}
.camp-card p{margin:8px 0 14px;font-size:13.5px;font-weight:600}

/* --- sections --- */
.section{padding:64px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.section-head h2{font-size:clamp(26px,3.4vw,40px)}
.section-head p{margin:10px 0 0;font-size:14.5px}
.link-more{font-weight:700;font-size:14px;border-bottom:2px solid var(--accent);padding-bottom:2px}
.page-head{padding:44px 0 6px}
.page-head h1{font-size:clamp(32px,5vw,52px)}
.page-head p{max-width:70ch;color:var(--muted);margin:14px 0 0}

/* --- cards / grids --- */
.grid{display:grid;gap:18px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card-body{padding:18px 20px 20px}

.trainer .avatar{height:170px;display:grid;place-items:center;font-family:Manrope,sans-serif;font-weight:800;font-size:44px;color:#12160f;letter-spacing:-.04em}
/* Awatary: oryginalna, nasycona paleta — wielobarwna, nie pastelowa. */
.av-a{background:linear-gradient(135deg,#dfff45,#a8e83a);--tone:223,255,69}
.av-b{background:linear-gradient(135deg,#bfe9ff,#7fc5f0);--tone:127,197,240}
.av-c{background:linear-gradient(135deg,#ffd9c4,#ffb38a);--tone:255,179,138}
.av-d{background:linear-gradient(135deg,#d8d3ff,#a99df0);--tone:169,157,240}
.av-e{background:linear-gradient(135deg,#c9f5dd,#8fd9b6);--tone:143,217,182}
.av-f{background:linear-gradient(135deg,#ffe7a8,#f5c451);--tone:245,196,81}
.av-g{background:linear-gradient(135deg,#f6c9d8,#e895b4);--tone:232,149,180}
.av-h{background:linear-gradient(135deg,#cfe0d3,#9dbaa6);--tone:157,186,166}
.trainer h3{font-size:19px;margin-bottom:4px}
.trainer .role{font-size:13.5px;color:var(--muted);margin:0 0 10px}
.meta-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.rating{font-weight:700;color:var(--ink)}
.rating span{font-weight:500;color:var(--muted)}
.price{font-weight:800;font-family:Manrope,sans-serif}

.exercise .thumb{position:relative;aspect-ratio:16/10;background:linear-gradient(140deg,#1a211c,#2b352d);display:grid;place-items:center;cursor:pointer}
.exercise .thumb img,.exercise .thumb video{width:100%;height:100%;object-fit:cover}
.exercise .thumb .play{position:absolute;width:56px;height:56px;border-radius:50%;background:var(--accent);color:#111;display:grid;place-items:center;font-size:19px;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.exercise .tag{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.62);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.11em;padding:6px 10px;border-radius:999px;z-index:2}
.exercise h3{font-size:18px;margin-bottom:6px}
.exercise .sum{font-size:13.5px;color:var(--muted);margin:0 0 12px}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.pill{background:#f0f2ed;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:600}
.license-badge{font-size:11.5px;color:var(--muted);line-height:1.35}
.license-badge b{color:var(--ink)}

.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:700;cursor:pointer}
.filters button.active{background:var(--dark);color:#fff;border-color:var(--dark)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.toolbar input,.toolbar select{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 16px;outline:0}
.toolbar input{min-width:240px;flex:1}

.strip{background:var(--dark);color:#fff;border-radius:var(--radius);display:grid;grid-template-columns:repeat(4,1fr);gap:1px;overflow:hidden;margin:8px 0}
.strip div{padding:22px 24px;background:var(--dark)}
.strip b{display:block;font-family:Manrope,sans-serif;font-size:19px;margin-bottom:4px}
.strip span{font-size:13px;color:#b9c0b8}

.plan-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.plan-card .badge{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--muted)}
.plan-card h3{font-size:24px;margin:8px 0 6px}
.plan-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--line);font-size:13.5px}
.plan-row b{font-family:Manrope,sans-serif}

.event{display:flex;gap:16px;align-items:flex-start;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.event .date{background:#f0f2ed;border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--radius-sm);width:64px;min-width:64px;text-align:center;padding:9px 0;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--muted)}
.event .date b{color:var(--ink)}
.event .date b{display:block;font-family:Manrope,sans-serif;font-size:26px;letter-spacing:-.03em}
.event h3{font-size:17px;margin-bottom:6px}
.event p{margin:0 0 10px;font-size:13.5px;color:var(--muted)}
.tagline{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;background:#f0f2ed;border:1px solid var(--line);border-radius:999px;padding:5px 11px}

.camp{position:relative;color:#fff;border-radius:var(--radius);padding:26px;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(160deg,#16201a,#26332a)}
.camp:nth-child(2){background:linear-gradient(160deg,#1d1a26,#2f2a3d)}
.camp:nth-child(3){background:linear-gradient(160deg,#101f22,#1d383a)}
.camp .mountains{position:absolute;top:22px;right:24px;font-size:26px;color:var(--accent);opacity:.85}
.camp h3{font-size:27px;margin-bottom:4px}
.camp .place{font-weight:700;color:var(--accent);font-size:13.5px;letter-spacing:.04em}
.camp p{color:#c9cfc8;font-size:13.5px;margin:10px 0 14px}
.camp ul{margin:0 0 16px;padding-left:18px;color:#c9cfc8;font-size:13px}

.article h3{font-size:18px;margin-bottom:8px}
.article .lead{font-size:13.5px;color:var(--muted);margin:0 0 12px}

.split{display:grid;grid-template-columns:1.25fr .75fr;gap:22px;align-items:start}
.cta{background:var(--dark);color:#fff;border-top:3px solid var(--accent);border-radius:var(--radius);padding:38px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:8px 0 0}
.cta p{color:#c9cfc8}
.cta .kicker{color:var(--accent)}
.cta h2{font-size:clamp(24px,3vw,34px);max-width:20ch}
.cta p{margin:10px 0 0;font-size:15px;max-width:52ch}

/* --- detail pages --- */
.detail{display:grid;grid-template-columns:1.4fr .6fr;gap:28px;align-items:start;padding:28px 0 64px}
.player{background:#000;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9}
.player video{width:100%;height:100%;object-fit:contain;background:#000}
.detail h1{font-size:clamp(28px,4vw,42px);margin:18px 0 10px}
.detail h2{font-size:22px;margin:30px 0 12px}
.detail ul,.detail ol{padding-left:20px;margin:0}
.detail li{margin-bottom:9px}
.sidecard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:16px}
.sidecard h3{font-size:17px;margin-bottom:12px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.kv:first-of-type{border-top:0}
.kv b{font-weight:700}
.sourcebox{background:#f0f2ed;border:1px solid var(--line);border-left:4px solid var(--accent-2);border-radius:var(--radius-sm);padding:16px 18px;font-size:13.5px;margin-top:22px}
.sourcebox a{text-decoration:underline;text-underline-offset:3px}
.notice{background:#fff7dd;border:1px solid #f0e2ae;border-radius:var(--radius-sm);padding:14px 16px;font-size:13.5px;margin:18px 0}
.breadcrumb{font-size:13px;color:var(--muted);padding-top:22px}
.breadcrumb a{text-decoration:underline;text-underline-offset:3px}

.profile-head{display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding:28px 0 8px}
.profile-head .avatar{width:120px;height:120px;border-radius:26px;display:grid;place-items:center;font-family:Manrope,sans-serif;font-weight:800;font-size:40px;color:#12160f}
.profile-head h1{font-size:clamp(28px,4vw,42px)}
.profile-head .role{color:var(--muted);margin:8px 0 12px}

table.sources{width:100%;border-collapse:collapse;margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
table.sources th,table.sources td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top}
table.sources th{background:#f0f2ed;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
table.sources tr:last-child td{border-bottom:0}
table.sources a{text-decoration:underline;text-underline-offset:3px}

/* --- footer --- */
body>footer{background:var(--dark);color:#c9cfc8;margin-top:64px;padding:48px 0 32px;font-size:13.5px}
body>footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}
body>footer h4{color:#fff;font-size:14px;margin-bottom:12px;letter-spacing:0}
body>footer a{display:block;padding:4px 0;opacity:.82}
body>footer a:hover{opacity:1;color:var(--accent)}
body>footer .brand{color:#fff}
body>footer .fine{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:20px;font-size:12.5px;color:#9aa39a;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--dark);color:#fff;padding:13px 22px;border-radius:999px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:.22s ease;z-index:80}
.toast.show{opacity:1;transform:translate(-50%,0)}
.empty{padding:48px;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius)}

/* --- responsive --- */
@media(max-width:980px){
  .hero .container{grid-template-columns:1fr;padding:44px 0 52px}
  .hero-side{grid-template-columns:1fr 1fr;display:grid}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .split,.detail{grid-template-columns:1fr}
  .strip{grid-template-columns:repeat(2,1fr)}
  body>footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:920px){
  .navlinks{position:absolute;top:74px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px 16px 16px;display:none}
  .navlinks.open{display:flex}
  .navlinks a{padding:11px 0;border-bottom:1px solid var(--line)}
  .navlinks a.active{border-bottom-color:var(--ink)}
  .burger{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer}
  .nav{justify-content:space-between}
  .actions .btn.ghost{display:none}
  .hero-side{grid-template-columns:1fr}
  .cta{padding:26px}
  .section{padding:44px 0}
}
@media(max-width:520px){
  .g4,.g3,.g2{grid-template-columns:1fr}
  .brand{font-size:22px}
  .event{flex-direction:column}
  .profile-head .avatar{width:92px;height:92px;font-size:32px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* --- sekcje profilu z legacy CMS --- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}
.gal-tile{aspect-ratio:4/3;border-radius:var(--radius-sm);opacity:.85}
.faq-item{border-top:1px solid var(--line);padding:12px 0}
.faq-item summary{cursor:pointer;font-weight:700;font-family:Manrope,sans-serif;font-size:15.5px}
.faq-item summary::marker{color:var(--muted)}
.faq-item div{padding-top:8px;color:var(--muted);font-size:14px}
blockquote.sidecard{border-left:4px solid var(--accent-2)}
blockquote.sidecard .rating{color:#c8a21a;letter-spacing:.08em;margin-bottom:8px}
.toolbar select{cursor:pointer}
@media(max-width:520px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* --- realne zdjecia profilowe (R2) ---
   Gradient koloru zostaje widoczny jako ramka wokol zdjecia, zeby karty ze zdjeciem
   i bez zdjecia czytaly sie jako jedna rodzina. */
.photo-card{position:relative;display:block;height:170px;padding:10px;overflow:hidden}
.photo-card img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;
  border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.photo-frame{position:relative;display:block;width:120px;height:120px;min-width:120px;
  border-radius:26px;padding:7px;overflow:hidden}
.photo-frame img{width:100%;height:100%;object-fit:cover;border-radius:20px;display:block}
@media(max-width:520px){.photo-frame{width:92px;height:92px;min-width:92px}}

/* =========================================================
   Układ zgodny z mockiem koncepcyjnym (inspiracja/znanytrener_mock.html).
   Zdjęć stockowych z mocka nie używamy — w ich miejsce wchodzą gradienty,
   bo demo nie ma licencji na tamte fotografie.
   ========================================================= */

/* wyszukiwarka z lokalizacją */
.searchbar{background:#fff;border-radius:999px;display:grid;grid-template-columns:1fr 168px 54px;
  align-items:center;padding:7px 7px 7px 20px;max-width:720px;box-shadow:var(--shadow)}
.searchbar input{border:0;outline:0;padding:11px 0;background:transparent;min-width:0;color:var(--ink)}
.searchbar .location{border:0;border-left:1px solid var(--line);background:transparent;outline:0;
  padding:11px 0 11px 16px;font-size:14px;color:#222;cursor:pointer}
.searchgo{width:48px;height:48px;border-radius:50%;background:var(--accent);border:0;font-size:20px;cursor:pointer;justify-self:end}
.searchgo:hover{background:var(--accent-2)}

/* promo box w hero */
.promo{justify-self:end;width:min(100%,300px);background:linear-gradient(180deg,#4aa6e8,#2d72bb);
  border:1px solid rgba(255,255,255,.55);border-radius:24px;padding:24px;box-shadow:0 24px 60px rgba(0,0,0,.24);color:#fff}
.promo-top{font-size:11px;font-weight:800;letter-spacing:.16em}
.promo h3{font-size:28px;line-height:1.05;text-transform:uppercase;margin:16px 0 10px}
.promo-band{background:rgba(10,10,10,.5);border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700;display:inline-block}
.promo p{color:#e9f3ff;font-size:13.5px;line-height:1.5;margin:14px 0 16px}

/* siatka specjalistów: 6 kolumn, portretowe kafle */
.trainer-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.tcard{display:block}
.tphoto{position:relative;display:grid;place-items:center;aspect-ratio:1/1.05;border-radius:18px;overflow:hidden}
.tphoto img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.tinitials{font-family:Manrope,sans-serif;font-weight:800;font-size:38px;color:#12160f;letter-spacing:-.04em}
.heart{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(255,255,255,.7);background:rgba(0,0,0,.28);color:#fff;cursor:pointer;font-size:15px;line-height:1}
.heart:hover{background:rgba(0,0,0,.5)}
.tcard h3{font-size:16px;margin-top:12px;letter-spacing:-.02em}
.tmeta{font-size:12px;color:var(--muted);line-height:1.45;margin-top:4px}
.trating{font-size:12px;font-weight:800;margin-top:8px}
.trating span{color:#ffb000}
.trating em{font-style:normal;font-weight:500;color:var(--muted)}

/* kafle kategorii */
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:34px}
.tile{height:150px;border-radius:18px;overflow:hidden;position:relative;color:#fff;padding:20px;
  display:flex;align-items:flex-end}
.tile:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 12%,rgba(0,0,0,.52) 58%,rgba(0,0,0,.88) 100%)}
.tile>*{position:relative;z-index:2}
.tile strong{font-family:Manrope,sans-serif;font-size:22px;line-height:1.08;display:block;letter-spacing:-.03em;
  text-shadow:0 1px 12px rgba(0,0,0,.5)}
.tile small{display:block;font-size:14.5px;line-height:1.25;margin-top:5px;color:rgba(255,255,255,.92);
  text-shadow:0 1px 10px rgba(0,0,0,.55)}
.til-1{background:linear-gradient(150deg,#2f3a2c,#55703f)}
.til-2{background:linear-gradient(150deg,#26333f,#3d5f7a)}
.til-3{background:linear-gradient(150deg,#3b2c3f,#6b4a72)}
.til-4{background:linear-gradient(150deg,#2c3a3a,#3f6f6b)}
.til-5{background:linear-gradient(150deg,#3f372a,#7a6440)}

/* wydarzenia: okładka + biała data */
.event-wrap{display:grid;grid-template-columns:1fr 330px;gap:20px;align-items:start}
.events{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ecard{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:transform .15s ease,box-shadow .15s ease}
.ecard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ecover{position:relative;display:block;height:112px}
.cov-1{background:linear-gradient(150deg,#33402f,#5d7a45)}
.cov-2{background:linear-gradient(150deg,#293642,#41647f)}
.cov-3{background:linear-gradient(150deg,#3d2e41,#6f4d76)}
.cov-4{background:linear-gradient(150deg,#2e3c3c,#42736f)}
.cov-5{background:linear-gradient(150deg,#41382b,#7e6742)}
.datebox{position:absolute;top:10px;left:10px;background:#fff;padding:8px 10px;border-radius:12px;
  text-align:center;font-weight:800;font-size:12px;line-height:1.1;color:var(--ink)}
.ebody{display:block;padding:14px}
.ebody h3{font-size:15px;line-height:1.25;letter-spacing:-.02em}
.emeta{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.etag{display:inline-block;margin-top:10px;background:#f0f2ed;border-radius:999px;padding:6px 9px;
  font-size:10px;font-weight:700;color:#555;letter-spacing:.04em;text-transform:uppercase}

/* newsletter */
.newsletter{background:#fff;border-radius:22px;padding:24px;border:1px solid var(--line)}
.newsletter h3{font-size:24px}
.newsletter p{color:var(--muted);font-size:14px;line-height:1.5;margin:10px 0 0}
.newsletter form{display:flex;border:1px solid var(--line);border-radius:999px;padding:5px;margin-top:18px}
.newsletter input[type=email]{border:0;outline:0;flex:1;padding:10px 14px;background:transparent;min-width:0}
.newsletter button{width:42px;height:42px;border-radius:50%;border:0;background:var(--dark);color:#fff;cursor:pointer;font-size:16px}
.consent{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--muted);margin-top:14px;line-height:1.4}

/* pasmo społeczności */
.community{background:var(--bg);padding:0;margin-top:20px}
.community-inner{min-height:240px;display:flex;justify-content:space-between;align-items:center;gap:30px;
  background:linear-gradient(120deg,#0c100e,#1b221d);border-top:3px solid var(--accent);
  border-radius:28px 28px 0 0;padding:44px;color:#fff}
.community h2{font-size:clamp(28px,4vw,40px)}
.community p{color:#d9ddda;margin:12px 0 0;max-width:46ch}

@media(max-width:1100px){
  .trainer-grid{grid-template-columns:repeat(3,1fr)}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .event-wrap{grid-template-columns:1fr}
}
@media(max-width:820px){
  .promo{justify-self:start;width:100%}
  .community-inner{flex-direction:column;align-items:flex-start;padding:30px}
}
@media(max-width:620px){
  .trainer-grid{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:1fr 1fr}
  .events{grid-template-columns:1fr}
  .searchbar{grid-template-columns:1fr 54px;padding-left:16px}
  .searchbar .location{display:none}
}

/* --- opinie na stronie głównej --- */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:0;
  display:flex;flex-direction:column;gap:14px}
.quote p{font-size:14.5px;line-height:1.6;margin:0;flex:1}
.qstars{letter-spacing:.1em;font-size:13px;color:var(--line)}
.qstars span{color:#ffb000}
.quote footer{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding:14px 0 0;margin:0;background:none;color:inherit;font-size:inherit}
.qwho{display:flex;align-items:center;gap:11px}
.qav{width:42px;height:42px;min-width:42px;border-radius:12px;display:grid;place-items:center;overflow:hidden;
  font-family:Manrope,sans-serif;font-weight:800;font-size:15px;color:#12160f}
.qav img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.qwho b{display:block;font-size:14px}
.qwho small{display:block;font-size:12px;color:var(--muted)}
.quote cite{font-style:normal;font-size:12.5px;color:var(--muted)}

/* --- pasek miast --- */
.citystrip{display:flex;flex-wrap:wrap;gap:10px}
.citychip{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 18px;
  cursor:pointer;text-align:left;transition:transform .12s ease,border-color .12s ease}
.citychip:hover{transform:translateY(-2px);border-color:var(--accent-2)}
.citychip b{display:block;font-family:Manrope,sans-serif;font-size:15px;letter-spacing:-.02em}
.citychip small{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* --- zdjęcia profilowe ---
   Bez welonu i bez przebarwień. Zdjecie czyste, kolor profilu pracuje jako
   miekka poswiata pod kaflem i cienki pierscien. --tone dziedziczy sie z klasy .av-*,
   dlatego NIE deklarujemy go tutaj (nadpisalby palete). */
.photomask{position:relative;background:#eceee8}
.photomask img{mix-blend-mode:normal;filter:none}
.tphoto.photomask{padding:0;border-radius:18px;overflow:hidden;
  box-shadow:0 12px 26px -14px rgba(var(--tone,120,130,115),.95), inset 0 0 0 1px rgba(15,20,12,.07)}
.tphoto.photomask img{border-radius:18px}
.tphoto.photomask .heart{z-index:3}
.photo-frame.photomask{padding:0;border-radius:26px;overflow:hidden;
  box-shadow:0 14px 30px -16px rgba(var(--tone,120,130,115),.95), inset 0 0 0 1px rgba(15,20,12,.08)}
.photo-frame.photomask img{border-radius:26px}
.qav.photomask{box-shadow:inset 0 0 0 1px rgba(15,20,12,.1)}

/* --- wydarzenia: układ agendy (wiersze z dużą datą) --- */
.agenda{display:flex;flex-direction:column;gap:10px}
.arow{display:grid;grid-template-columns:76px 1fr 32px;gap:18px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px;
  position:relative;overflow:hidden;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.arow:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:rgb(var(--tone))}
.arow:hover{transform:translateX(3px);box-shadow:var(--shadow);border-color:transparent}
.tone-1{--tone:223,255,69}
.tone-2{--tone:127,197,240}
.tone-3{--tone:169,157,240}
.tone-4{--tone:143,217,182}
.tone-5{--tone:245,196,81}
.adate{text-align:center;line-height:1;padding-left:4px}
.adate b{display:block;font-family:Manrope,sans-serif;font-size:30px;letter-spacing:-.04em}
.amon{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--muted);margin-top:4px}
.aday{display:block;font-size:10.5px;color:var(--muted);margin-top:3px;text-transform:lowercase}
.abody{min-width:0}
.atop{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex-wrap:wrap}
.amode{font-size:11px;color:var(--muted);text-transform:lowercase}
.abody h3{font-size:16.5px;line-height:1.25;letter-spacing:-.02em}
.arow .emeta{margin-top:5px}
.ago{font-size:18px;color:var(--muted);text-align:right}
.arow:hover .ago{color:var(--ink)}
@media(max-width:520px){
  .arow{grid-template-columns:58px 1fr;gap:14px;padding:14px}
  .adate b{font-size:24px}
  .ago{display:none}
}

/* --- kafle kategorii, wersja 2: jasne karty z kolorowym znacznikiem --- */
.tile2{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;min-height:158px;
  display:grid;grid-template-rows:auto 1fr auto;gap:12px;position:relative;overflow:hidden;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.tile2:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:rgb(var(--tone))}
.tile2:hover{transform:translateY(-4px);box-shadow:0 16px 32px -18px rgba(var(--tone),.9);border-color:transparent}
.t2chip{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:17px;color:#12160f;
  background:linear-gradient(140deg,rgba(var(--tone),1),rgba(var(--tone),.62))}
.t2txt strong{display:block;font-family:Manrope,sans-serif;font-size:19px;letter-spacing:-.03em;line-height:1.1}
.t2txt small{display:block;font-size:13px;color:var(--muted);margin-top:5px;line-height:1.35}
.t2go{justify-self:end;font-size:17px;color:var(--muted);transition:transform .14s ease,color .14s ease}
.tile2:hover .t2go{color:var(--ink);transform:translateX(3px)}

/* =========================================================
   IMPAKT — kontrast skali zamiast rytmu równych kart.
   ========================================================= */

/* hero: pełna szerokość, wielka typografia, limonkowa płyta pod słowem */
.hero{border-radius:0;min-height:600px;display:flex;align-items:center}
.hero .container{display:block;padding:92px 0 12px}
.hero-main{max-width:900px}
.hero h1{font-size:clamp(42px,8vw,86px);line-height:1.12;letter-spacing:-.05em;margin:20px 0 26px;max-width:none}
.hero h1 em{font-style:normal;color:#12160f;background:var(--accent);padding:.04em .12em .1em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;border-radius:3px}
.hero .lead{font-size:19px;max-width:48ch;margin:26px 0 30px}
.searchbar{max-width:660px}
/* pasek liczb: typografia, nie kafle */
.herostats{display:flex;flex-wrap:wrap;gap:0;margin-top:56px;border-top:1px solid rgba(255,255,255,.16)}
.herostats span{flex:1;min-width:140px;padding:22px 24px 26px 0;display:flex;flex-direction:column;gap:4px;
  font-size:13px;color:#b9c0b8;letter-spacing:.02em}
.herostats b{font-family:Manrope,sans-serif;font-size:clamp(30px,4vw,44px);line-height:1;letter-spacing:-.04em;color:#fff}
.herostats span:first-child b{color:var(--accent)}

/* pasmo kategorii: ciemne, duże wiersze, hover zalewa limonką */
.navband{background:var(--dark);border-radius:var(--radius);overflow:hidden;margin:8px 0 0;padding:0}
.nbrow{display:grid;grid-template-columns:76px minmax(0,1fr) minmax(0,1.1fr) 56px;align-items:center;gap:16px;
  padding:26px 28px;border-top:1px solid rgba(255,255,255,.1);color:#fff;transition:background .16s ease,color .16s ease}
.nbrow:first-child{border-top:0}
.nbnum{font-family:Manrope,sans-serif;font-size:13px;font-weight:800;letter-spacing:.14em;color:#7e887c}
.nblabel{font-family:Manrope,sans-serif;font-size:clamp(22px,3vw,34px);letter-spacing:-.035em;line-height:1}
.nbsub{font-size:14px;color:#b9c0b8}
.nbgo{font-size:20px;text-align:right;color:#7e887c;transition:transform .16s ease}
.nbrow:hover{background:var(--accent);color:#12160f}
.nbrow:hover .nbnum,.nbrow:hover .nbsub,.nbrow:hover .nbgo{color:#12160f}
.nbrow:hover .nbgo{transform:translateX(6px)}

/* opinie: jeden wielki cytat + dwa wsparcia */
.proof{display:grid;grid-template-columns:1.35fr .65fr;gap:40px;align-items:start}
.proof-lead blockquote{font-family:Manrope,sans-serif;font-size:clamp(24px,3.4vw,40px);line-height:1.14;
  letter-spacing:-.035em;margin:14px 0 26px;text-wrap:balance}
.proof-by{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.proof-by cite{font-style:normal;font-size:13px;color:var(--muted)}
.proof-side{display:flex;flex-direction:column;gap:16px;padding-top:8px}
.qmini{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;margin:0}
.qmini p{font-size:13.5px;line-height:1.55;margin:0 0 14px}
.qmini footer{border-top:1px solid var(--line);padding-top:13px;background:none;margin:0}

@media(max-width:980px){
  .proof{grid-template-columns:1fr;gap:26px}
  .nbrow{grid-template-columns:52px minmax(0,1fr) 40px;padding:20px}
  .nbsub{display:none}
}
@media(max-width:620px){
  .hero{min-height:auto}
  .hero .container{padding:44px 0 0}
  .herostats{margin-top:34px}
  .herostats span{min-width:50%;padding:16px 12px 18px 0}
}

/* --- hero ze zdjęciem + promo najbliższego wydarzenia --- */
.hero{position:relative}
.hero:before{background:
  linear-gradient(94deg,rgba(8,12,10,.95) 0%,rgba(8,12,10,.88) 34%,rgba(8,12,10,.55) 62%,rgba(8,12,10,.72) 100%),
  radial-gradient(900px 420px at 74% 12%,rgba(223,255,69,.16),transparent 62%),
  url('/assets/hero/hero-silownia.jpg') center 28%/cover no-repeat,
  #0c100e}
.hero .container{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  grid-template-areas:"main promo" "stats stats" "credit credit";
  column-gap:48px;align-items:center;padding:82px 0 14px}
.hero-main{grid-area:main;max-width:760px}
.hero .promo{grid-area:promo}
.herostats{grid-area:stats}
.herocredit{grid-area:credit;font-size:11.5px;color:#8c948a;padding:10px 0 18px;letter-spacing:.01em}
.herocredit a{text-decoration:underline;text-underline-offset:2px}
.hero h1{font-size:clamp(40px,6.6vw,74px)}

/* promo: mocna karta, bez cukierkowego cienia */
.promo{width:100%;max-width:340px;justify-self:end;background:rgba(12,17,13,.72);
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);border-left:4px solid var(--accent);
  border-radius:20px;padding:24px;box-shadow:none;color:#fff}
.promo-top{font-size:10.5px;font-weight:800;letter-spacing:.18em;color:var(--accent)}
.promo h3{font-family:Manrope,sans-serif;font-size:25px;line-height:1.08;letter-spacing:-.035em;
  text-transform:none;margin:14px 0 6px}
.promo-where{font-size:13px;color:#c2c8c1}
.promo-band{display:inline-flex;align-items:baseline;gap:7px;background:rgba(255,255,255,.1);
  border-radius:999px;padding:7px 13px;font-size:12px;font-weight:700;margin:14px 0 0}
.promo-band b{font-family:Manrope,sans-serif;font-size:17px;letter-spacing:-.03em}
.promo p{color:#c2c8c1;font-size:13px;line-height:1.5;margin:14px 0 16px}

@media(max-width:980px){
  .hero .container{grid-template-columns:1fr;grid-template-areas:"main" "promo" "stats" "credit";row-gap:28px}
  .promo{justify-self:start;max-width:none}
}

/* =========================================================
   HERO wg mocka: jasne zdjęcie widoczne po prawej, czysty biały nagłówek,
   niebieska karta promo z pasem zdjęcia i pastylką daty.
   ========================================================= */
.hero:before{background:
  linear-gradient(90deg,rgba(8,12,10,.90) 0%,rgba(8,12,10,.60) 34%,rgba(8,12,10,.14) 62%,rgba(8,12,10,.30) 100%),
  url('/assets/hero/hero-silownia.jpg') center 30%/cover no-repeat,
  #0c100e}
.hero .container{grid-template-areas:"main promo" "credit credit";
  align-items:center;padding:64px 0 22px;min-height:560px}
.hero h1{font-size:clamp(40px,5.6vw,68px);line-height:1.0;letter-spacing:-.042em;
  color:#fff;max-width:14ch;margin:18px 0 0}
.hero .lead{font-size:20px;line-height:1.55;color:#e8ebe8;max-width:44ch;margin:24px 0 30px}
.herocredit{padding:0 0 4px}

/* promo w niebieskiej tonacji mocka */
.promo{background:linear-gradient(180deg,#4aa6e8,#2d72bb);border:1px solid rgba(255,255,255,.55);
  border-left-width:1px;border-radius:24px;padding:24px;backdrop-filter:none;
  box-shadow:0 24px 60px rgba(0,0,0,.24);max-width:320px}
.promo-top{color:#eaf4ff;letter-spacing:.16em}
.promo h3{font-size:26px;text-transform:uppercase;line-height:1.06;margin:16px 0 8px}
.promo-where{color:#e9f3ff;font-size:13px;line-height:1.5}
.promo-shot{height:132px;border-radius:18px;margin:18px 0;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#9fc7a6,#5d8f6b)}
.promo-shot.cov-2{background:linear-gradient(160deg,#a8c6dd,#4f7f9e)}
.promo-shot.cov-3{background:linear-gradient(160deg,#c2b3d6,#7a5f97)}
.promo-shot.cov-4{background:linear-gradient(160deg,#a9cfc8,#4f8b83)}
.promo-shot.cov-5{background:linear-gradient(160deg,#dcc9a3,#9c7c46)}
.promo-date{position:absolute;left:14px;bottom:12px;background:rgba(10,10,10,.66);color:#fff;
  padding:7px 11px;border-radius:999px;font-size:12px;font-weight:700}

/* --- hero: powrót do wersji z limonkową płytą i paskiem liczb, nowe zdjęcie --- */
.hero:before{background:
  linear-gradient(94deg,rgba(8,12,10,.94) 0%,rgba(8,12,10,.86) 32%,rgba(8,12,10,.52) 60%,rgba(8,12,10,.66) 100%),
  radial-gradient(880px 420px at 76% 14%,rgba(223,255,69,.14),transparent 62%),
  url('/assets/hero/hero-unsplash.jpg') center 42%/cover no-repeat,
  #0c100e}
.hero .container{grid-template-areas:"main promo" "stats stats" "credit credit";
  align-items:center;padding:82px 0 14px;min-height:600px}
.hero h1{font-size:clamp(42px,8vw,86px);line-height:1.12;letter-spacing:-.05em;
  color:#fff;max-width:none;margin:20px 0 26px}
.hero h1 em{font-style:normal;color:#12160f;background:var(--accent);padding:.04em .12em .1em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;border-radius:3px}
.hero .lead{font-size:19px;max-width:48ch;margin:26px 0 30px;color:#d3d8d2}
/* promo znów ciemne, szklane, z limonkową krawędzią */
.promo{background:rgba(12,17,13,.74);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);border-left:4px solid var(--accent);
  border-radius:20px;box-shadow:none;max-width:340px}
.promo h3{font-size:25px;text-transform:none;margin:14px 0 6px}
.promo-top{color:var(--accent);letter-spacing:.18em}
.promo-where{color:#c2c8c1}
.promo p{color:#c2c8c1}

/* --- opinie w kontrze: ciemne pasmo przerywające jasną stronę --- */
.proof{background:linear-gradient(118deg,#0c100e 0%,#151b17 55%,#1b221d 100%);
  border-radius:28px;padding:52px;margin:8px 0;color:#fff;
  grid-template-columns:1.3fr .7fr;gap:48px;align-items:center;position:relative;overflow:hidden}
.proof:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(720px 340px at 88% 8%,rgba(223,255,69,.15),transparent 62%)}
.proof>*{position:relative;z-index:1}
.proof .kicker{color:var(--accent);margin-bottom:18px}
.proof-lead blockquote{color:#fff;font-size:clamp(23px,3.1vw,38px);line-height:1.16;margin:0 0 30px}
.proof-by{gap:20px}
.proof-by .qwho b{color:#fff}
.proof-by .qwho small{color:#aab2a8}
.proof-by cite{color:#8c948a}
.proof-side{gap:14px;padding-top:0}
.qmini{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:18px}
.qmini p{color:#e2e6e1}
.qmini footer{border-top:1px solid rgba(255,255,255,.14);padding-top:12px}
.qmini footer .qwho b{color:#fff}
.qmini footer .qwho small{color:#aab2a8}
.proof .link-more{color:#fff;border-bottom-color:var(--accent)}
@media(max-width:980px){.proof{padding:34px;gap:28px}}
@media(max-width:620px){.proof{padding:26px;border-radius:22px}}