/* ===================================
   SCHOOL-PREP-DECOR.CSS — декоративные паттерны
   Тема: тетрадь, карандаши, азбука, звёзды-отметки
   Надстройка над school-prep.css, только фоновые декорации
   =================================== */

:root {
    --sp-doodle-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M12 19l7-7 3 3-7 7-3-3z' fill='none' stroke='%23F5A623' stroke-width='1.6' stroke-opacity='0.3'/%3E%3Cpath d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z' fill='none' stroke='%23F5A623' stroke-width='1.6' stroke-opacity='0.3'/%3E%3C/svg%3E");
    --sp-doodle-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.5L22 9l-5.5 4.8L18 21l-6-3.9L6 21l1.5-7.2L2 9l7.1-.5z' fill='none' stroke='%2352CC9A' stroke-width='1.5' stroke-opacity='0.32'/%3E%3C/svg%3E");
    --sp-doodle-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='46' viewBox='0 0 24 20'%3E%3Cpath d='M2 3h6a4 4 0 014 4v10a3 3 0 00-3-2H2z' fill='none' stroke='%2325A9B8' stroke-width='1.4' stroke-opacity='0.28'/%3E%3Cpath d='M22 3h-6a4 4 0 00-4 4v10a3 3 0 013-2h7z' fill='none' stroke='%2325A9B8' stroke-width='1.4' stroke-opacity='0.28'/%3E%3C/svg%3E");
    --sp-doodle-apple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24'%3E%3Cpath d='M12 6c-3 0-5 2.5-5 6.5S9 21 12 21s5-4 5-8.5S15 6 12 6z' fill='none' stroke='%23EE7A5D' stroke-width='1.5' stroke-opacity='0.3'/%3E%3Cpath d='M12 6c0-2 1-3.5 2.5-4' fill='none' stroke='%23EE7A5D' stroke-width='1.5' stroke-opacity='0.3' stroke-linecap='round'/%3E%3C/svg%3E");
    --sp-doodle-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='30' viewBox='0 0 36 30'%3E%3Cpath d='M4 16L14 25L32 4' fill='none' stroke='rgba(82,204,154,0.35)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --sp-doodle-abc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='30' viewBox='0 0 40 30'%3E%3Ctext x='0' y='24' font-family='Georgia, serif' font-size='26' font-weight='bold' fill='%23F5A623' fill-opacity='0.16'%3EAa%3C/text%3E%3C/svg%3E");
    --sp-doodle-ruler: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='24' viewBox='0 0 90 24'%3E%3Crect x='2' y='6' width='86' height='12' rx='2' fill='none' stroke='%2325A9B8' stroke-width='1.4' stroke-opacity='0.26'/%3E%3Cline x1='12' y1='6' x2='12' y2='12' stroke='%2325A9B8' stroke-width='1.2' stroke-opacity='0.26'/%3E%3Cline x1='22' y1='6' x2='22' y2='12' stroke='%2325A9B8' stroke-width='1.2' stroke-opacity='0.26'/%3E%3Cline x1='32' y1='6' x2='32' y2='12' stroke='%2325A9B8' stroke-width='1.2' stroke-opacity='0.26'/%3E%3Cline x1='42' y1='6' x2='42' y2='12' stroke='%2325A9B8' stroke-width='1.2' stroke-opacity='0.26'/%3E%3C/svg%3E");
    --sp-doodle-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='14' viewBox='0 0 90 14'%3E%3Cpath d='M2 9C12 2 18 12 28 6C38 0 44 12 54 6C64 0 72 12 82 6' fill='none' stroke='%23F5A623' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    --sp-doodle-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40L0 20C100 0 200 40 300 20C400 0 500 40 600 20C700 0 800 40 900 20C1000 0 1100 40 1200 20L1200 40Z' fill='white'/%3E%3C/svg%3E");

    /* Приглушённые "водяные" варианты для карточек */
    --sp-doodle-star-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.5L22 9l-5.5 4.8L18 21l-6-3.9L6 21l1.5-7.2L2 9l7.1-.5z' fill='rgba(245,166,35,0.2)'/%3E%3C/svg%3E");
    --sp-doodle-question-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='40' viewBox='0 0 26 40'%3E%3Cpath d='M6 12C6 5 12 2 17 5C22 8 21 15 16 18C13 20 13 22 13 25' stroke='rgba(245,166,35,0.28)' stroke-width='2.6' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='13' cy='33' r='2.4' fill='rgba(245,166,35,0.28)'/%3E%3C/svg%3E");
}

@keyframes spDoodleFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-10px) rotate(6deg); }
}

@keyframes spDoodleFloatReverse {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(8px) rotate(-7deg); }
}

/* ===================================
   HERO
   =================================== */
.school-hero {
    position: relative;
    isolation: isolate;
}

