/*
 * Блок hero (blocks/hero.php) по бренд-киту МедВебика: две колонки ~47/47 с заметным промежутком,
 * H1 тёмно-синий с синим акцентом, кнопки-капсулы без стрелок, строка возможностей под разделителем.
 */

.hero { overflow-x: clip; background: #fff; }  /* clip: кольцо подложки при повороте выходит за край экрана */
.hero__grid {
    display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(32px, 4.5vw, 88px); align-items: start;
}

.hero__eyebrow {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
    color: var(--c-primary); font-size: 14px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase;
}
.hero__dot { letter-spacing: 0; }
.hero__main { padding-top: clamp(12px, 1.6vw, 24px); }

.hero__title {
    margin-top: 26px; color: var(--c-ink);
    font-size: clamp(40px, 4.6vw, 72px); font-weight: 700; line-height: 1.08; letter-spacing: -.04em;
    text-wrap: balance;
}
.hero__accent { color: var(--c-primary); }

.hero__lead { max-width: 32em; margin-top: 26px; color: var(--c-muted); font-size: clamp(18px, 1.5vw, 23px); line-height: 1.55; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 38px; }

.hero__features {
    display: flex; flex-wrap: wrap; gap: 8px 0; margin-top: 44px; padding-top: 26px;
    border-top: 1px solid var(--c-line); color: var(--c-muted); font-size: 18px; letter-spacing: .04em;
}
.hero__features li { display: inline-flex; align-items: center; }
.hero__features li + li::before { content: "•"; margin: 0 22px; color: var(--c-muted); }

/* клипарт: подложка (CSS) → экран сайта → панель записи. Проценты: left/width — от ширины, top — от высоты бокса */
.hero__visual { position: relative; aspect-ratio: 1.12; }
.hero__layer { position: absolute; display: block; height: auto; }
.hero__layer--screen { left: 0; top: 6%; width: 86%; }
.hero__layer--booking { left: 66%; top: 40%; width: 34%; }

/* ── движение ──
 * Подложка («водичка») всегда слегка перетекает по кругу: скругления + поворот, контур — в противофазе.
 * Экран и панель двигаются только при появлении, дальше стоят на месте.
 * У появления и цикла подложки разные свойства (scale / rotate) — анимации не спорят.
 * prefers-reduced-motion: всё статично (правило в base.css). */
.hero__blob {
    position: absolute; inset: 4% 0 2% 9%;
    border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%;
    background: radial-gradient(120% 100% at 38% 32%, #ecf4ff 0%, #deeafd 52%, #d0e1fb 100%);
    animation:
        hero-blob-in 1.2s cubic-bezier(.22, 1, .36, 1) both,
        hero-blob 18s cubic-bezier(.37, 0, .63, 1) 1.2s infinite;
}
.hero__blob--ring {
    inset: 0 -3% -3% 5%; background: none;
    border: 1.5px solid rgba(6, 71, 255, .12);
    animation:
        hero-blob-in 1.6s cubic-bezier(.22, 1, .36, 1) .15s both,
        hero-blob 24s cubic-bezier(.37, 0, .63, 1) 1.2s infinite reverse;
}
.hero__layer--screen { animation: hero-rise .9s cubic-bezier(.22, 1, .36, 1) both; }
.hero__layer--booking { animation: hero-pop 1s cubic-bezier(.22, 1, .36, 1) .3s both; }

@keyframes hero-blob-in { from { opacity: 0; scale: .9; } }
@keyframes hero-blob {
    0%, 100% { border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%; rotate: 0deg; }
    33%      { border-radius: 46% 54% 43% 57% / 57% 44% 56% 43%; rotate: 7deg; }
    66%      { border-radius: 53% 47% 61% 39% / 43% 55% 45% 57%; rotate: -5deg; }
}
@keyframes hero-rise { from { transform: translateY(18px); } }
@keyframes hero-pop { from { opacity: 0; transform: translateY(28px) scale(.96); filter: blur(6px); } }

@media (max-width: 1024px) {
    .hero__grid { grid-template-columns: 1fr; gap: 40px; }
    .hero__visual { max-width: 680px; margin-inline: auto; width: 100%; }
}
/* телефон: компактный первый экран — кнопки в ряд (перенос, если не влезают), пункты строкой, клипарт меньше */
@media (max-width: 640px) {
    .hero__grid { gap: 20px; }
    .hero__eyebrow { font-size: 11px; letter-spacing: .14em; gap: 4px 10px; }
    .hero__title { margin-top: 14px; font-size: var(--fs-h1-m); line-height: 1.12; }
    .hero__lead { margin-top: 14px; font-size: 16px; line-height: 1.5; }
    .hero__actions { gap: 10px; margin-top: 22px; }
    .hero__actions .btn { flex: 1 1 auto; min-height: 50px; padding: 10px 12px; font-size: 14px; white-space: nowrap; }
    .hero__features { flex-wrap: wrap; gap: 4px 16px; margin-top: 18px; padding-top: 14px; font-size: 14px; }
    .hero__features li::before, .hero__features li + li::before { content: "•"; margin: 0 6px 0 0; color: var(--c-primary); }
    .hero__visual { width: 86%; }
}