@charset "UTF-8";
.page-wrapper {
  width: 1280px;
}

/* .content has overflow:hidden globally (global.css), which breaks
   position: sticky below — sticky can't see past the nearest ancestor with
   overflow != visible to reach the real scrolling element (.content-wrapper).
   Scoped to school-page only. */
.content:has(.school-page) {
  overflow: visible;
}

.school-hero {
  width: 100%;
  height: 550px;
  overflow: hidden;
  background: #12171c;
}
.school-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.school-main-image {
  width: 100%;
  height: 458px;
  overflow: hidden;
  border-radius: 20px;
  margin-bottom: 30px;
}
.school-main-image__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.school-page {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin: 0 auto;
}
.school-page main {
  width: 770px;
  display: flex;
  flex-flow: column nowrap;
}
.school-page aside {
  width: 424px;
  position: relative;
}
.school-page aside .fixed-wrapper {
  position: absolute;
  left: -20px;
}
.school-page aside .aside-wrapper {
  position: fixed;
  width: 492px;
  padding: 10px 32px 32px 20px;
  overflow-y: auto;
  height: calc(100vh - 200px);
}

/* school-page previously overrode position to sticky here, then to
   static+JS-transform, trying to work around a confirmed WebKit bug where
   position: sticky computed correctly (verified in Safari Web Inspector) but
   never repainted on scroll. The static+transform replacement avoided that
   bug but was visibly janky in Safari — a JS scroll handler recomputing
   transform every frame fights the browser's own (compositor-driven, main-
   thread-independent) scroll rendering and can't keep pace during fast/
   momentum scrolling.
   Settled on: no override here at all, so school-page just inherits
   global.css's position: fixed — same as every other page-wrapper type
   (RegularPage, Exhibition, ...), which already tracks scroll smoothly in
   Safari with zero per-frame JS, and already has the fixed+clamp mechanism
   in Banners.cshtml that switches it to position: absolute (pinned to the
   bottom of aside) once the page content runs out. Reusing a mechanism
   that's already proven in Safari beats maintaining a school-page-specific
   one. */
@media (min-width: 1200px) {
  .content .page-wrapper.school-page aside .fixed-wrapper {
    /* Without an explicit height, .fixed-wrapper collapses to ~0 once
       aside--clamped switches it to position:static — its only child
       (.aside-wrapper) is position:absolute at that point and no longer
       contributes to its box. That destabilized aside's own geometry right
       at the clamp boundary, which the JS in Banners.cshtml re-measures on
       every scroll tick — so the clamp condition could flip back and forth
       right as you reached the bottom instead of settling. Matching height
       to aside (which is sized by flex stretch, independent of this) keeps
       it stable in both the fixed and clamped states. */
    height: 100%;
  }
  .content .page-wrapper.school-page aside:not(.aside--clamped) .aside-wrapper {
    /* header.topline is position:fixed, 152px tall, z-index:1000. The shared
       top:105px (global.css) sits above the header's bottom edge, so the
       first ~47px of the aside rendered underneath it. Only visible once the
       aside actually tracked scroll — while every attempt above kept it
       frozen in place, this went unnoticed. Overriding here rather than
       touching the shared value, since other page types aren't confirmed to
       have the same issue. */
    top: 242px !important;
  }
  .content .page-wrapper.school-page aside.aside--clamped .aside-wrapper {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: -20px !important;
    width: 492px !important;
    height: auto !important;
  }
}


/* Organization.cshtml: breadcrumbs outside page-wrapper — align with main column */
.content--school-page > .breadcrumbs-container {
  width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}

.content--school-page > .breadcrumbs-container > .breadcrumbs-wrapper {
  width: 770px;
  max-width: 100%;
}

/* OrganizationWithOrder.cshtml */
.content--school-page > .school-page-breadcrumbs-container {
  width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}

.content--school-page > .school-page-breadcrumbs-container > .school-page__breadcrumbs {
  width: 770px;
  max-width: 100%;
}

/* Breadcrumbs spacing */
.school-page__breadcrumbs {
  margin: 90px 0 30px;
}