.school-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--sp-doodle-book), var(--sp-doodle-apple), var(--sp-doodle-abc);
    background-repeat: no-repeat;
    background-position: 4% 66%, 90% 20%, 88% 80%;
    background-size: 64px 50px, 30px 30px, 44px 32px;
    opacity: .5;
}

.school-hero .container {
    position: relative;
    z-index: 1;
}

/* стикеры-теги слегка "приклеены" вкривь */
.service-tag:nth-child(odd)  { transform: rotate(-1.3deg); }
.service-tag:nth-child(even) { transform: rotate(1.1deg); }
.service-tag {
    display: inline-flex;
    transition: transform var(--transition-base, .3s), box-shadow var(--transition-base, .3s);
}
.service-tag:hover {
    transform: rotate(0deg) translateY(-2px);
}

/* рамка-тетрадь вокруг фото */
.service-hero__image {
    outline: 2px dashed rgba(245, 166, 35, .35);
    outline-offset: 8px;
}

/* ===================================
   ВОЛНИСТЫЕ РАЗДЕЛИТЕЛИ
   =================================== */
.hero__divider {
    position: relative;
    overflow: hidden;
}

.hero__divider::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 200%;
    background: currentColor;
    -webkit-mask-image: var(--sp-doodle-wave-mask);
    mask-image: var(--sp-doodle-wave-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: .06;
    pointer-events: none;
}

/* ===================================
   ВСТУПЛЕНИЕ — "тетрадная" карточка с линовкой
   =================================== */
.school-intro__card {
    position: relative;
    isolation: isolate;
}

.school-intro__card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(to bottom, transparent 0 35px, rgba(245, 166, 35, .07) 35px 36px);
    border-radius: var(--radius-lg);
}

.school-intro__card::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 6%;
    right: 4%;
    width: 34px;
    height: 34px;
    background: var(--sp-doodle-pencil) no-repeat center / contain;
    opacity: .6;
    animation: spDoodleFloat 8s ease-in-out infinite;
}

.school-intro__text {
    position: relative;
    z-index: 1;
}

/* ===================================
   ПРОГРАММА
   =================================== */
.school-program {
    position: relative;
    isolation: isolate;
}

.school-program::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(245, 166, 35, .1) 1.4px, transparent 1.6px);
    background-size: 28px 28px;
    opacity: .6;
}

.school-program > .container {
    position: relative;
    z-index: 1;
}

.section-title {
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 90px;
    height: 12px;
    margin-top: 10px;
    background: var(--sp-doodle-underline) no-repeat left center / contain;
}

/* водяные знаки на предметных карточках */
.subject-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.subject-card::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    background: var(--sp-doodle-star-w) no-repeat center / contain;
    pointer-events: none;
    transition: transform .4s cubic-bezier(.16,1,.3,1);
}

.subject-card:hover::after {
    transform: rotate(25deg) scale(1.2);
}

/* линейка на карточке математики */
.subject-card--math::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 24px;
    background: var(--sp-doodle-ruler) no-repeat center / contain;
    opacity: .12;
    pointer-events: none;
    z-index: 0;
}

/* яблоко на карточке эмоциональной готовности */
.subject-card--social::before {
    content: '';
    position: absolute;
    right: 5%;
    bottom: 10%;
    width: 40px;
    height: 40px;
    background: var(--sp-doodle-apple) no-repeat center / contain;
    opacity: .15;
    pointer-events: none;
    z-index: 0;
}

/* ===================================
   ЛЕСТНИЦА ЭТАПОВ
   =================================== */
.school-path {
    position: relative;
    isolation: isolate;
}

.school-path::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--sp-doodle-star), var(--sp-doodle-pencil);
    background-repeat: no-repeat;
    background-position: 92% 12%, 6% 88%;
    background-size: 28px 28px, 36px 36px;
    opacity: .45;
}

.school-path > .container {
    position: relative;
    z-index: 1;
}

.path-step__marker {
    position: relative;
}

.path-step__marker::after {
    content: '';
    position: absolute;
    inset: -8px;
    border: 2px dashed rgba(245, 166, 35, .3);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
}

/* ===================================
   КОМУ ПОДХОДИТ
   =================================== */
.service-indications {
    position: relative;
    isolation: isolate;
}

.service-indications::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(37, 169, 184, .08) 1.4px, transparent 1.6px);
    background-size: 30px 30px;
    opacity: .7;
}

.service-indications > .container {
    position: relative;
    z-index: 1;
}

.indication-item__number {
    position: relative;
}

.indication-item__number::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px dashed rgba(245, 166, 35, .3);
    border-radius: 44% 56% 50% 50% / 52% 48% 52% 48%;
    z-index: -1;
    pointer-events: none;
}

