/* Косметика поверх стилей Webflow.
 *
 * Отдельный файл, подключается последним. Исходные css/webflow.css и
 * css/alexandra-maximova.webflow.css не трогаем: они машинной генерации,
 * и любая правка в них потеряется при следующем экспорте. Здесь только
 * осознанные переопределения — их видно диффом и легко откатить.
 *
 * Каждая правка ниже подтверждена замером в браузере, а не «на глаз».
 */

/* ── 1. Провал в 444 пикселя в блоке «Меня зовут Александра Максимова» ──
 * .about-div-left растянут по высоте фотографии (1190px) и разложен
 * space-between: текст улетал вверх, цитата с кнопкой — вниз, между ними
 * зияло 444px пустоты. Выстраиваем содержимое сверху с внятным ритмом. */
.about-div-left {
  justify-content: flex-start;
  gap: 56px;
}
.about-button-and-quote-holder {
  padding-bottom: 0;
}

/* ── 2. Слишком узкая мера набора ──
 * .paragraph-2 набран 36px в колонке 492px — выходит 4–5 слов в строке
 * и рваный правый край. У соседнего .paragraph-1 мера 616px; выравниваем. */
.paragraph-2 {
  max-width: 616px;
}

/* ── 3. Пустая полоса над заголовком внутренних страниц ──
 * .hero-section-wrapper имел margin-top: 270px, и вместе с padding секции
 * заголовок оказывался на 320px ниже шапки: на ноутбуке первый экран
 * пустой. Оставляем воздух, но соразмерный. */
.hero-section-wrapper {
  margin-top: 180px;
}

/* ── 4. Текущий пункт меню ничем не отличался ──
 * Webflow проставляет .w--current, но не оформляет его: цвет и насыщенность
 * совпадали с остальными пунктами, и человек не понимал, где находится. */
.navbar .w-nav-link.w--current {
  font-weight: 500;
  box-shadow: inset 0 -1px 0 0 currentColor;
}

/* Ссылки меню: мягкая реакция на наведение вместо полного её отсутствия. */
.navbar .w-nav-link {
  transition: opacity .18s ease;
}
.navbar .w-nav-link:hover {
  opacity: .6;
}

/* ── 5. Видимый фокус с клавиатуры ──
 * Ни у одного интерактивного элемента не было стиля :focus-visible —
 * при навигации с клавиатуры позиция курсора не читалась вовсе. */
a:focus-visible,
button:focus-visible,
.w-button:focus-visible {
  outline: 2px solid #616d6a;
  outline-offset: 3px;
  border-radius: 2px;
}

@media screen and (max-width: 991px) {
  /* На планшете и телефоне колонка не растягивается под фото,
   * дыры нет — возвращаем исходный ритм. */
  .about-div-left { gap: 0; }
  .hero-section-wrapper { margin-top: 120px; }
}

@media screen and (max-width: 479px) {
  .hero-section-wrapper { margin-top: 80px; }
}

/* ── 6. Страница «Контакты»: содержимое жалось в левую половину ──
 * .div-block-115 задан width: 50%, и на широком экране правая половина
 * (около 1000px) оставалась пустой, а блоки клиник уходили далеко вниз.
 * Раскладываем их в две колонки — экран заполняется, список короче.
 * Только на десктопе: на планшете и телефоне колонка одна и всё в порядке. */
