/* ===================================
   ABOUT PAGE — ДЕКОР
   Продолжает систему "карандашных" дудлов проекта (см. article.css).
   Токены продублированы, чтобы about.html не зависел от article.css.
   =================================== */

:root {
    /* --- переиспользуемые ассеты (идентичны article.css) --- */
    --doodle-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 3 L23 16 L35 9 L24 19 L37 23 L23 22 L27 36 L20 23 L13 36 L17 22 L3 23 L16 19 L5 9 L17 16 Z' fill='none' stroke='%23EE7A5D' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --doodle-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M14 32C11 18 24 7 39 9C54 11 55 29 45 40C35 51 16 48 11 35' fill='none' stroke='%2325A9B8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --doodle-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Cpath d='M2 14Q12 2 22 14T42 14T62 14T82 14T102 14T122 14' fill='none' stroke='%2352CC9A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --doodle-zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='20' viewBox='0 0 60 20'%3E%3Cpath d='M2 17L12 4L22 17L32 4L42 17L52 4' fill='none' stroke='%23EE7A5D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --doodle-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16' viewBox='0 0 40 16'%3E%3Ccircle cx='4' cy='8' r='2' fill='%2352CC9A'/%3E%3Ccircle cx='16' cy='6' r='2' fill='%2352CC9A'/%3E%3Ccircle cx='28' cy='9' r='2' fill='%2352CC9A'/%3E%3Ccircle cx='36' cy='5' r='2' fill='%2352CC9A'/%3E%3C/svg%3E");
    --doodle-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60' viewBox='0 0 90 60'%3E%3Cpath d='M20 45C8 45 4 33 14 29C10 16 26 8 36 15C42 6 60 8 62 20C76 18 82 34 70 40C74 50 60 54 52 47C46 53 28 53 24 46Z' fill='none' stroke='%2325A9B8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --doodle-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='26' viewBox='0 0 30 26'%3E%3Cpath d='M15 23C15 23 2 14 2 7C2 2 8 0 12 4C13.5 5.5 15 8 15 8C15 8 16.5 5.5 18 4C22 0 28 2 28 7C28 14 15 23 15 23Z' fill='none' stroke='%23EE7A5D' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
    --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='%23EE7A5D' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");

    --doodle-star-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 3 L23 16 L35 9 L24 19 L37 23 L23 22 L27 36 L20 23 L13 36 L17 22 L3 23 L16 19 L5 9 L17 16 Z' fill='none' stroke='rgba(238,122,93,0.22)' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --doodle-dots-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16' viewBox='0 0 40 16'%3E%3Ccircle cx='4' cy='8' r='2' fill='rgba(82,204,154,0.3)'/%3E%3Ccircle cx='16' cy='6' r='2' fill='rgba(82,204,154,0.3)'/%3E%3Ccircle cx='28' cy='9' r='2' fill='rgba(82,204,154,0.3)'/%3E%3Ccircle cx='36' cy='5' r='2' fill='rgba(82,204,154,0.3)'/%3E%3C/svg%3E");

    /* --- новые ассеты под тематику страницы «О центре» --- */
    /* росток — тема "расти и развиваться" */
    --doodle-sprout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='36' viewBox='0 0 30 36'%3E%3Cpath d='M15 34V14' stroke='%2352CC9A' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M15 18C7 18 5 10 11 7C14 5.5 15 10 15 14' stroke='%2352CC9A' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M15 18C23 18 25 10 19 7C16 5.5 15 10 15 14' stroke='%2352CC9A' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
    --doodle-sprout-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='36' viewBox='0 0 30 36'%3E%3Cpath d='M15 34V14' stroke='rgba(82,204,154,0.28)' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M15 18C7 18 5 10 11 7C14 5.5 15 10 15 14' stroke='rgba(82,204,154,0.28)' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M15 18C23 18 25 10 19 7C16 5.5 15 10 15 14' stroke='rgba(82,204,154,0.28)' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");

    /* след — тема "учим ходить" (АФК/ЛФК) */
    --doodle-footprint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='34' viewBox='0 0 26 34'%3E%3Cpath d='M13 8C6 8 4 14 6 20C7 24 11 26 11 30' stroke='%23EE7A5D' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='9' cy='4' r='1.6' fill='%23EE7A5D'/%3E%3Ccircle cx='14' cy='2.5' r='1.6' fill='%23EE7A5D'/%3E%3Ccircle cx='18' cy='5' r='1.6' fill='%23EE7A5D'/%3E%3C/svg%3E");
    --doodle-footprint-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='34' viewBox='0 0 26 34'%3E%3Cpath d='M13 8C6 8 4 14 6 20C7 24 11 26 11 30' stroke='rgba(238,122,93,0.22)' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='9' cy='4' r='1.6' fill='rgba(238,122,93,0.22)'/%3E%3Ccircle cx='14' cy='2.5' r='1.6' fill='rgba(238,122,93,0.22)'/%3E%3Ccircle cx='18' cy='5' r='1.6' fill='rgba(238,122,93,0.22)'/%3E%3C/svg%3E");
}

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

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

