/* ==========================================================================
   Webbotica — Hero Layout Orchestrator
   Owns: the .wb-hero grid and the mobile reflow contract.
   Does NOT own: content typography (hero-content.css) or the browser
   mockup (hero-journey.css). Those files style themselves; this file only
   places them.
   Tokens come from global.css (--color-*, --font-primary, --radius-*,
   --shadow-card, --ease-out*) — nothing is redeclared here.
   ========================================================================== */

.wb-hero {
  position: relative;
  background: var(--color-background);
  font-family: var(--font-primary);
  overflow: hidden;
}

.wb-hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-border);
}

.wb-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(40px, 5vw, 72px);
  padding-top: clamp(104px, 13vh, 150px);
  padding-bottom: clamp(48px, 6vh, 72px);
}

.wb-hero__content { grid-column: 1; }
.wb-journey { grid-column: 2; }

@media (max-width: 860px) {
  .wb-hero__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 0;
    padding-top: clamp(96px, 16vw, 128px);
    padding-bottom: 48px;
  }

  .wb-hero__content {
    grid-column: 1;
    display: contents;
  }

  .wb-journey {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wb-hero * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}