/* ============================================================
   Общие блоки внутренних страниц (услуг).
   Используются больше чем на одной странице — держим здесь,
   чтобы не дублировать в letters.css / neon.css.
   Подключается ПОСЛЕ styles.css.
   ============================================================ */

/* ---------- HERO: строки-преимущества под заголовком ---------- */
.hero__line{display:block;font-size:16px;line-height:19px;color:var(--navy);}
.hero__line-text{font-weight:400;}
/* .hero__tag{display:inline-flex;align-items:center;height:29px;padding:0 10px;border-radius:999px;
  background:var(--grad);color:#fff;font-size:16px;line-height:19px;font-weight:400;white-space:nowrap;} */
  .hero__tag{display:inline-flex;align-items:center;font-size:16px;line-height:19px;font-weight:500;white-space:nowrap;}
.hero__gift{width:21px;height:21px;flex:none;}

/* Абзац-описание под заголовком hero */
.hero__lead{font-size:16px;line-height:24px;color:var(--navy);max-width:700px;}
/* Тёмный квадрат с иконкой внутри крупной кнопки hero */
.hero__btn-ic{width:41px;height:41px;flex:none;border-radius:10px;background:var(--reddark);
  display:inline-flex;align-items:center;justify-content:center;}
.hero__btn-ic svg{width:20px;height:20px;}

/* ---------- HERO: переключатель День / Ночь ---------- */
.hero__switch{position:absolute;right:23px;bottom:22px;z-index:2;display:flex;align-items:center;gap:5px;
  padding:10px;border-radius:15px;background:rgba(15,22,40,.35);border:1px solid rgba(177,177,177,.18);
  -webkit-backdrop-filter:blur(4.5px);backdrop-filter:blur(4.5px);}
.hero__switch-btn{display:inline-flex;align-items:center;gap:7px;height:35px;padding:0 20px;border-radius:10px;
  font-family:inherit;font-size:16px;font-weight:500;line-height:1;color:#fff;background:transparent;
  transition:background .25s ease,color .25s ease;}
.hero__switch-btn svg{width:22px;height:22px;flex:none;}
.hero__switch-btn path,.hero__switch-btn circle{fill:currentColor;}
.hero__switch-btn.is-active{background:#fff;color:var(--navy);}
.hero__slide--day img,.hero__slide--night img{width:100%;height:100%;object-fit:cover;border-radius:20px;}

/* ---------- Карточки ниш: «Делаем буквы для разного бизнеса»,
              «Где чаще всего заказывают неон», «По типу бизнеса» ---------- */
.biz__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:25px;}
.biz-card{background:#fff;border-radius:20px;padding:30px 25px;display:flex;flex-direction:column;gap:20px;
  box-shadow:0 2px 20px rgba(15,22,40,.05);transition:box-shadow .25s ease,transform .25s ease;}
.biz-card:hover{box-shadow:0 8px 28px rgba(15,22,40,.10);transform:translateY(-2px);}
.biz-card__img{height:130px;display:flex;align-items:flex-end;justify-content:flex-start;}
.biz-card__img img{max-height:130px;width:auto;object-fit:contain;}
.biz-card__text{display:flex;flex-direction:column;gap:10px;}
.biz-card__title{font-size:21px;line-height:25px;font-weight:500;color:var(--navy);}
.biz-card__desc{font-size:14px;line-height:20px;color:rgba(15,22,40,.6);}
/* Вариант без подложки — как на странице «Вывески» */
.biz-card--plain{background:none;box-shadow:none;padding:0;gap:25px;}
.biz-card--plain:hover{background:none;box-shadow:none;transform:none;}

/* ---------- Карточки с иконкой в углу: «Дополните ваш проект»,
              «Сделаем фасадную схему», «Пакетное предложение» ---------- */