@media (max-width: 1279px) {
  .school-page__breadcrumbs {
    margin: 20px 0 30px;
  }
}

.school-page__breadcrumbs #breadcrumbs .breadcrumbs-list {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
}

.school-page__breadcrumbs #breadcrumbs .nav-item {
  font-family: Geologica;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -1.03px;
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
}

.school-page__breadcrumbs #breadcrumbs .nav-item::after {
  content: "/";
  color: #38596A;
  margin-left: 8px;
}

.school-page__breadcrumbs #breadcrumbs .nav-item:last-child::after {
  display: none;
}

.school-page__breadcrumbs #breadcrumbs .nav-item span,
.school-page__breadcrumbs #breadcrumbs .nav-item a {
  color: #38596A;
  text-decoration: none;
}

.school-page__breadcrumbs #breadcrumbs .nav-item:last-child span,
.school-page__breadcrumbs #breadcrumbs .nav-item:last-child a {
  color: #748F9F;
}

.school-page__breadcrumbs #breadcrumbs .nav-item a:hover {
  text-decoration: underline;
}

/* Title */
.school-page__title {
  margin: 0 0 20px;
  font-family: Geologica;
  font-size: 48px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -2.21px;
  color: #073248;
}

/* Category + location row */
.school-page__meta {
  display: flex;
  flex-flow: row nowrap;
  gap: 24px;
  align-items: center;
  margin-bottom: 20px;
}
.school-page__meta .school-group {
  width: 261px;
  height: 27px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Geologica;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  letter-spacing: -0.2px;
  color: #EF6860;
  background-color: rgba(239, 104, 96, 0.15);
  white-space: nowrap;
}
.school-page__meta .location {
  padding-left: 27px;
  position: relative;
  color: #0083DA;
  text-decoration: none;
  font-family: Geologica;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.22px;
}
.school-page__meta .location:before {
  content: " ";
  width: 21px;
  height: 18px;
  position: absolute;
  top: 4px;
  left: 0;
  background: url("/images/location/geo.svg") center center no-repeat;
}

/* Section headings */
.org-section-title,
.org-about__content h1,
.org-about__content h2 {
  margin: 54px 0;
  font-family: Geologica;
  font-size: 48px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -2.21px;
  color: #073248;
}
.org-section-title strong, .org-section-title span,
.org-about__content h1 strong,
.org-about__content h1 span,
.org-about__content h2 strong,
.org-about__content h2 span {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.org-section-title {
  margin-top: 0;
  margin-bottom: 32px;
}

/* Key Facts — red dash bullets */
.org-key-facts {
  margin-bottom: 48px;
}
.org-key-facts ul.key-facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
}
.org-key-facts ul.key-facts li {
  padding-left: 28px;
  position: relative;
  color: #073248;
  font-size: 16px;
  line-height: 1.5;
}
.org-key-facts ul.key-facts li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: #ef6860;
  font-weight: 700;
}

/* About section */
.org-about {
  margin-bottom: 48px;
}

.org-about__content .org-about {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}
@media (min-width: 1200px) {
  .org-about .org-section-title {
    display: none !important;
  }
}

