/*
Theme Name: ПРИМ — Landing
Theme URI: https://dancegroup.ru/
Description: Самостоятельная тема лендинга спортивно-танцевального клуба «ПРИМ». Главная страница на новом дизайне, все тексты, изображения, филиалы, тренеры и отзывы редактируются в админке (Настройки → Customize и разделы «Филиалы/Тренеры/Отзывы»). Не затрагивает текущую тему.
Author: Custom
Version: 1.0.0
Requires at least: 5.5
Tested up to: 6.5
Requires PHP: 7.2
Text Domain: prim
*/

:root{
  --white:#ffffff; --paper:#fcfbf9; --mist:#f5f4f0;
  --ink:#272530; --ink-2:#66636f; --muted:#a6a3ad; --line:#eceae4;
  --gold-1:#ac8433; --gold-2:#c6a04a; --gold-3:#ddbd72; --gold-soft:#f8f1e1;
  --gold-grad:linear-gradient(120deg,#bf9538 0%,#dcb85f 52%,#ecd291 72%,#c39e44 100%);
  --gold-text:linear-gradient(100deg,#9c7420,#c6a04a 50%,#ddbd72 70%,#ac8433);
  --shadow:0 30px 60px -34px rgba(50,40,15,.28);
  --shadow-sm:0 16px 36px -26px rgba(50,40,15,.26);
  --r:20px; --maxw:1180px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--white); color:var(--ink-2);
  font-family:"Manrope",system-ui,sans-serif; font-size:16px; line-height:1.8; -webkit-font-smoothing:antialiased}
h1,h2,h3,.disp{font-family:"Montserrat",system-ui,sans-serif; line-height:1.12; font-weight:700; letter-spacing:-.015em; color:var(--ink); margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px}
.eyebrow{display:inline-block; font-family:"Montserrat"; font-size:.72rem; font-weight:700;
  letter-spacing:.19em; text-transform:uppercase; background:var(--gold-text);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.gt{background:var(--gold-text); -webkit-background-clip:text; background-clip:text; color:transparent}

.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:"Montserrat"; font-weight:600; font-size:.9rem; padding:.92em 1.7em; border-radius:100px;
  cursor:pointer; border:1.5px solid transparent; transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .25s,border-color .25s}
.btn-gold{background:var(--gold-grad); color:#3c2c08; box-shadow:0 12px 26px -16px rgba(180,140,50,.6)}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 18px 34px -16px rgba(180,140,50,.66)}
.btn-line{background:var(--white); color:var(--ink); border-color:var(--line)}
.btn-line:hover{border-color:var(--gold-2); color:var(--gold-1); transform:translateY(-2px)}
.btn-lg{padding:1.05em 2.05em; font-size:.98rem}

/* HEADER (logo + burger popup menu) */
header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.78);
  backdrop-filter:saturate(1.5) blur(16px); transition:box-shadow .35s,background .35s}
header.scrolled{background:rgba(255,255,255,.92); box-shadow:0 1px 0 var(--line),0 14px 30px -26px rgba(0,0,0,.28)}
.nav{display:flex; align-items:center; gap:16px; height:82px; transition:height .35s var(--ease)}
header.scrolled .nav{height:68px}
.brand img{height:38px; width:auto; transition:height .35s var(--ease)}
header.scrolled .brand img{height:33px}
.nav-cta{display:flex; align-items:center; gap:14px; margin-left:auto}
.nav-phone{font-family:"Montserrat"; font-weight:700; font-size:.9rem; white-space:nowrap; color:var(--ink)}
.nav-phone small{display:block; font-family:"Manrope"; font-size:.6rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted)}
.menu-btn{display:inline-flex; align-items:center; gap:.6em; font-family:"Montserrat"; font-weight:600; font-size:.86rem;
  color:var(--ink); background:var(--white); border:1.5px solid var(--line); border-radius:100px; padding:.62em 1.05em .62em 1.15em; cursor:pointer; transition:.25s}
.menu-btn:hover{border-color:var(--gold-2); color:var(--gold-1)}
.menu-btn .bars{display:inline-flex; flex-direction:column; gap:3px}
.menu-btn .bars i{width:16px; height:2px; background:currentColor; border-radius:2px; display:block}

/* HERO */
.hero{position:relative; overflow:hidden; background:
  radial-gradient(760px 460px at 88% 0%, rgba(221,189,114,.14), transparent 60%), var(--white)}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr; gap:52px;
  align-items:center; padding-top:76px; padding-bottom:86px}
.hero h1{font-size:clamp(2.05rem,4.2vw,3.35rem); font-weight:700}
.hero h1 .soft{font-weight:500; color:var(--ink-2)}
.brand-word{display:inline-block; font-family:"Montserrat"; font-weight:800;
  font-size:clamp(2.9rem,7vw,4.9rem); letter-spacing:-.005em; line-height:1; margin:.16em 0 .3em}
