/* ==========================================================
   СЕКЦИИ — Универсальная сцена с персонажами
   ReutPrint Components v2.2
   ----------------------------------------------------------
   Используется в любых блоках главной страницы:

   - карточки услуг;
   - преимущества;
   - информационные блоки;
   - промобаннеры;
   - CTA-секции.

   Поддерживает:

   - персонажа справа;
   - персонажа слева;
   - персонажа поверх контента;
   - персонажа за контентом;
   - индивидуальный размер;
   - индивидуальное вертикальное положение;
   - адаптивное горизонтальное положение.
   
   
   
   ========================================================== */

.rp-section-scene {
  position: relative;
  overflow: visible;
  isolation: isolate;

  /* --------------------------------------------------------
     Размер изображения персонажа
     --------------------------------------------------------
     По умолчанию высота составляет 90% высоты сцены.

     Для отдельного раздела значение можно изменить:
     --rp-character-height: 82%;
     -------------------------------------------------------- */

  --rp-character-width: auto;
  --rp-character-height: 90%;

  /* --------------------------------------------------------
     Вертикальное положение
     --------------------------------------------------------
     По умолчанию персонаж прижат к нижней границе сцены.

     Чтобы поднять:
     --rp-character-bottom: 20px;

     Чтобы привязать сверху:
     --rp-character-top: 10px;
     --rp-character-bottom: auto;
     -------------------------------------------------------- */

  --rp-character-top: auto;
  --rp-character-bottom: 0px;

  /* --------------------------------------------------------
     Горизонтальное положение
     --------------------------------------------------------
     Формула рассчитывает свободное пространство между
     контейнером сайта и краем окна браузера.

     50% - 50vw:
     отрицательное внешнее поле между сценой и краем окна.

     + 24px:
     оставляет небольшой отступ от края окна.

     clamp():
     не позволяет персонажу уйти дальше -130px
     или приблизиться ближе -55px.
     -------------------------------------------------------- */

  --rp-character-inline-offset:
    clamp(
      -130px,
      calc(50% - 50vw + 24px),
      -55px
    );

  /* Прозрачность персонажа. */
  --rp-character-opacity: 1;

  /* Настройки тени. */
  --rp-character-shadow-x: 12px;
  --rp-character-shadow-y: 18px;
  --rp-character-shadow-blur: 24px;
  --rp-character-shadow-color: rgba(20, 18, 40, .15);
}


/* ==========================================================
   СЕКЦИИ — Основной контент сцены
   ----------------------------------------------------------
   .rp-card-grid поддерживается автоматически для текущих
   карточек.

   .rp-section-scene-content используется в любых других
   блоках: преимуществах, CTA, информации и промобаннерах.

   Слои:
   1 — персонаж за контентом;
   2 — основной контент;
   3 — персонаж поверх контента.
   ========================================================== */

.rp-section-scene > .rp-card-grid,
.rp-section-scene > .rp-section-scene-content {
  position: relative;
  z-index: 2;
}


/* ==========================================================
   СЕКЦИИ — Базовое изображение персонажа
   ----------------------------------------------------------
   Изображение:

   - не участвует в сетке;
   - не влияет на высоту блока;
   - не блокирует ссылки;
   - не выделяется мышью;
   - может выходить за границы контейнера.
   ========================================================== */

.rp-section-character {
  position: absolute;

  top: var(--rp-character-top);
  bottom: var(--rp-character-bottom);

  z-index: 3;

  display: block;

  width: var(--rp-character-width);
  height: var(--rp-character-height);

  /*
    Отменяет стандартное max-width: 100%,
    которое часто задаётся шаблоном Joomla.
  */
  max-width: none;
  max-height: none;

  object-fit: contain;
  object-position: bottom;

  opacity: var(--rp-character-opacity);

  pointer-events: none;
  user-select: none;

  filter:
    drop-shadow(
      var(--rp-character-shadow-x)
      var(--rp-character-shadow-y)
      var(--rp-character-shadow-blur)
      var(--rp-character-shadow-color)
    );
}


/* ==========================================================
   СЕКЦИИ — Персонаж справа
   ----------------------------------------------------------
   Отрицательное значение right выводит персонажа
   за правую границу контейнера.
   ========================================================== */

.rp-section-character--right {
  right: var(--rp-character-inline-offset);
  left: auto;

  object-position: right bottom;
}