.org-about__content,
.org-about__content p,
.org-about__content div,
.org-about__content li,
.best-price-warranty,
.best-price-warranty p,
.best-price-warranty div,
.best-price-warranty li {
  font-family: Geologica;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: -0.73px;
  color: #313131;
}
.org-about__content span,
.best-price-warranty span {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.org-about__content p,
.org-about__content div:not([class]),
.best-price-warranty p,
.best-price-warranty div:not([class]) {
  margin: 0 0 16px;
}
.org-about__content strong,
.best-price-warranty strong {
  color: #073248;
  font-family: inherit;
}

.org-about h3,
.org-about h4,
.org-about h5,
.org-about h6 {
  margin-bottom: 20px;
}

/* "Вас может заинтересовать" section */
.school-related {
  margin: 80px auto;
  padding: 0 20px;
}
.school-related__title {
  font-size: 70px;
  font-weight: normal;
  color: #073248;
  margin: 0 0 48px;
  letter-spacing: -0.92px;
  text-align: center;
  padding: 100px 0 80px;
}

.content .school-related {
  display: block;
  margin: 0;
  width: auto;
  padding: 0;
}

/* === school-related swiper — полная инфраструктура (не зависит от root.css) === */
.school-related-swiper-wrap {
  position: relative;
  padding: 0 0 80px;
  overflow: hidden;
}

.school-related-container {
  width: 100%;
}

.school-related-swiper {
  overflow: visible;
  box-sizing: border-box;
}

.school-related-swiper-wrap .pp-edge {
  position: absolute;
  top: 0;
  bottom: 100px;
  width: max(60px, (100vw - 984px - 120px) / 2);
  cursor: pointer;
  z-index: 10;
}

.school-related-swiper-wrap .pp-edge-left {
  left: 0;
}

.school-related-swiper-wrap .pp-edge-right {
  right: 0;
}

.school-related-swiper-wrap .pp-indicator {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 32px;
  width: 200px;
  height: 4px;
  background: #d1d9eb;
  border-radius: 2px;
  overflow: hidden;
}

.school-related-swiper-wrap .pp-indicator-thumb {
  display: block;
  height: 100%;
  background: #ef6860;
  border-radius: 2px;
  transition: transform 0.25s;
}

/* Статичный режим — все карточки помещаются на экране */
.school-related-swiper-wrap.pp-static .school-related-swiper .swiper-wrapper {
  display: flex;
  justify-content: center;
  transform: none !important;
  height: auto;
}

.school-related-swiper .swiper-wrapper {
  height: auto !important;
}

.school-related-swiper-wrap.pp-static .swiper-slide {
  margin: 0 30px 0 0 !important;
}

.school-related-swiper-wrap.pp-static .pp-edge {
  display: none;
}

.school-related-swiper-wrap.pp-static .pp-indicator {
  bottom: 24px;
}

@media (max-width: 768px) {
  .school-related-swiper-wrap .pp-edge {
    display: none;
  }
}
.school-related-slide {
  width: 328px;
  height: 499px;
  cursor: pointer;
}
.school-related-slide .card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}
.school-related-slide img {
  height: 204px;
  width: 100%;
  object-fit: cover;
  flex-shrink: 0;
}
.school-related-slide .item__content {
  padding: 16px 30px 0;
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
  flex: 1;
  overflow: hidden;
}
.school-related-slide .item__header {
  display: flex;
  height: 58px;
  margin: 0;
  align-items: center;
  font-size: 16px;
  color: #073248;
}
.school-related-slide .item__text {
  margin: 0;
  height: 100px;
  overflow: hidden;
}
.school-related-slide .item__footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 0 30px;
  height: 108px;
  border-top: 1px solid #D1D9EB;
  flex-shrink: 0;
}
.school-related-slide .item__geo {
  padding-left: 21px;
  position: relative;
  color: inherit;
  text-decoration: none;
}
.school-related-slide .item__geo:before {
  content: " ";
  width: 21px;
  height: 18px;
  position: absolute;
  top: 3px;
  left: 0;
  background: url("/images/location/geo.svg") center center no-repeat;
}
.school-related-slide .item__footer__bottom {
  display: flex;
  flex-flow: row nowrap;
}
.school-related-slide .footer__item {
  width: 50%;
  padding-left: 21px;
  position: relative;
  color: #38596A;
}
.school-related-slide .item__age:before {
  content: " ";
  width: 21px;
  height: 18px;
  position: absolute;
  top: 3px;
  left: 0;
  background: url("/images/location/age.svg") center center no-repeat;
}
.school-related-slide .item__price:before {
  content: " ";
  width: 21px;
  height: 18px;
  position: absolute;
  top: 3px;
  left: 0;
  background: url("/images/location/price.svg") center center no-repeat;
}

.subscription {
  padding-bottom: 0;
}

