/* ================================================================
   ДОШКОЛЬНОЕ ОТДЕЛЕНИЕ — page components (doshkolnoe.css)
   ================================================================ */

/* ── HERO без фото-колонки — одна колонка + фото школы на фоне ── */
.m-page-hero__grid { grid-template-columns: 1fr; }
.m-page-hero__main { max-width: 880px; }
body[data-page="doshkolnoe"] .m-page-hero { background: linear-gradient(150deg, rgba(13,44,80,0.93) 0%, rgba(10,35,72,0.87) 55%, rgba(11,32,64,0.94) 100%), url("img/school-building.jpg") center / cover no-repeat; }

/* ── INTRO ── */
.m-section--intro { background: var(--m-paper-warm); }
.m-intro { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: center; }
.m-intro__media-wrap { position: relative; }
.m-intro__media { position: relative; margin: 0; aspect-ratio: 4/5; overflow: hidden; background: var(--m-ink); box-shadow: 0 34px 64px -24px rgba(13,44,80,0.38); }
.m-intro__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--m-img); transition: transform 1s var(--m-ease), filter 0.6s; }
.m-intro__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(13,44,80,0.04) 0%,rgba(13,44,80,0.34) 100%); mix-blend-mode: multiply; }
.m-intro__media:hover img { transform: scale(1.04); filter: var(--m-img-hover); }
.m-intro__media-wrap::before { content: ""; position: absolute; top: 18px; left: -18px; width: 72px; height: 72px; border-top: 2px solid var(--m-accent); border-left: 2px solid var(--m-accent); z-index: 2; }
.m-intro__media-wrap::after { content: ""; position: absolute; bottom: 18px; right: -18px; width: 72px; height: 72px; border-bottom: 2px solid var(--m-accent); border-right: 2px solid var(--m-accent); z-index: 2; }
.m-intro__caption { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 40px 20px 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.94); background: linear-gradient(to top, rgba(8,28,55,0.8), transparent); }
.m-intro__lead { font-family: var(--m-display); font-size: clamp(24px,2.6vw,32px); line-height: 1.25; font-weight: 500; color: var(--m-ink); margin: 0 0 20px; letter-spacing: -0.01em; text-wrap: pretty; font-optical-sizing: auto; }
.m-intro__copy { font-size: 17px; line-height: 1.66; color: var(--m-text); margin: 0 0 18px; max-width: 640px; }
.m-intro__copy:last-of-type { margin-bottom: 0; }
.m-intro__copy strong { font-weight: 600; color: var(--m-ink); }

/* ── BRIDGE callout (преемственность) ── */
.m-bridge { margin-top: 26px; padding: 26px 30px 28px; background: var(--m-paper); border: 1px solid var(--m-rule); border-left: 3px solid var(--m-accent); box-shadow: 0 18px 40px -22px rgba(13,44,80,0.26); }
.m-bridge__head { display: flex; align-items: center; gap: 14px; }
.m-bridge__icon { width: 38px; height: 38px; flex: none; color: var(--m-accent-deep); }
.m-bridge__icon svg { width: 100%; height: 100%; }
.m-bridge__title { font-family: var(--m-display); font-size: 21px; font-weight: 500; color: var(--m-ink); margin: 0; letter-spacing: -0.01em; }
.m-bridge__copy { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--m-rule); font-size: 15px; line-height: 1.6; color: var(--m-text); text-wrap: pretty; }
.m-bridge__copy strong { color: var(--m-accent-deep); font-weight: 600; }

/* ── ADVANTAGES ── */
.m-adv-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--m-rule); border: 1px solid var(--m-rule); }
.m-adv { background: var(--m-paper); padding: 30px 28px 34px; display: flex; flex-direction: column; gap: 12px; transition: background 0.2s; }
.m-adv:hover { background: var(--m-paper-warm); }
.m-adv__icon { width: 42px; height: 42px; color: var(--m-accent); }
.m-adv__icon svg { width: 100%; height: 100%; display: block; stroke-width: 1.5; }
.m-adv__title { font-family: var(--m-display); font-size: 20px; font-weight: 500; line-height: 1.2; margin: 4px 0 0; color: var(--m-ink); letter-spacing: -0.01em; }
.m-adv__copy { font-size: 14px; line-height: 1.55; color: var(--m-text-mute); margin: 0; text-wrap: pretty; }

