/* ===================================
   HOME PAGE — ДОПОЛНИТЕЛЬНЫЙ ДЕКОР
   Активирует недостроенные блоки + добавляет
   недостающие штрихи в стиле проекта.
   TODO: --doodle-* дублируются с article.css/about-decor.css,
   при рефакторинге вынести в общий tokens.css
   =================================== */

:root {
    --doodle-star-home: 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-wave-home: 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-dots-home: 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='%2325A9B8'/%3E%3Ccircle cx='16' cy='6' r='2' fill='%2325A9B8'/%3E%3Ccircle cx='28' cy='9' r='2' fill='%2325A9B8'/%3E%3Ccircle cx='36' cy='5' r='2' fill='%2325A9B8'/%3E%3C/svg%3E");
    --doodle-zigzag-home: 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-underline-home: 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-sprout-home: 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");
}

@keyframes homeDoodleFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-8px) rotate(6deg); }
}

@keyframes homeDoodleFloatReverse {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(6px) rotate(-6deg); }
}

/* ===================================
   1. HERO — акцент над словом "любовью!"
   =================================== */
.hero__title-accent {
    position: relative;
}

.hero__title-accent::after {
    content: '';
    position: absolute;
    top: -24px;
    right: -30px;
    width: 28px;
    height: 28px;
    background: var(--doodle-star-home) no-repeat center / contain;
    opacity: .55;
    pointer-events: none;
    animation: homeDoodleFloat 7s ease-in-out infinite;
}

@media (max-width: 1024px) {
    .hero__title-accent::after { display: none; }
}

/* ===================================
   2. РАСПИСАНИЕ КУРСОВ — фон был "голый", добавляем дудлы
   =================================== */
.courses-schedule {
    position: relative;
}

.courses-schedule__deco {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--doodle-wave-home), var(--doodle-dots-home), var(--doodle-zigzag-home);
    background-repeat: no-repeat;
    background-position: 4% 15%, 91% 22%, 93% 82%;
    background-size: 130px 24px, 48px 18px, 52px 18px;
    opacity: .32;
}

.courses-schedule > .container,
.courses-schedule__viewport {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .courses-schedule__deco { opacity: .18; }
}

/* ===================================
   3. SPECIALISTS — активированный декор (был #comment в HTML)
   уже полностью описан в doctors-index.css, здесь только
   мелкая докрутка: единая точка входа + запрет конфликта z-index
   =================================== */
.specialists__deco {
    z-index: 0;
}

.specialists__deco-line-bottom {
    z-index: 0;
}

/* ===================================
   4. ABOUT-SHORT — замена инлайн-стилей на модификаторы + доп. акцент
   =================================== */
.about-short__deco-shape--br {
    right: -8%;
    bottom: -20%;
    left: auto;
    top: auto;
}

.about-short__deco-shape--tl {
    left: 4%;
    top: 10%;
    right: auto;
    bottom: auto;
}

.about-short__deco-sprout {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    left: 47%;
    top: 4%;
    width: 22px;
    height: 26px;
    background: var(--doodle-sprout-home) no-repeat center / contain;
    opacity: .45;
    animation: homeDoodleFloatReverse 9s ease-in-out infinite;
}

@media (max-width: 768px) {
    .about-short__deco-sprout { display: none; }
}

/* ===================================
   5. РУКОПИСНОЕ ПОДЧЁРКИВАНИЕ ЗАГОЛОВКОВ СЕКЦИЙ
   (тот же приём, что и на странице «О центре» — для единого языка сайта)
   =================================== */
.section-title--sketchy:not(.section-title--left)::after {
    content: '';
    width: 90px;
    height: 12px;
    background: var(--doodle-underline-home) 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-home) no-repeat left center / contain;
    border-radius: 0;
}

/* ===================================
   ACCESSIBILITY / PRINT
   =================================== */
@media (prefers-reduced-motion: reduce) {
    .hero__title-accent::after,
    .about-short__deco-sprout {
        animation: none;
    }
}

@media print {
    .courses-schedule__deco,
    .hero__title-accent::after,
    .about-short__deco-sprout,
    .specialists__deco,
    .specialists__deco-line-bottom,
    .reviews__smiley {
        display: none !important;
    }
}