/* Responsive */
@media (max-width: 1280px) {
  .page-wrapper {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .school-page main {
    width: 100%;
    max-width: 770px;
    flex: 1 1 auto;
  }
  .school-page {
    flex-flow: row wrap;
  }
  .content--school-page > .breadcrumbs-container,
  .content--school-page > .school-page-breadcrumbs-container {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .content--school-page > .breadcrumbs-container > .breadcrumbs-wrapper,
  .content--school-page > .school-page-breadcrumbs-container > .school-page__breadcrumbs {
    width: 100%;
    max-width: 770px;
  }
}

@media (max-width: 1279px) {
  .content--school-page > .breadcrumbs-container,
  .content--school-page > .school-page-breadcrumbs-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (max-width: 1199px) {
  .school-hero {
    height: 280px;
  }
  .school-page {
    flex-direction: column;
  }
  .school-page main {
    width: 100%;
  }
  .school-page aside {
    width: 100%;
  }
  .school-page aside .fixed-wrapper {
    position: static;
  }
  .school-page aside .aside-wrapper {
    position: static;
    width: 100%;
    height: auto;
    padding: 0;
    overflow-y: visible;
  }
  .school-related__title {
    font-size: 28px;
    margin-bottom: 32px;
  }
  .school-related {
    margin: 48px auto;
  }
}
@media (max-width: 768px) {
  .school-page {
    max-width: 100%;
  }
  .school-page__title {
    font-size: 28px;
  }
  .org-section-title {
    font-size: 20px;
    margin-bottom: 24px;
  }
  .school-related-slide {
    width: 280px;
    height: 480px;
  }
  .school-related-slide img {
    height: 175px;
  }
  .school-related {
    margin: 40px auto;
  }
  .school-related__title {
    font-size: 24px;
    margin-bottom: 24px;
    padding: 50px 40px;
  }
  .school-related-swiper-wrap {
    padding-bottom: 56px;
  }
  .school-related-swiper-wrap .pp-indicator {
    bottom: 20px;
    width: 160px;
  }
  .org-about {
    margin-bottom: 32px;
  }
  .org-about__content {
    font-size: 15px;
    overflow-x: hidden;
    word-break: break-word;
  }
  .org-about__content * {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .org-about__content img {
    max-width: 100%;
    height: auto;
  }
  .org-about__content table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
}
@media (max-width: 480px) {
  .org-about__content {
    font-size: 14px;
    line-height: 1.6;
  }
  .org-about__content p {
    margin-bottom: 12px;
  }
  .school-related-slide {
    width: 240px;
    height: 480px;
  }
  .school-related-slide img {
    height: 150px;
  }
  .school-related-slide .item__content {
    padding: 12px 16px 0;
  }
  .school-related-slide .item__text {
    height: auto;
    flex: 1;
    overflow: hidden;
  }
  .school-related-slide .item__footer {
    padding: 0 16px;
    height: 100px;
  }
  aside  {
    display: none;
  }
}

/* Footer and Subscription spacing overrides for school page */
@media (min-width: 769px) {
  .subscription {
    padding-bottom: 0 !important;
  }
  .subscription-background-img {
    height: 580px !important;
    padding-top: 80px !important;
  }
}
footer {
  margin-top: 0 !important;
}

h1, h2, h3, h4, h5, h6,
.select-program,
.select-residence {
  scroll-margin-top: 100px;
}

.select-program, .select-residence {
  margin-top: 15px;
  margin-bottom: 25px;
}

p + .select-program,
p + .select-residence {
  margin-top: 40px !important;
}

.school-select-program, .school-select-residence {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-bottom: 16px;
  box-shadow: 10px 10px 30px 0px #D1D9EB;
  border-radius: 27px;
  background: #FAFCFD;
  min-height: auto;
  height: auto;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
}
.school-select-program:hover, .school-select-residence:hover {
  transform: translateY(-2px);
  box-shadow: 10px 15px 35px 0px rgba(209, 217, 235, 0.8);
  background-color: #ffffff;
}
.school-select-program:has(input:checked) .radio-input label, .school-select-residence:has(input:checked) .radio-input label {
  color: #EF6860;
}
.school-select-program .radio-input, .school-select-residence .radio-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  padding-left: 94px;
  padding-top: 16px;
  padding-bottom: 16px;
  grid-column: 1;
}
.school-select-program .radio-input label, .school-select-residence .radio-input label {
  font-family: Geologica, sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 30px;
  letter-spacing: -1.2px;
  color: #073248;
  max-width: 560px;
  margin-bottom: 0;
  margin-left: 0;
  padding-left: 0;
  vertical-align: middle;
  display: inline-block;
}
.school-select-program .styled-radio .checkmark, .school-select-residence .styled-radio .checkmark {
  height: 32px;
  width: 32px;
  background-color: #f8dfdd;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 32px;
}
.school-select-program .styled-radio:hover input ~ .checkmark, .school-select-residence .styled-radio:hover input ~ .checkmark {
  background-color: #EF6860;
  display: inline-block;
}
.school-select-program .styled-radio input:checked ~ .checkmark, .school-select-residence .styled-radio input:checked ~ .checkmark {
  background-color: #EF6860;
  color: white;
  display: inline-block;
}
.school-select-program .styled-radio input:checked ~ .checkmark::before, .school-select-residence .styled-radio input:checked ~ .checkmark::before {
  content: "\2713";
  font-size: 24px;
  text-align: center;
  display: block;
  line-height: 32px;
}
.school-select-program .styled-radio .checkmark:after, .school-select-residence .styled-radio .checkmark:after {
  content: "";
  display: none;
}
.school-select-program .expand-icon, .school-select-residence .expand-icon {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 40px;
  user-select: none;
  margin-right: 24px;
  grid-column: 2;
}
.school-select-program .expand-icon img,
.school-select-residence .expand-icon img {
  display: none !important;
}
.school-select-program .expand-icon span,
.school-select-residence .expand-icon span {
  display: block !important;
}
.school-select-program .expand-icon svg, .school-select-residence .expand-icon svg {
  display: block !important;
  width: 25px !important;
  height: 25px !important;
  transition: transform 0.25s ease;
}
.school-select-program.opened .expand-icon svg, .school-select-residence.opened .expand-icon svg {
  transform: rotate(-90deg);
}
.school-select-program .expand-icon::after, .school-select-residence .expand-icon::after {
  display: none !important;
}
.school-select-program .course-description,
.school-select-residence .course-description {
  display: block !important;
  grid-column: 1 / span 2;
  margin-left: 94px;
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease, margin-top 0.4s ease;
}
.school-select-program.opened .course-description, .school-select-residence.opened .course-description {
  margin-top: 20px;
  max-height: 1000px;
  opacity: 1;
}
.school-select-program .course-description p, .school-select-residence .course-description p {
  margin: 0;
}
.school-select-program .price, .school-select-residence .price {
  display: block !important;
  grid-column: 1 / span 2;
  margin-left: 94px;
  margin-top: 0;
  margin-bottom: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  background: rgba(239, 104, 96, 0.1);
  color: #EF6860;
  border-radius: 10px;
  font-family: Geologica, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: -0.65px;
  padding: 8px 12px;
  width: fit-content;
  transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease, margin-top 0.4s ease, margin-bottom 0.4s ease;
}
.school-select-program.opened .price, .school-select-residence.opened .price {
  margin-top: 20px;
  margin-bottom: 20px;
  max-height: 200px;
  opacity: 1;
}
.school-select-program .expand-icon svg path,
.school-select-residence .expand-icon svg path {
  stroke: #BAC4D6;
  transition: stroke 0.3s ease;
}
.school-select-program:hover .expand-icon svg path,
.school-select-residence:hover .expand-icon svg path,
.school-select-program.opened .expand-icon svg path,
.school-select-residence.opened .expand-icon svg path,
.school-select-program:has(input:checked) .expand-icon svg path,
.school-select-residence:has(input:checked) .expand-icon svg path {
  stroke: #EF6860;
}

@media (min-width: 1200px) {
  .org-key-facts,
  .org-about,
  .program-table,
  .video-foto-wrap,
  .select-program,
  .select-residence,
  .gallery-wrap {
    margin-top: 0 !important;
    margin-bottom: 40px !important;
  }
}

@media (max-width: 1199px) {
  .school-page-breadcrumbs-container {
    display: none !important;
  }
}