/*
 * Базовый слой AI-сайтов. Раздаётся с нашего домена — CSP разрешает
 * стили только 'self' и инлайновые, чужой файл сюда не подключить.
 *
 * Здесь лежит ровно то, что модели систематически пропускают: появление
 * первого экрана и отклик на наведение. Всё остальное модель пишет сама —
 * слой не навязывает ни цветов, ни сеток, ни отступов её вёрстке.
 * Единственное исключение — наши виджеты: защита от её сбросов и воздух
 * вокруг них (ниже).
 */

/*
 * Отступы виджетов. Виджеты свёрстаны утилитами Tailwind, а они лежат в
 * каскадных слоях (@layer). Стили модели — вне слоёв и поэтому сильнее
 * любой утилиты, какой бы ни была специфичность: общий сброс вроде
 * * { margin: 0; padding: 0 } снимал поля с формы заявки и часов работы,
 * и поля, чекбокс, кнопка и строки дней прилипали к краю карточки.
 *
 * revert-layer откатывает margin и padding к значению из слоёв — то есть
 * к тому, что задал сам виджет. Класс удвоен ради специфичности: защита
 * сильнее и *, и div, и .contacts div из стилей модели. У обёртки
 * верхнего уровня так же защищены поля раздела. Браузер без revert-layer
 * правило просто пропустит.
 */
.rl-site-widget.rl-site-widget { padding: revert-layer; }
.rl-site-widget.rl-site-widget * {
  margin: revert-layer;
  padding: revert-layer;
}
/* Сброс модели снимал и mx-auto — виджет прижимался к левому краю экрана */
.rl-site-widget--top.rl-site-widget--top { margin-inline: auto; }

/*
 * Потолок ширины у виджетов-перечней. Модель ставит метку прямо в обёртку
 * раздела шириной 72–80rem, и на ноутбуке прайс, вопросы и шаги тянулись
 * на 1100px: строка ответа в полэкрана, цена за три ладони от названия.
 * Галереи, команда, отзывы, цифры, карты и видео ширине рады — их не трогаем.
 * По левому краю: разделы у моделей почти всегда выровнены по левому краю,
 * и виджет встаёт под свой заголовок. В узкой колонке потолок не мешает.
 */
.rl-site-widget:is(
  [data-widget="pricing"], [data-widget="faq"], [data-widget="timeline"], [data-widget="hours"],
  [data-widget="form_contact"], [data-widget="form_email"], [data-widget="form_phone"], [data-widget="booking"],
  [data-widget="messengers"], [data-widget="requisites"], [data-widget="coupon"], [data-widget="countdown"],
  [data-widget="vcard"], [data-widget="share"], [data-widget="form_popup"],
  [data-widget="telegram-post"], [data-widget="max-post"]
):not(.rl-site-widget--top) {
  max-width: 48rem;
}

/*
 * Воздух между виджетом и текстом раздела. Модели ставят метку сразу под
 * заголовком или абзацем, а сброс на странице обнуляет их отступы — значки
 * соцсетей налезали на заголовок «Контакты», форма вставала впритык к
 * вводной строке.
 *
 * Отступ — только там, где сосед текстовый (заголовок, абзац, список) или
 * такой же виджет. Колонку сетки рядом не трогаем: там расстояние задаёт
 * gap, а лишний отступ сверху сдвинул бы виджет ниже соседней колонки.
 * Последнее правило — для метки в самом начале обёртки, когда заголовок
 * стоит перед обёрткой, а не внутри неё.
 */
:is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure, img, picture, a, span, small, strong, address, hr) + .rl-site-widget.rl-site-widget {
  margin-top: clamp(1.25rem, 3vw, 2rem);
}
/* Два виджета подряд часто стоят в сетке с gap — там отступ сложится с ним, поэтому скромнее */
.rl-site-widget.rl-site-widget + .rl-site-widget {
  margin-top: 1rem;
}
.rl-site-widget.rl-site-widget:has(+ :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure, img, picture, a, span, small, strong, address, hr)) {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
/* Обёртка — вёрстка модели: :where() даёт уступить её собственному отступу, но не сбросу */
:is(h1, h2, h3, h4, h5, h6, p) + :where(:has(> .rl-site-widget:first-child)) {
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes rl-site-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Появление: первый экран целиком, дальше — по желанию модели */
  .rl-reveal { animation: rl-site-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
  .rl-reveal-2 { animation: rl-site-rise 0.6s 0.12s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
  .rl-reveal-3 { animation: rl-site-rise 0.6s 0.24s cubic-bezier(0.16, 1, 0.3, 1) backwards; }

  /* Отклик на наведение: подъём от центра, чтобы курсор не терял элемент */
  .rl-lift { transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .rl-lift:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgb(0 0 0 / 0.16); }
  .rl-lift:active { transform: translateY(-1px); }
}

/*
 * Подпись автора стокового фото — маленькая плашка у снимка, проявляется
 * при наведении (на телефоне — при нажатии). Её требуют правила Unsplash;
 * мы делаем её как можно тише, но видимой.
 *
 * Плашка стоит сразу после <img>. Два случая вёрстки:
 * - у снимка своя обёртка (в ней только он и плашка) — плашка встаёт в
 *   правый нижний угол обёртки, то есть снимка. Работает и когда модель
 *   сделала обёртку фоном первого экрана с position:absolute;
 * - снимок стоит среди текста — плашка идёт следом в потоке и отрицательным
 *   отступом заходит на нижний край снимка. Места в вёрстке не занимает.
 */
.rl-stock-credit {
  position: relative;
  z-index: 2;
  display: block;
  width: max-content;
  max-width: calc(100% - 16px);
  box-sizing: border-box;
  height: 22px;
  margin: -30px 8px 8px auto;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  font: 11px/16px system-ui, sans-serif;
  letter-spacing: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.rl-stock-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Своя обёртка: опора для угла. :where() — нулевая специфичность, своё position модели сильнее */
:where(:has(> img:first-child + .rl-stock-credit:last-child)) { position: relative; }
:where(:has(> img:first-child + .rl-stock-credit:last-child)) > .rl-stock-credit {
  position: absolute;
  right: 8px;
  bottom: 8px;
  margin: 0;
}

:where(:has(> .rl-stock-credit)):hover > .rl-stock-credit,
:where(:has(> .rl-stock-credit)):focus-within > .rl-stock-credit {
  opacity: 1;
  pointer-events: auto;
}

/* На сенсорном экране :hover срабатывает от нажатия, только если элемент «нажимаемый» */
@media (hover: none) {
  :where(:has(> .rl-stock-credit)) { cursor: pointer; }
}