@charset "UTF-8";
/* ==========================================================================
   Блоки конструктора страниц в стандартной теме.

   Отдельным файлом, а не внутри theme.css: это оформление чужой разметки —
   её задаёт com_pagebuilder, и правки блоков не должны ходить по файлу
   с оформлением самой темы.

   Всё считается от живых переменных темы (--lil-*), которые владелец
   меняет в панели: свой цвет акцента подхватывается блоками сам.
   ========================================================================== */

/* --------------------------------------------------------------- каркас */

/* Секции чередуют подложку — как на сайтах, с которых снят образец:
   так длинная страница читается блоками, а не сплошной лентой. Разделять
   всё линиями оказалось мало: границы видно, а ритма нет. */
.pb-section {
  padding-block: calc(var(--lil-gap) * 2.6);
}

.pb-section:nth-of-type(even) {
  /* Подложка тянется на всю ширину экрана, а содержимое остаётся
     в колонке: приём с тенью вместо отрицательных отступов не ломает
     сетку и не даёт прокрутки вбок. */
  background: var(--ds-surface);
  box-shadow: 0 0 0 100vmax var(--ds-surface);
  clip-path: inset(0 -100vmax);
}

/* Первая секция страницы прижимается к шапке: обложка не должна висеть
   в воздухе. */
.pb-page > .pb-section:first-child { padding-top: calc(var(--lil-gap) * 1.2); }

/* Секция с обложкой воздуха не просит вовсе: обложка сама высокая и
   тянется до краёв окна, а белая полоса над ней и под ней отрывала её
   от шапки и от следующего блока (замечание владельца 2026-08-01). */
.pb-section:has(> .pb-row > .pb-col > .pb-addon--hero) { padding-block: 0; }

.pb-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--lil-gap);
}

.pb-row + .pb-row {
  margin-top: var(--lil-gap);
}

.pb-col {
  grid-column: span var(--pb-span, 12);
  min-width: 0;
}

.pb-addon + .pb-addon {
  margin-top: var(--lil-gap);
}

/* Заголовок блока: общий для карточек, галереи, ленты и прочих.
   По центру и с ограниченной шириной — иначе на широком экране подпись
   раздела висит в левом углу над сеткой из трёх колонок. */
.pb-title {
  margin: 0 0 var(--lil-gap);
  font-size: var(--ds-h2);
  text-wrap: balance;
}

/* По центру — только когда блок занимает ряд целиком: там это подпись
   раздела. В колонке рядом с соседями заголовок остаётся слева, иначе
   два соседних блока выглядят из разных вёрсток. */
.pb-row:has(> .pb-col:only-child) .pb-title {
  max-width: 34ch;
  margin-inline: auto;
  text-align: center;
  /* Подпись раздела крупная и не жирная — размер снят с заголовков
     секций joomla.org (53px при обычной насыщенности). Мелкий жирный
     заголовок над сеткой из шести колонок терялся. */
  font-size: clamp(1.7rem, 3.4vw, 42px);
  font-weight: 400;
  line-height: 1.16;
  margin-bottom: 25px;
}

.pb-addon--richtext .pb-title,
.pb-addon--media-text .pb-title { max-width: none; margin-inline: 0; text-align: left; }

/* --------------------------------------------------------------- обложка */

.pb-hero {
  display: grid;
  gap: 25px;
  /* Обложка снята с joomla.org: полотно во всю ширину экрана, высокое
     (там 649px), тёмное, с уводящим в угол свечением.

     Растягиваем сам блок, а не подложку под ним. Приём с тенью тянул
     по бокам сплошной цвет, а свечение обрывалось по краю колонки —
     обложка читалась как прямоугольник внутри прямоугольника
     (замечание владельца 2026-08-01). Прокрутки вбок нет: полосу
     за краем окна срезает overflow-x у середины страницы. */
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(3.5rem, 9vw, 7rem);
  padding-inline: calc(50vw - 50% + var(--lil-gap));
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(60rem 30rem at 100% 0%,
      color-mix(in oklab, var(--lil-color-accent) 42%, transparent), transparent 78%),
    radial-gradient(50rem 28rem at 0% 100%,
      color-mix(in oklab, var(--lil-color-accent) 26%, transparent), transparent 72%),
    var(--ds-bar);
  color: #fff;
  text-align: center;
}

.pb-hero .pb-title,
.pb-hero p { color: inherit; }

/* Кнопки обложки стоят рядом, а не столбиком: первая — сплошная,
   остальные контурные (там их три в ряд). */
.pb-hero .pb-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.pb-hero .pb-button { min-height: 48px; padding: 8px 16px; font-size: 1.15em; font-weight: 400; }

