/* =========================================================
   Моя школа LS — страницы филиалов (Арбат, Гостиный двор, Бутово, Геленджик).
   Поверх ../static/css/style.css (/apple/), те же токены и компоненты
   ========================================================= */

/* ---------- хлебные крошки ---------- */
.crumbs{padding:18px 0 0;font-size:14px;line-height:1.3;color:var(--muted)}
.crumbs .wrap{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{color:var(--muted);transition:color .2s}
.crumbs a:hover{color:var(--pink-text)}
.crumbs [aria-current]{color:var(--ink);font-weight:550}

/* ---------- первый экран ---------- */
.bh{padding:clamp(28px,4vw,56px) 0 clamp(64px,7vw,104px)}
.bh__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.bh .eyebrow{display:inline-block;padding:7px 14px;border-radius:var(--pill);background:var(--pink-tint);font-size:14px;margin-bottom:22px}
.bh__h1{font-size:clamp(44px,5vw,72px);line-height:1.03}
.bh__h1 .nw{white-space:nowrap}
.bh .lead{margin-top:22px;max-width:560px;color:var(--ink-2);font-size:clamp(17px,1.45vw,21px)}
.bh .hero__cta{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:12px;margin-top:30px}
.bh .hero__cta .btn{width:auto;max-width:none}
.bh__media{position:relative}
.bh__photo{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);aspect-ratio:4/3;background:var(--cream-2)}
.bh__photo img{width:100%;height:100%;object-fit:cover}
.spec{position:relative;margin:-56px 22px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:8px 22px;border-radius:var(--r-lg);background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:var(--sh-2)}
.spec>div{padding:14px 4px;border-bottom:1px solid var(--line)}
.spec>div:nth-child(odd){padding-right:18px}
.spec>div:last-child{grid-column:1/-1;border-bottom:0}
.spec>div:nth-last-child(2){border-bottom:1px solid var(--line)}
.spec dt{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:-.005em;margin-bottom:3px}
.spec dd{margin:0;font-size:16px;line-height:1.35;font-weight:600;color:var(--ink)}
.spec dd a{color:var(--pink-text)}
.spec dd a:hover{text-decoration:underline}

/* ---------- что есть в филиале ---------- */
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.feat{display:flex;align-items:center;gap:20px;padding:clamp(22px,2.4vw,32px);transition:transform .5s var(--spring),box-shadow .5s}
.feat:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.feat img{flex:0 0 64px;width:64px;height:64px}
.feat p{font-size:clamp(17px,1.4vw,19px);line-height:1.35;font-weight:600;color:var(--ink);letter-spacing:-.018em}
.feat:last-child{background:var(--pink-tint)}

