// ────────────────────────────────────────────────────────────────
// Widget · Hero (Marke · Standort · Center-Swap)
// Aus j3-landing uebernommen, auf Tokens umgestellt.
// ────────────────────────────────────────────────────────────────

.hero-block {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 72px);
}

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  margin-top: clamp(14px, 3vh, 42px);
  text-align: center;

  &__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    &[hidden] { display: none; }
  }

  &__detail {
    width: min(600px, 100%);
    max-height: calc(100vh - 240px);
    overflow: auto;

    &[hidden] { display: none; }
  }

  &__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 6px 12px;
    font: inherit;
    font-size: var(--fs-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dim);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);

    &:hover,
    &:focus-visible {
      outline: none;
      color: var(--fg);
      border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    }
  }
}

// Die Marke — Masthead, Titel, Ember-Linie — steht in `components/_brand`.
// Sie lag hier ein zweites Mal, mit anderen Groessen (`.masthead h1`:
// 34–72px gegen `--display-lg` in der Marke), und weil Widgets NACH den
// Komponenten geladen werden, gewann diese Fassung: die Marke war kleiner als
// auf der Startseite. Zwei Wahrheiten ueber dieselbe Marke sind eine zu viel —
// hier bleibt nur der Standort.

// Standortzeile unter der Marke
.location {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: clamp(14px, 2.4vh, 26px);
  text-align: center;

  &__name {
    font-size: clamp(19px, 2.3vw, 29px);
    letter-spacing: .02em;
    color: var(--fg);
  }

  &__coords {
    font-size: clamp(13px, 1.6vw, 18px);
    letter-spacing: .06em;
    color: var(--accent);
  }

  &__stats {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
    font-size: clamp(13px, 1.6vw, 18px);
    letter-spacing: .04em;
    color: var(--dim);
  }

  &__sep {
    color: var(--faint);
  }
}