/*
 * New School Public UI v2
 * Публичная айдентика платформы: авторское обучение, личные маршруты и открытые материалы.
 */

:root {
  --p-pine: #103f32;
  --p-pine-2: #072a22;
  --p-green: #08785d;
  --p-lime: #d7ff48;
  --p-cream: #f2efe6;
  --p-paper: #fffdf7;
  --p-ink: #14251f;
  --p-muted: #69766f;
  --p-line: #d8dbd2;
  --p-coral: #9d3444;
  --p-blue: #3c55e7;
  --p-cobalt: #3c55e7;
  --p-max: 100%;
}

html { background: var(--p-cream); }

.public-page {
  background:
    radial-gradient(circle at 92% 5%, rgba(215, 255, 72, .12), transparent 23rem),
    var(--p-cream);
}

::selection { background: var(--p-lime); color: var(--p-pine-2); }

/* Шапка ведёт себя как панель продукта, а не как меню школы. */
.public-header {
  background: rgba(255, 253, 247, .82);
  backdrop-filter: blur(24px) saturate(130%);
  border: 1px solid rgba(20, 37, 31, .09);
  border-radius: 999px;
  box-shadow: 0 18px 55px rgba(16, 63, 50, .08);
  height: 72px;
  left: 18px;
  padding: 0 12px 0 17px;
  position: fixed;
  right: 18px;
  top: 14px;
  width: auto;
}

.public-header::after { display: none; }
.public-header.is-scrolled { background: rgba(255, 253, 247, .94); box-shadow: 0 18px 55px rgba(16, 63, 50, .13); }
.public-brand { gap: 10px; min-width: 250px; }
.public-brand-mark { filter: drop-shadow(0 7px 14px rgba(16, 63, 50, .15)); height: 48px; width: 48px; }
.public-brand-type strong { font-size: 23px; }
.public-brand-type em { color: var(--p-green); font-size: 8px; }
.public-brand-type small { display: none; }

.public-nav {
  background: rgba(16, 63, 50, .055);
  border-radius: 999px;
  gap: 2px;
  padding: 4px;
}

.public-nav > a {
  border-radius: 999px;
  font-size: 11px;
  padding: 10px 14px;
  transition: background .2s ease, color .2s ease;
}

.public-nav > a:hover, .public-nav > a[aria-current="page"] { background: var(--p-paper); color: var(--p-green); }
.public-nav .public-cabinet-link { color: var(--p-green); }

.public-header-cta {
  align-items: center;
  background: var(--p-pine);
  border-radius: 999px;
  display: flex;
  gap: 14px;
  margin-left: 10px;
  min-height: 46px;
  padding: 7px 8px 7px 17px;
}

.public-header-cta b { align-items: center; background: var(--p-lime); border-radius: 50%; color: var(--p-pine); display: flex; height: 31px; justify-content: center; width: 31px; }

.public-page main { padding-top: 100px; }

/* Первый экран: платформа как рабочий стол преподавателя. */
.public-hero {
  gap: 14px;
  grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr);
  min-height: calc(100vh - 114px);
  padding: 0 14px 14px;
}

.hero-copy {
  align-content: end;
  background: var(--p-paper);
  border: 1px solid rgba(20, 37, 31, .09);
  border-radius: 30px;
  min-height: 670px;
  overflow: hidden;
  padding: clamp(42px, 5vw, 78px);
}

.hero-copy::before { color: rgba(16, 63, 50, .045); content: "CREATE"; font-size: clamp(94px, 12vw, 210px); left: -4%; top: 5%; }
.hero-copy h1 { font-family: var(--p-font-display); font-size: clamp(68px, 7vw, 128px); font-weight: 400; letter-spacing: -.055em; line-height: .95; }
.hero-copy h1 em { color: var(--p-blue); font-family: inherit; font-size: 1em; }
.hero-copy > p { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.7; max-width: 630px; }
.hero-actions { gap: 18px; }

.public-button {
  border-radius: 999px;
  font-size: 12px;
  min-height: 52px;
  padding: 0 22px;
}

.public-button--lime { box-shadow: 0 0 34px rgba(215, 255, 72, .24); }
.public-text-link { font-size: 12px; }