/* ---------- галерея ---------- */
#foto .sh--split{align-items:flex-end}
#foto .sh--split .lead{margin:0;max-width:420px}
.pg-nav{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 clamp(28px,3.4vw,44px)}
.pg-nav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--pill);background:var(--white);box-shadow:var(--sh-1);font-size:15px;font-weight:600;color:var(--ink);transition:background .25s,color .25s,transform .3s var(--spring)}
.pg-nav a span{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:var(--pill);background:var(--pink-tint);color:var(--pink-text);font-size:13px;font-weight:700}
.pg-nav a:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.pg-nav a:hover span{background:rgba(255,255,255,.18);color:#fff}
.pg{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(20px,3vw,48px);padding:clamp(28px,3.2vw,44px) 0;border-top:1px solid var(--line);scroll-margin-top:calc(var(--gnav) + 20px)}
.pg__head h3{font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:-.024em}
.pg__head p{margin-top:8px;font-size:16px;line-height:1.4;color:var(--muted)}
.pg__grid{display:grid;gap:clamp(10px,1.2vw,16px)}
.pg__grid--c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pg__grid--c2{grid-template-columns:repeat(4,minmax(0,1fr))}
.pg__grid--c2 .ph{grid-column:span 2;aspect-ratio:4/3}
.pg__grid--c3b{grid-template-columns:repeat(3,minmax(0,1fr))}
.pg__grid--c3b .ph:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.ph{position:relative;display:block;width:100%;aspect-ratio:3/4;border-radius:var(--r-md);overflow:hidden;background:var(--cream-2);cursor:zoom-in;isolation:isolate}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--spring)}
.ph::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(to top,rgba(20,10,8,.62),rgba(20,10,8,0));pointer-events:none}
.ph span{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;color:#fff;font-size:14px;line-height:1.3;font-weight:600;text-align:left;letter-spacing:-.01em}
.ph:hover img{transform:scale(1.05)}

/* ---------- как учатся ---------- */
.lvls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.lvl{padding:clamp(26px,2.8vw,38px);display:flex;flex-direction:column;gap:18px;transition:transform .5s var(--spring),box-shadow .5s}
.lvl:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.lvl img{width:72px;height:72px}
.lvl .ticks{display:grid;gap:12px}

/* ---------- педагоги ---------- */
#pedagogi .team-lead{margin:14px 0 0;max-width:620px}
#pedagogi .sh--split{flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:flex-end}
#pedagogi .sh__tools{flex:0 0 auto}

/* ---------- стоимость ---------- */
.prs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.3vw,18px)}
.pr{display:flex;flex-direction:column;padding:clamp(22px,2vw,28px);padding-top:66px;transition:transform .5s var(--spring),box-shadow .5s}
.pr:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.pr .badge{left:clamp(22px,2vw,28px);top:clamp(20px,1.8vw,24px);background:var(--pink-tint);color:var(--pink-text);-webkit-backdrop-filter:none;backdrop-filter:none}
.pr__main b{display:block;font-size:clamp(26px,2.2vw,32px);line-height:1.05;font-weight:740;letter-spacing:-.035em;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.pr__main b small{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:-.01em;margin-left:2px}
.pr__main>span{display:block;margin-top:10px;font-size:14px;line-height:1.4;color:var(--muted)}
.pr__alt{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);margin-top:20px}
.pr__alt b{display:block;font-size:19px;font-weight:700;letter-spacing:-.022em;color:var(--pink-text);white-space:nowrap}
.pr__alt span{display:block;margin-top:6px;font-size:14px;line-height:1.4;color:var(--ink-2)}
.pr-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px clamp(20px,3vw,40px);margin-top:clamp(24px,3vw,36px);padding:clamp(22px,2.4vw,30px) clamp(22px,3vw,36px);border-radius:var(--r-lg);background:var(--cream)}
.pr-notes b{color:var(--ink);font-weight:650}

/* ---------- заявка ---------- */
#zayavka .form__alt a{white-space:nowrap}

/* ---------- другие филиалы ---------- */
.branches--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- общее для всех филиалов ---------- */
.spec--even>div:last-child{grid-column:auto}
.spec--even>div:nth-last-child(2){border-bottom:0}
.spec--even>div:nth-last-child(2):nth-child(odd){padding-right:18px}
.pg__grid--c4b{grid-template-columns:repeat(4,minmax(0,1fr))}
.pg__grid--c4b .ph:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}

