/* ujoga.pl — wspólne style (PL + EN) */

@font-face{font-family:'Metropolis';src:url('fonts/Metropolis-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Metropolis';src:url('fonts/Metropolis-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Metropolis';src:url('fonts/Metropolis-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Metropolis';src:url('fonts/Metropolis-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Metropolis';src:url('fonts/Metropolis-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}

:root{
  --teal-dark:#002d2b;
  --teal-mid:#01998e;
  --teal-mid-hover:#017b72;
  --yellow:#fefe67;
  --text-dark:#12302f;
  --max-w:1200px;
  --header-h:92px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 8px); -webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'Metropolis', Arial, sans-serif;
  color:var(--text-dark);
  background:var(--teal-dark);
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Metropolis', Arial, sans-serif; font-weight:700; color:var(--teal-dark);}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--max-w); margin:0 auto; padding:0 24px;}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ---------- Header ---------- */
.site-header{
  background:var(--teal-dark);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.header-inner{
  max-width:var(--max-w); margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:var(--header-h);
}
.logo{display:flex; align-items:center; text-decoration:none; flex-shrink:0;}
/* logo-trim.png jest przycięte do samej zawartości, więc wysokość = realny rozmiar napisu */
.logo img{height:66px; width:auto;}

.main-nav{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.main-nav a{
  display:inline-block; background:var(--teal-mid); color:#fff;
  padding:10px 18px; border-radius:999px; text-decoration:none;
  font-weight:600; font-size:0.92rem; white-space:nowrap;
  transition:background 0.15s ease;
}
.main-nav a:hover, .main-nav a:focus-visible{background:var(--teal-mid-hover);}
.nav-lang{display:none;}

.header-actions{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.flags{display:flex; gap:8px;}
.flag-btn{width:26px; height:18px; border-radius:3px; overflow:hidden; border:none; padding:0; cursor:pointer; display:block; transition:opacity 0.15s ease;}
.flag-btn:hover{opacity:0.85;}
.flag-btn.is-active{opacity:0.5; cursor:default; pointer-events:none;}
.flag-btn svg{display:block; width:100%; height:100%;}
.badge-cert{width:60px; height:60px; flex-shrink:0;}
.badge-cert img{width:100%; height:100%;}

.nav-toggle{
  display:none; background:none; border:2px solid var(--teal-mid); border-radius:10px;
  width:46px; height:44px; cursor:pointer; flex-shrink:0; position:relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; height:2px; background:var(--teal-mid);
  transition:transform 0.18s ease, background 0.18s ease;
}
.nav-toggle span{left:10px; right:10px; top:19px;}
.nav-toggle span::before, .nav-toggle span::after{left:0; right:0;}
.nav-toggle span::before{top:-7px;}
.nav-toggle span::after{top:7px;}
body.nav-open .nav-toggle span{background:transparent;}
body.nav-open .nav-toggle span::before{transform:translateY(7px) rotate(45deg);}
body.nav-open .nav-toggle span::after{transform:translateY(-7px) rotate(-45deg);}

/* ---------- Hero ---------- */
.hero{
  width:100%; aspect-ratio:16/7; min-height:220px;
  background-color:#3f6b4a;
  background-image:url('images/hero.jpg');
  background-size:cover; background-position:center 30%;
}

/* ---------- Gradient wrapper ---------- */
.gradient-bg{background:linear-gradient(160deg, var(--teal-mid) 0%, var(--yellow) 100%);}

section{padding:56px 0;}

/* Intro cards */
.intro-cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; padding-top:8px;}
.intro-card{text-align:center;}
.intro-card .icon{width:46px; height:46px; margin:0 auto 14px;}
.intro-card h2{font-size:1.4rem; margin:0 0 14px;}
.intro-card p{margin:0 0 12px; font-size:0.97rem;}
.intro-card a{text-decoration:underline; font-weight:600;}
.schools-link{text-align:center; margin-top:8px;}
.schools-link a{text-decoration:underline; font-weight:700; font-size:1.02rem;}

/* Two column split sections */
.split{display:grid; grid-template-columns:1fr 1.3fr; gap:48px; align-items:center;}
.split .photo{
  width:100%; aspect-ratio:1/1; background-color:#4a7050; border-radius:4px;
  background-size:cover; background-position:center;
}
#o-mnie .photo{background-image:url('images/o-mnie.jpg');}
.split h2{font-size:1.4rem; margin:0 0 16px;}
.split p{margin:0 0 14px; font-size:0.97rem;}

.info-columns{display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:start;}
.info-columns .text-col{display:flex; flex-direction:column; gap:36px;}
.info-columns h2{font-size:1.4rem; margin:0 0 14px;}
.info-columns p{margin:0 0 14px; font-size:0.97rem;}
.contact-block p{margin:0 0 6px; font-size:0.95rem; overflow-wrap:anywhere;}
.contact-block .links{margin-top:14px;}
.contact-block .links a{display:block; text-decoration:underline; margin-bottom:4px; font-weight:600; padding:4px 0;}
.photo-col .photo{
  width:100%; aspect-ratio:4/5; background-color:#4a7050; border-radius:4px;
  background-size:cover; background-position:center;
  background-image:url('images/wspolpraca.jpg');
}

/* Footer */
footer{background:var(--teal-dark); color:#bcd9d3; text-align:center; padding:28px 24px; font-size:0.85rem;}
footer img{width:36px; height:auto; margin:0 auto 10px;}

/* ---------- Responsive ---------- */

/* Węższe ekrany desktopowe: ciaśniejsze przyciski menu */
@media (max-width:1240px){
  .main-nav a{padding:9px 14px; font-size:0.88rem;}
  .logo img{height:60px;}
  .header-inner{gap:14px;}
}

/* Tablet i telefon: menu rozwijane */
@media (max-width:1080px){
  :root{--header-h:80px;}
  .header-inner{padding:10px 20px; min-height:var(--header-h);}
  .logo img{height:56px;}
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--teal-dark);
    flex-direction:column; align-items:stretch; gap:0; padding:8px 20px 18px;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    border-bottom:1px solid rgba(255,255,255,0.08);
    box-shadow:0 14px 24px rgba(0,0,0,0.25);
    max-height:calc(100vh - var(--header-h)); overflow-y:auto;
  }
  .main-nav a{border-radius:12px; text-align:center; margin:5px 0; padding:14px 18px; font-size:1rem;}
  body.nav-open .main-nav{opacity:1; visibility:visible; transform:translateY(0);}
  .nav-toggle{display:block; order:3;}
  .header-actions{margin-left:auto; order:2;}
  .logo{order:0;}
  .main-nav{order:4;}
  .header-actions .flags{display:none;}
  .nav-lang{display:flex; gap:10px; justify-content:center; margin-top:10px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.1);}
  .main-nav .nav-lang a{
    display:inline-flex; align-items:center; gap:8px; margin:0; padding:10px 16px;
    background:transparent; border:1px solid rgba(255,255,255,0.28); font-size:0.95rem;
  }
  .main-nav .nav-lang a.is-active{opacity:0.5; pointer-events:none;}
  .nav-lang svg{width:24px; height:17px; border-radius:2px; flex-shrink:0;}

  .intro-cards{grid-template-columns:1fr; gap:36px;}
  .split, .info-columns{grid-template-columns:1fr;}
  .split .photo, .info-columns .photo-col .photo{order:-1; max-width:420px; margin:0 auto 8px;}
}

/* Telefon */
@media (max-width:560px){
  :root{--header-h:68px;}
  .header-inner{padding:8px 14px; gap:10px;}
  .logo img{height:46px;}
  .badge-cert{width:50px; height:50px;}
  .nav-toggle{width:44px; height:42px;}
  .wrap{padding:0 18px;}
  section{padding:40px 0;}
  .hero{aspect-ratio:1/1; background-position:center 25%;}
  .intro-card h2, .split h2, .info-columns h2{font-size:1.3rem;}
  .intro-card p, .split p, .info-columns p{font-size:1rem;}
  .split .photo, .info-columns .photo-col .photo{max-width:100%;}
}

/* Bardzo wąskie telefony (np. 320–360 px) */
@media (max-width:370px){
  .logo img{height:40px;}
  .badge-cert{width:44px; height:44px;}
  .header-inner{padding:8px 10px; gap:8px;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .main-nav, .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{transition:none;}
}

[hidden]{display:none !important;}

/* Podpis pod logo (wersja EN) — wyrównany do napisu w logo */
.logo.has-sub{flex-direction:column; align-items:flex-start; gap:3px;}
.logo-sub{
  font-size:0.62rem; font-weight:600; letter-spacing:0.34em; text-transform:uppercase;
  color:var(--teal-mid); padding-left:30%; line-height:1; white-space:nowrap;
}
@media (max-width:560px){ .logo-sub{font-size:0.5rem; letter-spacing:0.28em;} }