/* ===================================
   DOCTOR PROFILE PAGE — ДЕКОР
   Тема: сертификат / стетоскоп / закладка.
   Персональная карточка специалиста — более тёплый, "личный" декор,
   в отличие от каталожного (лупа/медаль/пазл) на doctors.html.

   СКОУПИНГ:
   - .page-hero и .doctors-cta — общие классы с doctors.html и courses.html.
     data-page="doctors" используется ОБОИМИ типами страниц (список и профиль),
     поэтому разделение идёт через :has(.doctor-profile) — см. ниже.
   - .doctor-profile__*, .doctor-section, .doctor-sidebar-card — уникальны
     для этой страницы, скоуп не требуется.
   =================================== */

:root {
    --doodle-certificate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='44' viewBox='0 0 36 44'%3E%3Crect x='3' y='2' width='30' height='30' rx='2' fill='none' stroke='%2352CC9A' stroke-width='1.8'/%3E%3Cpath d='M9 10H27M9 16H27M9 22H20' stroke='%2352CC9A' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='18' cy='36' r='6' fill='none' stroke='%2352CC9A' stroke-width='1.8'/%3E%3Cpath d='M14 36L17 39L23 33' stroke='%2352CC9A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    --doodle-stethoscope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38'%3E%3Cpath d='M10 4V16C10 22 15 26 20 26C25 26 30 22 30 16V4' fill='none' stroke='%23EE7A5D' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='4' r='2.4' fill='none' stroke='%23EE7A5D' stroke-width='1.8'/%3E%3Ccircle cx='30' cy='4' r='2.4' fill='none' stroke='%23EE7A5D' stroke-width='1.8'/%3E%3Cpath d='M20 26V32' stroke='%23EE7A5D' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='35' r='3.2' fill='none' stroke='%23EE7A5D' stroke-width='1.8'/%3E%3C/svg%3E");
    --doodle-bookmark: 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='M3 2H23V32L13 24L3 32Z' fill='none' stroke='%2325A9B8' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
    --doodle-underline-doctor: 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-dots-doctor: 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.28)'/%3E%3Ccircle cx='16' cy='6' r='2' fill='rgba(82,204,154,0.28)'/%3E%3Ccircle cx='28' cy='9' r='2' fill='rgba(82,204,154,0.28)'/%3E%3Ccircle cx='36' cy='5' r='2' fill='rgba(82,204,154,0.28)'/%3E%3C/svg%3E");
}

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

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

/* ===================================
   0. ОТКЛЮЧЕНИЕ ДЕКОРА СПИСКА СПЕЦИАЛИСТОВ НА ЭТОЙ СТРАНИЦЕ
   data-page="doctors" общий у списка и у персональной карточки —
   .doctor-profile присутствует только здесь
   =================================== */
body[data-page="doctors"]:has(.doctor-profile) .page-hero::after,
body[data-page="doctors"]:has(.doctor-profile) .doctors-cta::after,
body[data-page="doctors"]:has(.doctor-profile) .doctors-cta::before {
    display: none;
}

/* ===================================
   1. HERO (шапка с хлебными крошками) — стетоскоп + подчёркивание
   .page-hero--doctor уникален для этой страницы, скоуп не нужен
   =================================== */
.page-hero--doctor {
    overflow: visible; /* чтобы декор мог слегка выходить за пределы узкой шапки */
}

.page-hero--doctor::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 10%;
    right: 6%;
    width: 34px;
    height: 34px;
    background: var(--doodle-stethoscope) no-repeat center / contain;
    opacity: .45;
    animation: doctorDoodleFloat 8s ease-in-out infinite;
}

@media (max-width: 768px) {
    .page-hero--doctor::after { display: none; }
}

/* ===================================
   2. ИМЯ ВРАЧА — рукописное подчёркивание
   =================================== */
.doctor-profile__name {
    position: relative;
    display: inline-block;
}

.doctor-profile__name::after {
    content: '';
    display: block;
    width: 90px;
    height: 12px;
    margin-top: 4px;
    background: var(--doodle-underline-doctor) no-repeat left center / contain;
    opacity: .7;
}

