/* ============================================================
   ILINA · КАРТОЧКИ ЦЕН
   Подключается из information.tpl автоматически, если в контенте
   страницы встречается блок .psec__grid.
   Цвета намеренно не заданы: всё строится на currentColor и
   наследовании, поэтому одинаково работает во всех 5 дизайнах.
   ============================================================ */

.pricepage__lead{font-size:17px;line-height:1.7;max-width:760px;margin:0 0 10px;opacity:.85}

/* ---- секция: Разработка / Реклама / Видео ---- */
/* счётчик разделов работает в обеих оболочках: и в prices.tpl, и в information.tpl */
.pricepage__content,.infopage__content{counter-reset:psec}

/* оболочка страницы цен (когда рендерит prices.tpl) */
.pricepage{padding:50px 0 80px}
.pricepage .center{max-width:1240px}
.pricepage__crumbs{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 24px;font-size:13px;opacity:.8}
.pricepage__crumbs li+li::before{content:"/";margin:0 8px;opacity:.5}
.pricepage h1{font-size:clamp(28px,4vw,48px);margin-bottom:16px}
.pricepage__content{font-size:17px;line-height:1.75}
.pricepage__cta{margin-top:60px;text-align:center;padding:40px 30px}
.pricepage__cta p{margin:0 0 20px}
.psec{margin-top:56px}
.psec__head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.psec__head::before{
  content:counter(psec,decimal-leading-zero);
  counter-increment:psec;
  font-size:13px;letter-spacing:.16em;opacity:.5;
  font-variant-numeric:tabular-nums;
}
.psec__head h2{margin:0!important;font-size:clamp(22px,2.6vw,32px)}
.psec__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}

/* ---- карточка услуги ---- */
.pcard{display:flex;flex-direction:column;padding:26px;min-width:0}
/* запас под 2 строки заголовка: шкалы и списки в ряду начинаются на одной высоте */
.pcard h3{font-size:19px;line-height:1.3;margin:0 0 18px;min-height:2.6em}

/* шкала min — типичная — max */
.pscale{margin:0 0 22px}
.pscale__row{display:flex;justify-content:space-between;font-size:12px;opacity:.55;margin-bottom:4px}
.pscale__ends{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:12px}
.pscale__bar{position:relative;height:6px;border-radius:6px;background:currentColor;opacity:.2}
.pscale__dot{
  position:absolute;top:50%;width:14px;height:14px;
  margin:-7px 0 0 -7px;border-radius:50%;
  background:currentColor;opacity:1;
}
.pscale__typ{margin-top:14px;font-size:clamp(20px,2vw,26px);font-weight:800;line-height:1.1}
.pscale__typ span{
  display:block;font-size:12px;font-weight:400;opacity:.55;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px;
}

/* что получаете */
.pcard__get{flex:1}
.pcard__get h4{
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  opacity:.55;margin:0 0 12px;font-weight:600;
  /* важное: темы красят только h1-h3, а h4 доставался чёрный от bootstrap
     и пропадал на тёмном фоне Д1. Наследуем цвет карточки. */
  color:inherit;
}
.pcard h3,.pcard h4{color:inherit}
.pcard__get ul{list-style:none!important;margin:0!important;padding:0!important;display:grid;gap:12px}
.pcard__get li{font-size:14.5px;line-height:1.55;opacity:.9;margin:0!important}
.pcard__get li b{font-weight:700;opacity:1}

/* начальная стоимость */
.pcard__start{margin-top:22px;padding-top:18px;border-top:1px solid currentColor}
.pcard__start i{
  display:block;font-style:normal;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;opacity:.55;margin-bottom:4px;
}
.pcard__start b{font-size:clamp(19px,2vw,24px);font-weight:800}
/* запас под 2 строки сноски: иначе при разной длине звёздочки цена
   в соседних карточках стоит на разной высоте */
.pcard__start small{display:block;margin-top:8px;font-size:11.5px;opacity:.5;line-height:1.4;min-height:2.8em}

@media(max-width:1000px){.psec__grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){
  .psec__grid{grid-template-columns:1fr}
  .pcard{padding:22px}
  .psec{margin-top:40px}
  .pcard h3{min-height:0} /* в одну колонку выравнивать не с чем */
}


/* ============================================================
   ПОДГОНКА ПО ДИЗАЙНАМ
   Один файл вместо пяти: разница между дизайнами тут сводится
   к акцентному цвету и форме углов, поэтому проще держать всё
   в одном месте и переключать через класс design-N на <html>.
   ============================================================ */
.pcard{--price-accent:currentColor}
.pscale__dot{background:var(--price-accent)}

/* Д1 · стекло */
html.design-1 .pcard{--price-accent:#35d0e0}
html.design-1 .pcard__get h4{opacity:.75}
html.design-1 .pscale__bar{opacity:.25}

/* Д2 · брутализм */
html.design-2 .pcard{--price-accent:#d8ff3d}
html.design-2 .pcard h3{text-transform:uppercase;letter-spacing:.01em}
html.design-2 .pscale__bar{border-radius:0}
html.design-2 .pscale__dot{border-radius:0}

/* Д3 · архивный индекс */
html.design-3 .pcard{--price-accent:#c0392b}
html.design-3 .pscale__bar{border-radius:0;height:4px}
html.design-3 .pcard__start{border-top-style:dashed}

/* Д4 · крафт */
html.design-4 .pcard{--price-accent:#c98a3d}
html.design-4 .pscale__bar{opacity:.28}

/* Д5 · y2k */
html.design-5 .pcard{--price-accent:#0000aa}
html.design-5 .pscale__bar{border-radius:0}
html.design-5 .pscale__dot{border-radius:0}
html.design-5 .pcard__get h4{opacity:.75}