.pb-hero-title {
  margin: 0;
  max-width: 22ch;
  margin-inline: auto;
  /* 53px при обычной насыщенности — размер и вес заголовка joomla.org. */
  font-size: clamp(2.1rem, 4.4vw, 53px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.01em;
  color: #fff;
}

.pb-hero-subtitle {
  max-width: 56ch;
  margin: 0 auto;
  color: rgba(255, 255, 255, .84);
  font-size: calc(var(--lil-font-size) * 1.06);
}

/* Кнопка блока — одна на все виды блоков, чтобы призывы выглядели одинаково. */
/* Кнопка сайта повторяет кнопку панели управления: те же отступы, радиус
   и нажатие. Сайт и админка — одна система (решение владельца 2026-07-31). */
.pb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  justify-self: center;
  margin-top: .5rem;
  min-height: 38px;
  padding: 8px 18px;
  border: 1px solid var(--lil-color-accent);
  border-radius: 6px;
  background: var(--lil-color-accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}

.pb-button:hover,
.pb-button:focus-visible {
  background: var(--ds-accent-ink);
  border-color: var(--ds-accent-ink);
  color: #fff;
}

.pb-button:active { transform: scale(.96); }

/* ---------------------------------------------------------- цифры и счёт */

.pb-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--lil-gap);
  text-align: center;
}

.pb-stats__num,
.pb-counter__val {
  display: block;
  color: var(--lil-color-accent);
  font-family: var(--lil-font-headings);
  font-size: calc(var(--ds-h1) * 1.1);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.pb-stats__label,
.pb-counter__label {
  color: var(--lil-color-muted);
  font-size: .92em;
}

.pb-counter {
  text-align: center;
}

/* ------------------------------------------------------- текст и колонки */

.pb-columns {
  display: grid;
  grid-template-columns: repeat(var(--pb-cols, 3), 1fr);
  gap: var(--lil-gap);
}

.pb-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--lil-gap) * 1.5);
  align-items: center;
}

/* Картинка слева — порядком, а не отдельной разметкой. */
.pb-media-text--left .pb-media-text__media {
  order: -1;
}

.pb-media-text__media img {
  width: 100%;
  height: auto;
  border-radius: var(--lil-radius);
}

/* ------------------------------------------------------- вопросы и лента */

.pb-faq,
.pb-accordion {
  display: grid;
  gap: .5rem;
}

.pb-faq__item,
.pb-accordion__item {
  padding: .9rem 1.1rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--lil-radius);
  background: var(--ds-surface);
}

.pb-faq__item > summary,
.pb-accordion__item > summary {
  cursor: pointer;
  font-weight: 600;
}

.pb-faq__answer,
.pb-accordion__answer {
  margin: .6rem 0 0;
  color: var(--lil-color-muted);
}

.pb-timeline {
  display: grid;
  gap: var(--lil-gap);
  margin: 0;
  padding: 0 0 0 1.6rem;
  border-left: 2px solid var(--ds-line);
  list-style: none;
}

.pb-timeline__item {
  position: relative;
}

/* Точка на линии: сдвинута ровно на толщину линии и радиус точки. */
.pb-timeline__dot {
  position: absolute;
  left: -2.05rem;
  top: .45em;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--lil-color-accent);
}

.pb-timeline__date {
  color: var(--lil-color-accent);
  font-size: .85em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pb-timeline__title {
  margin: .15rem 0 .3rem;
  font-size: var(--ds-h3);
}

.pb-timeline__text {
  margin: 0;
  color: var(--lil-color-muted);
}

/* ------------------------------------------------------------- остальное */

.pb-cta {
  display: grid;
  gap: .75rem;
  padding: calc(var(--lil-gap) * 1.5);
  border: 1px solid var(--ds-line);
  border-radius: var(--lil-radius);
  background: var(--ds-surface);
  text-align: center;
}

.pb-cta__title {
  margin: 0;
  font-size: var(--ds-h2);
}

.pb-testimonial {
  display: grid;
  gap: .75rem;
  padding: calc(var(--lil-gap) * 1.25);
  border-left: 3px solid var(--lil-color-accent);
  background: var(--ds-surface);
  border-radius: var(--lil-radius);
}

.pb-testimonial__body {
  font-size: 1.05em;
}

.pb-testimonial__meta {
  display: flex;
  gap: .75rem;
  align-items: center;
}

.pb-testimonial__photo {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
}

.pb-testimonial__role {
  color: var(--lil-color-muted);
  font-size: .9em;
}

.pb-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: .75rem;
}

.pb-gallery__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--lil-radius);
}

.pb-video,
.pb-map-wrap {
  position: relative;
  border-radius: var(--lil-radius);
  overflow: hidden;
}

.pb-video iframe,
.pb-video video,
.pb-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.pb-icon {
  display: inline-flex;
}

.pb-divider {
  border: 0;
  border-top-style: solid;
}

/* ------------------------------------------------------------ узкий экран */

