/* hero — первый экран. Общее для вариантов: h1, .lead, .hero-note, .hero-badges. */
.blk-hero { padding-top: 64px; }
.blk-hero h1 { font-size: clamp(30px, 4.6vw, 52px); margin-bottom: 18px; overflow-wrap: anywhere; }
.blk-hero h1 em { font-style: normal; border-bottom: 4px solid currentColor; }
.blk-hero .lead { color: var(--s-muted); font-size: 18px; margin-bottom: 30px; max-width: 560px; }
.hero-note { margin-top: 14px; font-size: 14px; color: var(--s-muted); }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.hero-badges span { border: 1px solid var(--s-line); border-radius: 30px; padding: 7px 16px; font-size: 13px; color: var(--s-muted); }

/* split — текст и фото */
.hero-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero-split .hero-visual { width: 100%; aspect-ratio: 3 / 4; border-radius: calc(var(--radius) + 4px); object-fit: cover; }

/* cover — фото на весь экран. Секция без отступов, фото и градиент во всю ширину.
   Светлый текст поверх фото — единственное место, где цвет задан не переменной. */
.blk-hero.v-cover { padding: 0; }
.hero-cover { position: relative; overflow: hidden; min-height: min(80vh, 720px); display: flex; align-items: center; }
.hero-cover-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-cover.has-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 55%, rgba(0, 0, 0, .2) 100%);
}
.hero-cover-in { position: relative; z-index: 1; width: 100%; padding-top: 96px; padding-bottom: 96px; }
.hero-cover-in > * { max-width: 640px; }
.hero-cover.has-img { color: #fff; }
.hero-cover.has-img .tag, .hero-cover.has-img .lead, .hero-cover.has-img .hero-note { color: rgba(255, 255, 255, .86); }
.hero-cover.has-img .btn { border: 2px solid rgba(255, 255, 255, .85); }
.hero-cover.has-img .btn.ghost { background: rgba(0, 0, 0, .25); color: #fff; }
.hero-cover.has-img .btn.ghost:hover { background: #fff; color: #111; }
/* без фото: выразительный фон из акцента и подложки схемы */
.hero-cover:not(.has-img) {
  background:
    radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--s-accent) 30%, transparent), transparent 55%),
    radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--s-accent) 18%, transparent), transparent 50%),
    var(--s-surface);
}

/* centered — крупный заголовок по центру */
.blk-hero.v-centered {
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--s-accent) 14%, transparent), transparent 65%), var(--s-bg);
  padding: 96px 0 84px;
}
.hero-centered { text-align: center; }
.hero-centered h1 { font-size: clamp(34px, 6.2vw, 68px); max-width: 940px; margin: 0 auto 22px; }
.hero-centered .lead { margin-left: auto; margin-right: auto; max-width: 660px; }
.hero-centered .cta-row, .hero-centered .hero-badges { justify-content: center; }

/* collage — текст и мозаика из трёх фото */
.hero-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.hero-collage > * { min-width: 0; }
.hero-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; aspect-ratio: 1 / 1; }
.hero-mosaic > * { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: var(--radius); }
.hero-mosaic > :first-child { grid-row: span 2; }
.hero-mosaic.n1 > :first-child { grid-column: span 2; }
.hero-mosaic.n2 > * { grid-row: span 2; }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split .hero-visual.ph { display: none; }
  .hero-split .hero-visual { aspect-ratio: 4 / 3; }
  .hero-collage { grid-template-columns: 1fr; gap: 32px; }
  .hero-mosaic { aspect-ratio: 4 / 3; }
  .hero-cover { min-height: 0; }
  .hero-cover-in { padding-top: 72px; padding-bottom: 72px; }
  .hero-cover.has-img::after { background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .75)); }
  .blk-hero.v-centered { padding: 64px 0; }
}