/* ===================================
   DOCTORS PAGE — ДЕКОР
   Тема: сертификация / подбор специалиста / команда.
   Мотивы: медаль-лента, лупа, пазл.
   Тот же язык (stroke-only, 3 фирменных цвета), собственный набор под тему страницы.
   TODO: --doodle-* дублируются с другими *-decor.css, при рефакторинге
   вынести в общий tokens.css
   =================================== */

:root {
    --doodle-medal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='46' viewBox='0 0 34 46'%3E%3Cpath d='M11 2L17 14L23 2' stroke='%2352CC9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Ccircle cx='17' cy='30' r='12' fill='none' stroke='%2352CC9A' stroke-width='2'/%3E%3Cpath d='M17 23L19 28L24 28L20 31L22 36L17 33L12 36L14 31L10 28L15 28Z' fill='none' stroke='%2352CC9A' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
    --doodle-magnifier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='15' cy='15' r='11' fill='none' stroke='%23EE7A5D' stroke-width='2'/%3E%3Cpath d='M23 23L32 32' stroke='%23EE7A5D' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    --doodle-puzzle: 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='M4 4H16C16 0 22 0 22 4H34V16C38 16 38 22 34 22V34H22C22 38 16 38 16 34H4V22C0 22 0 16 4 16Z' fill='none' stroke='%2325A9B8' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
    --doodle-underline-doctors: 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='%2352CC9A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    --doodle-dots-doctors: 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(238,122,93,0.25)'/%3E%3Ccircle cx='16' cy='6' r='2' fill='rgba(238,122,93,0.25)'/%3E%3Ccircle cx='28' cy='9' r='2' fill='rgba(238,122,93,0.25)'/%3E%3Ccircle cx='36' cy='5' r='2' fill='rgba(238,122,93,0.25)'/%3E%3C/svg%3E");
}

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

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

/* ===================================
   1. HERO — медаль (сертификация) + рукописное подчёркивание
   .page-hero используется и на courses.html, поэтому скоупим через data-page
   =================================== */
body[data-page="doctors"] .page-hero__title {
    position: relative;
    display: inline-block;
}

body[data-page="doctors"] .page-hero__title::after {
    content: '';
    display: block;
    width: 100px;
    height: 13px;
    margin-top: 6px;
    background: var(--doodle-underline-doctors) no-repeat left center / contain;
    opacity: .8;
}

body[data-page="doctors"] .page-hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 14%;
    right: 8%;
    width: 34px;
    height: 46px;
    background: var(--doodle-medal) no-repeat center / contain;
    opacity: .5;
    animation: doctorsDoodleFloat 8s ease-in-out infinite;
}

@media (max-width: 768px) {
    body[data-page="doctors"] .page-hero::after { display: none; }
}

/* ===================================
   2. ФИЛЬТРЫ — лёгкий "стикерный" наклон (как articles-filter)
   .doctors-filter специфичен для этой страницы — скоуп не требуется
   =================================== */
.doctors-filter__btn:nth-child(odd)  { transform: rotate(-1deg); }
.doctors-filter__btn:nth-child(even) { transform: rotate(1deg); }

.doctors-filter__btn:hover,
.doctors-filter__btn.active {
    transform: translateY(-2px) rotate(0deg);
}

/* ===================================
   3. ФОН СЕКЦИИ С КАРТОЧКАМИ — точки + лупа/пазл по углам
   =================================== */
.doctors-page {
    position: relative;
    overflow: hidden;
}

.doctors-page::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(82, 204, 154, .10) 1.4px, transparent 1.6px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 60% 45% at 50% 8%, black 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 45% at 50% 8%, black 0%, transparent 75%);
    opacity: .5;
}

.doctors-page::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--doodle-magnifier), var(--doodle-puzzle);
    background-repeat: no-repeat;
    background-position: 3% 5%, 96% 92%;
    background-size: 32px 32px, 36px 36px;
    opacity: .3;
}

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

@media (max-width: 768px) {
    .doctors-page::after { opacity: .16; }
}

@media (max-width: 480px) {
    .doctors-page::after { display: none; }
}

/* ===================================
   4. ВОДЯНОЙ ЗНАК НА КАРТОЧКЕ СПЕЦИАЛИСТА
   =================================== */
.specialist-card--page .specialist-card__info {
    background-image: var(--doodle-dots-doctors);
    background-repeat: no-repeat;
    background-position: 92% 6%;
    background-size: 36px 14px;
}

/* ===================================
   5. ТЕГИ СПЕЦИАЛИЗАЦИИ — лёгкий наклон-стикер
   =================================== */
.specialist-tag:nth-child(odd)  { display: inline-block; transform: rotate(-1deg); }
.specialist-tag:nth-child(even) { display: inline-block; transform: rotate(1deg); }

.specialist-card--page:hover .specialist-tag {
    transform: rotate(0deg);
}

/* ===================================
   6. EMPTY-STATE — лупа с ореолом
   =================================== */
#doctorsEmpty {
    position: relative;
}

#doctorsEmpty::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translateX(-50%);
    background: var(--doodle-magnifier) no-repeat center / contain;
    opacity: .5;
    pointer-events: none;
}

/* ===================================
   7. CTA — общий компонент с courses.html, скоуп по data-page
   =================================== */
body[data-page="doctors"] .doctors-cta::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 14%;
    right: 10%;
    width: 32px;
    height: 44px;
    background: var(--doodle-medal) no-repeat center / contain;
    opacity: .4;
    animation: doctorsDoodleFloatReverse 9s ease-in-out infinite;
}

body[data-page="doctors"] .doctors-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--doodle-puzzle), var(--doodle-magnifier);
    background-repeat: no-repeat;
    background-position: 8% 75%, 90% 22%;
    background-size: 34px 34px, 28px 28px;
    opacity: .28;
}

body[data-page="doctors"] .doctors-cta > .container {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    body[data-page="doctors"] .doctors-cta::after,
    body[data-page="doctors"] .doctors-cta::before {
        opacity: .18;
    }
}

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

@media print {
    body[data-page="doctors"] .page-hero::after,
    body[data-page="doctors"] .page-hero__title::after,
    .doctors-page::before,
    .doctors-page::after,
    #doctorsEmpty::before,
    body[data-page="doctors"] .doctors-cta::before,
    body[data-page="doctors"] .doctors-cta::after {
        display: none !important;
    }
}