/* визуальная панель — украшаем плавающими дудлами */
.school-visual-panel {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.school-visual-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--sp-doodle-book), var(--sp-doodle-abc);
    background-repeat: no-repeat;
    background-position: 88% 78%, 8% 14%;
    background-size: 54px 42px, 40px 30px;
    opacity: .3;
}

.school-visual-panel::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 6%;
    right: 10%;
    width: 28px;
    height: 28px;
    background: var(--sp-doodle-star) no-repeat center / contain;
    opacity: .5;
    animation: spDoodleFloatReverse 9s ease-in-out infinite;
}

.school-visual-panel__badge,
.school-visual-panel__quote {
    position: relative;
    z-index: 1;
}

/* ===================================
   РЕЗУЛЬТАТЫ + ФОРМАТЫ
   =================================== */
.service-results {
    position: relative;
    isolation: isolate;
}

.service-results::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(82, 204, 154, .1) 1.4px, transparent 1.6px);
    background-size: 28px 28px;
    opacity: .6;
}

.service-results > .container {
    position: relative;
    z-index: 1;
}

.result-item {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.format-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.format-card::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: var(--sp-doodle-star-w) no-repeat center / contain;
    opacity: .6;
    pointer-events: none;
}

/* ===================================
   ПЕДАГОГ
   =================================== */
.school-teacher {
    position: relative;
    isolation: isolate;
}

.school-teacher::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--sp-doodle-apple), var(--sp-doodle-pencil);
    background-repeat: no-repeat;
    background-position: 8% 20%, 90% 75%;
    background-size: 34px 34px, 40px 40px;
    opacity: .4;
}

.school-teacher > .container {
    position: relative;
    z-index: 1;
}

.teacher-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.teacher-card::after {
    content: '';
    position: absolute;
    right: 4%;
    top: 6%;
    width: 26px;
    height: 26px;
    background: var(--sp-doodle-star) no-repeat center / contain;
    opacity: .4;
    pointer-events: none;
}

/* ===================================
   FAQ
   =================================== */
.service-faq {
    position: relative;
    isolation: isolate;
}

.service-faq::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--sp-doodle-question-w), var(--sp-doodle-question-w), var(--sp-doodle-question-w);
    background-repeat: no-repeat;
    background-position: 6% 10%, 92% 40%, 10% 85%;
    background-size: 26px 40px, 22px 34px, 24px 36px;
    opacity: .6;
}

.service-faq > .container {
    position: relative;
    z-index: 1;
}

.faq-item {
    position: relative;
    transition: transform .3s ease;
}

.faq-item[open] {
    transform: translateX(2px);
}

/* ===================================
   CTA
   =================================== */
.doctors-cta {
    position: relative;
    isolation: isolate;
}

.doctors-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--sp-doodle-star), var(--sp-doodle-book), var(--sp-doodle-pencil);
    background-repeat: no-repeat;
    background-position: 6% 25%, 40% 88%, 88% 30%;
    background-size: 32px 32px, 60px 46px, 36px 36px;
    opacity: .4;
}

.doctors-cta::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 15%;
    left: 8%;
    width: 40px;
    height: 40px;
    background: var(--sp-doodle-apple) no-repeat center / contain;
    opacity: .4;
    animation: spDoodleFloatReverse 9s ease-in-out infinite;
}

.doctors-cta > .container {
    position: relative;
    z-index: 1;
}

/* ===================================
   МОБИЛЬНАЯ АДАПТАЦИЯ ДЕКОРА
   =================================== */
@media (max-width: 768px) {
    .school-hero::before,
    .doctors-cta::before,
    .service-faq::before,
    .school-visual-panel::before,
    .school-teacher::before {
        opacity: .22;
    }

    .school-intro__card::after,
    .doctors-cta::after,
    .school-visual-panel::after {
        width: 26px;
        height: 26px;
    }

    .school-path::before {
        background-size: 22px 22px, 28px 28px;
    }
}

/* ===================================
   ACCESSIBILITY / PRINT
   =================================== */
@media (prefers-reduced-motion: reduce) {
    .school-intro__card::after,
    .doctors-cta::after,
    .school-visual-panel::after,
    .school-float {
        animation: none;
    }
}

@media print {
    .school-hero::before,
    .school-intro__card::before,
    .school-intro__card::after,
    .school-program::before,
    .school-path::before,
    .service-indications::before,
    .school-visual-panel::before,
    .school-visual-panel::after,
    .service-results::before,
    .school-teacher::before,
    .teacher-card::after,
    .service-faq::before,
    .doctors-cta::before,
    .doctors-cta::after,
    .hero__divider::after,
    .school-hero__floaters,
    .subject-card::after,
    .subject-card--math::before,
    .subject-card--social::before,
    .format-card::after {
        display: none !important;
    }
}