/* ===================================
   HERO
   =================================== */
.about-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--doodle-cloud), var(--doodle-dots), var(--doodle-zigzag);
    background-repeat: no-repeat;
    background-position: 3% 18%, 84% 68%, 90% 12%;
    background-size: 100px 68px, 56px 22px, 56px 18px;
    opacity: .45;
}

.about-hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 10%;
    right: 8%;
    width: 46px;
    height: 46px;
    background: var(--doodle-star) no-repeat center / contain;
    opacity: .5;
    animation: doodleFloat 8s ease-in-out infinite;
}

/* росток над акцентным словом заголовка */
.about-hero__title-accent {
    position: relative;
}

.about-hero__title-accent::after {
    content: '';
    position: absolute;
    top: -26px;
    left: -6px;
    width: 20px;
    height: 24px;
    background: var(--doodle-sprout) no-repeat center / contain;
    opacity: .55;
    animation: doodleFloatReverse 7s ease-in-out infinite;
    pointer-events: none;
}

/* карточка-лид получает лёгкий "стикер"-наклон подписи */
.about-hero__lead {
    position: relative;
}

/* ===================================
   МИССИЯ
   =================================== */

/* точечная текстура секции (как alt-секции в article.css) */
.about-mission::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(37, 169, 184, .16) 1.4px, transparent 1.6px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 30% 40%, black 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 60% at 30% 40%, black 0%, transparent 75%);
    opacity: .7;
}

.about-mission::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 6%;
    right: 4%;
    width: 60px;
    height: 60px;
    background: var(--doodle-circle) no-repeat center / contain;
    opacity: .35;
    animation: doodleFloat 11s ease-in-out infinite;
}

/* фото-блок докторов: снимаем внутренний overflow:hidden с обёртки —
   клиппинг фото и так обеспечивает вложенный .doctors-slideshow,
   а обёртке нужен видимый пунктирный ореол + звёздочка-стикер снаружи */
.about-mission__image-box {
    position: relative;
    overflow: visible;
    box-shadow: none;
}

.about-mission__image-box::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: calc(var(--radius-xl) + 10px);
    border: 2px dashed rgba(37, 169, 184, .28);
    z-index: -1;
}

.about-mission__image-box::after {
    content: '';
    position: absolute;
    top: -14px;
    right: -10px;
    width: 30px;
    height: 30px;
    background: var(--doodle-star) no-repeat center / contain;
    opacity: .8;
    z-index: 2;
    pointer-events: none;
}

/* чипы методик — "расклеенные стикеры" */
.method-chip {
    position: relative;
    transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.method-chip:nth-child(3n+1) { transform: rotate(-1.4deg); }
.method-chip:nth-child(3n+2) { transform: rotate(1deg); }
.method-chip:nth-child(3n)   { transform: rotate(-0.5deg); }

.method-chip:hover {
    transform: translateY(-2px) rotate(0deg);
}

/* ===================================
   ЧТО МЫ ДЕЛАЕМ
   =================================== */
.about-do::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--doodle-footprint), var(--doodle-zigzag), var(--doodle-dots);
    background-repeat: no-repeat;
    background-position: 5% 85%, 92% 8%, 88% 90%;
    background-size: 30px 40px, 56px 18px, 48px 20px;
    opacity: .4;
}

.about-do::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    bottom: 8%;
    right: 10%;
    width: 50px;
    height: 50px;
    background: var(--doodle-circle) no-repeat center / contain;
    opacity: .3;
    animation: doodleFloatReverse 12s ease-in-out infinite;
}

/* лёгкий водяной знак-точки в углу каждой карточки услуги */
.do-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--doodle-dots-w) no-repeat 90% 14% / 40px 16px;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.do-item:hover::before { opacity: 0; } /* прячем на фото-ховере, чтобы не мешать overlay */

/* ===================================
   КАК МЫ РАБОТАЕМ
   =================================== */