.hero .lead{max-width:30rem; font-size:1.04rem; margin:0 0 34px}
.hero-actions{display:flex; gap:13px; flex-wrap:wrap}
.hero-note{margin-top:22px; font-size:.82rem; color:var(--muted); display:flex; align-items:center; gap:.6em}
.hero-note b{color:var(--gold-1); font-family:"Montserrat"; font-weight:700}
.hero-media{position:relative; display:flex; justify-content:center}
.hero-frame{position:relative; width:100%; max-width:540px; overflow:hidden;
  background:radial-gradient(120% 100% at 70% 15%, #fffdf7, #f7efdd)}
.hero-frame img{width:100%; display:block}

/* MARQUEE (experiment) */
.marq{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper)}
.marq-track{display:flex; width:max-content; animation:marq 34s linear infinite}
.marq-track .set{display:flex; align-items:center}
.marq-track b{font-family:"Montserrat"; font-weight:600; font-size:.92rem; color:var(--ink); padding:15px 0; white-space:nowrap}
.marq-track .d{color:var(--gold-2); padding:0 26px; font-size:.7rem}
@keyframes marq{to{transform:translateX(-50%)}}

/* STATS */
.stats{background:var(--paper); border-bottom:1px solid var(--line)}
.stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:40px 26px}
.stat{text-align:center; position:relative}
.stat+.stat::before{content:""; position:absolute; left:0; top:14%; height:72%; width:1px; background:var(--line)}
.stat .num{font-family:"Montserrat"; font-weight:800; font-size:clamp(1.8rem,3.4vw,2.5rem);
  background:var(--gold-text); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1}
.stat .lbl{font-size:.8rem; color:var(--ink-2); margin-top:7px}

/* SECTION */
.section{padding:100px 0}
.sec-head{max-width:640px; margin-bottom:54px}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head h2{font-size:clamp(1.75rem,3.3vw,2.6rem); margin-top:14px}
.sec-head p{margin:16px 0 0; font-size:1.02rem}

/* wing divider removed for calmness; using a soft rule */
.soft-rule{height:1px; max-width:120px; margin:0 auto; background:linear-gradient(90deg,transparent,var(--gold-2),transparent); opacity:.5}

/* cards / branches */
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.card{position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:28px 26px 26px; overflow:hidden; transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent}
.card .idx{font-family:"Montserrat"; font-weight:700; font-size:.86rem; color:var(--gold-2); letter-spacing:.04em}
.card h3{font-size:1.14rem; margin:12px 0 6px}
.card .sub{font-size:.85rem; margin:0 0 20px}
.card .more{font-family:"Montserrat"; font-weight:600; font-size:.82rem; color:var(--gold-1); display:inline-flex; align-items:center; gap:.4em}
.card .more::after{content:"→"; transition:transform .3s var(--ease)}
.card:hover .more::after{transform:translateX(5px)}
.card::after{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--gold-grad); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)}
.card:hover::after{transform:scaleX(1)}

/* advantages */
.adv{background:var(--mist)}
.adv-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px 44px}
.adv-item{display:flex; gap:16px; align-items:flex-start; padding:20px 22px; background:var(--white);
  border:1px solid var(--line); border-radius:16px; transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.adv-item:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm)}
.adv-item .ic{flex:none; width:42px; height:42px; border-radius:12px; background:var(--gold-soft);
  border:1px solid rgba(198,160,74,.32); display:flex; align-items:center; justify-content:center; color:var(--gold-1)}
.adv-item .ic svg{width:19px;height:19px}
.adv-item p{margin:0; font-size:.94rem; color:var(--ink)}

