/* =========================================================
   AFL ATYRAU — «Ночной матч под прожекторами», на белом поле
   Светлый бумажный фон, чернильный текст; натриево-янтарный
   и каспийский бирюзовый — как яркие акценты и тёмная сцена
   героя-слайдера, сохраняющая атмосферу ночного матча.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Oswald:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap&subset=cyrillic-ext,cyrillic,latin');

:root{
  --bg:         #ffffff;
  --surface:    #f4f1ea;
  --surface-2:  #ebe6db;
  --night:      #001a0d;
  --ink:        #15181d;
  --ink-dim:    #6b6f76;
  --amber:      #003F22;
  --amber-deep: #002a17;
  --amber-2:    #4ecf8a;
  --teal:       #1a7a42;
  --line:       rgba(21,24,29,0.12);
  --shadow:     0 30px 80px -30px rgba(21,24,29,0.22);

  --on-dark:     #f4efe6;
  --on-dark-dim: #b9b8b2;

  --display: -apple-system, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'Montserrat', 'Arial Narrow', sans-serif;
  --head:    'Oswald', 'Arial Narrow', sans-serif;
  --mono:    'JetBrains Mono', monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--head);
  font-weight: 400;
  line-height: 1.55;
  overflow-x: hidden;
}

img,svg{ display:block; max-width:100%; }

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

::selection{ background: var(--amber); color: var(--bg); }

/* Subtle paper grain across the page */
body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  z-index: 999;
  mix-blend-mode: multiply;
  opacity:.5;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(21,24,29,.03), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(21,24,29,.025), transparent 45%);
}

.wrap{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
}

/* ---------- Headline / display type ---------- */
.kicker{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--amber-deep);
  display:flex;
  align-items:center;
  gap: 12px;
}
.kicker::before{
  content:"";
  width: 28px; height: 2px;
  background: var(--amber);
  display:inline-block;
}

.h-display{
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .98;
  font-weight: 800;
}

/* ---------- Header ---------- */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 500;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 22px clamp(20px,5vw,64px);
  background: rgba(0, 63, 34, 0.72);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  transition: background .35s ease, padding .35s ease, box-shadow .35s ease;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header.is-scrolled{
  background: rgba(0, 63, 34, 0.88);
  box-shadow: 0 8px 32px -8px rgba(0,20,10,.35);
  padding-top: 14px;
  padding-bottom: 14px;
}
@media (min-width: 701px){
  .site-header{ padding-left: 30px; }
}

.brand{
  display:flex;
  align-items:center;
  gap: 0;
}
.brand-svg{
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(0,63,34,.35));
}
.brand-mark{
  width: 48px; height: 48px;
  border-radius: 50%;
  display:grid; place-items:center;
  background: #003F22;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,63,34,.25), 0 8px 24px -8px rgba(0,63,34,.45);
  overflow: hidden;
}
.brand-mark::after{ display:none; }
.brand small{
  display:block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--ink-dim);
  font-weight: 400;
  margin-top: 2px;
}