/* ==========================================================
   СЕКЦИИ — Персонаж слева
   ----------------------------------------------------------
   Используется та же формула положения, что и справа.

   Направление горизонтальной тени меняется,
   чтобы тень естественно падала в другую сторону.
   ========================================================== */

.rp-section-character--left {
  left: var(--rp-character-inline-offset);
  right: auto;

  object-position: left bottom;

  --rp-character-shadow-x: -12px;
}


/* ==========================================================
   СЕКЦИИ — Персонаж поверх контента
   ----------------------------------------------------------
   Персонаж перекрывает карточки или другой контент.
   ========================================================== */

.rp-section-character--front {
  z-index: 3;
}


/* ==========================================================
   СЕКЦИИ — Персонаж за контентом
   ----------------------------------------------------------
   Карточки перекрывают часть персонажа.

   Благодаря этому создаётся эффект, будто герой
   находится за блоком и выглядывает из-за него.
   ========================================================== */

.rp-section-character--behind {
  z-index: 1;
}


.rp-module {
  margin: 0 var(--rp-module-gap-x) var(--rp-module-gap-y);
  padding: var(--rp-module-padding);
  box-sizing: border-box;
}
/* в правой колонке Bootstrap уже даёт нужный отступ */
#sp-right .rp-module {
  margin-left: 0;
  margin-right: 0;
}
.rp-ui,
.rp-ui * {
  box-sizing: border-box;
}

.rp-ui {
  font-family: Montserrat, Arial, sans-serif;
  color: var(--rp-text);
}

.rp-container {
  width: min(calc(100% - 40px), var(--rp-container-normal));
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.rp-container-wide {
  width: min(calc(100% - 40px), var(--rp-container-wide));
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.rp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: var(--rp-radius-button);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.08s ease;
}

.rp-btn:active {
  transform: translateY(1px);
}

.rp-btn-primary {
  background: var(--rp-purple);
  color: #ffffff !important;
}

.rp-btn-primary:hover {
  background: var(--rp-pink);
  color: #ffffff !important;
}

.rp-section {
  margin: 70px 0 46px;
}

.rp-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 70px 0 36px;
  text-align: center;
}

.rp-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  margin: -48px auto 14px;
  border-radius: 20px;
  background: #ffffff;
  color: var(--rp-yellow);
  font-size: 34px;
  box-shadow: 0 10px 24px rgba(243, 183, 46, 0.22);
}


.rp-section-head h2 {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0 42px;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--rp-text);
  text-transform: uppercase;
}

.rp-section-head h2::before,
.rp-section-head h2::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 190px;
  height: 2px;
  transform: translateY(-50%);
}

.rp-section-head h2::before {
  left: -230px;
  background: linear-gradient(to right, transparent, #f3b72e 70%, #f7c95f);
}

.rp-section-head h2::after {
  right: -230px;
  background: linear-gradient(to left, transparent, #f3b72e 70%, #f7c95f);
}

.rp-section-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 11px;
  margin: 14px 0 0;
  color: var(--rp-purple);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: .25px;
}

.rp-section-tags i {
  width: 6px;
  height: 6px;
  margin-top: .55em;
  border-radius: 50%;
  background: var(--rp-yellow);
  flex: 0 0 auto;
}

/* ==========================================================
   СЕКЦИИ — Дополнительное описание под заголовком
   ----------------------------------------------------------
   Не применяется к .rp-section-tags.
   ========================================================== */

.rp-section-head > p:not(.rp-section-tags) {
  margin-top: 14px;
  color: #7d7d7d;
  font-size: 15px;
  letter-spacing: .4px;
  font-weight: 500;
}

.rp-card-grid {
  display: grid;
  grid-template-columns: 1.65fr repeat(3, 1fr);
  grid-template-rows: clamp(340px, 21vw, 390px) clamp(180px, 11.2vw, 207px);
  grid-template-areas:
    "featured card1 card2 card3"
    "featured wide1 wide1 wide2";
  gap: clamp(14px, 1.05vw, 20px);
  align-items: stretch;
}

.rp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  border: none;
  border-radius: var(--rp-radius-card);
  background: var(--rp-white);
  box-shadow: var(--rp-shadow-card);
  text-decoration: none !important;
  color: var(--rp-text) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.rp-card-horizontal {
  flex-direction: row;
  
}

.rp-card-horizontal h3 {
  font-size: clamp(17px, 1.05vw, 20px);
}

.rp-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 0;
  background: var(--rp-yellow);
  transition: height 0.18s ease;
  z-index: 2;
}

