/* =========================================================
   LU PROGRAM — блок описания программы корпоратива
   Подключать после lu-cards.css и lu-icons.css.

   Структура:
   .lu-program                       — серая внешняя карточка с бликом
     .lu-program__head               — Grid-обёртка для шапки
       .lu-program__photo            — фото на сером фоне
       .lu-program__panel            — общая светлая панель (текст + highlights)
         .lu-program__head-content
           .lu-program__title        (h3)
           .lu-program__subtitle     — с цветной чертой слева
         .lu-program__highlights
           .lu-program__highlight    (повторяется)
     .lu-program__body               — светлая панель с описанием
       .lu-program__section          (повторяется)
         .lu-program__section-title  (h4)
         .lu-program__section-text

   Брейкпоинты:
     до 579px        — одна колонка по очереди
     580–1099px     — фото слева ~28%, текст справа, highlights во всю ширину под ними
                      (внутри: 580–799 — мобильные шрифты, 800–1099 — ПК-шрифты)
     1100px и выше  — фото слева, общая панель справа (текст сверху, highlights снизу)

   Кастомизация цветов (правится на конкретном элементе через style=""):
     --lu-program-head-color        — цвет вертикальной черты у подзаголовка
     --lu-program-highlight-color   — цвет фона кружка иконки
     --lu-program-highlight-icon    — цвет самой иконки внутри кружка
     --lu-program-section-color     — цвет акцента (черта или цифра) у h4
   ========================================================= */

/* =========================================================
   ПЕРЕОПРЕДЕЛЕНИЕ СТИЛЕЙ КРАКЕНА для h3/h4 внутри блока
   ========================================================= */
.lu-program .lu-program__title,
.text-content .lu-program .lu-program__title{
  font-size: 30px !important;
  line-height: 1.15 !important;
  margin: 0 0 10px !important;
  color: #111 !important;
  font-weight: 700 !important;
}

.lu-program .lu-program__section-title,
.text-content .lu-program .lu-program__section-title{
  font-size: 18px !important;
  line-height: 1.2 !important;
  margin: 0 0 10px !important;
  color: #111 !important;
  font-weight: 700 !important;
}
.lu-program ul.lu-program__highlights,
.text-content .lu-program ul.lu-program__highlights{
  margin: 0 !important;
  text-align: left !important;
}

.lu-program ul.lu-program__highlights li,
.text-content .lu-program ul.lu-program__highlights li{
  margin: 0 !important;
}
/* =========================================================
   Корневой контейнер: серая внешняя карточка во всю ширину
   ========================================================= */
.lu-program{
  position: relative;
  padding: 28px;
  margin-bottom: 28px;
  background: var(--lu-card-bg, #f5f5f5);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}

.lu-program::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 42%);
  z-index: 0;
}

.lu-program > *{
  position: relative;
  z-index: 1;
}

/* =========================================================
   Шапка: Grid-обёртка для раскладки (без своего фона)
   Левая колонка — фото на сером фоне.
   Правая колонка — единая светлая панель __panel,
   внутри которой и текст, и highlights живут на общем фоне.

   800px и выше (по умолчанию):
     фото слева, справа — общая светлая панель с текстом и highlights
   ========================================================= */
.lu-program__head{
  display: grid;
  grid-template-columns: 320px 1fr;
  column-gap: 28px;

  margin-bottom: 24px;
}

/* Левая колонка — фото на сером фоне */
.lu-program__photo{
  width: 320px;
  height: 100%;
  min-height: 320px;
  border-radius: 22px;
  overflow: hidden;
  background: #d9ddd4;
}

.lu-program__photo img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  margin: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0;
}

/* =========================================================
   Правая колонка — общая светлая панель
   Внутри: __head-content (текст) сверху, __highlights снизу.
   Между ними — тонкий разделитель.
   ========================================================= */
.lu-program__panel{
  display: flex;
  flex-direction: column;
  align-self: start;

  background: #f7f7f5;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

/* Текстовая часть — без своего фона, на общей панели */
.lu-program__head-content{
  /* Дефолтный цвет вертикальной черты — можно переопределить style="" */
  --lu-program-head-color: #355F73;

  min-width: 0;
  padding: 22px;
}

/* Заголовок программы — h3 */
.lu-program__title{
  display: block;
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.15;
  color: #111;
}

/* Подзаголовок с вертикальной цветной чертой слева */
.lu-program__subtitle{
  position: relative;
  display: block;
  margin: 0;
  padding-left: 14px;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  color: rgba(17,17,17,.62);
}

.lu-program__subtitle::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--lu-program-head-color, #355F73);
}