.addons__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;}
.addons__grid--3{grid-template-columns:repeat(3,1fr);}
.addon{position:relative;background:var(--gray);border-radius:20px;padding:30px;min-height:215px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:10px;transition:background .25s ease;}
.addon:hover{background:#EDEEF0;}
.addon__icon{position:absolute;top:30px;right:30px;width:62px;height:62px;border-radius:18px;background:var(--grad);
  display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(237,44,47,.35);}
.addon__icon svg,.addon__icon img{width:30px;height:30px;}
.addon__title{font-size:21px;line-height:25px;font-weight:500;color:var(--navy);}
.addon__title a{color:inherit;}
.addon__desc{font-size:14px;line-height:23px;color:rgba(15,22,40,.6);max-width:330px;}
/* Текст сразу под иконкой, а не прижат к низу */
.addon--top{justify-content:flex-start;padding-top:110px;min-height:250px;}
/* Заголовок в одной строке с иконкой, описание под ним */
.addon--head{justify-content:flex-start;min-height:0;}
.addon--head .addon__title{max-width:calc(100% - 80px);}
.addon--head .addon__desc{max-width:calc(100% - 105px);}
/* Низкая карточка: заголовок и строка описания в один ряд с иконкой */
.addon--compact{min-height:0;padding:28px 30px;justify-content:center;}
.addon--compact .addon__icon{top:50%;transform:translateY(-50%);}
.addon--compact .addon__title,.addon--compact .addon__desc{max-width:calc(100% - 105px);}

/* ---------- Карточка «фото сверху + подпись»: «Что вам подходит?» на «Вывесках»,
              «Таблички под любую задачу» на «Табличках» ---------- */
.types__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;}
.types__grid--3{grid-template-columns:repeat(3,1fr);}
.type-card{display:flex;flex-direction:column;gap:20px;}
.type-card__img{height:260px;border-radius:20px;overflow:hidden;background:var(--gray);}
.type-card__img img{width:100%;height:100%;object-fit:cover;}
.type-card__text{display:flex;flex-direction:column;gap:10px;}
.type-card__title{font-size:21px;line-height:25px;font-weight:500;color:var(--navy);}
.type-card__title a{color:inherit;}
.type-card__desc{font-size:14px;line-height:23px;color:rgba(15,22,40,.6);}

/* ---------- Шаги процесса: «6 шагов» / «5 шагов».
              Визуально как .reasons на главной, но с рядом на 5–6 колонок
              и необязательной подписью срока рядом с номером. ---------- */
.steps__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:25px;}
.steps__grid--5{grid-template-columns:repeat(5,1fr);}
.steps__grid--4{grid-template-columns:repeat(4,1fr);}
.step{display:flex;flex-direction:column;}
.step__head{display:flex;align-items:flex-start;gap:10px;padding-left:14px;}
.step__num{font-size:96px;line-height:82px;font-weight:500;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.step__time{padding-top:12px;font-size:14px;line-height:17px;color:rgba(15,22,40,.6);}
.step__card{position:relative;z-index:1;margin-top:-14px;background:#fff;border:1px solid rgba(237,44,47,.6);
  border-radius:20px;padding:24px 25px 30px;display:flex;flex-direction:column;gap:10px;min-height:200px;flex:1;}
.step__title{font-size:21px;line-height:25px;font-weight:500;}
.step__desc{font-size:14px;line-height:23px;color:rgba(15,22,40,.6);}
/* Ряд без подписей срока — в макете такие карточки заметно ниже */
.steps--compact .step__card{min-height:0;}

/* ---------- Карточка с плашкой-подписью внизу: «Из чего делаем» на «Табличках»,
              «Что отличает промышленную УФ-печать» на «УФ-печати».
              В правом нижнем углу — либо образец материала, либо иконка. ---------- */
.mats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;}
.mats__grid--4{grid-template-columns:repeat(4,1fr);}
.mat{position:relative;background:var(--gray);border-radius:20px;padding:30px;
  display:flex;flex-direction:column;gap:10px;overflow:hidden;transition:background .25s ease;}
