/**
 * @file
 * basetheme:hero — two-column hero (copy + image). Scoped under .bt-sdc--hero.
 * Inherits tokens/typography/flags from normal via libraryOverrides.
 * Page 1 (Automatisierung): dark editorial hero, copy left + motif right.
 */

/* Two-column grid: copy (1.15fr) + media (0.85fr). Collapses <=1023. */
.bt-sdc--hero .bt-sdc__inner {
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:3rem;
  align-items:center;
}
@media (max-width:1023px) {
  .bt-sdc--hero .bt-sdc__inner { grid-template-columns:1fr; gap:1.6rem; }
}

/* media-desktop flag: hide the motif on mobile (source .hero-visual{display:none}) */
@media (max-width:1023px) {
  .bt-sdc--hero.media-desktop .bt-sdc__media { display:none; }
}

.bt-sdc--hero .bt-sdc__media { height:21rem; }
.bt-sdc--hero .bt-sdc__media picture,
.bt-sdc--hero .bt-sdc__media img {
  width:100%; height:100%; object-fit:contain; display:block;
}

/* Hero copy typography (overrides base for the larger hero scale) */
.bt-sdc--hero mark { font-size:0.72rem; letter-spacing:0.16em; }   /* eyebrow; colour from on-dark */
.bt-sdc--hero p:has(> mark) { margin-bottom:1.5rem; }
.bt-sdc--hero.bt-sdc--hero h1 {
  font-family:var(--bt-serif); font-weight:500;
  font-size:clamp(2rem, 4.6vw, 3rem); line-height:1.1; letter-spacing:-0.015em;
  color:var(--bt-ondark-h); max-width:18ch; margin:0;
}
.bt-sdc--hero h1 + p { margin-top:1.7rem; }
.bt-sdc--hero p {
  font-size:1rem; line-height:1.7; color:var(--bt-ondark-body); max-width:58ch;
}
.bt-sdc--hero strong { color:var(--bt-ondark-h); }
.bt-sdc--hero .bt-sdc__actions { margin-top:1.9rem; }

/* ==========================================================================
   PAGE 2 (business-analyse) — image-less hero + hero-checks
   ========================================================================== */

/* An image-less hero (no field_image) fills the full width instead of leaving
   the 0.85fr media column empty. */
.bt-sdc--hero .bt-sdc__inner:not(:has(.bt-sdc__media)) { grid-template-columns:1fr; }

/* hero-checks — the trailing <ul> becomes an inline check-row: a top divider,
   then flex-wrapped ✓ items (band 0: Klärung · Planung · Führung · Mit KI). */
.bt-sdc--hero.hero-checks ul {
  list-style:none; margin:1.85rem 0 0; padding:1.4rem 0 0;
  border-top:1px solid rgba(255,255,255,0.12);
  display:flex; flex-wrap:wrap; gap:0.76rem 2.15rem;
}
.bt-sdc--hero.hero-checks li {
  display:flex; align-items:center; gap:0.65rem; margin:0;
  font-size:0.86rem; line-height:1.5; color:#D5E2EB;
}
.bt-sdc--hero.hero-checks li::before {
  content:""; width:17px; height:17px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23C46A45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}