@layer theme.components {

/* Головная секция с вариантами исходного макета. */

.tt-hero { background: var(--color-bg-page); }
.tt-hero__inner { max-width: var(--width-container); margin: 0 auto; padding: 28px var(--space-gutter) 36px; }

/* Фото автовоза: горизонтальное — автовоз справа, под текстом слева внутренний белый
   градиент; на телефоне вертикальное фото и градиент сверху (см. медиазапрос ниже).
   Своя картинка страницы (hero.image → --tt-hero-image) заменяет фото темы. */
.tt-hero--lines {
  position: relative;
  z-index: 1;
  background: var(--overlay-hero-left), var(--color-bg-page) var(--tt-hero-image, url("../../assets/hero-car-carrier.jpg")) right center / cover no-repeat;
  box-shadow: var(--shadow-hero);
}
.tt-hero--lines .tt-hero__inner { padding-block: var(--space-section) 76px; }
.tt-hero--compact { background: var(--color-bg-section-alt); border-bottom: 1px solid var(--color-border); }
.tt-hero--dark {
  background: var(--overlay-hero-photo), var(--tt-hero-image, none) center / cover no-repeat;
  color: var(--color-text-inverse);
}
.tt-hero--dark .tt-hero__inner { padding-block: clamp(57px, 6vw, 83px); }
.tt-hero--dark .tt-hero__title { max-width: 820px; color: var(--color-text-inverse); }
.tt-hero--dark .tt-hero__lead { max-width: 700px; color: var(--color-text-on-dark); }
.tt-hero--dark .tt-hero__lead strong,
.tt-hero--dark .tt-hero__lead a { color: var(--color-text-inverse); }
.tt-hero--article { background: var(--color-bg-section-alt); border-bottom: 1px solid var(--color-border); }

.tt-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.tt-crumbs a { color: var(--color-text-muted); text-decoration: none; }
.tt-crumbs a:hover { color: var(--color-accent); }
.tt-crumbs [aria-current] { color: var(--color-text); font-weight: 600; }
.tt-crumbs__sep { color: var(--color-icon-muted); font-size: 12px; }

.tt-hero__title {
  max-width: 760px;
  margin: 14px 0 22px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.026em;
}
.tt-hero--compact .tt-hero__title,
.tt-hero--article .tt-hero__title { max-width: 880px; margin: 14px 0; line-height: 1.12; }
.tt-hero__kicker { margin-block-start: 36px; color: var(--color-accent-text); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.tt-hero__toc { max-width: 820px; margin-block-start: 30px; padding-block-start: 20px; border-block-start: 1px solid var(--color-border-strong); }
.tt-hero__toc-label { margin-block-end: 12px; color: var(--color-text-muted); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.tt-hero__toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; margin: 0; padding: 0; list-style: none; }
.tt-hero__toc li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; }
.tt-hero__toc li span { color: var(--color-accent-text); font-size: 12px; font-variant-numeric: tabular-nums; }
.tt-hero__toc a { font-size: 14px; }
.tt-hero__lead {
  max-width: var(--width-text);
  color: var(--color-text-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}
.tt-hero--compact .tt-hero__lead,
.tt-hero--article .tt-hero__lead { max-width: 900px; }
.tt-hero__lead strong { color: var(--color-text); font-weight: 600; }
.tt-hero__lead + .tt-hero__lead,
.tt-hero__lead p + p { margin-top: 12px; }
.tt-hero__lead a {
  font-weight: 600;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-icon-muted);
}
.tt-hero__lead a:hover { color: var(--color-accent-text); text-decoration-color: var(--color-accent-text); }

@media (max-width: 720px) {
  .tt-hero__toc ol { grid-template-columns: minmax(0, 1fr); }
}


/* Слот рядом с заголовком. Колонка появляется только вместе с ним.
   Ширина слота ограничена токеном, поэтому текст забирает остаток и слот остаётся
   сбоку вплоть до телефонной ширины, а не уходит под текст на планшете. */
.tt-hero--split {
  display: grid;
  gap: var(--space-grid-row) var(--space-slot-gap);
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--width-slot));
  align-items: center;
  max-inline-size: var(--width-container);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}
.tt-hero--split .tt-hero__inner { max-inline-size: none; margin-inline: 0; padding-inline: 0; }
.tt-hero--lines.tt-hero--split { max-inline-size: none; padding-inline: max(var(--space-gutter), calc((100vw - var(--width-container)) / 2 + var(--space-gutter))); }
/* Вертикальные отступы — у секции, а не у текстовой колонки: тогда слот формы стоит
   по центру между верхом и низом, а не прижимается из-за запаса под текстом. */
.tt-hero--lines.tt-hero--split { padding-block: var(--space-section) calc(var(--space-section) + 16px); }
.tt-hero--lines.tt-hero--split .tt-hero__inner { padding-block: 0; }
/* Высота от ширины экрана: автовоз в кадре целиком; текст узкой колонкой на светлой части. */
.tt-hero--lines.tt-hero--split { min-block-size: var(--height-hero-photo); }
.tt-hero--lines .tt-hero__title,
.tt-hero--lines .tt-hero__lead { max-inline-size: var(--width-hero-text); }

/* Тёмный вариант со слотом: фото на всю ширину экрана, контент по сетке контейнера. */
.tt-hero--dark.tt-hero--split { max-inline-size: none; padding-inline: max(var(--space-gutter), calc((100vw - var(--width-container)) / 2 + var(--space-gutter))); padding-block: clamp(40px, 5vw, 64px); }
.tt-hero--dark.tt-hero--split .tt-hero__inner { padding-block: 0; }
.tt-hero--dark .tt-crumbs a { color: var(--color-text-on-dark-muted); }
.tt-hero--dark .tt-crumbs [aria-current] { color: var(--color-text-inverse); }

/* Крошки строкой над текстом и формой: занимают обе колонки. */
.tt-hero__crumbs-row { grid-column: 1 / -1; }
.tt-hero--crumbs-row { row-gap: 0; padding-block-start: 28px; }
.tt-hero--crumbs-row .tt-hero__inner,
.tt-hero--lines.tt-hero--crumbs-row .tt-hero__inner { padding-block-start: 0; }
.tt-hero--crumbs-row .tt-hero__title { margin-block-start: 14px; }

.tt-hero__slot { inline-size: 100%; max-inline-size: var(--width-slot); }
.tt-hero__slot > .lithops-preview-empty {
  min-block-size: 280px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-bg-page) 94%, transparent);
  box-shadow: var(--shadow-card);
}

@media (max-width: 820px) {
  .tt-hero--split { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  /* Вертикальное фото на всю ширину, привязано к низу; от формы до низа секции 20px.
     Сверху внутренний белый градиент под заголовком и текстом. */
  .tt-hero--lines { background: var(--overlay-hero-top-mobile), var(--color-bg-page) var(--tt-hero-image, url("../../assets/hero-car-carrier-mobile.jpg")) center bottom / 100% auto no-repeat; }
  .tt-hero--dark.tt-hero--split { padding-inline: var(--space-gutter); }
  .tt-hero--lines.tt-hero--split { min-block-size: 0; padding-inline: var(--space-gutter); padding-block: 28px 20px; }
  .tt-hero__slot { justify-self: start; }
  .tt-hero--lines .tt-hero__title,
  .tt-hero--lines .tt-hero__lead { max-inline-size: none; }
  .tt-hero--lines.tt-hero--crumbs-row { padding-block-start: 20px; }
}
}