/* ============================================================
   ПОИСК ПО САЙТУ — база: общие для блоков страницы примитивы.

   Отдельный бандл от общего (см. local/include/sx/search/shell.php):
   шапка и подвал нового дизайна стоят на всех страницах сайта и тянут
   бандл local/assets/sx — стили одной страницы туда класть нельзя.

   Шрифты, токены (--sx-*), сброс .sx-scope и готовые элементы — кнопка
   .sx-btn-book, вкладки .sx-tab, чипсы .sx-adchip, стрелка .sx-etc,
   карточки врачей .sx-docs/.sx-doc — приезжают из общего бандла, он
   подключается раньше. Пути к его иконкам пишем АБСОЛЮТНО.

   Цвета тегов и кнопка-контур повторяют страницу клиники
   (local/assets/sx-hospital/css/parts/00-base.css): её бандл отдельный
   и сюда не подключается.
   ============================================================ */

/* Голубая зона: шапка + карточка поиска. Низ скруглён — так зона
   отделяется от белой выдачи, как на странице клиники. */
.sx-srch-top{border-radius:0 0 32px 32px;}

/* Вертикальный ритм белой части. */
.sx-srch-sec{padding-block:64px 120px;}

/* ---- Цветной тег типа результата ------------------------------------ */
.sx-srch-tag{align-self:flex-start;display:inline-flex;align-items:center;padding:6px 16px;border-radius:8px;
  background:var(--sx-tag-bg);color:var(--sx-tag-fg);
  font-size:16px;line-height:1.4;letter-spacing:-.32px;white-space:nowrap;}