.rp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--rp-shadow-card-hover);
}

.rp-card:not(.rp-card-more):hover::before {
  height: 4px;
}

.rp-card-media {
  height: 58%;
  padding: clamp(5px, .35vw, 8px);
  background: #FDFDFD;
  overflow: hidden;
}

.rp-card-normal-2 .rp-card-media{
    background: transparent;
    padding:18px 18px 8px;
    display:flex;
    justify-content:center;
    align-items:flex-end;
}

.rp-card-normal-2 .rp-card-media img{
    width:88%;
    height:auto;
    object-fit:contain;
}

.rp-card-horizontal .rp-card-media {
  width: 42%;
  height: 100%;
  min-height: 0;
  flex: 0 0 42%;
  padding: 8px;
  background: #FDFDFD;
  overflow: hidden;
}

.rp-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transition: transform 0.28s ease;
}

.rp-card:hover .rp-card-media img {
  transform: scale(1.035);
}

.rp-card-featured {
  grid-area: featured;
}

.rp-card-normal-1 {
  grid-area: card1;
}

.rp-card-normal-2 {
  grid-area: card2;
}

.rp-card-normal-3 {
  grid-area: card3;
}

.rp-card-horizontal-1 {
  grid-area: wide1;
}

.rp-card-horizontal-2 {
  grid-area: wide2;
}

.rp-card-featured .rp-card-media {
  height: 62%;
  padding: clamp(10px, .75vw, 14px);
}

.rp-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: clamp(16px, 1.05vw, 20px);
}

.rp-card-horizontal .rp-card-body {
  justify-content: center;
  padding: clamp(16px, 1.15vw, 22px);
}

.rp-card h3 {
  margin: 0 0 clamp(8px, .65vw, 12px);
  color: var(--rp-text);
  font-size: clamp(18px, 1.05vw, 20px);
  line-height: 1.12;
  font-weight: 800;
}

.rp-card-featured h3 {
  font-size: clamp(24px, 1.6vw, 30px);
  line-height: 1.1;
}

.rp-card-desc {
  margin: 0 0 clamp(8px, .65vw, 12px);
  color: var(--rp-muted);
  font-size: clamp(13px, .82vw, 16px);
  line-height: 1.38;
}

.rp-card-horizontal .rp-card-desc {
  font-size: clamp(12px, .72vw, 13px);
  margin-bottom: clamp(6px, .45vw, 8px);
}

.rp-card:not(.rp-card-featured) .rp-card-desc {
  font-size: clamp(12px, .75vw, 14px);
}

.rp-card:not(.rp-card-more) .rp-card-body {
  align-items: flex-start;
  text-align: left;
}

.rp-card:not(.rp-card-more) h3,
.rp-card:not(.rp-card-more) .rp-card-desc,
.rp-card:not(.rp-card-more) .rp-card-action {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  padding-left: 0;
  text-align: left;
  align-self: flex-start;
}

.rp-card:not(.rp-card-more) .rp-card-action {
  margin-top: 0;
  color: var(--rp-purple);
  font-size: 14px;
  font-weight: 800;
}

.rp-card:not(.rp-card-more):hover .rp-card-action {
  color: var(--rp-pink);
}


/* ==============================
   "Другие услуги раздела" card
   ============================== */

.rp-card-more {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  padding: clamp(16px, 1.4vw, 26px);
  background: linear-gradient(135deg, #393185 0%, #5a49c6 100%);
  color: #ffffff !important;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.18s ease;
}


.rp-card-more::before {
  content: "+";
  position: absolute;
  top: -28px;
  right: -18px;
  z-index: 1;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.055);
  font-size: 145px;
  line-height: 1;
  font-weight: 900;
  transition: transform 0.25s ease;
}

.rp-card-more::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  right: -90px;
  top: -90px;
  z-index: 1;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.06);
}

/* ==========================================================
   КАРТОЧКА MORE — Внутренний контейнер
   ----------------------------------------------------------
   flex: 1 занимает только реально доступную высоту внутри
   карточки с учётом её собственных отступов.

   height: 100% здесь не используется, поскольку он мог
   создавать переполнение внутри карточки.
   ========================================================== */