/* ── PROGRAM AREAS (ФГОС) ── */
.m-section--prog { background: var(--m-paper); }
.m-prog-areas { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.m-prog-area { border: 1px solid var(--m-rule); background: var(--m-paper); padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 14px; transition: transform 0.4s var(--m-ease), box-shadow 0.4s var(--m-ease), border-color 0.3s; }
.m-prog-area:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -18px rgba(10,35,72,0.16); border-color: var(--m-accent-soft); }
.m-prog-area__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.m-prog-area__icon { width: 40px; height: 40px; flex: none; color: var(--m-accent-deep); }
.m-prog-area__icon svg { width: 100%; height: 100%; stroke-width: 1.5; }
.m-prog-area__hours { text-align: right; flex: none; }
.m-prog-area__hours b { display: block; font-family: var(--m-display); font-size: 32px; font-weight: 500; line-height: 1; color: var(--m-ink); letter-spacing: -0.02em; }
.m-prog-area__hours span { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-text-mute); }
.m-prog-area__name { font-family: var(--m-display); font-size: 22px; font-weight: 500; line-height: 1.15; margin: 0; color: var(--m-ink); letter-spacing: -0.01em; }
.m-prog-area__list { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--m-rule); display: flex; flex-direction: column; gap: 9px; }
.m-prog-area__list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--m-text); }
.m-prog-area__list li span:last-child { font-size: 12px; font-weight: 600; color: var(--m-accent-deep); white-space: nowrap; letter-spacing: 0.02em; }
.m-prog-foot { margin-top: 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 26px; background: var(--m-paper-warm); border: 1px solid var(--m-rule); }
.m-prog-foot b { font-family: var(--m-display); font-size: 30px; font-weight: 500; color: var(--m-ink); letter-spacing: -0.02em; }
.m-prog-foot span { font-size: 15px; color: var(--m-text-mute); }
.m-prog-foot__note { margin-left: auto; font-size: 13px; color: var(--m-text-mute); font-style: italic; }