.sx-srch-tag--blue{--sx-tag-bg:#e4ecff;--sx-tag-fg:#1748cc;}
.sx-srch-tag--violet{--sx-tag-bg:#ede5ff;--sx-tag-fg:#6435b8;}
.sx-srch-tag--teal{--sx-tag-bg:#d8f1ec;--sx-tag-fg:#096b5b;}
.sx-srch-tag--lime{--sx-tag-bg:#e8f0cc;--sx-tag-fg:#536c16;}
.sx-srch-tag--amber{--sx-tag-bg:#ffedc2;--sx-tag-fg:#805600;}
.sx-srch-tag--coral{--sx-tag-bg:#ffe0d6;--sx-tag-fg:#a33d25;}
.sx-srch-tag--pink{--sx-tag-bg:#f9deed;--sx-tag-fg:#94285c;}
.sx-srch-tag--gray{--sx-tag-bg:#e6ebf2;--sx-tag-fg:#4b5565;}

/* ---- Кнопка-контур -------------------------------------------------- */
.sx-srch-ghost{display:inline-flex;align-items:center;justify-content:center;gap:16px;
  height:56px;padding:12px 32px;border:1px solid #4c7dff;border-radius:12px;
  color:#4c7dff;font-weight:500;font-size:18px;line-height:1.05;letter-spacing:.9px;text-transform:uppercase;
  transition:background-color .15s ease,color .15s ease;}
.sx-srch-ghost:hover{background:#4c7dff;color:#fff;}

/* ---- Поверхности браузера ------------------------------------------- */
/* Рамка фокуса с клавиатуры и выделение текста — в цветах сайта, а не
   системные: страница целиком про ввод и чтение текста. */
.sx-srch-top :focus-visible,.sx-srch :focus-visible{outline:2px solid #4c7dff;outline-offset:3px;}
.sx-srch-top ::selection,.sx-srch ::selection{background:#cfdcff;color:var(--sx-ink);}
/* ============================================================
   Карточка поиска в голубой зоне: крошки, заголовок, поле, вкладки
   ============================================================ */
/* Отступ от шапки и белая карточка на всю ширину контейнера — как герой
   страницы клиники. */
.sx-srch-hero{padding-top:48px;}
.sx-srch-hero__card{background:#fff;border-radius:24px;overflow:hidden;}

/* — Хлебные крошки — */
.sx-srch-crumbs{border-bottom:1px solid #e4e9f5;padding:8px 0 5px;}
.sx-srch-crumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:11px 32px;
  font-size:14px;line-height:1.3;letter-spacing:-.2px;color:#6b7280;}
.sx-srch-crumbs__list a{color:inherit;transition:color .15s ease;}
.sx-srch-crumbs__list a:hover{color:var(--sx-blue);}
.sx-srch-crumbs__list [aria-current]{font-weight:500;color:var(--sx-ink);}
/* Разделитель — шеврон из общего бандла; смотрит влево, разворачиваем. */
.sx-srch-crumbs__sep{width:13px;height:13px;background-color:#6b7280;flex:none;transform:scaleX(-1);
  -webkit-mask:url(/local/assets/sx/icons/arrow-sm.svg) center/7px 11px no-repeat;
          mask:url(/local/assets/sx/icons/arrow-sm.svg) center/7px 11px no-repeat;}

/* — Тело карточки — */
.sx-srch-hero__body{display:flex;flex-direction:column;align-items:flex-start;gap:32px;padding:56px 32px 48px;}
.sx-srch-hero__title{font-weight:500;font-size:60px;line-height:1.07;letter-spacing:-2.4px;color:var(--sx-ink);}

/* — Поле поиска — */
/* Серое поле — тот же приём, что поиск в шапке и в блоке «Медицина будущего»
   на главной. Кнопка — фирменная «Записаться» из шапки с другой подписью. */
.sx-srch-form{display:flex;align-items:stretch;gap:16px;width:100%;max-width:1120px;}
.sx-srch-form__field{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px;
  height:56px;padding:0 20px;border:1px solid transparent;border-radius:12px;background:var(--sx-search-bg);
  cursor:text;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;}
.sx-srch-form__field:hover{border-color:#cbd5e1;}
.sx-srch-form__field:focus-within{background:#fff;border-color:#4c7dff;box-shadow:0 0 0 3px rgba(76,125,255,.18);}
.sx-srch-form__ic{flex:none;width:24px;height:24px;}
.sx-srch-form__input{flex:1 1 auto;min-width:0;height:100%;padding:0;border:0;background:none;outline:none;
  font-size:18px;letter-spacing:-.36px;color:var(--sx-ink);caret-color:var(--sx-blue);}
/* Светлее этого подсказка на сером поле не читается (контраст 4.5:1). */
.sx-srch-form__input::placeholder{color:#626b79;opacity:1;}
.sx-srch-form__field:has(.sx-srch-form__input:focus-visible){box-shadow:0 0 0 3px rgba(76,125,255,.3);}
.sx-srch-form__input:focus-visible{outline:none;}
.sx-srch-form__go{border:0;cursor:pointer;}

/* — Подсказка про раскладку клавиатуры — */
.sx-srch-hero__note{font-size:16px;line-height:1.4;letter-spacing:-.16px;color:var(--sx-ink-soft);}
.sx-srch-hero__note a{color:#1e5bff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
.sx-srch-hero__note a:hover{text-decoration-thickness:2px;}

/* — Вкладки «Везде / Врачи» — */
/* Примитив .sx-tab из каталога главной; число результатов — в плашке,
   как счётчики направлений в услугах на странице клиники. */
.sx-srch-tabs{display:flex;flex-wrap:wrap;gap:16px;}
.sx-srch-tab{gap:12px;}
.sx-srch-tab__num{display:inline-flex;align-items:center;justify-content:center;min-width:32px;padding:3px 8px;border-radius:6px;
  background:rgba(76,125,255,.12);font-family:var(--sx-font);font-size:16px;line-height:1.3;letter-spacing:-.32px;
  font-variant-numeric:tabular-nums;}
.sx-srch-tab.is-active .sx-srch-tab__num{background:rgba(255,255,255,.24);}

/* — Примеры запросов под пустым полем — */
.sx-srch-hero__examples{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;}
.sx-srch-hero__examples-t{font-size:16px;line-height:1.3;letter-spacing:-.32px;color:var(--sx-ink-soft);}
/* ============================================================
   Врачи: карусель над выдачей и сетка во вкладке «Врачи»

   Вёрстка карточек и карусели — общая с главной (.sx-docs / .sx-doc
   в бандле sx, стрелки заводит его js/parts/10-carousel.js).
   Здесь только отличия страницы поиска.
   ============================================================ */
/* На главной блок отбит margin-top от предыдущего; тут он первый на белом. */
.sx-srch-docs{margin-top:0;padding-top:96px;}
.sx-srch-docs .sx-docs__head{align-items:flex-end;}
.sx-srch-docs .sx-docs__all{font-size:16px;letter-spacing:.8px;}
.sx-srch-docs .sx-docs__stat-intro{font-size:20px;line-height:1.3;letter-spacing:-.4px;}
.sx-srch-docs + .sx-srch-sec{padding-top:96px;}

/* — Врач без фото — */
/* На главной таких не показывают, в поиске он обычный результат: вместо
   фото — фон карточки и силуэт в верхней, свободной от плашки части. */
.sx-srch-nophoto{position:absolute;inset:0;background:#e9eef5;}
.sx-srch-nophoto::before{content:"";position:absolute;left:50%;top:30%;width:96px;height:96px;
  transform:translate(-50%,-50%);background-color:#b3bfd3;
  -webkit-mask:url(/local/assets/sx-search/icons/doctor-placeholder.svg) center/contain no-repeat;
          mask:url(/local/assets/sx-search/icons/doctor-placeholder.svg) center/contain no-repeat;}

/* — Сетка во вкладке «Врачи» — */
/* Карточки тянутся по ширине колонки: высота и плашка с ФИО те же, что в
   карусели, маска-фаска растягивается вместе с карточкой. */
.sx-srch-docgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:32px 24px;margin-top:40px;}
.sx-srch-docgrid .sx-doc__inner{width:auto;}
/* ============================================================
   Выдача: заголовок с числом и сортировкой, строки результатов,
   пустое состояние
   ============================================================ */
.sx-srch-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 32px;}
.sx-srch-head__title{flex:0 0 100%;font-weight:500;font-size:60px;line-height:1.07;letter-spacing:-2.4px;color:var(--sx-ink);}
.sx-srch-head__count{font-size:20px;line-height:1.3;letter-spacing:-.4px;color:var(--sx-ink-soft);}

/* — Сортировка — */
.sx-srch-sort{margin-left:auto;display:flex;align-items:center;gap:4px;
  font-size:16px;line-height:1.3;letter-spacing:-.32px;color:var(--sx-ink-soft);}
.sx-srch-sort__t{margin-right:8px;}
.sx-srch-sort__opt{padding:6px 12px;border-radius:8px;color:#4c7dff;transition:background-color .15s ease;}
a.sx-srch-sort__opt:hover{background:rgba(76,125,255,.1);}
.sx-srch-sort__opt.is-active{background:#e4ecff;color:#1748cc;font-weight:500;}

/* — Строки — */
/* Тег типа стоит отдельной колонкой: так тип читается, даже когда глаз
   бежит по списку сверху вниз, не заходя в заголовки. Вся строка
   кликабельна — ссылка заголовка растянута на неё через ::after. */
.sx-srch-list{margin-top:40px;border-top:1px solid var(--sx-card-border);}
.sx-srch-item{position:relative;display:grid;grid-template-columns:200px minmax(0,1fr) 32px;align-items:start;gap:16px 40px;
  padding:32px 24px;border-bottom:1px solid var(--sx-card-border);transition:background-color .15s ease;}
.sx-srch-item:hover{background:#f7f9fe;}
/* В сетке тег растянулся бы на всю колонку — прижимаем к началу. */
.sx-srch-item > .sx-srch-tag{justify-self:start;}
.sx-srch-item > .sx-etc{align-self:center;}
.sx-srch-item:hover > .sx-etc--outline{background:#4c7dff;color:#fff;}
.sx-srch-item:has(:focus-visible){outline:2px solid #4c7dff;outline-offset:-2px;}
.sx-srch-item__body{display:flex;flex-direction:column;gap:12px;max-width:880px;}
.sx-srch-item__title{font-weight:500;font-size:24px;line-height:1.25;letter-spacing:-.72px;color:var(--sx-ink);text-wrap:pretty;}
.sx-srch-item__title a::after{content:"";position:absolute;inset:0;}
.sx-srch-item__title a:focus-visible{outline:none;}
.sx-srch-item__text{font-size:16px;line-height:1.45;letter-spacing:-.16px;color:var(--sx-ink-soft);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.sx-srch-item__date{font-size:14px;line-height:1.3;letter-spacing:-.14px;color:#6b7280;}

/* Совпадения с запросом: модуль поиска оборачивает их в <b>. В тексте —
   светло-синяя подложка, в заголовке он и так полужирный — только цвет. */
.sx-srch-item__text b{font-weight:500;color:var(--sx-ink);background:#e4ecff;border-radius:4px;padding:0 2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;}
.sx-srch-item__title b{font-weight:inherit;color:#1748cc;}

/* — Ничего не нашлось / запрос не разобран — */
.sx-srch-empty{max-width:880px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
.sx-srch-empty__title{font-weight:500;font-size:48px;line-height:1.1;letter-spacing:-1.9px;color:var(--sx-ink);}
.sx-srch-empty__text{font-size:20px;line-height:1.4;letter-spacing:-.4px;color:var(--sx-ink-soft);text-wrap:pretty;}
.sx-srch-empty__links{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;}
/* ============================================================
   Пагинация
   ============================================================ */
/* Номера — моноширинным, как вкладки: цифры одной ширины не прыгают при
   переходе между страницами. Стрелки — та же кнопка .sx-etc, что в строках. */
.sx-srch-pager{display:flex;align-items:center;gap:16px;margin-top:48px;}
.sx-srch-pager__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.sx-srch-pager__num{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:48px;padding:0 12px;
  border:1px solid transparent;border-radius:8px;color:#4c7dff;
  font-family:var(--sx-font-mono);font-size:20px;line-height:1;letter-spacing:-.6px;
  transition:background-color .15s ease,border-color .15s ease;}
a.sx-srch-pager__num:hover{border-color:#4c7dff;}
.sx-srch-pager__num.is-current{background:#4c7dff;color:#fff;}
.sx-srch-pager__gap{min-width:24px;text-align:center;color:#6b7280;font-family:var(--sx-font-mono);}
.sx-srch-pager__step{display:inline-flex;border-radius:8px;}
.sx-srch-pager__step .sx-etc{width:48px;height:48px;}
.sx-srch-pager__step--prev .sx-etc svg{transform:scaleX(-1);}
/* ============================================================
   Поиск — адаптив. Точки переключения те же, что у главной и страницы
   клиники: 1599 / 1279 / 1023 / 767 / 480.

   Файл идёт ПОСЛЕ блочных (20- > 0X-), поэтому перебивает их правила.
   ============================================================ */

/* ---- Узкий десктоп: 1280–1599 --------------------------------------- */
@media (max-width:1599px){
  .sx-srch-hero__title,
  .sx-srch-head__title{font-size:48px;letter-spacing:-1.9px;}
  .sx-srch-empty__title{font-size:40px;letter-spacing:-1.6px;}
}

/* ---- Планшет и узкие окна: до 1279 ---------------------------------- */
@media (max-width:1279px){
  .sx-srch-hero{padding-top:24px;}
  .sx-srch-hero__body{padding:40px 24px 32px;gap:24px;}
  .sx-srch-hero__title,
  .sx-srch-head__title{font-size:40px;line-height:1.1;letter-spacing:-1.6px;}

  .sx-srch-sec{padding-block:48px 80px;}
  .sx-srch-docs{padding-top:64px;}
  .sx-srch-docs + .sx-srch-sec{padding-top:64px;}
  .sx-srch-docs .sx-docs__stat-intro{font-size:18px;letter-spacing:-.36px;}

  .sx-srch-item{grid-template-columns:150px minmax(0,1fr) 32px;gap:12px 24px;padding:24px 16px;}
  .sx-srch-item__title{font-size:20px;letter-spacing:-.6px;}
}

/* ---- Планшет 768–1023 ------------------------------------------------ */
@media (max-width:1023px){
  .sx-srch-crumbs__list{padding:11px 24px;font-size:15px;letter-spacing:-.3px;}

  /* Вкладки мельче и прописными — как пилюли на странице клиники. */
  .sx-srch-tabs{gap:12px;}
  .sx-srch-tab{padding:10px 16px;gap:10px;font-size:14px;line-height:1.4;letter-spacing:-.28px;text-transform:uppercase;}
  .sx-srch-tab__num{min-width:26px;padding:1px 6px;font-size:13px;}

  /* Тег типа уходит над заголовком: колонки на ширине планшета не хватает. */
  .sx-srch-item{grid-template-columns:minmax(0,1fr) 32px;grid-template-areas:"tag arrow" "body arrow";}
  .sx-srch-item > .sx-srch-tag{grid-area:tag;}
  .sx-srch-item > .sx-srch-item__body{grid-area:body;}
  .sx-srch-item > .sx-etc{grid-area:arrow;}
  .sx-srch-tag{padding:4px 12px;font-size:14px;letter-spacing:-.28px;}
}

/* ---- Телефон: до 767 ------------------------------------------------- */
@media (max-width:767px){
  .sx-srch-top{border-radius:0 0 24px 24px;}
  .sx-srch-hero{padding-top:16px;}
  .sx-srch-hero__card{border-radius:20px;}
  .sx-srch-crumbs__list{padding:8px 16px;font-size:13px;}
  .sx-srch-hero__body{padding:24px 16px;gap:20px;}
  .sx-srch-hero__title,
  .sx-srch-head__title{font-size:28px;line-height:1.15;letter-spacing:-1.1px;}

  /* Поле и кнопка друг под другом; подпись и стрелка кнопки — в центр,
     иначе на всю ширину между ними пустая середина (так же на странице клиники). */
  .sx-srch-form{flex-direction:column;gap:12px;}
  .sx-srch-form__field{padding:0 16px;}
  /* 16px — меньше iOS увеличивает страницу при фокусе на поле. */
  .sx-srch-form__input{font-size:16px;letter-spacing:-.32px;}
  .sx-srch-form__go{width:100%;justify-content:center;gap:16px;}
  .sx-srch-form__go .sx-btn-book__t{margin-left:0;}
  .sx-srch-form__go .sx-btn-book__arr{position:static;transform:none;}

  .sx-srch-hero__examples{gap:8px;}
  .sx-srch-hero__examples-t{flex:0 0 100%;font-size:14px;}
  .sx-srch-hero__examples .sx-adchip{height:36px;padding:0 14px;font-size:14px;}

  .sx-srch-sec{padding-block:32px 56px;}
  .sx-srch-docs{padding-top:40px;}
  .sx-srch-docs + .sx-srch-sec{padding-top:40px;}
  .sx-srch-docs .sx-docs__stat-intro{font-size:16px;letter-spacing:-.32px;}
  /* Подпись «Все врачи по запросу» рядом с заголовком не помещается —
     остаётся стрелка, как у блока врачей на главной. */
  .sx-srch-docs .sx-docs__all{font-size:0;gap:0;}

  .sx-srch-head{gap:8px 16px;}
  .sx-srch-head__count{font-size:16px;letter-spacing:-.32px;}
  .sx-srch-sort{flex:0 0 100%;margin-left:-12px;font-size:14px;}
  .sx-srch-sort__t{margin-right:0;padding-left:12px;}

  .sx-srch-list{margin-top:24px;}
  .sx-srch-item{gap:10px 12px;padding:20px 4px;}
  .sx-srch-item__body{gap:8px;}
  .sx-srch-item__title{font-size:18px;line-height:1.3;letter-spacing:-.36px;}
  .sx-srch-item__text{font-size:14px;line-height:1.45;letter-spacing:-.14px;-webkit-line-clamp:4;}
  .sx-srch-item > .sx-etc{align-self:start;}

  .sx-srch-empty__title{font-size:28px;line-height:1.15;letter-spacing:-1.1px;}
  .sx-srch-empty__text{font-size:16px;letter-spacing:-.32px;}
  .sx-srch-empty__links{flex-direction:column;align-self:stretch;gap:12px;margin-top:8px;}
  .sx-srch-ghost{height:48px;padding:10px 20px;font-size:16px;letter-spacing:.8px;}

  .sx-srch-pager{gap:8px;margin-top:32px;}
  .sx-srch-pager__list{gap:4px;}
  .sx-srch-pager__num{min-width:40px;height:40px;padding:0 8px;font-size:16px;}
  .sx-srch-pager__step .sx-etc{width:40px;height:40px;}

  /* Вкладка «Врачи»: большие карточки по одной в ряд растянули бы страницу
     на двенадцать экранов — на телефоне это строки с маленьким фото. */
  .sx-srch-docgrid{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:24px;}
  .sx-srch-docgrid .sx-doc{filter:none;}
  .sx-srch-docgrid .sx-doc__inner{display:flex;align-items:center;gap:16px;height:auto;padding:12px 60px 12px 12px;
    -webkit-mask:none;mask:none;background:#f8fafc;border:1px solid var(--sx-card-border);border-radius:16px;}
  .sx-srch-docgrid .sx-doc__photo,
  .sx-srch-docgrid .sx-srch-nophoto{position:relative;inset:auto;flex:none;width:64px;height:84px;border-radius:12px;}
  .sx-srch-docgrid .sx-srch-nophoto::before{top:50%;width:40px;height:40px;}
  .sx-srch-docgrid .sx-doc__name{position:static;height:auto;padding:0;border:0;background:none;flex:1 1 auto;min-width:0;}
  .sx-srch-docgrid .sx-doc__fio{font-size:16px;letter-spacing:-.32px;}
  .sx-srch-docgrid .sx-doc__spec{font-size:14px;letter-spacing:-.28px;-webkit-line-clamp:2;}
  .sx-srch-docgrid .sx-doc__more{position:absolute;right:12px;top:50%;transform:translateY(-50%);}
}