/* sections.css — общие стили разделов-заглушек (турниры, знания, корзина, кабинет, оформление)
   и страницы компании /about/: панель .stub с графикой корта, вкладки корзины .ctabs,
   реквизиты .abreq. Только токены base.css, декор — CSS/SVG. Владелец: команда «разделы». */

/* ============ заглушка раздела: синяя панель, текст слева, корт справа ============ */
.secstub{padding:40px 0 56px}
/* панель — тёмный блок из брифа: один декоративный слой (корт + след волана) в правой колонке,
   текст на чистом синем. Двухцветный градиент — максимум по брифу */
.stub{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:32px;
  align-items:center;min-height:320px;padding:44px 48px;border-radius:var(--rl);color:#fff;
  background:linear-gradient(140deg,var(--brand3) 0%,var(--brand2) 100%)}
.stub-tx{position:relative;z-index:1;min-width:0}
.stub h1{margin:0 0 14px;font-size:clamp(28px,3.6vw,42px);line-height:1.08;letter-spacing:-.8px;font-weight:700}
.stub p{margin:0 0 24px;font-size:17px;line-height:1.55;color:rgba(255,255,255,.9);max-width:44ch}
.stub .kicker{color:#fff}
.stub-cta{display:flex;gap:12px;flex-wrap:wrap}
.stub-art{position:relative;z-index:0;display:grid;place-items:center;min-width:0;pointer-events:none}
/* корт наклонён на фирменный угол и чуть «лёг» в перспективу — как площадка с трибуны.
   Размер задан шириной и aspect-ratio: до загрузки ничего не прыгает */
.stub-art svg{width:100%;max-width:420px;height:auto;aspect-ratio:300/150;overflow:visible;
  transform:perspective(900px) rotateX(34deg) rotate(var(--skew))}
.court-f{fill:rgba(255,255,255,.07)}
.court-l{fill:none;stroke:rgba(255,255,255,.82);stroke-width:1.6}
.court-n{stroke:#fff;stroke-width:3;stroke-linecap:round}
.court-t{fill:none;stroke-width:6;stroke-linecap:round}
.court-s{fill:#fff}

/* кнопка «В магазин» на синем — оранжевая, как в герое главной; вторая — белый контур (.btn-ghost) */
.stub .btn{min-height:48px}

/* ============ вкладки корзины ============ */
.cartpg{padding:32px 0 56px}
/* список строк и итоги рядом — шире, чем у текстовых разделов */
.cartpg .wrap{max-width:1120px}
.cartpg h1{margin:0 0 20px;font-size:clamp(26px,3.2vw,34px);letter-spacing:-.8px;line-height:1.1;font-weight:700;position:relative;padding-bottom:14px}
/* штрих-диагональ под заголовком — та же геометрия, что у .sec-head h2 в base.css */
.cartpg h1::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:5px;background:var(--accent);
  transform:skewX(var(--skew));clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}
.ctabs{display:flex;gap:4px;padding:4px;border-radius:calc(var(--r) + 4px);background:var(--soft);border:1px solid var(--line);
  max-width:520px;margin-bottom:18px}
.ctabs button{flex:1 1 0;min-width:0;min-height:44px;padding:0 14px;border-radius:var(--r);font-weight:700;font-size:14.5px;
  color:var(--ink2);transition:background-color .15s,color .15s;line-height:1.2}
.ctabs button:hover{color:var(--brand)}
.ctabs button:active{transform:scale(.97)}
.ctabs button[aria-selected=true]{background:#fff;color:var(--brand);box-shadow:0 1px 2px rgba(3,62,128,.08),0 4px 12px rgba(3,62,128,.08)}
/* подпись и число в одном ряду: на 360 px переносится подпись, а не число */
.ctabs button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.ctab-l{min-width:0}
/* число позиций во вкладке: серое у неактивной, синее у выбранной */
.ctab-n{flex:none;display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:var(--line);color:var(--ink2);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;vertical-align:1px}
.ctabs button[aria-selected=true] .ctab-n{background:var(--brand);color:#fff}
.ctabs button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.cpanel[hidden]{display:none}
.cpanel:focus{outline:none}
/* пустая корзина: мягкая синяя подложка, значок сумки, текст и одна кнопка */
.cempty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:48px 20px;
  border:1px solid var(--line);border-radius:var(--rl);background:var(--brand-soft)}
.cempty svg{color:var(--brand)}
.cempty b{font-size:19px;font-weight:700;letter-spacing:-.3px;line-height:1.3;color:var(--ink)}
.cempty .btn{margin-top:8px;min-width:180px}
/* складская вкладка: честное объяснение, почему пусто (BLOCK2 §1) */
.cempty p{margin:0;max-width:52ch;font-size:14.5px;line-height:1.55;color:var(--ink2)}
.cempty-a{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.cempty-n{margin:0;font-size:13.5px;color:var(--ink2)}

/* ============ страница компании /about/ ============ */
.abpg{padding:32px 0 56px}
.abpg .wrap,.pgwrap{max-width:880px}
.abpg .pagetext{margin-top:10px}
.abgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:28px}
/* реквизиты: подпись над значением, без таблицы — на 390 px длинный грузинский адрес переносится сам */
.abreq dl{margin:0;display:grid;gap:12px}
.abreq dt{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--ink2);margin:0 0 2px}
.abreq dd{margin:0;color:var(--ink);font-size:15px;line-height:1.45;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.abcon p{margin:0 0 14px}
.abcon .abwa{font-size:18px;font-weight:700;letter-spacing:-.2px;color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:14px}
.abcon .btn{gap:9px}
.abcon .btn svg{width:18px;height:18px;flex:none}
.pgsoon{background:var(--brand-soft);border-radius:var(--rl);padding:22px 24px;margin:18px 0 28px}
.pgsoon p{margin:0 0 14px;color:var(--ink2);line-height:1.6}
.pgsoon .btn svg{width:18px;height:18px;flex:none}
/* надзаголовок-ссылка внутри .sec-head: общее правило base.css «.sec-head a» перекрасило бы его
   в синий и увеличило до 14.5px — возвращаем вид надзаголовка */
.sec-head a.kicker,.sec-head a.kicker:hover{display:flex;color:var(--accent-d);font-size:11px;white-space:normal;min-height:0}

/* ============ планшет ============ */
@media(max-width:1080px){
  .stub{padding:36px;gap:20px}
}

/* ============ телефон ============ */
@media(max-width:760px){
  .secstub{padding:16px 0 32px}
  /* текст сверху, корт под ним полосой — фон под мелким текстом остаётся чистым */
  .stub{grid-template-columns:1fr;min-height:0;padding:26px 20px 18px;gap:6px}
  .stub h1{font-size:28px;margin-bottom:10px}
  .stub p{font-size:15.5px;margin-bottom:18px}
  .stub-cta .btn{flex:1 1 auto}
  .stub-art svg{max-width:300px}
  .cartpg,.abpg{padding:18px 0 32px}
  .ctabs{max-width:none}
  .ctabs button{font-size:13.5px;padding:0 8px}
  .cempty{padding:34px 16px}
  .cempty .btn{width:100%}
  .cempty-a{width:100%}
  .ctabs button{gap:6px}
  .abgrid{grid-template-columns:1fr;gap:14px}
  .abcon .btn{width:100%}
  .pgsoon{padding:18px 16px}
  .pgsoon .btn{width:100%}
  /* надзаголовок-ссылка (путь к разделу): тап-зона 44 px за счёт полей, макет не сдвигается */
  a.kicker{padding:17px 0;margin-top:-17px;margin-bottom:-8px}
}

/* заголовок над ссылками на служебные страницы: линия у .pagelinks тут лишняя */
.abpg .abpages{margin:4px 0 12px;font-size:15.5px;font-weight:700;letter-spacing:-.3px;color:var(--ink)}
.abpg .abpages+.pagelinks{border-top:0;padding-top:0}