/* ---------- директор ---------- */
.dir{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(22px,2.6vw,36px);border-radius:var(--r-xl);background:var(--white);box-shadow:var(--sh-2)}
.dir__photo{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--cream-2)}
.dir__photo img{width:100%;height:100%;object-fit:cover}
.dir__body .eyebrow{display:inline-block;padding:7px 14px;border-radius:var(--pill);background:var(--pink-tint);font-size:14px}
.dir__name{margin-top:18px;font-size:clamp(30px,3.2vw,44px);line-height:1.08}
.dir__role{margin-top:8px;font-size:17px;font-weight:600;color:var(--pink-text);letter-spacing:-.01em}
.dir__body .lead{margin-top:18px;max-width:640px;color:var(--ink-2);font-size:clamp(16px,1.3vw,19px)}
.dir__quote{position:relative;margin:22px 0 0;padding:20px 24px 20px 58px;border-radius:var(--r-md);background:var(--cream);font-size:clamp(16px,1.3vw,18px);line-height:1.45;font-weight:550;color:var(--ink);letter-spacing:-.012em}
.dir__quote::before{content:"\201C";position:absolute;left:18px;top:6px;font-size:58px;line-height:1;font-weight:700;background:linear-gradient(135deg,#FF5C8E,#FC145D);-webkit-background-clip:text;background-clip:text;color:transparent}
.dir__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:26px}
.dir__cta span{font-size:14.5px;color:var(--muted)}

/* ---------- планшет ---------- */
@media (max-width:1180px){
  .prs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1068px){
  .bh__in{grid-template-columns:minmax(0,1fr)}
  .bh__h1{max-width:none}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg{grid-template-columns:minmax(0,1fr);gap:18px}
  .lvls{grid-template-columns:minmax(0,1fr)}
  .pr-notes{grid-template-columns:minmax(0,1fr)}
  .branches--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dir{grid-template-columns:minmax(0,260px) minmax(0,1fr)}
}

/* ---------- телефон ---------- */
@media (max-width:734px){
  .crumbs{padding-top:12px;font-size:13px}
  .bh{padding:18px 0 56px}
  .bh .eyebrow{margin-bottom:14px}
  .bh__h1{font-size:clamp(34px,10vw,44px)}
  .bh .lead{margin-top:14px;font-size:17px}
  .bh .hero__cta{margin-top:22px}
  .bh .hero__cta{flex-direction:column;align-items:stretch}
  .bh .hero__cta .btn{width:100%;justify-content:center}
  .spec{margin:-28px 10px 0;padding:4px 16px;grid-template-columns:minmax(0,1fr)}
  .spec>div{padding:12px 0!important;border-bottom:1px solid var(--line)}
  .spec dd{font-size:15px}
  .feats{grid-template-columns:minmax(0,1fr);gap:10px}
  .feat{padding:16px 18px;gap:16px}
  .feat img{flex-basis:52px;width:52px;height:52px}
  .feat p{font-size:16px}
  .pg-nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:calc(-1*var(--gut));margin-right:calc(-1*var(--gut));padding:4px var(--gut) 8px}
  .pg-nav::-webkit-scrollbar{display:none}
  .pg-nav a{flex:0 0 auto;font-size:14px;min-height:40px;padding:0 14px}
  .pg__grid--c4,.pg__grid--c2,.pg__grid--c3b{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg__grid--c2 .ph{grid-column:auto;aspect-ratio:3/4}
  .pg__grid--c3b .ph:first-child{grid-column:auto;grid-row:auto;aspect-ratio:3/4}
  #pedagogi .sh--split{flex-direction:column;align-items:flex-start}
  .ph span{font-size:13px;left:10px;right:10px;bottom:9px}
  .prs{grid-template-columns:minmax(0,1fr);gap:10px}
  .pr{padding:20px 20px 20px;padding-top:58px}
  .pr .badge{left:20px;top:18px}
  .branches--3{grid-template-columns:minmax(0,1fr)}
  .pg__grid--c4b{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg__grid--c4b .ph:first-child{grid-column:auto;grid-row:auto;aspect-ratio:3/4}
  .pg__grid .ph.ph--wide{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}
  .spec--even>div:nth-last-child(2){border-bottom:1px solid var(--line)}
  .dir{grid-template-columns:minmax(0,1fr);gap:22px;padding:16px 16px 22px}
  .dir__photo{aspect-ratio:1/1}
  .dir__photo img{object-position:50% 20%}
  .dir__body{padding:0 6px}
  .dir__quote{padding:16px 18px 16px 50px}
  .dir__quote::before{left:14px;font-size:50px}
  .dir__cta .btn{width:100%;justify-content:center}
}
@media (max-width:380px){
  .dock .btn{min-width:0;white-space:normal;line-height:1.15;font-size:14px;padding:0 10px;text-align:center}
  .spec{margin-left:0;margin-right:0}
  .pr__main b{font-size:24px}
}
#pedagogi .team-more{margin-top:clamp(20px,2.4vw,30px)}

/* mobile-fix 2026-11-12 */
/* «Педагоги» на филиалах и в классах: в колонке (≤734px) flex-basis 480px из .sh--split>div становился высотой → пустота 300–430px над карточками на 421–734px (iPhone Plus/Pro Max, планшеты) */
@media (max-width:734px){#pedagogi .sh--split>div{flex:0 0 auto}}
/* длинные слова в узких карточках не вылезают за край */
.ph span,.rt__name,.kx-st,.vc-br span,.bl-mini b,.person__b h3{overflow-wrap:break-word}
@media (max-width:420px){
  .ph span,.rt__name,.kx-st,.vc-br span,.pgx .people .person__b h3{-webkit-hyphens:auto;hyphens:auto}
  .pgx .people .person__b h3{font-size:16px}
}
@media (max-width:1100px){.bl-mini b{-webkit-hyphens:auto;hyphens:auto}}
@media (max-width:350px){.kx-q span{max-width:100%}.kx-q b{white-space:normal;overflow:visible}}
/* уроки: длинное слово в H1 («и жизнедеятельность») обрезалось на 320–390px; пустые заголовки-распорки не дают дыр */
@media (max-width:420px){.article__h1{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}}
.prose :is(h2,h3,h4):empty{display:none}
/* блок директора (Бутово, Геленджик): «Записаться на консультацию» на 320px упиралась в края кнопки */
@media (max-width:360px){.dir__cta .btn{padding:0 14px;white-space:normal;text-align:center;line-height:1.2}}