/* MIXIT · Каталог тренингов — фирменный стиль
   Цвета брендбука: #414823 (зелёный), #F2E9DB (бежевый), #CBCFB4 (светло-зелёный) */

:root{
  --green:#414823;
  --green-700:#353b1c;
  --green-400:#6b7444;
  --cream:#F2E9DB;
  --cream-light:#F8F3EA;
  --sage:#CBCFB4;
  --sage-soft:#E4E7D6;
  --sand:#E0D6C4;
  --gold:#D9B36B;
  --ink:#2A2E18;
  --muted:#6E7256;
  --white:#FFFDF9;

  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --shadow:0 2px 6px rgba(65,72,35,.05);
  --shadow-lg:0 22px 48px -16px rgba(65,72,35,.28), 0 4px 12px rgba(65,72,35,.08);
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Manrope",-apple-system,Segoe UI,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
h1,h2,h3,h4{font-family:var(--serif); color:var(--green); margin:0; line-height:1.15; font-weight:600}
h1{font-size:clamp(2.1rem,5vw,3.6rem); letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem)}
p{margin:0}
a{color:inherit}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px}

.eyebrow{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:14px;
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:200;
  background:rgba(242,233,219,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--sand);
}
.header-inner{display:flex; align-items:center; gap:16px; height:66px}
.logo{display:flex; align-items:center; text-decoration:none; flex:none}
.logo img{display:block; height:19px; width:auto}
@media (max-width:520px){ .logo img{height:16px} }
.header-div{width:1px; height:22px; background:var(--sand)}
.header-tag{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600}
.header-nav{margin-left:auto; display:flex; gap:24px}
.header-nav a{font-size:.9rem; font-weight:500; text-decoration:none; color:var(--green); padding-bottom:2px; border-bottom:1px solid transparent}
.header-nav a:hover{border-color:var(--green)}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,7vw,88px) 0 clamp(20px,2.5vw,32px); position:relative; overflow:hidden}
.hero::after{
  content:""; position:absolute; right:-140px; top:-120px; width:420px; height:420px;
  border:1.5px solid var(--sage); border-radius:50%; opacity:.55; pointer-events:none;
}
.hero-inner{position:relative; z-index:1}
.hero-copy h1{max-width:20ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.hero-stats{
  display:grid; grid-template-columns:1fr 1fr; gap:24px 20px; margin:0;
  padding:26px; background:var(--sage-soft); border-radius:var(--r-lg);
}
.hero-stats dt{font-family:var(--serif); font-size:2rem; color:var(--green); line-height:1}
.hero-stats dd{margin:4px 0 0; font-size:.82rem; color:var(--muted); line-height:1.35}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-size:.9rem; font-weight:600; letter-spacing:.01em;
  padding:13px 24px; border-radius:999px; text-decoration:none; cursor:pointer;
  border:1.5px solid var(--green); transition:all .25s var(--ease);
}
.btn--solid{background:var(--green); color:var(--cream)}
.btn--solid:hover{background:var(--green-700); transform:translateY(-1px)}
.btn--ghost{background:transparent; color:var(--green)}
.btn--ghost:hover{background:var(--sage-soft)}
.btn--disabled{
  background:transparent; color:var(--muted); border-color:var(--sand);
  border-style:dashed; cursor:not-allowed;
}

/* ---------- sections ---------- */
.section{padding:clamp(48px,7vw,84px) 0}
.section--alt{background:var(--cream-light); border-top:1px solid var(--sand)}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap}
.section-note{max-width:38ch; font-size:.9rem; color:var(--muted)}

.filters{display:flex; flex-wrap:wrap; gap:10px; margin:34px 0 8px}
.filter{
  font:inherit; font-size:.85rem; font-weight:600; padding:9px 20px; border-radius:999px;
  background:transparent; border:1.5px solid var(--sand); color:var(--muted);
  cursor:pointer; transition:all .2s var(--ease);
}
.filter:hover{border-color:var(--green-400); color:var(--green)}
.filter.is-active{background:var(--green); border-color:var(--green); color:var(--cream)}

/* ---------- day groups ---------- */
.day{padding-top:44px}
.day__head{display:flex; align-items:baseline; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--sand)}
.day__date{font-family:var(--serif); font-size:1.5rem; color:var(--green)}
.day__wd{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600}
.day__count{margin-left:auto; font-size:.82rem; color:var(--muted)}

.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr));
  gap:26px; padding-top:26px;
}

/* ---------- card ---------- */
.card{
  position:relative; background:var(--white); border:1px solid var(--sand);
  border-radius:var(--r-lg); transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-radius .25s var(--ease);
  outline:none;
}
.card__media{
  background:var(--cream-light); border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
  overflow:hidden; aspect-ratio:16/11; display:flex; align-items:center; justify-content:center;
}
.card__media img{width:auto; height:92%; max-width:88%; object-fit:contain; transition:transform .5s var(--ease)}
.card__body{padding:20px 22px 22px}
.card__meta{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.chip{
  font-size:.72rem; font-weight:600; letter-spacing:.04em; padding:5px 11px;
  border-radius:999px; background:var(--sage-soft); color:var(--green);
}
.chip--time{background:transparent; border:1px solid var(--sand); color:var(--muted)}
.chip--online{background:var(--green); color:var(--cream)}
.chip--offline{background:var(--gold); color:#3A2E10; white-space:nowrap}
.chip--tbd{background:transparent; border:1px dashed var(--sand); color:var(--muted)}
.card__title{font-size:1.14rem; line-height:1.25}
.card__trainer{
  display:flex; align-items:center; gap:7px; margin-top:10px;
  font-size:.82rem; font-weight:600; color:var(--green-400);
}
.card__trainer svg{width:15px; height:15px; flex:none}
.card__lead{margin-top:10px; font-size:.9rem; color:#54583C}
.card__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--sand);
}
.card__dur{font-size:.8rem; color:var(--muted)}
.card__hint{
  display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--green-400);
  transition:opacity .25s var(--ease);
}
.card__hint svg{width:12px; height:12px; transition:transform .3s var(--ease)}
.card__cta{margin-top:16px; width:100%}