/* ── DAY (распорядок) ── */
.m-section--day { background: var(--m-ink-deep); color: #fff; position: relative; overflow: hidden; }
.m-section--day::before { content: ""; position: absolute; top: -200px; right: -150px; width: 500px; height: 500px; background: radial-gradient(circle,rgba(212,154,58,0.16),transparent 70%); z-index: 0; }
.m-section--day::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(232,201,138,0.4),transparent); }
.m-section--day .m-shell { position: relative; z-index: 1; }
.m-day { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.m-mod { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px; transition: background 0.25s, border-color 0.25s, transform 0.25s; position: relative; }
.m-mod:hover { background: rgba(255,255,255,0.07); border-color: rgba(212,154,58,0.5); transform: translateY(-4px); }
.m-mod--meal { background: linear-gradient(165deg,rgba(212,154,58,0.16),rgba(212,154,58,0.04)); border-color: rgba(212,154,58,0.42); }
.m-mod__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.m-mod__time { font-family: var(--m-display); font-style: italic; font-weight: 500; font-size: 20px; color: var(--m-accent-soft); letter-spacing: -0.01em; line-height: 1; }
.m-mod__tag { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.m-mod__name { font-family: var(--m-display); font-size: 19px; font-weight: 500; line-height: 1.2; margin: 2px 0 0; color: #fff; letter-spacing: -0.01em; }
.m-mod__copy { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.7); margin: 0; }

/* ── SCHEDULE (interactive weekly) ── */
.m-section--sched { position: relative; background: linear-gradient(160deg, rgba(13,44,80,0.92) 0%, rgba(10,35,72,0.86) 55%, rgba(13,44,80,0.93) 100%), url("img/school-building.jpg") center / cover no-repeat; }
.m-section--sched .m-sec-head__title { color: #fff; }
.m-section--sched .m-sec-head__copy { color: rgba(255,255,255,0.8); }
.ds-wrap { border: 1px solid var(--m-rule); background: var(--m-paper); box-shadow: 0 34px 80px -36px rgba(8,22,46,0.6); }
.ds-tab__abbr { display: none; }
.ds-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--m-rule); background: var(--m-paper-warm); }
.ds-tab { flex: 1; min-width: 120px; padding: 16px 14px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--m-text-mute); border-right: 1px solid var(--m-rule); position: relative; transition: color 0.2s, background 0.2s; }
.ds-tab:last-child { border-right: 0; }
.ds-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--m-accent); transform: scaleX(0); transition: transform 0.25s var(--m-ease); }
.ds-tab:hover { color: var(--m-ink); background: rgba(255,255,255,0.5); }
.ds-tab.is-active { color: var(--m-ink); background: var(--m-paper); }
.ds-tab.is-active::after { transform: scaleX(1); }
.ds-day { display: none; padding: 8px 0; }
.ds-day.is-active { display: block; animation: dsFade 0.35s var(--m-ease); }
@keyframes dsFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ds-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 20px; align-items: center; padding: 15px 28px; border-bottom: 1px solid var(--m-rule-soft); transition: background 0.18s; }
.ds-row:last-child { border-bottom: 0; }
.ds-row:hover { background: var(--m-paper-warm); }
.ds-row__time { font-family: var(--m-display); font-size: 17px; font-weight: 500; color: var(--m-ink); letter-spacing: -0.01em; white-space: nowrap; }
.ds-row__name { font-size: 16px; color: var(--m-text); font-weight: 500; }
.ds-row__cat { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.cat-lang { background: rgba(33,80,143,0.1); color: var(--m-ink-soft); }
.cat-art  { background: rgba(198,149,68,0.14); color: var(--m-accent-deep); }
.cat-mind { background: rgba(31,138,91,0.12); color: #1f7a52; }
.cat-body { background: rgba(190,80,80,0.12); color: #a64848; }
.cat-speech { background: rgba(120,80,160,0.12); color: #7a52a3; }
.ds-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px; }
.ds-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--m-text-mute); }
.ds-legend i { width: 12px; height: 12px; border-radius: 3px; }
.ds-note { margin-top: 18px; font-size: 13.5px; color: var(--m-text-mute); }
.ds-note a { color: var(--m-accent-deep); border-bottom: 1px solid var(--m-accent); }
.m-section--sched .ds-legend span { color: rgba(255,255,255,0.82); }
.m-section--sched .ds-note { color: rgba(255,255,255,0.72); }
.m-section--sched .ds-note strong { color: #fff; }
.m-section--sched .ds-note a { color: var(--m-accent-soft); border-bottom-color: var(--m-accent-soft); }

/* ── LOGOPED ── */
.m-section--logoped { background: var(--m-paper-warm); }
.m-logoped { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 50px; align-items: start; }
.m-logoped__card { background: var(--m-paper); border: 1px solid var(--m-rule); border-top: 3px solid var(--m-accent); padding: 30px 30px 32px; }
.m-logoped__avatar { width: 84px; height: 84px; border-radius: 50%; background: var(--m-ink-deep); color: var(--m-accent-soft); display: flex; align-items: center; justify-content: center; font-family: var(--m-display); font-size: 34px; font-weight: 500; margin-bottom: 18px; }
.m-logoped__name { font-family: var(--m-display); font-size: 24px; font-weight: 500; color: var(--m-ink); margin: 0 0 6px; letter-spacing: -0.01em; }
.m-logoped__role { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-accent-deep); margin: 0 0 20px; }
.m-logoped__meta { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--m-rule); display: flex; flex-direction: column; gap: 14px; }
.m-logoped__meta li { display: flex; flex-direction: column; gap: 3px; }
.m-logoped__meta dt { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-text-mute); }
.m-logoped__meta dd { margin: 0; font-size: 14.5px; color: var(--m-text); line-height: 1.45; }
.m-logoped__body h3 { font-family: var(--m-display); font-size: clamp(24px,2.6vw,32px); font-weight: 500; line-height: 1.12; color: var(--m-ink); margin: 0 0 18px; letter-spacing: -0.01em; text-wrap: balance; }
.m-logoped__body p { font-size: 16px; line-height: 1.62; color: var(--m-text); margin: 0 0 16px; }
.m-logoped__body p strong { color: var(--m-ink); font-weight: 600; }
.m-logoped__tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.m-logoped__tags span { font-size: 12.5px; font-weight: 500; padding: 7px 14px; background: var(--m-paper); border: 1px solid var(--m-rule); border-radius: 999px; color: var(--m-text-mute); }

/* ── MEALS / CARE ── */
.m-section--care { background: var(--m-paper); }
.m-care { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--m-rule); border: 1px solid var(--m-rule); }
.m-care__cell { background: var(--m-paper); padding: 28px 24px; display: flex; flex-direction: column; gap: 8px; }
.m-care__icon { width: 38px; height: 38px; color: var(--m-accent); margin-bottom: 6px; }
.m-care__icon svg { width: 100%; height: 100%; stroke-width: 1.5; }
.m-care__title { font-family: var(--m-display); font-size: 19px; font-weight: 500; color: var(--m-ink); margin: 0; letter-spacing: -0.01em; }
.m-care__copy { font-size: 14px; line-height: 1.55; color: var(--m-text-mute); margin: 0; }
.m-meals { margin-top: 22px; display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--m-rule); border: 1px solid var(--m-rule); }
.m-meal { background: var(--m-ink-deep); color: #fff; padding: 22px 22px; display: flex; flex-direction: column; gap: 4px; transition: background 0.3s; }
.m-meal:hover { background: var(--m-ink-deeper); }
.m-meal__i { font-family: var(--m-display); font-style: italic; font-size: 13px; color: var(--m-accent-soft); opacity: 0.75; }
.m-meal__time { font-family: var(--m-display); font-size: 26px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; margin-top: 2px; }
.m-meal__name { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-accent-soft); margin-top: 8px; }

