/* SK Hajany common styles */

:root{

  --green:#76b82a;

  --dark:#061f1d;

  --white:#fff;

  --cream:#f4f7f2;

  --text:#10231e;

  --muted:#62736c;

  --line:#dfe8e2;

  --wrap:1240px;

  --shadow:0 20px 55px rgba(6,31,29,.16);

}



*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--cream);color:var(--text)}

a{text-decoration:none;color:inherit}



.topbar{

  position:sticky;

  top:0;

  z-index:100;

  background:rgba(255,255,255,.97);

  border-bottom:1px solid var(--line);

  box-shadow:0 4px 18px rgba(0,0,0,.04);

}



.nav{

  max-width:var(--wrap);

  margin:0 auto;

  min-height:92px;

  padding:12px 24px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:22px;

}



.brand{

  display:flex;

  align-items:center;

  gap:14px;

  flex:0 0 auto;

}



.logo{

  width:74px;

  height:74px;

  border-radius:50%;

  object-fit:contain;

  display:block;

}



.brand strong{

  display:block;

  font-size:22px;

  line-height:1;

  color:var(--dark);

  letter-spacing:.2px;

}



.brand span{

  display:block;

  margin-top:5px;

  color:var(--green);

  font-size:13px;

  font-weight:900;

  text-transform:uppercase;

  letter-spacing:.8px;

}



.brand small{

  display:block;

  margin-top:4px;

  font-size:12px;

  font-weight:900;

  color:var(--dark);

}



.menu{

  display:flex;

  align-items:center;

  gap:20px;

  font-size:12px;

  font-weight:900;

  text-transform:uppercase;

  white-space:nowrap;

}



.menu a{

  padding:10px 0;

  border-bottom:3px solid transparent;

}



.menu a:hover,

.menu a.active{

  color:var(--green);

  border-bottom-color:var(--green);

}



.header-actions{

  display:flex;

  align-items:center;

  gap:12px;

  flex:0 0 auto;

}



.trainer-login{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:44px;

  padding:0 18px;

  border-radius:10px;

  background:var(--dark);

  color:#fff;

  font-size:13px;

  font-weight:900;

  text-transform:uppercase;

  white-space:nowrap;

}



.trainer-login:hover{

  background:#0b332f;

  color:#fff;

}



.join{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:44px;

  padding:0 20px;

  border-radius:10px;

  background:var(--green);

  color:#fff;

  font-size:13px;

  font-weight:900;

  text-transform:uppercase;

  white-space:nowrap;

}



.hero{

  background:var(--dark);

  color:#fff;

  overflow:hidden;

  padding:0 24px;

}



.hero-grid{

  width:100%;

  max-width:var(--wrap);

  margin:0 auto;

  display:grid;

  grid-template-columns:minmax(340px,380px) repeat(5,minmax(115px,1fr));

  min-height:clamp(430px,44vw,585px);

  overflow:hidden;

  background:var(--dark);

}



.hero-copy{

  position:relative;

  padding:56px 42px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  z-index:4;

  background:linear-gradient(90deg,rgba(6,31,29,.96),rgba(6,31,29,.78)),url('/img/hero-hory.jpg') center/cover no-repeat;

}



.badge{

  width:fit-content;

  margin-bottom:22px;

  padding:9px 14px;

  border-radius:999px;

  border:1px solid rgba(255,255,255,.28);

  background:rgba(255,255,255,.08);

  font-size:11px;

  font-weight:900;

  letter-spacing:.8px;

  text-transform:uppercase;

  color:rgba(255,255,255,.88);

}



h1{

  margin:0;

  max-width:360px;

  font-size:58px;

  line-height:1;

  letter-spacing:-1.5px;

  text-transform:uppercase;

}



h1 span{

  display:block;

  color:var(--green);

  white-space:nowrap;

}



.hero-copy p{

  margin:24px 0 28px;

  max-width:325px;

  font-size:16px;

  line-height:1.55;

  color:rgba(255,255,255,.9);

}



.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  width:max-content;

  min-height:46px;

  padding:0 20px;

  border-radius:9px;

  background:var(--green);

  color:#fff;

  font-size:13px;

  font-weight:900;

  text-transform:uppercase;

}



.sport-panel{

  position:relative;

  min-height:clamp(430px,44vw,585px);

  background-size:cover;

  background-position:center;

  overflow:hidden;

  clip-path:polygon(11% 0,100% 0,89% 100%,0 100%);

  margin-left:-22px;

  border-left:5px solid rgba(255,255,255,.94);

}



.sport-panel:first-of-type{

  margin-left:0;

}



.sport-panel:before{

  content:"";

  position:absolute;

  inset:0;

  background:linear-gradient(180deg,rgba(6,31,29,.02) 0%,rgba(6,31,29,.08) 45%,rgba(6,31,29,.50) 100%);

}



.sport-panel:after{

  content:"";

  position:absolute;

  left:0;

  right:0;

  bottom:0;

  height:32%;

  background:linear-gradient(180deg,transparent,rgba(6,31,29,.52));

}



.sport-name{

  position:absolute;

  z-index:3;

  left:50%;

  bottom:38px;

  transform:translateX(-50%);

  text-align:center;

  color:#fff;

  font-size:17px;

  font-weight:900;

  text-transform:uppercase;

  letter-spacing:.4px;

  text-shadow:0 3px 16px rgba(0,0,0,.55);

}



.section{

  max-width:var(--wrap);

  margin:0 auto;

  padding:62px 24px 0;

}



.section-row{

  display:grid;

  grid-template-columns:300px 1fr 320px;

  gap:42px;

  align-items:start;

}



h2{

  margin:0;

  color:var(--dark);

  font-size:34px;

  line-height:1.08;

  letter-spacing:-.8px;

}