.hero-visual--platform {
  background: var(--p-pine-2);
  border-radius: 30px;
  min-height: 670px;
}

.hero-visual--platform .hero-photo::after {
  background:
    linear-gradient(90deg, rgba(7, 42, 34, .48), transparent 44%),
    linear-gradient(0deg, rgba(7, 42, 34, .58), transparent 42%);
}

.hero-visual--platform .hero-photo img { object-position: center; transform: scale(1.01); }
.hero-visual--platform .hero-word { color: var(--p-lime); font-size: clamp(54px, 6vw, 106px); left: 5%; top: 12%; }
.hero-visual--platform .speech { backdrop-filter: blur(16px); background: rgba(255, 253, 247, .88); border: 1px solid rgba(255, 255, 255, .42); border-radius: 17px; padding: 15px 18px; }
.hero-visual--platform .speech--one { left: 6%; top: 49%; }
.hero-visual--platform .speech--two { right: 5%; top: 62%; }
.hero-visual--platform .hero-sticker { background: var(--p-blue); font-family: var(--p-font-display); font-size: 20px; height: 122px; right: 8%; top: 20%; width: 122px; }
.hero-visual--platform .hero-seal { background: rgba(7, 42, 34, .72); backdrop-filter: blur(10px); }

.public-running-line { background: var(--p-lime); border-radius: 18px; margin: 0 14px; }
.public-running-line > div { min-height: 48px; }

/* Модульные блоки витрины */
.public-section { padding: clamp(86px, 9vw, 140px) clamp(24px, 5.8vw, 105px); }
.public-section-head { border-bottom: 1px solid rgba(20, 37, 31, .15); margin-bottom: 48px; padding-bottom: 30px; }
.public-section-head h2, .public-intro h2, .about-story h2 { font-size: clamp(48px, 5.6vw, 88px); letter-spacing: -.045em; line-height: 1.01; }
.public-section-head > a { background: var(--p-paper); border: 1px solid var(--p-line); border-radius: 999px; padding: 12px 17px; }

.public-media-stage { gap: 14px; grid-template-columns: minmax(0, 1.2fr) minmax(400px, .8fr); margin: 14px; min-height: 720px; }
.media-photo, .media-manifesto { border-radius: 30px; overflow: hidden; }
.media-manifesto { background: linear-gradient(145deg, var(--p-pine), var(--p-pine-2)); padding: clamp(38px, 5vw, 76px); }
.media-manifesto h2 { font-size: clamp(58px, 6vw, 96px); line-height: .98; }
.media-manifesto h2 em { color: var(--p-lime); font-family: inherit; }
.media-manifesto > p { font-size: 15px; line-height: 1.7; }