.about-process::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--doodle-footprint-w), var(--doodle-sprout-w), var(--doodle-wave);
    background-repeat: no-repeat;
    background-position: 90% 12%, 6% 78%, 50% 94%;
    background-size: 26px 34px, 24px 30px, 160px 22px;
    opacity: .55;
}

/* нарисованная от руки волнистая линия вместо прямого dashed border */
.process-timeline {
    border-left: none;
    padding-left: var(--space-10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='120' viewBox='0 0 18 120'%3E%3Cpath d='M9 0 Q -3 15, 9 30 T 9 60 T 9 90 T 9 120' fill='none' stroke='%23EE7A5D' stroke-width='2' stroke-dasharray='2 7' stroke-linecap='round' opacity='0.45'/%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-position: left top;
    background-size: 18px 120px;
}

.process-step__num {
    left: calc(-1 * var(--space-10) - 20px);
}

/* дырчатый карандашный ореол вокруг цифры шага (как у article-step__number) */
.process-step__num {
    position: relative;
}

.process-step__num::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px dashed rgba(238, 122, 93, .35);
    border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
    z-index: -1;
    pointer-events: none;
}

/* превращаем текстовый блок шага в лёгкую карточку — единый язык с article.css */
.process-step__body {
    position: relative;
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, #ffffff 0%, #FAF6F4 100%);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.02);
    transition: all .4s cubic-bezier(.16,1,.3,1);
    isolation: isolate;
    flex: 1;
}

.process-step__body::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    padding: 2px;
    background: linear-gradient(135deg, rgba(238,122,93,.3), rgba(37,169,184,.3), rgba(238,122,93,.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}

.process-step:hover .process-step__body {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(238, 122, 93, .14);
}

.process-step:hover .process-step__body::after { opacity: 1; }

.process-step:first-child .process-step__num {
    box-shadow: var(--shadow-blue), 0 0 0 6px var(--color-bg-section);
}

/* ===================================
   CTA
   =================================== */
.about-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--doodle-heart), var(--doodle-wave), var(--doodle-dots);
    background-repeat: no-repeat;
    background-position: 6% 22%, 45% 88%, 90% 25%;
    background-size: 34px 30px, 150px 24px, 46px 18px;
    opacity: .4;
}

.about-cta::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 14%;
    left: 6%;
    width: 44px;
    height: 44px;
    background: var(--doodle-circle) no-repeat center / contain;
    opacity: .35;
    animation: doodleFloatReverse 9s ease-in-out infinite;
}

/* ===================================
   ЗАГОЛОВКИ — "РУКОПИСНОЕ" ПОДЧЁРКИВАНИЕ
   применяется через доп. класс .section-title--sketchy
   =================================== */
.section-title--sketchy:not(.section-title--left)::after {
    content: '';
    width: 90px;
    height: 12px;
    background: var(--doodle-underline) no-repeat center / contain;
    border-radius: 0;
}

.section-title--left.section-title--sketchy {
    position: relative;
    padding-bottom: var(--space-4);
}

.section-title--left.section-title--sketchy::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 90px;
    height: 12px;
    background: var(--doodle-underline) no-repeat left center / contain;
    border-radius: 0;
}

/* ===================================
   МОБИЛЬНАЯ АДАПТАЦИЯ
   =================================== */
@media (max-width: 768px) {
    .about-hero::before,
    .about-mission::before,
    .about-do::before,
    .about-process::before,
    .about-cta::before {
        opacity: .22;
    }

    .about-hero::after,
    .about-mission::after,
    .about-do::after,
    .about-cta::after {
        width: 32px;
        height: 32px;
    }

    .about-hero__title-accent::after {
        display: none;
    }

    .process-timeline {
        padding-left: var(--space-8);
        background-size: 14px 100px;
    }

    .process-step__num::after {
        inset: -4px;
    }
}

/* ===================================
   ACCESSIBILITY / PRINT
   =================================== */
@media (prefers-reduced-motion: reduce) {
    .about-hero::after,
    .about-mission::after,
    .about-do::after,
    .about-cta::after,
    .about-hero__title-accent::after {
        animation: none;
    }
}

@media print {
    .about-hero::before, .about-hero::after,
    .about-mission::before, .about-mission::after,
    .about-do::before, .about-do::after,
    .about-process::before,
    .about-cta::before, .about-cta::after,
    .about-mission__image-box::before,
    .about-mission__image-box::after {
        display: none !important;
    }
}