/* ── GALLERY ── */
.m-section--gallery { background: var(--m-paper-warm); }
.m-gallery { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 200px; gap: 14px; }
.m-gallery__item { position: relative; overflow: hidden; background: var(--m-ink); }
.m-gallery__item img { width: 100%; height: 100%; object-fit: cover; filter: var(--m-img); transition: transform 0.9s var(--m-ease), filter 0.6s; }
.m-gallery__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(10,35,72,0.05),rgba(10,35,72,0.42)); mix-blend-mode: multiply; opacity: 0.85; transition: opacity 0.5s; }
.m-gallery__item:hover img { transform: scale(1.06); filter: var(--m-img-hover); }
.m-gallery__item:hover::after { opacity: 0.5; }
.m-gallery__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 32px 18px 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: #fff; background: linear-gradient(to top, rgba(8,28,55,0.7), transparent); }
.m-gallery__item--tall { grid-row: span 2; }
.m-gallery__item--wide { grid-column: span 2; }

/* ── ADMISSION CTA ── */
.m-section--admit { background: var(--m-ink-deep); color: #fff; position: relative; overflow: hidden; }
.m-section--admit::before { content: ""; position: absolute; top: -160px; left: -120px; width: 460px; height: 460px; background: radial-gradient(circle,rgba(212,154,58,0.18),transparent 70%); }
.m-section--admit .m-shell { position: relative; z-index: 1; }
.m-admit { display: grid; grid-template-columns: 1fr 0.9fr; gap: 56px; align-items: center; }
.m-admit__title { font-family: var(--m-display); font-weight: 500; font-size: clamp(30px,3.4vw,46px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 20px; text-wrap: balance; }
.m-admit__title em { font-style: italic; background: var(--m-gold-metal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.m-admit__copy { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.8); margin: 0 0 28px; max-width: 50ch; }
.m-admit__steps { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.m-admit__steps li { display: flex; align-items: flex-start; gap: 16px; }
.m-admit__steps b { font-family: var(--m-display); font-style: italic; font-size: 22px; color: var(--m-accent-soft); flex: none; width: 30px; }
.m-admit__steps span { font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,0.85); padding-top: 3px; }
.m-admit__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.m-admit__panel { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16); padding: 34px 32px; backdrop-filter: blur(4px); }
.m-admit__panel h3 { font-family: var(--m-display); font-size: 22px; font-weight: 500; margin: 0 0 18px; color: #fff; }
.m-admit__contacts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.m-admit__contacts li { display: flex; flex-direction: column; gap: 4px; }
.m-admit__contacts dt { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-accent-soft); }
.m-admit__contacts dd { margin: 0; font-size: 19px; font-weight: 600; color: #fff; }
.m-admit__contacts dd a { transition: color 0.2s; }
.m-admit__contacts dd a:hover { color: var(--m-accent-soft); }

/* ── RESPONSIVE ── */
@media (max-width: 980px) {
  /* Декоративные углы уходят на -18px за границу — без clip могут давать горизонтальный скролл */
  .m-section--intro { overflow: hidden; }
  .m-intro { grid-template-columns: 1fr; gap: 36px; }
  .m-intro__media { aspect-ratio: 16/11; }
  .m-prog-areas { grid-template-columns: 1fr; }
  .m-adv-grid { grid-template-columns: repeat(2,1fr); }
  .m-day { grid-template-columns: 1fr 1fr; }
  .m-logoped { grid-template-columns: 1fr; gap: 32px; }
  .m-care, .m-meals { grid-template-columns: repeat(2,1fr); }
  .m-gallery { grid-template-columns: repeat(2,1fr); }
  .m-admit { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 680px) {
  .m-adv-grid, .m-day, .m-care, .m-meals { grid-template-columns: 1fr; }
  .ds-row { grid-template-columns: 110px 1fr; gap: 10px 14px; padding: 14px 18px; }
  .ds-row__cat { grid-column: 2; justify-self: start; }
  .ds-tabs { flex-wrap: nowrap; }
  .ds-tab { min-width: 0; flex: 1 1 0; font-size: 14px; padding: 13px 4px; }
  .ds-tab__full { display: none; }
  .ds-tab__abbr { display: inline; }
  .m-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .m-gallery__item--wide { grid-column: span 2; }
}