.public-icon-rail { gap: 12px; padding: 14px; }
.public-icon-rail article { background: var(--p-paper); border: 1px solid var(--p-line); border-radius: 24px; min-height: 280px; padding: 26px; }
.public-icon-rail article:nth-child(2) { background: #e9edff; }
.public-icon-rail article:nth-child(3) { background: #f7e8e4; }
.public-icon-rail article:nth-child(4) { background: var(--p-lime); }
.public-icon-rail svg { height: 50px; width: 50px; }
.public-icon-rail strong { font-family: var(--p-font-display); font-size: 29px; font-weight: 400; }
.public-icon-rail small { font-size: 13px; line-height: 1.5; }

.public-intro {
  background:
    radial-gradient(circle at 90% 15%, rgba(60, 85, 231, .14), transparent 24rem),
    var(--p-paper);
  gap: 7vw;
}

.intro-dialogue { background: var(--p-pine); border-radius: 24px; box-shadow: 14px 14px 0 var(--p-lime); }
.intro-dialogue > p { color: #fff; }
.intro-dialogue > div b, .intro-dialogue > div strong { border-radius: 999px; }
.public-lead { font-size: clamp(19px, 1.8vw, 25px); }
.intro-points strong { font-family: var(--p-font-display); font-size: 37px; font-weight: 400; }
.intro-points span { font-size: 11px; }

.public-subjects { background: #e8ede6; }
.subject-grid { gap: 14px; }
.subject-card { border: 0; border-radius: 26px; min-height: 440px; padding: 26px; }
.subject-card::after { filter: none; opacity: .45; }
.subject-card h3 { font-size: clamp(41px, 4vw, 60px); }
.subject-card p { font-size: 13px; }

.public-programs { background: var(--p-cream); }
.public-program-grid:has(.public-program-visual) { gap: 14px; }
.public-program-card:has(.public-program-visual) { border: 0; border-radius: 28px; box-shadow: 0 25px 70px rgba(16, 63, 50, .07); min-height: 690px; }
.public-program-visual { height: clamp(290px, 22vw, 370px); }
.public-program-content { padding: 31px 27px 22px; }
.public-program-card:has(.public-program-visual) h2, .public-program-card:has(.public-program-visual) h3 { font-size: clamp(38px, 3.1vw, 53px); }

.public-method { gap: 14px; grid-template-columns: .92fr 1.08fr; margin: 14px; min-height: 720px; }
.method-visual, .method-copy { border-radius: 30px; }
.method-visual { background: #e9edff; }
.method-big { color: var(--p-blue); opacity: .16; }
.method-stilllife { filter: drop-shadow(0 30px 35px rgba(16, 63, 50, .18)); }
.method-visual p { color: var(--p-pine); font-size: 14px; font-weight: 700; }
.method-copy { background: linear-gradient(145deg, var(--p-pine), var(--p-pine-2)); padding: clamp(46px, 6vw, 90px); }
.method-copy h2 { font-size: clamp(50px, 5vw, 80px); line-height: 1; }
.method-copy h2 em { font-family: inherit; }
.method-copy li { padding: 24px 0; }
.method-copy li strong { font-size: 16px; }
.method-copy li p { font-size: 13px; }

.teacher-showcase { gap: 14px; }
.public-teacher-card { border: 0; border-radius: 27px; box-shadow: 0 24px 65px rgba(16, 63, 50, .08); grid-template-columns: minmax(170px, .75fr) 1.25fr; min-height: 300px; }
.public-teacher-card > div:last-child { padding: 30px; }
.public-teacher-card h3 { font-family: var(--p-font-display); font-size: 31px; font-weight: 400; }
.public-teacher-card p { font-size: 12px; }
.teacher-quote { background: var(--p-blue); border-radius: 27px; color: #fff; }
.teacher-quote > span { color: var(--p-lime); }
.teacher-quote p { font-size: clamp(28px, 3vw, 45px); }

.public-request { gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(500px, 1fr); margin: 14px 14px 0; padding: 0; }
.request-copy, .public-form { border-radius: 30px; min-height: 670px; }
.request-copy { background: linear-gradient(145deg, var(--p-pine), var(--p-pine-2)); padding: clamp(38px, 5vw, 75px); }
.request-copy h2 { font-size: clamp(58px, 6vw, 96px); line-height: .98; }
.request-copy h2 em { font-family: inherit; }
.request-copy > p { font-size: 15px; }
.request-stilllife { bottom: 15px; max-height: 42%; object-fit: contain; right: 3%; width: min(52%, 420px); }
.public-form { border: 1px solid var(--p-line); padding: clamp(30px, 5vw, 65px); }
.public-field > span { font-size: 10px; }
.public-field .form-control { border-radius: 14px; min-height: 52px; }

/* Внутренние публичные страницы */
.public-inner-hero, .subject-profile-hero, .course-detail-hero {
  background:
    radial-gradient(circle at 83% 8%, rgba(215, 255, 72, .2), transparent 20rem),
    linear-gradient(145deg, var(--p-pine), var(--p-pine-2));
  border-radius: 30px;
  margin: 14px;
  min-height: 560px;
}

.public-inner-hero h1, .subject-profile-hero h1, .course-detail-hero h1, .teacher-profile-copy h1 { font-size: clamp(64px, 8vw, 125px); line-height: .97; }
.values-grid { gap: 14px; }
.values-grid article, .about-teacher, .course-profile-card, .course-product-grid article { border: 0; border-radius: 26px; box-shadow: 0 24px 60px rgba(16, 63, 50, .07); }
.values-grid article { min-height: 310px; }
.teacher-profile-page { margin: 14px; overflow: hidden; }
.teacher-profile-portrait, .teacher-profile-copy { border-radius: 30px; }

.published-document, .published-plan { background: var(--p-paper); }
.published-document > header, .published-plan > header { border-color: var(--p-line); }
.published-document h1, .published-plan h1 { color: var(--p-pine); font-size: clamp(55px, 8vw, 120px); line-height: .98; }
.published-topic-materials a { border: 0; border-radius: 24px; box-shadow: 0 20px 55px rgba(16, 63, 50, .08); }

/* Авторизация — часть продукта, а не служебная форма. */
.portal-login-page { background: var(--p-cream); }
.portal-login-shell { gap: 14px; grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr); padding: 14px; }
.portal-login-story, .portal-login-panel { border-radius: 30px; min-height: calc(100vh - 28px); }
.portal-login-story { background: linear-gradient(145deg, var(--p-pine), var(--p-pine-2)); }
.portal-login-story::after { border-color: var(--p-blue); opacity: .65; }
.portal-login-brand { background: rgba(255, 253, 247, .95); border-radius: 18px; clip-path: none; }
.portal-login-copy h1 { font-size: clamp(64px, 7vw, 118px); line-height: .98; }
.portal-login-copy h1 em { color: var(--p-lime); font-family: inherit; }
.portal-login-copy > p { font-size: 16px; }
.portal-login-portrait { border-radius: 26px; clip-path: none; opacity: .78; transform: rotate(1.5deg); }
.portal-login-ticket { background: var(--p-blue); border-radius: 21px; }
.portal-login-panel { background: var(--p-paper); }
.portal-login-form > header { margin-bottom: clamp(45px, 7vh, 78px); }
.portal-login-form-copy h2 { font-size: clamp(55px, 5vw, 79px); line-height: 1; }
.portal-login-field input { background: #f4f2ea; border-radius: 14px; min-height: 58px; }
.portal-login-submit { border-radius: 999px; }

.public-footer { background: var(--p-pine-2); margin: 14px 14px 0; padding-inline: clamp(24px, 5vw, 90px); }
.public-footer-main { gap: 45px; grid-template-columns: 280px 1fr auto; }
.public-footer-main h2 { font-size: clamp(38px, 4vw, 64px); line-height: 1; }

@media (prefers-reduced-motion: no-preference) {
  .subject-card, .public-program-card, .public-teacher-card, .values-grid article { transition: box-shadow .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1); }
  .subject-card:hover, .public-program-card:hover, .public-teacher-card:hover, .values-grid article:hover { box-shadow: 0 34px 80px rgba(16, 63, 50, .15); transform: translateY(-7px); }
}

@media (max-width: 1180px) {
  .public-brand { min-width: auto; }
  .public-nav > a { padding-inline: 11px; }
  .public-hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 620px; }
  .hero-visual--platform { min-height: 690px; }
  .public-media-stage { grid-template-columns: 1fr; }
  .media-photo { min-height: 650px; }
  .public-program-grid:has(.public-program-visual) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-method { grid-template-columns: 1fr; }
  .method-visual { min-height: 600px; }
  .public-request { grid-template-columns: 1fr; }
  .public-form { min-height: 620px; }
  .public-footer-main { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .public-header { border-radius: 24px; height: 68px; left: 10px; right: 10px; top: 10px; }
  .public-brand-type { display: grid !important; }
  .public-brand-type em { display: none; }
  .public-nav {
    background: var(--p-pine);
    border-radius: 22px;
    box-shadow: 0 24px 55px rgba(7, 42, 34, .28);
    display: none;
    left: 0;
    padding: 10px;
    position: absolute;
    right: 0;
    top: 76px;
  }
  .public-nav.is-open { display: grid; }
  .public-nav > a { color: #fff; min-height: 48px; padding: 14px; }
  .public-nav > a:hover, .public-nav > a[aria-current="page"] { background: rgba(255, 255, 255, .09); color: var(--p-lime); }
  .public-header-cta { display: none; }
  .public-menu { align-items: center; background: var(--p-pine); border-radius: 50%; color: #fff; display: flex; height: 44px; justify-content: center; width: 44px; }
  .public-page main { padding-top: 88px; }
  .public-hero { padding-inline: 10px; }
  .subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-icon-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-login-shell { grid-template-columns: 1fr; }
  .portal-login-story, .portal-login-panel { min-height: 720px; }
}

@media (max-width: 760px) {
  .public-header { padding-inline: 10px; }
  .public-brand-mark { height: 42px; width: 42px; }
  .public-brand-type strong { font-size: 18px; }
  .public-hero { gap: 10px; padding-bottom: 10px; }
  .hero-copy, .hero-visual--platform { border-radius: 24px; }
  .hero-copy { min-height: 600px; padding: 50px 20px; }
  .hero-copy h1 { font-size: clamp(53px, 15.5vw, 70px); line-height: .99; }
  .hero-copy > p { font-size: 15px; }
  .hero-visual--platform { min-height: 570px; }
  .hero-visual--platform .hero-photo img { object-position: 58% center; }
  .hero-visual--platform .hero-word { font-size: 60px; top: 8%; }
  .hero-visual--platform .speech--one { top: 46%; }
  .hero-visual--platform .speech--two { top: 64%; }
  .hero-visual--platform .hero-sticker { height: 94px; width: 94px; }
  .public-running-line { border-radius: 14px; margin-inline: 10px; }
  .public-section { padding: 78px 20px; }
  .public-section-head h2, .public-intro h2, .about-story h2 { font-size: clamp(41px, 11.5vw, 52px); }
  .public-media-stage, .public-method { gap: 10px; margin: 10px; }
  .media-photo { border-radius: 24px; min-height: 500px; }
  .media-manifesto { border-radius: 24px; min-height: 610px; padding: 58px 20px; }
  .media-manifesto h2 { font-size: 55px; }
  .public-icon-rail { gap: 10px; grid-template-columns: 1fr; padding: 10px; }
  .public-icon-rail article { min-height: 220px; }
  .subject-grid { grid-template-columns: 1fr; }
  .subject-card { min-height: 380px; }
  .public-program-grid:has(.public-program-visual) { grid-template-columns: 1fr; }
  .public-program-card:has(.public-program-visual) { min-height: 620px; }
  .method-visual { border-radius: 24px; min-height: 440px; }
  .method-copy { border-radius: 24px; padding: 58px 20px; }
  .public-teacher-card { border-radius: 24px; grid-template-columns: 135px 1fr; }
  .teacher-quote { border-radius: 24px; }
  .public-request { gap: 10px; margin: 10px 10px 0; }
  .request-copy, .public-form { border-radius: 24px; min-height: 650px; }
  .request-copy { padding: 58px 20px 320px; }
  .request-copy h2 { font-size: clamp(42px, 12vw, 54px); letter-spacing: -.055em; }
  .request-stilllife { bottom: 20px; max-height: 280px; right: 50%; transform: translateX(50%); width: min(390px, 94%); }
  .public-form { min-height: auto; padding: 36px 20px; }
  .public-inner-hero, .subject-profile-hero, .course-detail-hero { border-radius: 24px; margin: 10px; min-height: 500px; }
  .public-inner-hero h1, .subject-profile-hero h1, .course-detail-hero h1, .teacher-profile-copy h1 { font-size: clamp(53px, 16vw, 72px); }
  .teacher-profile-page { margin: 10px; }
  .portal-login-shell { gap: 10px; padding: 10px; }
  .portal-login-story, .portal-login-panel { border-radius: 24px; min-height: 680px; }
  .portal-login-copy h1 { font-size: 53px; }
  .portal-login-panel { padding: 58px 20px; }
  .portal-login-form-copy h2 { font-size: 53px; }
  .public-footer { margin-inline: 10px; }
}

@media (max-width: 420px) {
  .public-brand-type strong { font-size: 16px; }
  .hero-copy { min-height: 570px; }
  .hero-copy h1 { font-size: clamp(48px, 14.5vw, 59px); }
  .hero-visual--platform { min-height: 520px; }
  .hero-visual--platform .speech { padding: 11px 12px; }
  .hero-visual--platform .speech b { font-size: 12px; }
  .public-section { padding-inline: 16px; }
  .public-teacher-card { grid-template-columns: 1fr; }
  .teacher-portrait { height: 310px; }
  .request-copy { min-height: 660px; }
  .portal-login-story, .portal-login-panel { min-height: 640px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}