.why{

  display:grid;

  gap:22px;

}



.why-item{

  display:grid;

  grid-template-columns:44px 1fr;

  gap:14px;

  align-items:start;

}



.why-icon{

  width:44px;

  height:44px;

  border-radius:14px;

  background:#eef7e8;

  color:var(--green);

  display:grid;

  place-items:center;

  font-size:22px;

  font-weight:900;

}



.why-item strong{

  display:block;

  margin-bottom:5px;

  color:var(--green);

  font-size:14px;

  text-transform:uppercase;

}



.why-item p{

  margin:0;

  color:var(--muted);

  line-height:1.45;

}



.news-head{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:18px;

  margin-bottom:22px;

}



.outline{

  padding:12px 18px;

  border:2px solid var(--dark);

  border-radius:8px;

  font-size:12px;

  font-weight:900;

  text-transform:uppercase;

  color:var(--dark);

}



.news-grid{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:18px;

}



.card{

  background:#fff;

  border:1px solid var(--line);

  border-radius:16px;

  overflow:hidden;

  box-shadow:0 12px 30px rgba(6,31,29,.07);

}



.card-img{

  height:145px;

  background-size:cover;

  background-position:center;

  position:relative;

}



.date{

  position:absolute;

  left:12px;

  bottom:12px;

  background:rgba(6,31,29,.92);

  color:#fff;

  border-radius:6px;

  padding:6px 8px;

  font-size:11px;

  font-weight:900;

}



.card-body{

  padding:17px;

}



.card-body h3{

  margin:0 0 8px;

  font-size:17px;

  color:var(--dark);

}



.card-body p{

  margin:0 0 14px;

  color:var(--muted);

  font-size:14px;

  line-height:1.45;

}



.link{

  font-size:12px;

  font-weight:900;

  text-transform:uppercase;

  color:var(--dark);

}



.club-card{

  min-height:365px;

  border-radius:0 0 0 48px;

  padding:34px;

  color:#fff;

  display:flex;

  flex-direction:column;

  justify-content:center;

  background:linear-gradient(180deg,rgba(6,31,29,.70),rgba(6,31,29,.93)),url('/img/hajany-priroda.jpg') center/cover no-repeat;

  box-shadow:var(--shadow);

}



.club-card h3{

  margin:0;

  font-size:30px;

  text-transform:uppercase;

}



.club-card span{

  display:block;

  margin-top:6px;

  color:var(--green);

  font-weight:900;

  text-transform:uppercase;

}



.club-card p{

  margin:24px 0 0;

  color:rgba(255,255,255,.86);

  font-size:17px;

  line-height:1.52;

}



.season-section{

  margin-top:62px;

  padding:52px 0;

  background:#fff;

  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);

}



.season-grid{

  max-width:var(--wrap);

  margin:0 auto;

  padding:0 24px;

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:18px;

}



.season{

  min-height:220px;

  border-radius:22px;

  padding:24px;

  color:#fff;

  background:var(--c);

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  box-shadow:0 13px 30px rgba(6,31,29,.10);

}



.season small{

  font-weight:900;

  text-transform:uppercase;

  opacity:.86;

}



.season h3{

  margin:10px 0 8px;

  font-size:24px;

  text-transform:uppercase;

}



.season p{

  margin:0;

  line-height:1.45;

  color:rgba(255,255,255,.9);

}



.footer-cta{

  margin-top:0;

  background:var(--dark);

  color:#fff;

}



.footer-grid{

  max-width:var(--wrap);

  margin:0 auto;

  padding:36px 24px;

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:22px;

}



.footer-item strong{

  display:block;

  color:var(--green);

  text-transform:uppercase;

  margin-bottom:8px;

}



.footer-item p{

  margin:0 0 9px;

  color:rgba(255,255,255,.78);

  font-size:14px;

  line-height:1.45;

}



.footer-item a{

  font-weight:900;

  font-size:12px;

  text-transform:uppercase;

  color:#fff;

}



.site-footer{

  padding:18px;

  background:#03120f;

  color:rgba(255,255,255,.65);

  text-align:center;

  font-size:13px;

}



@media(max-width:1100px){

  .nav{

    flex-wrap:wrap;

    justify-content:flex-start;

  }



  .menu{

    order:3;

    width:100%;

    flex-wrap:wrap;

    gap:16px;

  }



  .header-actions{

    margin-left:auto;

  }

}



@media(max-width:760px){

  .menu{

    display:none;

  }



  .hero{

    padding:0;

  }



  .hero-grid{

    max-width:none;

    grid-template-columns:1fr;

    min-height:auto;

  }



  .hero-copy{

    padding:48px 24px;

  }



  .sport-panel{

    clip-path:none;

    margin-left:0;

    border-left:0;

    border-top:4px solid #fff;

    min-height:230px;

  }



  .section-row{

    grid-template-columns:1fr;

  }



  .season-grid,

  .footer-grid{

    grid-template-columns:1fr;

  }



  .header-actions{

    width:100%;

    margin-left:0;

    justify-content:flex-start;

    flex-wrap:wrap;

  }

}



@media(max-width:650px){

  .nav{

    padding:12px 16px;

  }



  .brand strong{

    font-size:18px;

  }



  .brand span{

    font-size:11px;

  }



  .logo{

    width:58px;

    height:58px;

  }



  .trainer-login,

  .join{

    min-height:40px;

    padding:0 14px;

    font-size:12px;

  }



  .hero-copy h1{

    font-size:42px;

  }



  .news-grid,

  .season-grid,

  .footer-grid{

    grid-template-columns:1fr;

  }



  .section{

    padding:48px 16px 0;

  }



  .season-section{

    margin-top:48px;

  }

}