@media screen and (min-width: 992px) {
  .div-block-115 {
    width: 100%;
    display: grid;
    /* Три колонки, а не две: в блоке ровно три человека и следом три клиники,
       поэтому строки ложатся по смыслу — ассистенты в первой, клиники во
       второй. При двух колонках человек вставал рядом с клиникой. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 56px;
    row-gap: 40px;
    align-items: start;
  }
  /* подписи-заголовки внутри блока тянутся на всю ширину */
  .div-block-115 > p {
    grid-column: 1 / -1;
  }
}

/* ── 7. Страница «Публикации»: заголовок секции держится рядом с карточками ──
 * Сетка секции — две колонки: слева заголовок, справа карточки. Колонка
 * заголовка растянута по высоте карточек (до 1900px) и всё это время
 * пустовала. Делаем заголовок липким: он остаётся на экране, пока листаешь
 * карточки, и пустота превращается в подсказку «где я нахожусь».
 * Только на десктопе — на узких экранах колонка одна. */
@media screen and (min-width: 992px) {
  /* Заголовок закрепляем за первой колонкой на всю высоту секции, карточки —
     за второй. Без этого при трёх и более карточках сетка переносила часть
     из них в левую колонку, и карточка налезала на липкий заголовок.
     
     !important здесь вынужденный: Webflow генерирует для каждой ячейки
     правило вида #w-node-<uuid> { grid-area: span 2 / span 1 ... }.
     Селектор по id даёт специфичность 100 против 30 у селектора по классу,
     перебить его иначе можно только перечислением всех uuid — а они меняются
     при каждом экспорте. */
  .lecture-section > div > .w-layout-cell:first-child {
    grid-column: 1 !important;
    grid-row: 1 / -1 !important;
  }
  .lecture-section > div > .w-layout-cell:not(:first-child) {
    grid-column: 2 !important;
    grid-row: auto !important;
  }
  .lecture-section .w-layout-cell > .h2 {
    position: sticky;
    top: 140px;
  }
}

/* ── 8. Подвал ──
 * Был буквально пустым: <div class="footer-left"></div> и пустая распорка,
 * а видимого содержимого — одна строка копирайта. Страница обрывалась.
 * Наполняем тем, что и так есть на сайте: логотип, кнопка связи, навигация. */
.footer {
  border-top: 1px solid #e6e4e1;
  padding-top: 48px;
  padding-bottom: 40px;
}
.footer-left {
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
}
.footer-logo {
  width: 180px;
  height: auto;
}
.footer-cta {
  color: #151818;
  border: 1px solid #151818;
  border-radius: 100px;
  padding: 12px 28px;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -.6px;
  text-decoration: none;
  transition: color .3s cubic-bezier(.25,.46,.45,.94),
              background-color .3s cubic-bezier(.25,.46,.45,.94);
}
.footer-cta:hover {
  color: #fcfbfa;
  background-color: #151818;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-bottom: 32px;
}
.footer-nav a {
  color: #151818;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -.6px;
  text-decoration: none;
  transition: opacity .18s ease;
}
.footer-nav a:hover { opacity: .6; }

@media screen and (min-width: 768px) {
  /* Обе половины подвала заданы по 50%, но слева только логотип и кнопка —
     это 210px, а навигации из шести пунктов нужно 656px, и она переносила
     «Контакты» на вторую строку в одиночку. Отдаём ширину по потребности,
     а не поровну. */
  .footer-left  { width: auto; flex: 0 0 auto; margin-right: 64px; }
  .footer-right { width: auto; flex: 1 1 auto; margin-left: 0; }
}

@media screen and (max-width: 767px) {
  .footer { padding-top: 36px; }
  .footer-left { margin-bottom: 32px; }
  .footer-nav { gap: 10px 20px; margin-bottom: 24px; }
}

/* ── 9. «Ещё» на странице отзывов не выглядит кликабельным ──
 * Девять таких переключателей, и все они — просто серый текст 20px без
 * подчёркивания, курсора-руки и реакции на наведение. Человек не понимает,
 * что отзыв можно развернуть. */
/* Одно и то же действие «показать остальное» на сайте оформлено двумя
 * способами: на «Отзывах» и «Публикациях» это кнопка-пилюля на уровне секции,
 * а внутри карточек и в биографии — простой текст без подчёркивания и без
 * реакции на наведение. Приводим к одной системе:
 *   переключатель внутри блока  → подчёркнутая ссылка (ниже)
 *   переключатель всей секции   → кнопка-пилюля (уже была)   */
.show-button-1,
.link-bio-show,
.link-bio-hide,
.link-edu-show,
.link-edu-hide,
/* «Читать» (12 штук) и «Ссылка на патент» (2) на «Публикациях» — тоже просто
 * текст без подчёркивания, хотя ведут наружу: на PDF статей и на патенты.
 * Догадаться, что это ссылка, было можно только наведя курсор. */
.link-bio-copy,
.link-bio-another,
.link-bio-another-2 {
  cursor: pointer;
  /* ссылки растянуты на всю ширину колонки (606px), а подпись короткая —
     без этого подчёркивание тянулось бы через всю колонку.
     fit-content, а не align-self: родитель не всегда флекс-контейнер. */
  width: fit-content;
  border-bottom: 1px solid #c9d2cf;
  padding-bottom: 1px;
  transition: border-color .18s ease;
}
.show-button-1:hover,
.link-bio-show:hover,
.link-bio-hide:hover,
.link-edu-show:hover,
.link-edu-hide:hover,
.link-bio-copy:hover,
.link-bio-another:hover,
.link-bio-another-2:hover {
  border-bottom-color: #151818;
}

/* ── 10. Кнопки, у которых не было transition, дёргались на наведении ──
 * У .button, .service-card-button и .hoverable-1 переход плавный, а у
 * .show-more-publications-button, .show-fewer-publications-button-copy и
 * .bio-link-button-text его не было — цвет менялся рывком. */
.show-more-publications-button,
.show-fewer-publications-button-copy,
.bio-link-button-text,
.button-6 {
  transition: color .3s cubic-bezier(.25,.46,.45,.94),
              background-color .3s cubic-bezier(.25,.46,.45,.94);
}

/* ── 11. Телефоны на «Контактах» ──
 * Классы .link-5 и .text-span-4 в разметке есть, а правил для них в CSS нет
 * вовсе. Номера выглядели обычным текстом, хотя это ссылки tel: — на телефоне
 * по ним удобно звонить, но догадаться об этом было нельзя. */
a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
}
a[href^="tel:"] .text-span-4,
a[href^="tel:"].link-5,
a[href^="tel:"] {
  border-bottom: 1px solid #c9d2cf;
  transition: border-color .18s ease;
}
a[href^="tel:"]:hover {
  border-bottom-color: #151818;
}