.mat:hover{background:#EDEEF0;}
.mat__title{font-size:21px;line-height:25px;font-weight:500;color:var(--navy);}
.mat__desc{font-size:14px;line-height:23px;color:rgba(15,22,40,.6);max-width:390px;}
/* Плашка-подпись прижата к низу карточки */
.mat__tag{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;height:29px;padding:0 12px;
  border-radius:8px;background:#fff;font-size:12px;line-height:1;font-weight:400;text-transform:uppercase;
  letter-spacing:.3px;color:var(--navy);}
.mat__swatch{position:absolute;right:14px;bottom:8px;width:140px;height:140px;pointer-events:none;}
.mat__swatch img{width:100%;height:100%;}
.mat__icon{position:absolute;right:30px;bottom:26px;width:62px;height:62px;border-radius:18px;background:var(--grad);
  display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(237,44,47,.35);}
.mat__icon svg{width:30px;height:30px;}
/* Иконка-файл: вписываем в тот же габарит, но без искажения пропорций */
.mat__icon img{width:auto;height:auto;max-width:34px;max-height:30px;}
/* Вариант иконки с буквами вместо картинки */
.mat__icon--text{font-size:24px;line-height:1;font-weight:500;color:#fff;}

/* ---------- Статистика: приставка перед крупным числом («до 30», «± 0,1») ---------- */
.stat__pre{font-size:16px;line-height:30px;font-weight:500;color:var(--navy);align-self:flex-start;margin-top:10px;}

/* ---------- Карточка работы: текст вместо цены («Под ключ», «Цена по запросу») ---------- */
.work__note{font-size:16px;font-weight:500;color:var(--navy);}

/* ---------- Квиз: шаг со свободным ответом (текстовое поле вместо вариантов) ---------- */
.quiz__field{display:flex;flex-direction:column;gap:15px;}
.quiz__label{font-size:16px;font-weight:500;color:var(--navy);}
.quiz__input{width:100%;height:64px;padding:0 25px;border-radius:12px;background:var(--gray);border:1px solid transparent;
  font-size:16px;color:var(--navy);transition:border-color .2s ease,background .2s ease;}
.quiz__input::placeholder{color:rgba(15,22,40,.45);}
.quiz__input:focus{outline:none;background:#fff;border-color:var(--red1);}

/* ---------- Квиз: варианты в две колонки, единственная кнопка «Далее» ---------- */
.quiz__options--2{grid-template-columns:repeat(2,1fr);gap:20px;}
.quiz__options--2 .opt{height:auto;min-height:64px;padding:15px 20px;gap:20px;line-height:20px;}
.quiz__nav--single{justify-content:flex-end;}

/* ---------- Адаптив ---------- */
@media (max-width:1500px){
  .hero__lead{font-size:16px;line-height:24px;color:var(--navy);max-width:500px;}
}
@media (max-width:1440px){
  .biz__grid{grid-template-columns:repeat(4,1fr);}
  /* Ряды из 6 и 5 шагов складываем по 3, ряд из 4 — по 2,
     иначе четвёртый блок уезжает на вторую строку в одиночку. */
  .steps__grid {grid-template-columns:repeat(3,1fr);}
  .steps__grid--4 {grid-template-columns:repeat(2,1fr);}
}
@media (max-width:1280px){
  .addons__grid{grid-template-columns:repeat(2,1fr);}
  .types__grid,.types__grid--3{grid-template-columns:repeat(2,1fr);}
  .mats__grid,.mats__grid--4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:1024px){
  .biz__grid{grid-template-columns:repeat(3,1fr);}
  .steps__grid,.steps__grid--4,.steps__grid--5{grid-template-columns:repeat(2,1fr);}
  .addons__grid--3{grid-template-columns:repeat(2,1fr);}
  .quiz__options--2{grid-template-columns:1fr;}
}
@media (max-width:768px){
  .biz__grid{grid-template-columns:repeat(2,1fr);gap:15px;}
  .steps__grid,.steps__grid--4,.steps__grid--5{grid-template-columns:1fr;gap:20px;}
  .biz-card{padding:20px;}
  .biz-card--plain{padding:0;}
  .biz-card__img{height:100px;}
  .biz-card__img img{max-height:100px;}
  .types__grid,.types__grid--3{grid-template-columns:1fr;gap:20px;}
  .type-card__img{height:220px;}
  .mats__grid,.mats__grid--4{grid-template-columns:1fr;gap:20px;}
  .mat__desc{max-width:none;}
  .mat__swatch{right:10px;bottom:8px;width:120px;height:120px;}
  .step__card{min-height:0;}
  .addons__grid,.addons__grid--3{grid-template-columns:1fr;gap:20px;}
  .addon{min-height:0;padding-top:110px;}
  .addon--top{min-height:0;}
  .addon--compact{padding-top:28px;}
  .addon__icon{top:25px;right:auto;left:25px;}
  .addon--compact .addon__icon{top:50%;left:auto;right:25px;}
  .hero__switch{right:12px;bottom:12px;padding:7px;}
  .hero__switch-btn{padding:0 14px;font-size:14px;}
}
@media (max-width:480px){
  .biz__grid{grid-template-columns:1fr;}
  .quiz__input{height:56px;padding:0 18px;}
}

.mat__tag {
    margin-bottom: 8%;
}
@media (max-width:1600px){
.mat__tag {
    margin-bottom: 8%;
    max-width: 135px;
    position: relative;
    display: flex;
    text-align: center;
    padding: 20px;
    line-height: 1.2;
}
}
@media (max-width:1600px){
.mats--bend .mat__swatch {
    right: 10px;
    bottom: 4px;
    width: 108px;
    height: 135px;
    position: relative;
}
.mat__tag {
    margin-bottom: 8%;
    max-width: 300px;
    position: relative;
    display: flex;
    text-align: center;
    padding: 20px;
    line-height: 1.2;
}
}
/* ============ ТИПЫ ВЫВЕСОК (вкладки) ============ */
/* Панели переключаются классом is-active, а не инлайн-стилем: без JS первая
   панель уже помечена в шаблоне и блок остаётся читаемым. */
.tabsec__tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px;}
.tabsec__tab{height:44px;padding:0 22px;border:1px solid rgba(15,22,40,.15);border-radius:15px;background:transparent;
  font-family:inherit;font-size:16px;font-weight:500;color:var(--navy);cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease;}
.tabsec__tab:hover{border-color:rgba(15,22,40,.35);}
.tabsec__tab.is-active{background:var(--grad);border-color:transparent;color:#fff;}
.tabsec__panel{display:none;gap:40px;align-items:center;}
.tabsec__panel.is-active{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);}
.tabsec__img{aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:var(--gray);}
.tabsec__img img{display:block;width:100%;height:100%;object-fit:cover;}
.tabsec__name{font-size:24px;line-height:30px;font-weight:500;color:var(--navy);margin-bottom:15px;}
.tabsec__text{font-size:16px;line-height:26px;color:rgba(15,22,40,.7);}
.tabsec__text p{margin-bottom:14px;}
.tabsec__text p:last-child{margin-bottom:0;}

/* ============ КАРТОЧКИ: МАТЕРИАЛЫ И КРЕПЛЕНИЯ ============ */
/* Один набор правил на два блока — signmats.tpl и signmounts.tpl отдают
   одинаковую разметку и различаются только полями, из которых берут данные. */
.photocards__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;}
.photocard{display:flex;flex-direction:column;background:var(--gray);border-radius:20px;overflow:hidden;}
.photocard__img{height:240px;background:#fff;}
.photocard__img img{display:block;width:100%;height:100%;object-fit:cover;}
.photocard__body{display:flex;flex-direction:column;gap:12px;padding:25px;}
.photocard__title{font-size:21px;line-height:26px;font-weight:500;color:var(--navy);}
.photocard__text{font-size:15px;line-height:24px;color:rgba(15,22,40,.7);}
.photocard__text p{margin-bottom:12px;}
.photocard__text p:last-child{margin-bottom:0;}

@media (max-width:1024px){
  .tabsec__panel.is-active{grid-template-columns:1fr;gap:25px;}
  .tabsec__img{max-height:340px;}
  .photocards__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
}
@media (max-width:768px){
  .tabsec__tabs{gap:8px;margin-bottom:22px;}
  .tabsec__tab{height:40px;padding:0 16px;font-size:15px;}
  .tabsec__name{font-size:21px;line-height:26px;}
  .tabsec__text{font-size:15px;line-height:24px;}
  .photocards__grid{grid-template-columns:1fr;}
  .photocard__img{height:200px;}
  .photocard__body{padding:20px;}
}

/* ============ ВСТУПЛЕНИЕ НАД БЛОКОМ ============ */
/* У части блоков между шапкой и содержимым идёт абзац-вступление. В .lead его
   не положить: там короткий подзаголовок в одну-две строки, а здесь бывает
   несколько абзацев. */
.tabsec__intro,
.photocards__intro{max-width:900px;margin:-10px 0 30px;font-size:16px;line-height:26px;color:rgba(15,22,40,.7);}
.tabsec__intro p,
.photocards__intro p{margin-bottom:14px;}
.tabsec__intro p:last-child,
.photocards__intro p:last-child{margin-bottom:0;}

/* Пятиколоночная сетка — для наборов, где карточка это фото и одно слово
   (палитра пластика). Правило стоит ниже медиазапросов базовой сетки: у них
   одинаковая специфичность, и при обратном порядке двухколоночное правило из
   @1024 перебивало бы модификатор. Поэтому и переносы для него — ниже. */
.photocards__grid--5{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;}
.photocards__grid--5 .photocard__img{height:150px;}
/* В палитре важна форма целиком, а не заполнение плитки: cover срезал бы
   у образца верх и низ. Фон карточки белый — поля вокруг не видны. */
.photocards__grid--5 .photocard__img img{object-fit:contain;}
.photocards__grid--5 .photocard__body{padding:15px;}
.photocards__grid--5 .photocard__title{font-size:16px;line-height:21px;}

/* ============ ЦВЕТА СВЕЧЕНИЯ ============ */
/* Заливка и ореол берутся из двух переменных строки MIGX. Ореол рисуется
   двойной тенью: широкая даёт свечение вокруг, узкая — плотный край. */
.colorsec__items{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 20px;}
.colorsec__item{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;}
.colorsec__dot{width:64px;height:64px;border-radius:50%;background:rgb(var(--c));
  box-shadow:0 0 24px rgba(var(--s),.7),0 0 8px rgba(var(--s),.9),inset 0 0 0 1px rgba(15,22,40,.08);}
.colorsec__name{font-size:15px;line-height:20px;color:var(--navy);}

/* ============ ТЕКСТ + ФОТОГРАФИИ ============ */
.textmedia__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:40px;align-items:center;}
.textmedia__text{font-size:16px;line-height:26px;color:rgba(15,22,40,.7);}
.textmedia__text p{margin-bottom:14px;}
.textmedia__text p:last-child{margin-bottom:0;}
.textmedia__imgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.textmedia__img{aspect-ratio:3/4;border-radius:20px;overflow:hidden;background:var(--gray);}
.textmedia__img img{display:block;width:100%;height:100%;object-fit:cover;}

@media (max-width:1600px){
  .colorsec__items{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:1024px){
  .photocards__grid--5{grid-template-columns:repeat(3,minmax(0,1fr));}
  .textmedia__grid{grid-template-columns:1fr;gap:25px;}
  .textmedia__imgs{max-width:520px;}
}
@media (max-width:768px){
  .tabsec__intro,
  .photocards__intro{margin:-4px 0 22px;font-size:15px;line-height:24px;}
  .photocards__grid--5{grid-template-columns:repeat(2,minmax(0,1fr));}
  .photocards__grid--5 .photocard__img{height:130px;}
  .colorsec__items{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 12px;}
  .colorsec__dot{width:52px;height:52px;}
  .colorsec__name{font-size:14px;}
  .textmedia__text{font-size:15px;line-height:24px;}
}