/* =========================================================
   Highlights — без своего фона, на общей панели
   ========================================================= */
.lu-program__highlights{
  margin: 0;
  list-style: none;

  padding: 14px;

  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* На широких экранах — 2 колонки */
@media (min-width: 1100px){
  .lu-program__highlights{
    grid-template-columns: 1fr 1fr;
  }
}

/* Полоска с фоном */
.lu-program__highlight{
  /* По умолчанию — нейтральный голубовато-серый акцент.
     Можно переопределить на конкретном <li> через style="" */
  --lu-program-highlight-color: #5FC6F1;
  --lu-program-highlight-icon: #ffffff;

  display: flex;
  align-items: center;       /* текст центрируется по вертикали относительно кружка */
  gap: 14px;
  min-width: 0;
  padding: 10px 14px 10px 10px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,.03);
}

/* Цветной кружок-иконка */
.lu-program__highlight-icon{
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--lu-program-highlight-color);
  color: var(--lu-program-highlight-icon);
}

.lu-program__highlight-icon .lu-icon{
  width: 22px;
  height: 22px;
  color: currentColor;
  fill: currentColor;
}

.lu-program__highlight-text{
  min-width: 0;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  color: #111;
}

.lu-program__highlight-text b,
.lu-program__highlight-text strong{
  font-weight: 700;
}

/* =========================================================
   Тело программы: внутренняя светлая панель
   ========================================================= */
.lu-program__body{
  padding: 24px;
  background: #f7f7f5;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.lu-program__section{
  margin-bottom: 22px;
}

.lu-program__section:last-child{
  margin-bottom: 0;
}

/* =========================================================
   Подзаголовки h4 — БАЗА
   ========================================================= */
.lu-program__section{
  /* Дефолтный цвет акцента — можно переопределить на конкретной секции */
  --lu-program-section-color: #355F73;
}

.lu-program__section-title{
  display: block;
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: #111;
}

.lu-program__section-text{
  font-size: 16px;
  line-height: 1.5;
  color: #111;
}

.lu-program__section-text p{
  margin: 0 0 12px;
}

.lu-program__section-text p:last-child{
  margin-bottom: 0;
}

/* =========================================================
   ВАРИАНТ 2.1 — цветная вертикальная черта слева у заголовка
   Включается классом-модификатором на .lu-program__section
   ========================================================= */
.lu-program__section--marker .lu-program__section-title{
  position: relative;
  padding-left: 14px;
}

.lu-program__section--marker .lu-program__section-title::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  background: var(--lu-program-section-color, #355F73);
  border-radius: 2px;
}

/* =========================================================
   ВАРИАНТ 2.3 — цветной номер-эйброу над заголовком
   Включается классом-модификатором на .lu-program__section.
   Номер задаётся атрибутом data-num="01" на той же секции.
   ========================================================= */
.lu-program__section--number .lu-program__section-title{
  position: relative;
}

.lu-program__section--number .lu-program__section-title::before{
  content: attr(data-num);
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--lu-program-section-color, #355F73);
}

/* =========================================================
   ВАРИАНТ — секция «Стоимость» с кружком слева,
   мелким заголовком и крупной ценой справа.
   Кружок в одном размере с иконками highlights.
   Включается классом .lu-program__section--price.

   Структура внутри:
     .lu-program__price-row
       .lu-program__price-icon   - кружок с символом рубля
       .lu-program__price-body
         .lu-program__section-title    - h4 «Стоимость», мелким шрифтом
         .lu-program__price-value      - сумма (крупно) + единицы (мельче)
     .lu-program__section-text   - мелкие пояснения под ценой
   ========================================================= */
