/* =====================================================================
   bottom-banner.css — Баннер страниц (главная и другие)
   Данные: инфоблок page_banners, функция renderBottomBanner($code)
   ===================================================================== */

.rm-page-banner-section {
  margin-bottom: 80px;
}

.rm-page-banner {
  /* Локальные переменные блока */
  --rm-pb-teal:          #e2f6f6;
  --rm-pb-height:        clamp(240px, 28.7vw, 510px);
  --rm-pb-shape-width:   44%;
  --rm-pb-shape-left:    -40px;
  --rm-pb-shape-radius:  48px;
  --rm-pb-content-left:  clamp(30px, 5.6vw, 100px);
  --rm-pb-title-size:    50px;
  --rm-pb-btn-size:      20px;
  --rm-pb-btn-radius:    8px;
  --rm-pb-radius:        8px;

  position: relative;
  height: var(--rm-pb-height);
  overflow: hidden;
  border-radius: var(--rm-pb-radius);
  background-color: var(--rm-pb-teal);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

/* Фигура — скруглённый прямоугольник с фоном #e2f6f6 поверх картинки */
.rm-page-banner__shape {
  position: absolute;
  left:   var(--rm-pb-shape-left);
  top:    -20px;
  width:  var(--rm-pb-shape-width);
  height: calc(var(--rm-pb-height) + 40px);  /* чуть больше баннера — overflow:hidden обрезает */
  background: var(--rm-pb-teal);
  border-radius: var(--rm-pb-shape-radius);
  pointer-events: none;
}

/* Контент: заголовок + кнопка */
.rm-page-banner__content {
  position: absolute;
  left:   var(--rm-pb-content-left);
  top:    0;
  bottom: 0;
  z-index: 1;
  display:        flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.rm-page-banner__title {
  font-family:    var(--rm-font-main);
  font-size:      var(--rm-pb-title-size);
  font-weight:    var(--rm-font-weight-normal);
  line-height:    1.2;
  color:          #000;
  margin:         0;
  max-width:      320px;
}

.rm-page-banner-section--product-detail .rm-page-banner__title {
  max-width: 890px;
}

.rm-page-banner-section--product-detail .rm-page-banner__shape {
  display: none;
}

.rm-page-banner__btn {
  display:     inline-flex;
  align-items: center;
  gap:         10px;
  align-self:  flex-start;

  background:      #fff;
  color:           #000;
  font-family:     var(--rm-font-main);
  font-size:       var(--rm-pb-btn-size);
  font-weight:     var(--rm-font-weight-medium);
  line-height:     1;
  padding:         10px 20px;
  border-radius:   var(--rm-pb-btn-radius);
  text-decoration: none;
  transition:      opacity var(--rm-transition-base, 0.2s ease);
}

.rm-page-banner__btn:hover {
  opacity: var(--rm-hover-opacity, 0.7);
  color:   #000;
}

.rm-page-banner__icon {
  display:    block;
  flex-shrink: 0;
  width:  24px;
  height: 24px;
  object-fit: contain;
}