/* Единый первый блок (hero) для всех посадочных, кроме /tariffs/.
   Правишь здесь — меняется сразу на всех страницах, где подключён этот файл.
   Подключается последним, поэтому переопределяет встроенные <style> страниц. */

/* ---- Акцентный цвет hero: везде яркий, как на главной ---- */
.rp-main__hero,
.rp-designer__hero,
.rp-catalog__hero,
.rp-sketch__hero,
.rc-cutting__section--hero {
  --rp-accent: #E65400;
  --rc-orange: #E65400;
}

/* ---- Строка-подпись над заголовком ---- */
.rp-main__eyebrow,
.rp-designer__eyebrow,
.rp-catalog__hero-eyebrow,
.rp-sketch__eyebrow,
.rc-cutting__eyebrow {
  font-family: var(--t-headline-font);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rp-accent, var(--rc-orange));
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rp-main__eyebrow::before,
.rp-designer__eyebrow::before,
.rp-catalog__hero-eyebrow::before,
.rp-sketch__eyebrow::before,
.rc-cutting__eyebrow::before {
  content: '';
  width: 30px;
  height: 2px;
  background: var(--rp-accent, var(--rc-orange));
  flex-shrink: 0;
}

/* ---- Текстовая колонка: не съезжает от высоты картинки, шире для кнопок в один ряд ---- */
.rp-main__hero-content,
.rp-designer__hero-content,
.rp-catalog__hero-content,
.rp-sketch__hero-content {
  align-self: start;
}
.rc-cutting__hero-grid > div:first-child {
  align-self: start;
}
/* Только десктоп: ниже 961px страницы сами раскладывают hero в одну колонку. */
@media (min-width: 961px) {
  .rp-main__hero-inner,
  .rp-designer__hero-inner,
  .rp-catalog__hero-inner,
  .rp-sketch__hero-inner,
  .rc-cutting__hero-grid {
    grid-template-columns: 1.2fr 1fr;
  }
}

/* ---- Подзаголовок: единый размер везде ---- */
.rp-main__hero-content .rp-main__subtitle,
.rp-designer__hero-content .rp-designer__subtitle,
.rp-sketch__hero-content .rp-sketch__subtitle,
.rp-catalog__hero-sub,
.rc-cutting__hero-sub {
  font-size: clamp(15px, 1.2vw, 17px);
}

/* ---- Кнопки: в одну строку на планшете и десктопе, яркий цвет основной кнопки ---- */
.rp-main__hero .rp-main__btn-group,
.rp-designer__hero .rp-designer__btn-group,
.rp-sketch__hero .rp-sketch__btn-group {
  flex-wrap: nowrap;
}
@media (max-width: 480px) {
  .rp-main__hero .rp-main__btn-group,
  .rp-designer__hero .rp-designer__btn-group,
  .rp-sketch__hero .rp-sketch__btn-group {
    flex-wrap: wrap;
  }
}
.rp-main__btn--primary,
.rp-designer__btn--primary,
.rp-sketch__btn--primary,
.rp-catalog__hero-btn {
  background: var(--rp-accent, #E65400) !important;
}

/* На узких десктопных/планшетных ширинах кнопкам не хватает места — текст внутри
   не переносится, вместо этого чуть уменьшаем паддинги и кегль самих кнопок. */
@media (max-width: 1300px) {
  .rp-main__hero .rp-main__btn,
  .rp-designer__hero .rp-designer__btn,
  .rp-sketch__hero .rp-sketch__btn {
    padding: 14px 20px;
    font-size: 15px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .rp-main__hero .rp-main__btn-group,
  .rp-designer__hero .rp-designer__btn-group,
  .rp-sketch__hero .rp-sketch__btn-group {
    gap: 10px;
  }
}

/* ---- Ссылка на мобильное приложение под чек-листом hero ---- */
.rp-main__store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 10px 22px;
  min-height: 44px;
  border-radius: 100px;
  border: 1.5px solid rgba(251, 250, 249, 0.25);
  background: rgba(251, 250, 249, 0.06);
  font-family: var(--t-headline-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.rp-main a.rp-main__store:link,
.rp-main a.rp-main__store:visited,
.rp-main a.rp-main__store:hover {
  color: var(--rp-text-light) !important;
}
.rp-main a.rp-main__store:hover {
  border-color: rgba(251, 250, 249, 0.5);
  background: rgba(251, 250, 249, 0.12);
}
.rp-main__store svg { flex: none; }
.rp-main__store span { color: rgba(251, 250, 249, 0.6); font-weight: 400; }