@media (max-width: 720px) {
  .pb-col {
    grid-column: 1 / -1;
  }

  .pb-columns,
  .pb-media-text {
    grid-template-columns: 1fr;
  }

  /* Картинка возвращается наверх: на узком экране порядок «текст под
     картинкой» читается одинаково при любой стороне. */
  .pb-media-text--left .pb-media-text__media {
    order: 0;
  }

  .pb-hero {
    padding: var(--lil-gap);
  }

  .pb-hero-title {
    font-size: var(--ds-h1);
  }
}

/* ------------------------------------------------- проявление при прокрутке

   Класс ds-reveal ставит скрипт темы — и только если браузер умеет следить
   за видимостью и посетитель не просил «меньше движения». Без скрипта
   правила ниже не действуют вовсе, и страница видна целиком сразу.        */

body.ds-reveal .pb-section .pb-addon {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}

body.ds-reveal .pb-section .pb-addon.ds-in {
  opacity: 1;
  transform: none;
}

/* Соседние блоки одной колонки трогаются с места по очереди: так глаз
   успевает пройти по ряду карточек, а не получает всё разом. */
body.ds-reveal .pb-addon.ds-in + .pb-addon.ds-in { transition-delay: .07s; }

/* ------------------------------------------------------- ссылка в карточке

   Была обычной подчёркнутой строкой и терялась среди текста. Теперь это
   явное продолжение карточки: цвет акцента, стрелка, отступ снизу. */

.pb-card__link {
  margin-top: auto;
  align-self: flex-start;
  color: var(--lil-color-accent);
  font-weight: 600;
  text-decoration: none;
}

.pb-card__link::after {
  content: " →";
  transition: margin-left .12s ease;
}

.pb-card__link:hover::after { margin-left: .2em; }

/* ---------------------------------------------------------- значок карточки

   Кружок с приглушённым акцентом — тот же приём, что в панели управления.
   Размер значка задаётся здесь: спрайт отдаёт форму, а не габариты. */

.pb-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--lil-color-accent) 12%, var(--lil-color-background));
  color: var(--lil-color-accent);
}

.pb-card__icon svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* Обложка без кнопки — это заголовок внутренней страницы, а не призыв
   на главной: столько воздуха ей ни к чему. */
.pb-hero:not(:has(.pb-button)) {
  padding-block: calc(var(--lil-gap) * 1.4);
}

.pb-hero:not(:has(.pb-button)) .pb-hero-title { font-size: var(--ds-h1); }

/* ============================================================ D-058

   Оформление узлов конструктора: то, что владелец задаёт в настройках
   секции, строки, колонки и блока. Сами значения приходят таблицей
   стилей страницы; здесь — только то, что нельзя выразить одним
   свойством: полотно во всю ширину, заливка поверх подложки, заголовок
   секции и виды появления.                                          */

/* Секция во всю ширину окна: подложка тянется тенью, содержимое
   остаётся в колонке — тот же приём, что у чередующихся секций,
   и он не даёт прокрутки вбок. */
.pb-section--fluid {
  box-shadow: 0 0 0 100vmax var(--pb-fluid-bg, transparent);
  clip-path: inset(0 -100vmax);
}

/* Заливка поверх подложки — псевдоэлементом: картинку она затемняет,
   а текст поверх неё остаётся читаемым. */
.pb-section--overlay { position: relative; isolation: isolate; }
.pb-section--overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pb-overlay, transparent);
}

/* Заголовок секции — общий для всех её рядов. */
.pb-section__head { margin-bottom: var(--lil-gap); }
.pb-section__title {
  margin: 0 0 .35em;
  font-size: clamp(1.7rem, 3.4vw, 42px);
  font-weight: 400;
  line-height: 1.16;
}
.pb-section__subtitle { margin: 0; color: var(--lil-color-muted); }
.pb-align--start { text-align: left; }
.pb-align--center { text-align: center; }
.pb-align--end { text-align: right; }

/* Появление узла. Работает только когда скрипт темы поставил ds-reveal:
   без него и при запросе «меньше движения» всё видно сразу. */
body.ds-reveal .pb-anim {
  opacity: 0;
  /* Длительность — из настройки узла; без неё привычные .55s. */
  transition:
    opacity var(--pb-anim-time, .55s) ease,
    transform var(--pb-anim-time, .55s) ease;
}
body.ds-reveal .pb-anim--up { transform: translateY(24px); }
body.ds-reveal .pb-anim--down { transform: translateY(-24px); }
body.ds-reveal .pb-anim--left { transform: translateX(-28px); }
body.ds-reveal .pb-anim--right { transform: translateX(28px); }
body.ds-reveal .pb-anim--zoom { transform: scale(.94); }
body.ds-reveal .pb-anim.ds-in { opacity: 1; transform: none; }