.lu-program__section--price{
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.lu-program__price-row{
  display: flex;
  align-items: center;     /* центрируем кружок по вертикали относительно текста */
  gap: 14px;
  margin-bottom: 10px;
}

/* Кружок такого же размера, как у highlights (40x40) */
.lu-program__price-icon{
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--lu-program-section-color, #355F73);
  color: #ffffff;

  font-size: 22px;          /* размер знака рубля внутри */
  line-height: 1;
  font-weight: 700;
}

/* Если используется SVG-иконка из спрайта вместо текстового знака рубля */
.lu-program__price-icon .lu-icon{
  width: 22px;
  height: 22px;
  color: currentColor;
  fill: currentColor;
}

.lu-program__price-body{
  flex: 1 1 auto;
  min-width: 0;
}

/* Заголовок «Стоимость» — мелким шрифтом, без черты, минимальный отступ снизу */
.lu-program__section--price .lu-program__section-title,
.text-content .lu-program .lu-program__section--price .lu-program__section-title{
  margin: 0 !important;
  padding-left: 0 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(17,17,17,.55) !important;
}

.lu-program__section--price .lu-program__section-title::before{
  display: none;
}

/* Крупная цена */
.lu-program__price-value{
  display: block;
  margin-top: 2px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}

/* Часть «на человека» внутри цены — мельче и обычным весом */
.lu-program__price-value .lu-program__price-unit{
  font-size: 14px;
  font-weight: 500;
  color: rgba(17,17,17,.65);
  margin-left: 4px;
}

/* Пояснительный текст под ценой — обычный размер, приглушённый */
.lu-program__section--price .lu-program__section-text{
  font-size: 15px;
  line-height: 1.5;
  color: rgba(17,17,17,.7);
}

/* =========================================================
   Промежуточная раскладка (580px – 1099px):
   фото слева ~28%, текст справа, highlights во всю ширину под ними.
   Поднимаем __head-content и __highlights из __panel через display:contents
   на уровень __head, а единый фон рисуем двумя стыкующимися псевдоэлементами.

   Внутри этого диапазона ещё есть подразделение:
     580–799  — шрифты мобильные, плашки highlights уже
     800–1099 — шрифты ПК, плашки highlights крупнее
   ========================================================= */
@media (min-width: 580px) and (max-width: 1099px){
  .lu-program{
    padding: 18px;
    margin-bottom: 24px;
    border-radius: 26px;
  }

  /* __head — Grid 2x2. column-gap = 0, чтобы фоновые плашки
     стыковались без шва. Отступ между фото и текстом — margin фото. */
  .lu-program__head{
    grid-template-columns: 28% 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "photo  content"
      "hl     hl";
    column-gap: 14px;
    row-gap: 14px;
    margin-bottom: 14px;
  }

  /* Псевдофон правой верхней клетки (под текстом) */
  .lu-program__head::before{
    content: "";
    grid-area: content;
    background: #f7f7f5;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
    z-index: 0;
  }

  /* Псевдофон нижней строки (под highlights, на всю ширину) */
  .lu-program__head::after{
    content: "";
    grid-area: hl;
    background: #f7f7f5;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
    z-index: 0;
  }

  /* __panel "исчезает" как бокс, его дети поднимаются в Grid */
  .lu-program__panel{
    display: contents;
  }

  /* Дети __panel занимают свои area */
  .lu-program__head-content{
    grid-area: content;
    z-index: 1;
    padding: 16px 18px;
  }

  .lu-program__highlights{
    grid-area: hl;
    z-index: 1;
    padding: 14px;
  }

  /* Фото — с правым margin вместо column-gap */
  .lu-program__photo{
    grid-area: photo;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 1;
    margin-right: 14px;
    border-radius: 18px;
  }

  .lu-program__body{
    padding: 20px;
    border-radius: 22px;
  }

  /* На этой ширине — 2 колонки highlights */
  .lu-program__highlights{
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

/* Верх промежуточного диапазона (800–1099) — шрифты ПК */
@media (min-width: 800px) and (max-width: 1099px){
  .lu-program__title,
  .text-content .lu-program .lu-program__title{
    font-size: 26px !important;
  }

  .lu-program__subtitle{
    font-size: 16px;
    line-height: 1.4;
  }

  .lu-program__highlight{
    padding: 10px 14px 10px 10px;
    gap: 12px;
    border-radius: 16px;
  }

  .lu-program__highlight-icon{
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
  }

  .lu-program__highlight-icon .lu-icon{
    width: 20px;
    height: 20px;
  }

  .lu-program__highlight-text{
    font-size: 14px;
    line-height: 1.4;
  }

  /* Стоимость: кружок в размер highlight-иконки */
  .lu-program__price-icon{
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    font-size: 21px;
  }

  .lu-program__price-icon .lu-icon{
    width: 20px;
    height: 20px;
  }
}

/* Низ промежуточного диапазона (580–799) — шрифты мобильные */
@media (min-width: 580px) and (max-width: 799px){
  .lu-program__title,
  .text-content .lu-program .lu-program__title{
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin: 0 0 8px !important;
  }

  .lu-program__subtitle{
    font-size: 14px;
    line-height: 1.4;
  }

  .lu-program__head-content{
    padding: 14px;
  }

  .lu-program__highlights{
    padding: 12px;
  }

  .lu-program__highlight{
    padding: 8px 12px 8px 8px;
    gap: 10px;
    border-radius: 14px;
  }

  .lu-program__highlight-icon{
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
  }

  .lu-program__highlight-icon .lu-icon{
    width: 18px;
    height: 18px;
  }

  .lu-program__highlight-text{
    font-size: 13px;
    line-height: 1.35;
  }

  .lu-program__section{
    margin-bottom: 18px;
  }

  .lu-program__section-title,
  .text-content .lu-program .lu-program__section-title{
    font-size: 17px !important;
    margin: 0 0 8px !important;
  }

  .lu-program__section-text{
    font-size: 15px;
    line-height: 1.5;
  }

  /* Стоимость: кружок в размер highlight-иконки на этой ширине */
  .lu-program__price-row{
    gap: 12px;
  }

  .lu-program__price-icon{
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .lu-program__price-icon .lu-icon{
    width: 18px;
    height: 18px;
  }

  .lu-program__section--price .lu-program__section-title,
  .text-content .lu-program .lu-program__section--price .lu-program__section-title{
    font-size: 12px !important;
  }

  .lu-program__price-value{
    font-size: 18px;
  }

  .lu-program__price-value .lu-program__price-unit{
    font-size: 13px;
  }
}

/* =========================================================
   Узкие мобильные (≤ 579px): фото сверху, общая панель снизу
   ========================================================= */
@media (max-width: 579px){
  .lu-program{
    padding: 14px;
    margin-bottom: 24px;
    border-radius: 24px;
  }

  .lu-program__head{
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 12px;
    margin-bottom: 12px;
  }

  .lu-program__photo{
    width: 100%;
    height: 200px;
    min-height: 0;
    border-radius: 18px;
  }

  .lu-program__panel{
    border-radius: 18px;
  }

  .lu-program__head-content{
    padding: 14px;
  }

  .lu-program__highlights{
    padding: 10px;
  }

  .lu-program__body{
    padding: 14px;
    border-radius: 18px;
  }

  .lu-program__title,
  .text-content .lu-program .lu-program__title{
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin: 0 0 8px !important;
  }

  .lu-program__subtitle{
    font-size: 15px;
    line-height: 1.4;
  }

  .lu-program__highlights{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .lu-program__highlight{
    padding: 10px 14px 10px 10px;
    gap: 12px;
  }

  .lu-program__highlight-icon{
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
  }

  .lu-program__highlight-icon .lu-icon{
    width: 20px;
    height: 20px;
  }

  .lu-program__highlight-text{
    font-size: 14px;
    line-height: 1.4;
  }

  .lu-program__section{
    margin-bottom: 18px;
  }

  .lu-program__section-title,
  .text-content .lu-program .lu-program__section-title{
    font-size: 17px !important;
    margin: 0 0 8px !important;
  }

  .lu-program__section-text{
    font-size: 15px;
    line-height: 1.5;
  }

  /* Стоимость: кружок в размер highlight-иконки */
  .lu-program__price-row{
    gap: 12px;
  }

  .lu-program__price-icon{
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  .lu-program__price-icon .lu-icon{
    width: 20px;
    height: 20px;
  }

  .lu-program__section--price .lu-program__section-title,
  .text-content .lu-program .lu-program__section--price .lu-program__section-title{
    font-size: 12px !important;
  }

  .lu-program__price-value{
    font-size: 18px;
  }

  .lu-program__price-value .lu-program__price-unit{
    font-size: 13px;
  }
}