.rp-card-more .rp-card-body {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  flex: 1 1 auto;

  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;

  padding: 0;
}

.rp-card-more h3 {
  color: #ffffff;
  font-size: clamp(19px, 1.55vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: clamp(8px, .75vw, 12px);
}

.rp-card-more .rp-card-desc {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 0;
  max-width: 20ch;
  font-size: clamp(13px, .85vw, 15px);
  line-height: 1.35;
}

.rp-card-more .rp-card-action {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  color: #ffffff;
  font-size: clamp(14px, .9vw, 17px);
  font-weight: 800;
  letter-spacing: 0.2px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.rp-card-more:hover {
  background: linear-gradient(135deg, #4a3db0 0%, #6554d4 100%);
}

.rp-card-more:hover::before {
  transform: scale(1.08);
}

.rp-card-more:hover .rp-card-action {
  color: #f3b72e;
  transform: translateX(4px);
}

/* ==========================================================
   МОДУЛИ ВНУТРЕННИХ СТРАНИЦ
   ========================================================== */

.rp-service-module,
.rp-service-module .sp-module-content,
.rp-service-module .mod-custom {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;

  background: transparent;
  border: 0;
  box-shadow: none;
}

/* ==========================================================
   УНИВЕРСАЛЬНАЯ ПЛАШКА РАЗДЕЛА
   
   Использование
<p class="rp-section-eyebrow">
  Дополнительные услуги
</p>
   
    Центрированный вариант
<p class="rp-section-eyebrow rp-section-eyebrow--center">
  Почему выбирают нас
</p>

	Компактный вариант
<p class="rp-section-eyebrow rp-section-eyebrow--compact">
  Обратите внимание
</p>

!!! Для калькулятора
.rp-section-eyebrow отвечает за универсальный дизайн;
.rp-calc__eyebrow — только за расположение внутри калькулятора.

   ========================================================== */

.rp-section-eyebrow {
  --rp-eyebrow-purple: var(--rp-purple, #6f3ed8);
  --rp-eyebrow-purple-dark: var(--rp-purple-dark, #5426b9);

  position: relative;
  isolation: isolate;

   display: flex;
  align-items: center;
  justify-content: center;

  align-self: flex-start;

  width: fit-content;
  max-width: 100%;
  min-height: 44px;

  margin: 0 0 28px;
  padding: 10px 23px;

  color: var(--rp-eyebrow-purple-dark);

  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;

  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.045em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.rp-section-eyebrow--center {
  align-self: center;
  margin-right: auto;
  margin-left: auto;
}

.rp-section-eyebrow--compact {
  min-height: 36px;
  margin-bottom: 20px;
  padding: 8px 15px;

  font-size: 11px;
  letter-spacing: 0.035em;
}

/* Основная белая этикетка */

.rp-section-eyebrow::before {
  position: absolute;
  inset: 0;
  z-index: -1;

  content: "";

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.99),
      rgba(251, 249, 255, 0.98)
    );

  clip-path:
    polygon(
      10px 0,
      calc(100% - 10px) 0,
      100% 50%,
      calc(100% - 10px) 100%,
      10px 100%,
      0 50%
    );

  filter:
    drop-shadow(0 9px 20px rgba(51, 30, 110, 0.065))
    drop-shadow(0 2px 5px rgba(51, 30, 110, 0.035));
}

/* Сиреневая наклонённая подложка */

.rp-section-eyebrow::after {
  position: absolute;
  inset: -3px -5px;
  z-index: -2;

  content: "";

  background:
    linear-gradient(
      135deg,
      rgba(111, 62, 216, 0.18),
      rgba(111, 62, 216, 0.07)
    );

  clip-path:
    polygon(
      12px 0,
      calc(100% - 8px) 0,
      100% 50%,
      calc(100% - 12px) 100%,
      8px 100%,
      0 50%
    );

  transform: rotate(-1.15deg);
  transform-origin: center;
}

/* ==========================================================
   АДАПТИВНОСТЬ
   ========================================================== */

/* ==========================================================
   КАРТОЧКА MORE — Широкие настольные экраны
   ----------------------------------------------------------
   После достижения максимальной ширины контейнера карточка
   больше не расширяется, поэтому прекращаем увеличение
   текста и внутренних отступов от ширины окна.
   ========================================================== */

@media (min-width: 1600px) {

  .rp-card-more {
    padding: 20px 22px;
  }

  .rp-card-more h3 {
    font-size: 26px;
    line-height: 1.06;
    margin-bottom: 8px;
  }

  .rp-card-more .rp-card-desc {
    font-size: 14px;
    line-height: 1.3;
  }

  .rp-card-more .rp-card-action {
    font-size: 15px;
    line-height: 1.2;
  }

}


/* ==========================================================
   ПЛАНШЕТНАЯ СЕТКА
   ========================================================== */

@media (max-width: 1199px) {

  /* Персонажи только для настольной версии */

  .rp-section-character--desktop-only {
    display: none;
  }


  /* Сетка карточек */

  .rp-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;

    grid-template-areas:
      "featured featured card1"
      "card2 card3 card3"
      "wide1 wide1 wide2";
  }

}


/* ==========================================================
   МОБИЛЬНАЯ КОМПОНОВКА
   Единая граница: 820px
   ========================================================== */

@media (max-width: 820px) {

  /*
    Обычные модули главной сохраняют свои мобильные поля.
    Полноширинные внутренние модули регулируются собственным CSS.
  */

  /* Контейнер Joomla уже имеет собственные боковые поля.
   Убираем дополнительное уменьшение ширины rp-container. */

.rp-container,
.rp-container-wide {
  width: 100%;
  max-width: none;

  margin-right: auto;
  margin-left: auto;

  padding-right: 0;
  padding-left: 0;
}
  
  .rp-module {
    margin:
      0
      var(--rp-module-gap-x-mobile)
      var(--rp-module-gap-y-mobile);
  }

  #sp-right .rp-module {
    margin-left: var(--rp-module-gap-x-mobile);
    margin-right: var(--rp-module-gap-x-mobile);
  }

  .rp-module:first-child {
    margin-top: 0;
  }


  /* Сетка карточек */

  .rp-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;

    grid-template-areas:
      "featured featured"
      "card1 card2"
      "card3 card3"
      "wide1 wide1"
      "wide2 wide2";
  }


  /* Горизонтальные карточки становятся вертикальными */

  .rp-card-horizontal {
    flex-direction: column;
  }

  .rp-card-horizontal .rp-card-media {
    width: 100%;
    height: clamp(150px, 42vw, 190px);

    flex: none;
  }


  /* Заголовки секций */

  .rp-section-head {
    margin: 46px 0 26px;
  }

  .rp-section-head h2 {
    padding: 0 22px;

    font-size: 28px;
  }

  .rp-section-head h2::before,
  .rp-section-head h2::after {
    width: 64px;
  }

  .rp-section-head h2::before {
    left: -62px;
  }

  .rp-section-head h2::after {
    right: -62px;
  }

  .rp-section-tags {
    max-width: 320px;

    gap: 7px 9px;

    font-size: 14px;
  }

}


/* ==========================================================
   УЗКИЙ ЭКРАН
   ========================================================== */

@media (max-width: 680px) {

  .rp-card-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;

    grid-template-areas:
      "featured"
      "card1"
      "card2"
      "card3"
      "wide1"
      "wide2";
  }

  .rp-section-head h2::before,
  .rp-section-head h2::after {
    display: none;
  }

  .rp-section-head h2 {
    padding: 0;
  }

  .rp-card-more {
    padding: 16px;
  }

  .rp-card-more .rp-card-body {
    padding: 0;
  }

  .rp-card-more h3,
  .rp-card-more .rp-card-desc,
  .rp-card-more .rp-card-action {
    margin-left: 0;
    padding-left: 0;
  }
  
   .rp-section-eyebrow {
    min-height: 34px;

    margin-bottom: 19px;
    padding: 8px 13px;

    font-size: clamp(9px, 2.7vw, 10.5px);
    letter-spacing: 0.03em;
  }

  .rp-section-eyebrow::before {
    clip-path:
      polygon(
        8px 0,
        calc(100% - 8px) 0,
        100% 50%,
        calc(100% - 8px) 100%,
        8px 100%,
        0 50%
      );
  }

  .rp-section-eyebrow::after {
    inset: -2px -4px;

    clip-path:
      polygon(
        9px 0,
        calc(100% - 7px) 0,
        100% 50%,
        calc(100% - 9px) 100%,
        7px 100%,
        0 50%
      );

    transform: rotate(-0.8deg);
  

}

}