/* раскрывающаяся панель */
.card__reveal{
  position:absolute; left:-1px; right:-1px; top:100%;
  background:var(--white); border:1px solid var(--sand); border-top:none;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  padding:0 22px; overflow:hidden;
  max-height:0; opacity:0; visibility:hidden;
  transition:max-height .38s var(--ease), opacity .22s var(--ease), padding .38s var(--ease), visibility .38s;
  box-shadow:var(--shadow-lg);
}
.card__block + .card__block{margin-top:16px}
.card__block h4{
  font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin-bottom:7px;
}
.card__block p{font-size:.875rem; color:#54583C}
.card__list{margin:0; padding-left:0; list-style:none}
.card__list li{position:relative; padding-left:16px; font-size:.875rem; color:#54583C; margin-bottom:6px}
.card__list li::before{
  content:""; position:absolute; left:0; top:.6em; width:5px; height:5px;
  border-radius:50%; background:var(--sage);
}
.card__tags{display:flex; flex-wrap:wrap; gap:7px}
.card__tags span{
  font-size:.75rem; padding:5px 10px; border-radius:var(--r-sm);
  background:var(--cream); color:var(--green); border:1px solid var(--sand);
}

.card:hover, .card:focus-visible, .card.is-open{
  box-shadow:var(--shadow-lg); border-color:var(--green-400);
  border-bottom-left-radius:0; border-bottom-right-radius:0;
  z-index:60;
}
.card:hover .card__media img, .card.is-open .card__media img{transform:scale(1.05)}
.card:hover .card__hint svg, .card.is-open .card__hint svg{transform:rotate(180deg)}
.card:hover .card__reveal, .card:focus-visible .card__reveal, .card.is-open .card__reveal{
  max-height:720px; opacity:1; visibility:visible; padding:20px 22px 24px;
}
.card:hover, .card.is-open{transform:translateY(-2px)}

/* ---------- steps ---------- */
.steps{list-style:none; margin:36px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:26px}
.steps li{background:var(--white); border:1px solid var(--sand); border-radius:var(--r-lg); padding:26px 24px}
.steps__num{font-family:var(--serif); font-size:1.6rem; color:var(--sage); display:block; margin-bottom:10px}
.steps h3{font-size:1.05rem; margin-bottom:8px}
.steps p{font-size:.9rem; color:#54583C}
.rules{
  scroll-margin-top:96px; margin-top:34px; padding:26px 28px; background:var(--sage-soft);
  border-radius:var(--r-lg); max-width:74ch;
}
.rules h3{font-size:1.02rem; margin-bottom:14px}
.rules__list{margin:0; padding:0; list-style:none}
.rules__list li{position:relative; padding-left:18px; font-size:.92rem; color:#4A4E35; margin-bottom:9px}
.rules__list li:last-child{margin-bottom:0}
.rules__list li::before{
  content:""; position:absolute; left:0; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--green-400);
}
.rules__list a{color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:3px}

.empty{margin-top:40px; color:var(--muted); font-size:.95rem}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--sand); padding:28px 0; margin-top:24px}
.site-footer a{color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.footer-inner{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.82rem; color:var(--muted)}

/* ---------- адаптив ---------- */
@media (max-width:920px){
  .hero::after{display:none}
  .header-tag,.header-div{display:none}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .header-inner{gap:12px}
  .header-nav{gap:10px}
  .header-nav a{font-size:.7rem; white-space:nowrap}
  .logo img{height:15px}
  .hero-stats{grid-template-columns:1fr 1fr; padding:20px}
  .hero-stats dt{font-size:1.6rem}
  .day__head{flex-wrap:wrap}
  .day__count{margin-left:0; width:100%}
  .card__foot{flex-direction:column; align-items:flex-start; gap:8px}
}
@media (hover:none){
  .card:hover{transform:none; box-shadow:var(--shadow); border-color:var(--sand);
    border-bottom-left-radius:var(--r-lg); border-bottom-right-radius:var(--r-lg)}
  .card:hover .card__reveal{max-height:0; opacity:0; visibility:hidden; padding:0 22px}
  .card.is-open{border-bottom-left-radius:var(--r-lg); border-bottom-right-radius:var(--r-lg)}
  /* на тач-устройствах описание раскрывается внутри карточки, а не поверх соседних */
  .card__reveal{
    position:static; box-shadow:none; border:none; border-top:1px solid var(--sand);
    border-radius:0; left:auto; right:auto;
  }
  .card.is-open .card__reveal{max-height:1400px; opacity:1; visibility:visible; padding:20px 22px 24px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
  html{scroll-behavior:auto}
}