@media (max-width: 768px) {
    .doctor-profile__name::after {
        margin-inline: auto;
        background-position: center;
    }
}

/* ===================================
   3. КАРТОЧКА-HERO ПРОФИЛЯ — сертификат-стикер в углу
   =================================== */
.doctor-profile__hero {
    /* уже position: relative; overflow: hidden — см. doctor-page.css */
}

.doctor-profile__hero::after {
    /* существующий blob уже занимает ::after — добавляем сертификат через
       дополнительный элемент нельзя (нет свободного псевдокласса),
       поэтому переносим мотив на фото-обёртку ниже (п.4) */
}

/* ===================================
   4. ФОТО ВРАЧА — сертификат-стикер рядом с бейджем опыта
   =================================== */
.doctor-profile__photo-wrap {
    /* уже position: relative — см. doctor-page.css */
}

.doctor-profile__photo-wrap::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: 30px;
    height: 36px;
    background: var(--doodle-certificate) no-repeat center / contain;
    opacity: .85;
    transform: rotate(-8deg);
    z-index: 2;
    pointer-events: none;
}

@media (max-width: 480px) {
    .doctor-profile__photo-wrap::after {
        width: 24px;
        height: 28px;
        top: -6px;
        left: -6px;
    }
}

/* ===================================
   5. ФОН СЕКЦИИ ПРОФИЛЯ — точки + лёгкая текстура
   =================================== */
.doctor-profile {
    position: relative;
    overflow: hidden;
}

.doctor-profile::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: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 50% 30% at 50% 0%, black 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 50% 30% at 50% 0%, black 0%, transparent 75%);
    opacity: .5;
}

.doctor-profile > .container {
    position: relative;
    z-index: 1;
}

/* ===================================
   6. ВОДЯНОЙ ЗНАК НА КАРТОЧКАХ СЕКЦИЙ
   =================================== */
.doctor-section__body {
    background-image: var(--doodle-dots-doctor);
    background-repeat: no-repeat;
    background-position: 96% 4%;
    background-size: 34px 14px;
}

/* ===================================
   7. SIDEBAR — закладка на акцентной карточке записи
   =================================== */
.doctor-sidebar-card--accent {
    position: relative;
}

.doctor-sidebar-card--accent::after {
    content: '';
    position: absolute;
    top: -4px;
    right: 20px;
    width: 20px;
    height: 28px;
    background: var(--doodle-bookmark) no-repeat center / contain;
    opacity: .7;
    pointer-events: none;
    z-index: 2;
}

/* ===================================
   8. CTA — стетоскоп + сертификат
   .doctors-cta общий класс, но контент внутри блока 0 уже
   отключает базовый декор списка специалистов на этой странице,
   здесь просто добавляем свой поверх (уникальные ::selector не нужны,
   т.к. .doctors-cta::before/after уже "свободны" благодаря блоку 0)
   =================================== */
body[data-page="doctors"]:has(.doctor-profile) .doctors-cta {
    position: relative;
}

body[data-page="doctors"]:has(.doctor-profile) .doctors-cta > .container::before {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: -20px;
    right: 8%;
    width: 34px;
    height: 34px;
    background: var(--doodle-stethoscope) no-repeat center / contain;
    opacity: .4;
    animation: doctorDoodleFloatReverse 9s ease-in-out infinite;
}

@media (max-width: 768px) {
    body[data-page="doctors"]:has(.doctor-profile) .doctors-cta > .container::before {
        display: none;
    }
}

/* ===================================
   ACCESSIBILITY / PRINT
   =================================== */
@media (prefers-reduced-motion: reduce) {
    .page-hero--doctor::after,
    body[data-page="doctors"]:has(.doctor-profile) .doctors-cta > .container::before {
        animation: none;
    }
}

@media print {
    .page-hero--doctor::after,
    .doctor-profile__name::after,
    .doctor-profile__photo-wrap::after,
    .doctor-profile::before,
    .doctor-sidebar-card--accent::after,
    body[data-page="doctors"]:has(.doctor-profile) .doctors-cta > .container::before {
        display: none !important;
    }
}