nav.main-nav{
  display:flex;
  align-items:center;
  gap: clamp(18px, 2.6vw, 38px);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 500;
}
nav.main-nav a{
  position: relative;
  padding: 6px 2px;
  color: rgba(255,255,255,.7);
  transition: color .25s ease;
}
nav.main-nav a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height: 2px;
  background: #4ecf8a;
  transition: right .3s cubic-bezier(.2,.8,.2,1);
}
nav.main-nav a:hover, nav.main-nav a.active{ color: #fff; }
nav.main-nav a:hover::after, nav.main-nav a.active::after{ right:0; }

.lang-switch{
  display:flex;
  align-items:center;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  margin-left: clamp(8px, 1.4vw, 22px);
}
.lang-switch button{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.lang-switch button:hover{ color: #fff; }
.lang-switch button.is-active{
  color: #003F22;
  background: #fff;
}

/* ===== Бургер-кнопка (только мобильный) ===== */
.burger-btn{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  flex-shrink: 0;
}
.burger-btn span{
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease, width .3s ease;
}
.burger-btn span:nth-child(3){ width: 60%; }

/* ===== Мобильное меню-ящик ===== */
.mobile-menu{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
}
.mobile-menu.is-open{ pointer-events: all; }

.mobile-menu-inner{
  position: absolute;
  top: 0; right: 0;
  width: min(320px, 88vw);
  height: 100%;
  background: var(--amber, #003F22);
  box-shadow: -12px 0 48px rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  padding: 28px 28px 40px;
}
.mobile-menu.is-open .mobile-menu-inner{
  transform: translateX(0);
}

/* затемнение фона */
.mobile-menu::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .35s ease;
}
.mobile-menu.is-open::before{ opacity: 1; }

.mobile-menu-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 36px;
}
.mobile-menu-logo .brand-svg{
  width: 56px; height: 56px;
}
.mobile-menu-close{
  background: none;
  border: none;
  font-size: 22px;
  color: rgba(255,255,255,.8);
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}
.mobile-menu-close:hover{ color: #fff; }

.mobile-nav{
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.mobile-nav a{
  font-family: var(--head);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.18);
  letter-spacing: .01em;
  transition: color .2s ease, padding-left .2s ease;
}
.mobile-nav a:hover{
  color: #4ecf8a;
  padding-left: 8px;
}

.mobile-menu-lang{
  margin-top: 28px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  width: fit-content;
}
.mobile-menu-lang button{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.mobile-menu-lang button.is-active{
  color: #003F22;
  background: #fff;
}

.mobile-menu-social{
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.mobile-menu-social a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.mobile-menu-social a:hover{
  background: #fff;
  color: #003F22;
  border-color: #fff;
}
.mobile-menu-social svg{
  width: 20px;
  height: 20px;
}

/* ===== Мобильная адаптация хедера ===== */
@media (max-width: 700px){
  .site-header .brand{ display: none; }
  nav.main-nav{ display: none; }
  .site-header .header-btn-news{ display: none !important; }
  .burger-btn{ display: flex; }
  .mobile-menu{ display: block; }
  .site-header{
    padding: 14px 20px;
    justify-content: space-between;
    gap: 10px;
  }
  /* Переключатель языков — показываем в хедере на мобильном */
  .site-header .lang-switch{
    display: flex;
    margin-left: 0;
  }
}

.btn{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 13px 24px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  color: #fff;
  transition: all .3s ease;
  white-space: nowrap;
}
.btn:hover{
  border-color: var(--amber);
  background: var(--amber);
  color: var(--night);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(255,122,26,.4);
}
.btn .dot{ width:6px; height:6px; border-radius:50%; background: currentColor; }

/* ---------- Hero / fullscreen slider ---------- */
.hero{
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 700px){
  .hero{
    height: 75svh;
    min-height: 480px;
  }
}

/* Зоны клика слева/справа для переключения слайдов */
.hero-nav{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 35%;
  z-index: 5;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}
.hero-nav-prev{
  left: 0;
  cursor: w-resize;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' fill='rgba(0,0,0,0.15)' stroke='rgba(255,255,255,0.6)'/%3E%3Cpath d='M14 8l-4 4 4 4'/%3E%3C/svg%3E") 22 22, w-resize;
}
.hero-nav-next{
  right: 0;
  cursor: e-resize;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' fill='rgba(0,0,0,0.15)' stroke='rgba(255,255,255,0.6)'/%3E%3Cpath d='M10 8l4 4-4 4'/%3E%3C/svg%3E") 22 22, e-resize;
}
@media (max-width: 700px){
  .hero-nav{ cursor: default; }
}

.hero-slide{
  position:absolute; inset:0;
  opacity:0;
  visibility: hidden;
  transition: opacity 1.1s cubic-bezier(.4,0,.2,1), visibility 1.1s;
  z-index:1;
}
.hero-slide.is-active{ opacity:1; visibility: visible; z-index:2; }

.hero-bg{
  position:absolute; inset:-4%;
  background-size: cover;
  background-position:center;
  transform: scale(1.08);
  transition: transform 9s linear;
  filter: saturate(1.05);
}
.hero-slide.is-active .hero-bg{ transform: scale(1); }
/* overlay чтобы текст читался поверх фото */
.hero-bg[style*="background-image"]::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to right, rgba(0,20,10,.55) 0%, rgba(0,20,10,.28) 55%, rgba(0,20,10,.08) 100%);
}

/* generated "photo" textures per slide hue, in lieu of photography */
.tex-1{ background:
  radial-gradient(120% 90% at 78% 18%, rgba(78,207,138,.35), transparent 55%),
  radial-gradient(90% 70% at 14% 86%, rgba(0,90,45,.6), transparent 60%),
  repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 34px),
  linear-gradient(160deg, #012d14, #001a0d 62%); }
.tex-2{ background:
  radial-gradient(110% 85% at 20% 20%, rgba(0,90,45,.5), transparent 55%),
  radial-gradient(90% 70% at 85% 80%, rgba(78,207,138,.3), transparent 58%),
  repeating-linear-gradient(20deg, rgba(255,255,255,.04) 0 2px, transparent 2px 30px),
  linear-gradient(200deg, #022510, #001a0d 60%); }
.tex-3{ background:
  radial-gradient(100% 80% at 50% 0%, rgba(78,207,138,.28), transparent 50%),
  radial-gradient(80% 70% at 90% 100%, rgba(0,90,45,.5), transparent 55%),
  repeating-linear-gradient(155deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px),
  linear-gradient(170deg, #011f0c, #001a0d 65%); }

/* thematic scene illustration layered over each slide — visually ties the
   background to the subject of the news item (matches reference site's
   approach of using a contextual photo per slide, drawn here as line art) */
.hero-scene{
  position:absolute;
  z-index: 1;
  color: rgba(78,207,138,.16);
  mix-blend-mode: screen;
  pointer-events:none;
}
.hero-scene svg{ width:100%; height:100%; display:block; }
.scene-match{   width: clamp(360px,34vw,560px); aspect-ratio:1; right: -4%; top: 8%; color: rgba(255,138,61,.18); }
.scene-staff{   width: clamp(320px,30vw,480px); aspect-ratio:1; right: 4%; top: 14%; color: rgba(43,184,176,.22); }
.scene-ticket{  width: clamp(360px,32vw,520px); aspect-ratio:1; right: 0%; top: 16%; color: rgba(255,179,71,.18); }
.scene-academy, .scene-kit, .scene-friendly{ width: clamp(340px,30vw,500px); aspect-ratio:1; right: 2%; top: 14%; color: rgba(43,184,176,.2); }

.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,12,15,.15) 0%, rgba(10,12,15,.35) 55%, rgba(10,12,15,.85) 100%),
    linear-gradient(90deg, rgba(10,12,15,.45) 0%, rgba(10,12,15,.02) 45%);
}

.hero-figure{
  position:absolute;
  right: clamp(10px, 4vw, 90px);
  bottom: clamp(-40px,-4vw,-10px);
  font-family: var(--display);
  font-size: clamp(180px, 30vw, 460px);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(244,239,230,.16);
  letter-spacing: -0.02em;
  pointer-events:none;
  user-select:none;
  z-index: 1;
}

.hero-content{
  position:relative;
  z-index: 3;
  color: var(--on-dark);
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 0 clamp(20px,5vw,64px) clamp(50px, 8vh, 130px);
  max-width: 1280px;
  margin: 0 auto;
  width:100%;
}

.hero-tag{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing:.3em;
  text-transform: uppercase;
  color: var(--amber-2);
  margin-bottom: 16px;
  display:flex; align-items:center; gap: 14px;
  opacity:0; transform: translateY(16px);
  transition: opacity .7s ease .35s, transform .7s ease .35s;
}
.hero-tag::before{ content:"●"; font-size:8px; color: var(--amber); }
.hero-slide.is-active .hero-tag{ opacity:1; transform:none; }

.hero-title{
  font-size: clamp(22px, 4vw, 50px);
  max-width: 16ch;
  margin-bottom: 28px;
  opacity:0; transform: translateY(28px);
  transition: opacity .8s ease .45s, transform .8s ease .45s;
}
.hero-slide.is-active .hero-title{ opacity:1; transform:none; }

.hero-cta .btn{
  color: var(--on-dark);
  border-color: rgba(244,239,230,.28);
}
.hero-cta .btn:hover{ color: var(--night); }

.hero-cta{
  display:flex; align-items:center; gap: 28px;
  opacity:0; transform: translateY(28px);
  transition: opacity .8s ease .7s, transform .8s ease .7s;
}
.hero-slide.is-active .hero-cta{ opacity:1; transform:none; }

.hero-cta .date{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--on-dark-dim);
  letter-spacing: .08em;
}

/* slider controls */
.hero-controls{
  position:absolute;
  left: clamp(20px,5vw,64px);
  bottom: 36px;
  z-index: 4;
  display:flex;
  align-items:center;
  gap: 22px;
}
.hero-dots{ display:flex; gap: 10px; }
.hero-dots button{
  width: 38px; height: 4px;
  background: rgba(244,239,230,.18);
  border:none; cursor:pointer;
  position:relative;
  overflow:hidden;
  border-radius: 4px;
}
.hero-dots button::after{
  content:"";
  position:absolute; inset:0;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin:left;
  border-radius: 4px;
}
.hero-dots button.is-active::after{
  transform: scaleX(1);
  transition: transform 7s linear;
}
.hero-dots button.is-active.paused::after{ transition: none; }

.hero-count{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--on-dark-dim);
  letter-spacing: .14em;
}
.hero-count strong{ color: var(--on-dark); }

.hero-scroll{
  position:absolute;
  right: clamp(20px,5vw,64px);
  bottom: 40px;
  z-index:4;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color: var(--on-dark-dim);
  display:flex; align-items:center; gap:14px;
  writing-mode: vertical-rl;
}
.hero-scroll::after{
  content:"";
  width:1px; height: 60px;
  background: linear-gradient(var(--amber), transparent);
}

/* ---------- Section frame ---------- */
.section{
  position: relative;
  padding: clamp(70px, 10vw, 130px) 0;
}
.section--video{
  border-top: 1px solid var(--line);
  margin-top: 20px;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 30px;
  margin-bottom: clamp(40px,6vw,68px);
  flex-wrap: wrap;
}
.section-head h2{
  font-size: clamp(34px, 5.4vw, 64px);
  margin-top: 14px;
}
.section-head p{
  max-width: 46ch;
  color: var(--ink-dim);
  font-size: 15px;
}
.section-link{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:12px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  transition: border-color .3s ease, gap .3s ease, color .3s ease;
}
.section-link:hover{ border-color: var(--amber); gap:18px; color: var(--amber-deep); }
.section-link svg{ width:14px; height:14px; }

.divider{
  height:1px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}

/* ---------- News grid ---------- */
/* ===== NEWS GRID — горизонтальная лента карточек ===== */
.news-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1100px){ .news-grid, .news-grid.is-feed{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px){  .news-grid, .news-grid.is-feed{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){  .news-grid, .news-grid.is-feed{ grid-template-columns: repeat(2, 1fr); } }

/* Мобильный: показываем только 4 карточки в ленте на главной (2 ряда × 2) */
@media (max-width: 700px){
  .news-grid.is-feed .news-card:nth-child(n+5){ display: none; }
}
/* Видео: скрыть лишние на мобильном */
@media (max-width: 700px){
  .video-grid .video-card:nth-child(n+3){ display: none; }
}

.news-card{
  display: flex;
  flex-direction: column;
  background: var(--white, #fff);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,.08);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.news-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 36px -12px rgba(0,63,34,.18);
}

/* Обложка карточки */
.card-cover{
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 10px;
  display: block;
}
.card-cover-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.news-card:hover .card-cover-img{ transform: scale(1.04); }

/* Заглушка если нет фото */
.card-cover-placeholder{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 32px;
  color: rgba(255,255,255,.25);
  letter-spacing: .04em;
}
.hue-1{ --hueA: 150 85% 28%; --hueB: 155 70% 18%; }
.hue-2{ --hueA: 155 70% 18%; --hueB: 150 85% 28%; }
.hue-3{ --hueA: 145 80% 24%; --hueB: 160 60% 32%; }
.hue-4{ --hueA: 160 60% 32%; --hueB: 145 80% 24%; }
.hue-5{ --hueA: 152 90% 20%; --hueB: 148 65% 30%; }
.hue-6{ --hueA: 148 65% 30%; --hueB: 152 90% 20%; }
.card-cover-placeholder{
  background:
    radial-gradient(130% 100% at 80% 110%, hsl(var(--hueA) / .7), transparent 55%),
    radial-gradient(100% 80% at 10% -10%, hsl(var(--hueB) / .5), transparent 55%),
    linear-gradient(160deg, #012d14, #001a0d);
}

/* Тег-бейдж поверх фото */
.cover-tag{
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(6px);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
}

/* Тело карточки */
.card-body{
  padding: 12px 4px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.card-body h3{
  font-family: var(--head);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-body h3 a{ color: inherit; }
.card-body h3 a:hover{ color: var(--amber); }
.card-date{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-dim);
  margin-top: 2px;
}
/* Скрываем элементы которые больше не нужны */
.card-meta, .card-body p, .card-foot{ display: none; }

@media (max-width: 700px){
  .news-grid{ gap: 12px; }
  .video-grid{ gap: 12px; }
  .card-body{ padding: 10px 8px 8px; gap: 4px; }
  .card-body h3{ font-size: 14px; -webkit-line-clamp: 3; }
  .card-date{ font-size: 11px; }
  .cover-tag{ font-size: 9px; padding: 3px 7px; }
}

/* ---------- Video section ---------- */
.video-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1100px){ .video-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px){  .video-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){  .video-grid{ grid-template-columns: repeat(2, 1fr); } }

.video-card{
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white, #fff);
  border: 1px solid rgba(0,0,0,.08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.video-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 36px -12px rgba(0,63,34,.18); }

.video-thumb{
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #000;
}
.video-thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease, opacity .3s ease;
}
.video-card:hover .video-thumb img{ transform: scale(1.04); opacity: .85; }

.video-play-btn{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.video-play-btn svg{
  width: 48px; height: 48px;
  background: rgba(0,0,0,.55);
  border-radius: 50%;
  padding: 10px;
  backdrop-filter: blur(4px);
  transition: background .2s, transform .2s;
}
.video-card:hover .video-play-btn svg{
  background: var(--amber, #003F22);
  transform: scale(1.1);
}

.video-label{
  position: absolute;
  top: 10px; right: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,69,0,.82);
  color: #fff;
  font-weight: 600;
}

.video-info{
  padding: 12px 8px 10px;
}
.video-info h4{
  font-family: var(--head);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 6px;
}
.video-date{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: .06em;
}

/* Video modal */
.video-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.video-modal.is-open{
  pointer-events: all;
  opacity: 1;
}
.video-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,10,5,.82);
  backdrop-filter: blur(6px);
}
.video-modal-box{
  position: relative;
  z-index: 1;
  width: min(900px, 92vw);
  transform: scale(.94);
  transition: transform .25s ease;
}
.video-modal.is-open .video-modal-box{ transform: scale(1); }
.video-modal-close{
  position: absolute;
  top: -40px; right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  opacity: .7;
}
.video-modal-close:hover{ opacity: 1; }
.video-modal-frame{
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.video-modal-frame iframe{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: none;
}

/* ---------- Stats / about strip ---------- */
.strip{
  background: var(--amber, #003F22);
  padding: clamp(48px, 7vw, 80px) 0;
}
.strip .wrap{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 760px){ .strip .wrap{ grid-template-columns: repeat(2,1fr); gap: 40px 24px; } }
.stat{ text-align:left; }
.stat .num{
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 64px);
  color: #fff;
  line-height: 1;
}
.stat .lbl{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-top: 10px;
}

/* ---------- About / split ---------- */
.split{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items:center;
}
@media (max-width: 880px){ .split{ grid-template-columns: 1fr; } }
.split-art{
  position:relative;
  aspect-ratio: 4/5;
  border-radius: 24px;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 80% 15%, rgba(255,122,26,.32), transparent 55%),
    radial-gradient(100% 80% at 10% 100%, rgba(43,184,176,.26), transparent 55%),
    repeating-linear-gradient(115deg, rgba(21,24,29,.05) 0 2px, transparent 2px 32px),
    linear-gradient(170deg, #efeae0, var(--surface) 70%);
  border: 1px solid var(--line);
}
.split-art .big-num{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family: var(--display);
  font-size: clamp(120px, 16vw, 220px);
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(21,24,29,.16);
}
.split p{ color: var(--ink-dim); margin-bottom: 18px; max-width: 56ch; }
.split ul{ list-style:none; margin: 26px 0 32px; display:grid; gap: 14px; }
.split li{
  display:flex; gap: 14px; align-items:baseline;
  font-size: 15px;
  color: var(--ink-dim);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.split li b{ color: var(--ink); font-family: var(--head); font-weight:600; min-width: 11ch; }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--amber, #003F22);
  padding: clamp(60px,8vw,90px) 0 32px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
}
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-grid h4{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing:.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 18px;
}
.footer-grid p, .footer-grid a, .footer-grid li{ color: rgba(255,255,255,.85); font-size: 14.5px; }
.footer-grid ul{ list-style:none; display:grid; gap:10px; }
.footer-grid a:hover{ color: #fff; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--mono); font-size: 12px; letter-spacing:.08em;
  color: #fff;
  flex-wrap:wrap; gap: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 26px;
}

/* ---------- Squad / players grid ---------- */
.squad-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 980px){ .squad-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px){ .squad-grid{ grid-template-columns: 1fr; } }

.player-card{
  position:relative;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.player-card:hover{ transform: translateY(-6px); border-color: rgba(255,122,26,.4); box-shadow: var(--shadow); }

.player-photo{
  position:relative;
  aspect-ratio: 3/4;
  display:flex; align-items:flex-end; justify-content:center;
  background:
    radial-gradient(120% 100% at 85% 110%, hsl(var(--hueA) / .38), transparent 62%),
    radial-gradient(90% 80% at 0% -10%, hsl(var(--hueB) / .26), transparent 55%),
    repeating-linear-gradient(124deg, rgba(21,24,29,.05) 0 2px, transparent 2px 28px),
    linear-gradient(170deg, #efeae0, var(--surface) 72%);
}
.player-photo .initials{
  font-family: var(--display);
  font-size: clamp(64px, 9vw, 110px);
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(21,24,29,.18);
  margin-bottom: -6px;
}
.player-num{
  position:absolute; left: 14px; top: 14px;
  z-index: 2;
  font-family: var(--display);
  font-size: 20px;
  min-width: 38px; height: 38px;
  display:grid; place-items:center;
  background: var(--amber);
  color: var(--night);
  border-radius: 9px;
  letter-spacing: .02em;
  box-shadow: 0 8px 20px -8px rgba(255,122,26,.7);
}
.player-info{
  padding: 18px 20px 20px;
  display:flex; align-items:flex-start; justify-content:space-between; gap: 12px;
}
.player-info h3{
  font-family: var(--head);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.3;
}
.player-info .pos{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 6px;
}
.player-info .flag{
  flex-shrink:0;
  border-radius: 3px;
  overflow:hidden;
  margin-top: 3px;
  box-shadow: 0 0 0 1px var(--line);
}

.squad-filters{
  display:flex; flex-wrap:wrap; gap: 12px;
  margin: 0 0 clamp(32px,5vw,52px);
}

/* ---------- Папки команд / возрастных групп ---------- */
.folder-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 980px){ .folder-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px){ .folder-grid{ grid-template-columns: 1fr; } }

.folder-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 14px;
  padding: 28px 24px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.folder-card:hover{ transform: translateY(-6px); border-color: rgba(0,63,34,.35); box-shadow: var(--shadow); }

.folder-icon{
  width: 56px; height: 56px;
  border-radius: 14px;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 100% at 85% 110%, hsl(var(--hueA) / .38), transparent 62%),
    radial-gradient(90% 80% at 0% -10%, hsl(var(--hueB) / .26), transparent 55%),
    linear-gradient(170deg, #efeae0, var(--surface) 72%);
  border: 1px solid var(--line);
  overflow:hidden;
}
.folder-icon img{ width: 70%; height: 70%; object-fit: contain; }
.folder-icon svg{ width: 28px; height: 28px; color: var(--amber); }

.folder-card h3{
  font-family: var(--head);
  font-weight: 600;
  font-size: 19px;
}
.folder-card p{
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.6;
}
.folder-card .folder-link{
  margin-top: auto;
  display:flex; align-items:center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing:.18em;
  text-transform: uppercase;
  color: var(--amber-deep);
}
.folder-card .folder-link svg{ width:16px; height:16px; transition: transform .3s ease; }
.folder-card:hover .folder-link svg{ transform: translateX(4px); }

/* ---------- Судьи ---------- */
.referee-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 800px){ .referee-grid{ grid-template-columns: 1fr; } }

.referee-card{
  display:flex;
  gap: 22px;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.referee-card:hover{ transform: translateY(-6px); border-color: rgba(0,63,34,.35); box-shadow: var(--shadow); }

.referee-photo{
  position:relative;
  flex: 0 0 124px;
  width: 124px; height: 124px;
  border-radius: 14px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 100% at 85% 110%, hsl(var(--hueA) / .38), transparent 62%),
    radial-gradient(90% 80% at 0% -10%, hsl(var(--hueB) / .26), transparent 55%),
    linear-gradient(170deg, #efeae0, var(--surface) 72%);
  border: 1px solid var(--line);
}
.referee-photo img{ width:100%; height:100%; object-fit: cover; }
.referee-photo .initials{
  font-family: var(--display);
  font-size: 38px;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(21,24,29,.18);
}

.referee-info h3{
  font-family: var(--head);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
}
.referee-info .role{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin-top: 6px;
}
.referee-info p{
  margin-top: 12px;
  color: var(--ink-dim);
  font-size: 13.5px;
  line-height: 1.6;
}

.squad-empty{
  padding: 48px 0;
  color: var(--ink-dim);
  font-size: 16px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 16px;
}

.back-link{
  display:inline-flex; align-items:center; gap: 8px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--amber-deep);
  margin-bottom: clamp(24px,4vw,40px);
}
.back-link svg{ width:16px; height:16px; transform: rotate(180deg); }

/* ---------- News index page ---------- */
.page-hero{
  padding: clamp(150px, 22vh, 220px) 0 clamp(50px, 8vw, 80px);
  position: relative;
  border-bottom: 1px solid var(--line);
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute; right: -8%; top: -20%;
  width: 60vw; aspect-ratio:1;
  background: radial-gradient(circle, rgba(255,122,26,.14), transparent 60%);
  pointer-events:none;
}
.page-hero h1{ font-size: clamp(46px, 9vw, 110px); margin-top: 16px; }
.page-hero p{ max-width: 60ch; color: var(--ink-dim); margin-top: 22px; font-size: 16px; }

.filters{
  display:flex; flex-wrap:wrap; gap: 12px;
  margin: clamp(32px,5vw,52px) 0;
}
.filter-btn{
  font-family: var(--mono);
  font-size: 12px; letter-spacing:.14em; text-transform:uppercase;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  cursor:pointer;
  background: transparent;
  transition: all .3s ease;
}
.filter-btn:hover{ color: var(--ink); border-color: rgba(21,24,29,.3); }
.filter-btn.is-active{
  background: var(--amber);
  border-color: var(--amber);
  color: var(--night);
}

/* ---------- Article page ---------- */
.article-hero{
  padding: clamp(150px, 22vh, 210px) 0 60px;
  border-bottom: 1px solid var(--line);
  position:relative;
}
.article-hero .cover-figure{
  position:absolute; right: clamp(0px,2vw,40px); top: 30%;
  font-family: var(--display);
  font-size: clamp(120px, 20vw, 320px);
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(21,24,29,.08);
  z-index:0;
  pointer-events:none;
}
.article-hero .inner{ position:relative; z-index:1; max-width: 880px; }
.article-hero h1{ font-size: clamp(34px, 6vw, 60px); margin: 18px 0 20px; line-height: 1.08; }
.article-hero .lede{ color: var(--ink-dim); font-size: 17px; max-width: 64ch; }

.article-body{
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(50px, 8vw, 80px) 0;
  display:grid;
  gap: 22px;
  font-size: 17px;
  color: #383c42;
}
.article-body p:first-of-type::first-letter{
  font-family: var(--display);
  font-size: 64px;
  float:left;
  line-height: .8;
  margin: 8px 14px 0 0;
  color: var(--amber);
}
.article-foot{
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: clamp(60px,8vw,100px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 20px;
  flex-wrap:wrap;
}

.back-link{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--ink-dim);
}
.back-link:hover{ color: var(--amber-deep); }
.back-link svg{ width:14px; height:14px; transform: rotate(180deg); }

/* ---------- Reveal-on-scroll ---------- */
.reveal{
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* stagger helper */
.stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); }

@media (max-width: 720px){
  nav.main-nav{ display:none; }
  .hero-scroll{ display:none; }
}