/* video */
.video-shell{position:relative; border-radius:24px; overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--line); aspect-ratio:16/9; background:#0d0d0d}
.video-shell iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* trainers */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.trainer{background:var(--white); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.trainer:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.trainer .ph{aspect-ratio:3/3.4; position:relative; display:flex; align-items:flex-end; justify-content:center;
  background:radial-gradient(120% 90% at 50% 12%, #fdfaf2, #efeadd); overflow:hidden}
.trainer .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.trainer .ph .mono{position:relative; z-index:1; margin-bottom:26px; font-family:"Montserrat"; font-weight:800; font-size:2.7rem;
  background:var(--gold-text); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.85}
.trainer .ph::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--gold-grad); z-index:2}
.trainer .body{padding:22px 24px}
.trainer h3{font-size:1.14rem}
.trainer .role{font-size:.82rem; margin:5px 0 8px}
.trainer .tag{font-size:.76rem; color:var(--gold-1); font-family:"Montserrat"; font-weight:600}
.trainer .lnk{display:inline-block; margin-top:14px; font-family:"Montserrat"; font-weight:600; font-size:.8rem; color:var(--gold-1)}

/* reviews */
.review{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:28px 26px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.review:hover{transform:translateY(-5px); box-shadow:var(--shadow-sm)}
.review .stars{color:var(--gold-2); letter-spacing:.16em; font-size:.84rem}
.review p{font-size:.94rem; margin:16px 0 20px}
.review .who{display:flex; align-items:center; gap:12px}
.review .av{width:42px; height:42px; border-radius:50%; background:var(--gold-grad); flex:none;
  display:flex; align-items:center; justify-content:center; color:#fff; font-family:"Montserrat"; font-weight:700}
.review .who b{font-family:"Montserrat"; font-weight:700; font-size:.9rem; display:block; color:var(--ink)}
.review .who small{font-size:.76rem; color:var(--muted)}

/* CTA */
.cta{background:radial-gradient(680px 320px at 50% -30%, rgba(221,189,114,.4), transparent 62%), var(--gold-soft)}
.cta .wrap{text-align:center; padding:92px 26px}
.cta h2{font-size:clamp(1.85rem,3.8vw,2.85rem)}
.cta p{max-width:520px; margin:14px auto 30px}

/* footer */
footer{background:var(--paper); border-top:1px solid var(--line); padding:72px 0 30px; position:relative}
footer::before{content:""; position:absolute; left:0; right:0; top:-1px; height:2px; background:var(--gold-grad); opacity:.6}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.25fr; gap:38px}
.foot-brand img{height:64px; margin-bottom:18px}
.foot-brand p{font-size:.88rem; max-width:17rem; margin:0}
footer h4{font-family:"Montserrat"; font-size:.72rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--gold-1); margin:0 0 16px; font-weight:700}
footer ul{list-style:none; margin:0; padding:0}
footer li{margin-bottom:10px}
footer a.fl{font-size:.9rem; color:var(--ink-2); transition:color .25s}
footer a.fl:hover{color:var(--gold-1)}
.foot-contact b{font-family:"Montserrat"; color:var(--ink); font-size:1rem; display:block; margin-bottom:6px}
.socials{display:flex; gap:10px; margin-top:18px}
.socials a{width:42px; height:42px; border-radius:12px; border:1.5px solid var(--line); background:var(--white);
  display:flex; align-items:center; justify-content:center; font-family:"Montserrat"; font-weight:700; font-size:.72rem; color:var(--gold-1); transition:.25s}
.socials a:hover{border-color:var(--gold-2); transform:translateY(-3px)}
.foot-bottom{border-top:1px solid var(--line); margin-top:48px; padding-top:24px; display:flex;
  justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.78rem; color:var(--muted)}

/* MODAL */
.overlay{position:fixed; inset:0; background:rgba(30,24,10,.46); backdrop-filter:blur(5px);
  display:flex; align-items:center; justify-content:center; padding:24px; z-index:120; opacity:0; visibility:hidden; transition:.35s var(--ease)}
.overlay.open{opacity:1; visibility:visible}
.modal{position:relative; background:var(--white); width:100%; max-width:440px; border-radius:24px; padding:38px 34px;
  box-shadow:var(--shadow); transform:translateY(18px) scale(.97); transition:.4s var(--ease)}
.overlay.open .modal{transform:none}
.modal .x{position:absolute; top:16px; right:16px; width:38px; height:38px; border:1.5px solid var(--line);
  background:var(--white); border-radius:11px; cursor:pointer; font-size:1.05rem; color:var(--ink-2); transition:.25s}
.modal .x:hover{border-color:var(--gold-2); color:var(--gold-1)}
.modal h3{font-size:1.5rem; margin:6px 0 22px}
.field{margin-bottom:16px}
.field label{display:block; font-family:"Montserrat"; font-size:.76rem; font-weight:600; margin-bottom:7px; color:var(--ink)}
.field label .req{color:#cf5347}
.field input,.field select{width:100%; padding:.88em 1em; border-radius:13px; border:1.5px solid var(--line);
  background:var(--paper); font-family:"Manrope"; font-size:.92rem; color:var(--ink); transition:.25s}
.field input:focus,.field select:focus{outline:0; border-color:var(--gold-2); background:#fff; box-shadow:0 0 0 4px rgba(198,160,74,.15)}
.modal .btn-gold{width:100%; margin-top:6px}
.modal .ok{text-align:center; padding:14px 0}
.modal .ok .ring{width:66px; height:66px; border-radius:50%; background:var(--gold-grad); margin:0 auto 16px; display:flex; align-items:center; justify-content:center; color:#fff}
.modal .ok .ring svg{width:30px;height:30px}
.modal .ok h3{margin-bottom:6px}.modal .ok p{font-size:.92rem}

/* OFFCANVAS (popup menu) */
.offcanvas{position:fixed; inset:0 0 0 auto; width:min(340px,88vw); background:var(--white); z-index:130;
  transform:translateX(100%); transition:transform .42s var(--ease); box-shadow:var(--shadow);
  display:flex; flex-direction:column; padding:24px 26px 30px; overflow:auto}
.offcanvas.open{transform:none}
.oc-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px}
.oc-top img{height:34px}
.oc-back{position:fixed; inset:0; background:rgba(30,24,10,.4); z-index:125; opacity:0; visibility:hidden; transition:.35s}
.oc-back.open{opacity:1; visibility:visible}
.offcanvas .x{width:42px; height:42px; border:1.5px solid var(--line); background:var(--white); border-radius:12px; cursor:pointer; font-size:1.05rem; color:var(--ink-2)}
.offcanvas a.oc{font-family:"Montserrat"; font-weight:500; font-size:1.02rem; color:var(--ink); padding:.92em 0; border-bottom:1px solid var(--line); transition:color .2s, padding-left .25s var(--ease); position:relative}
.offcanvas a.oc:hover{color:var(--gold-1); padding-left:8px}
.offcanvas .oc-cta{margin-top:22px}
.offcanvas .oc-phone{margin-top:18px; font-family:"Montserrat"; font-weight:700; color:var(--ink); font-size:1.05rem}

/* REVEAL */
.reveal{opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.zoom{transform:scale(.965)}
.reveal.left{transform:translateX(-28px)}
.reveal.in{opacity:1; transform:none}

@media(max-width:1000px){
  .nav-phone{display:none}
  .hero .wrap{grid-template-columns:1fr; padding-top:44px; padding-bottom:56px}
  .hero-media{order:-1} .hero-frame{max-width:460px}
  .grid4{grid-template-columns:repeat(2,1fr)} .grid3{grid-template-columns:1fr 1fr}
  .adv-grid{grid-template-columns:1fr}
  .stats .wrap{grid-template-columns:repeat(2,1fr); gap:26px}
  .stat:nth-child(2)::before,.stat:nth-child(3)::before{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .grid4,.grid3,.foot-grid{grid-template-columns:1fr}
  .section{padding:64px 0}
  .hero-actions .btn{flex:1}
  .stats .wrap{grid-template-columns:1fr 1fr}
  .foot-bottom{flex-direction:column}
  .menu-btn span.t{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1!important; transform:none!important; transition:none!important}
  .marq-track{animation:none!important}
}
/* ---------- Theme additions ---------- */
/* generic inner pages (fallback templates) */
.page-wrap{max-width:var(--maxw); margin:0 auto; padding:60px 26px 90px}
.page-wrap h1,.page-wrap h2,.page-wrap h3{margin:1.2em 0 .5em}
.page-wrap p,.page-wrap li{color:var(--ink-2)}
.page-wrap a{color:var(--gold-1)}
.page-wrap img{border-radius:14px}
.entry-title{font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:.4em}
.post-meta{color:var(--muted); font-size:.85rem; margin-bottom:1.6em}
.pagenav{display:flex; gap:12px; flex-wrap:wrap; margin-top:40px}
.pagenav a,.pagenav span{padding:.5em .9em; border:1px solid var(--line); border-radius:10px; font-family:"Montserrat"; font-weight:600; font-size:.85rem}
.pagenav .current{background:var(--gold-grad); color:#3c2c08; border-color:transparent}

/* WPForms rendered inside the modal — match theme fields */
#modalForm .wpforms-container{margin:0}
#modalForm .wpforms-form .wpforms-field{padding:0 0 16px}
#modalForm .wpforms-form .wpforms-field-label{font-family:"Montserrat"; font-size:.76rem; font-weight:600; margin-bottom:7px; color:var(--ink)}
#modalForm .wpforms-form input[type=text],
#modalForm .wpforms-form input[type=email],
#modalForm .wpforms-form input[type=tel],
#modalForm .wpforms-form select,
#modalForm .wpforms-form textarea{width:100%; padding:.88em 1em; border-radius:13px; border:1.5px solid var(--line);
  background:var(--paper); font-family:"Manrope"; font-size:.92rem; color:var(--ink); transition:.25s}
#modalForm .wpforms-form input:focus,
#modalForm .wpforms-form select:focus,
#modalForm .wpforms-form textarea:focus{outline:0; border-color:var(--gold-2); background:#fff; box-shadow:0 0 0 4px rgba(198,160,74,.15)}
#modalForm .wpforms-form button[type=submit]{width:100%; margin-top:6px; background:var(--gold-grad); color:#3c2c08;
  border:0; border-radius:100px; font-family:"Montserrat"; font-weight:600; padding:1.05em 2.05em; font-size:.98rem; cursor:pointer}

/* keep sticky header below wp admin bar */
.admin-bar header{top:32px}
@media(max-width:782px){.admin-bar header{top:46px}}