/* Задержка появления: значения перечислены, потому что произвольное
   число из настроек в CSS не подставить — только выбор из списка. */
body.ds-reveal .pb-anim-d100 { transition-delay: .1s; }
body.ds-reveal .pb-anim-d200 { transition-delay: .2s; }
body.ds-reveal .pb-anim-d300 { transition-delay: .3s; }
body.ds-reveal .pb-anim-d400 { transition-delay: .4s; }
body.ds-reveal .pb-anim-d500 { transition-delay: .5s; }
body.ds-reveal .pb-anim-d800 { transition-delay: .8s; }

/* Фигуры на границах секции (D-058). У SPPB это готовые SVG-волны;
   здесь то же делается формой самого блока — без картинок, без запросов
   к серверу и без разрешения `data:` в политике безопасности.
   Высота задаётся настройкой и потому меняется по экранам. */
.pb-shape-top,
.pb-shape-bottom { position: relative; }

.pb-shape-top::before,
.pb-shape-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--pb-shape-h, 60px);
  background: inherit;
  pointer-events: none;
}

.pb-shape-top::before { top: calc(var(--pb-shape-h, 60px) * -1 + 1px); }
.pb-shape-bottom::after { bottom: calc(var(--pb-shape-h, 60px) * -1 + 1px); }

.pb-shape-top--tilt::before { clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.pb-shape-top--tilt-reverse::before { clip-path: polygon(0 0, 100% 100%, 0 100%); }
.pb-shape-top--triangle::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pb-shape-top--curve::before { border-radius: 50% 50% 0 0 / 100% 100% 0 0; }

.pb-shape-bottom--tilt::after { clip-path: polygon(0 0, 100% 0, 0 100%); }
.pb-shape-bottom--tilt-reverse::after { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.pb-shape-bottom--triangle::after { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.pb-shape-bottom--curve::after { border-radius: 0 0 50% 50% / 0 0 100% 100%; }

/* Порядок колонок по экранам (`order`) работает только в гибкой сетке;
   ряд у нас сеточный, и там order тоже действует — правило нужно лишь
   для колонок, вынесенных из потока настройкой ширины. */
.pb-row { grid-auto-flow: row; }

/* Волна на границе секции — настоящий SVG в разметке (D-058). Цвет
   берётся от секции: у SVG залито currentColor, а сама волна красится
   цветом СЛЕДУЮЩЕЙ секции, поэтому переход выглядит вырезом, а не
   наклейкой. Цвет задаётся настройкой «Цвет текста» соседа или
   переменной --pb-shape-color. */
.pb-section--shaped { position: relative; }

.pb-shape {
  position: absolute;
  left: 0;
  right: 0;
  line-height: 0;
  color: var(--pb-shape-color, var(--lil-color-background));
  pointer-events: none;
}

.pb-shape svg { display: block; width: 100%; height: var(--pb-shape-h, 60px); }

.pb-shape--top { top: 0; }
.pb-shape--bottom { bottom: 0; transform: rotate(180deg); }

/* Содержимое отодвигается от фигуры, иначе заголовок ложится на волну. */
.pb-section--shaped > .pb-row:first-of-type,
.pb-section--shaped > .pb-section__head { position: relative; z-index: 1; }

/* Видео на подложке секции (D-058): лежит под содержимым, закрывает
   секцию целиком и обрезается по ней. Заливка поверх (overlay) рисуется
   выше видео — иначе текст на пёстром ролике не прочитать. */
.pb-section--video { position: relative; overflow: hidden; isolation: isolate; }

.pb-section__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.pb-section--video.pb-section--overlay::before { z-index: -1; }

/* Просьба «меньше движения» останавливает ролик: непрерывное движение
   на фоне — частая причина укачивания. */
@media (prefers-reduced-motion: reduce) {
  .pb-section__video { display: none; }
}

/* Направление появления отдельной настройкой: сочетается с любым видом,
   поэтому «приближение снизу» и «поворот слева» задаются двумя полями,
   а не двадцатью вариантами в одном списке. */
body.ds-reveal .pb-anim-from--up { transform: translateY(24px); }
body.ds-reveal .pb-anim-from--down { transform: translateY(-24px); }
body.ds-reveal .pb-anim-from--left { transform: translateX(-28px); }
body.ds-reveal .pb-anim-from--right { transform: translateX(28px); }
body.ds-reveal .pb-anim--zoom.pb-anim-from--up { transform: translateY(24px) scale(.94); }
body.ds-reveal .pb-anim--zoom.pb-anim-from--down { transform: translateY(-24px) scale(.94); }
body.ds-reveal .pb-anim--zoom.pb-anim-from--left { transform: translateX(-28px) scale(.94); }
body.ds-reveal .pb-anim--zoom.pb-anim-from--right { transform: translateX(28px) scale(.94); }
body.ds-reveal .pb-anim.ds-in { transform: none; }