/*
  stellen.css — Startseiten-Abschnitt "Offene Stellen" (.hjobs).

  Bild links, Text und Stellenliste rechts (Vorgabe Atilla, 10.08.2026).
  Zweispaltig wie der Ueber-uns-Block, damit sich der Abschnitt in die
  Startseite einfuegt statt als Fremdkoerper zu wirken.

  DIE LISTENZEILEN HABEN HIER KEIN EIGENES CSS: Sie benutzen .jobs__row und
  Geschwister aus components.css, dasselbe Markup wie auf der Karriereseite.
  Eine zweite Fassung derselben Zeile waere ein Aussehen, das mit der Zeit
  auseinanderlaeuft. Nur der Umbruchpunkt wird hier korrigiert (siehe unten).

  Der Abschnitt erscheint ueberhaupt nur, wenn eine Stelle offen ist — das
  entscheidet template-parts/home/stellen.php, nicht dieses Stylesheet.
*/

.hjobs {
  padding-block: var(--space-8);
  background-color: var(--color-bg);
}

.hjobs__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

/* Bild: Position relativ, damit das Notch-Stroke-Overlay (absolut, inset:0)
   die Kante findet. Feste Proportion, damit die Zeile beim Laden nicht
   springt. */
.hjobs__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.hjobs__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: url(#card-notch-br);
}

.hjobs__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hjobs__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-heading-5xs);
  line-height: var(--lh-heading-5xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent);
}

.hjobs__title,
.hjobs__lead {
  color: var(--color-text);
  text-wrap: pretty;
}

.hjobs__lead {
  max-width: 52ch;
}

/* Abstand nach oben, damit die Liste als eigener Block liest und nicht als
   Fortsetzung des Fliesstextes. */
.hjobs__list {
  margin-top: var(--space-4);
}

/* "Alle Stellen ansehen": bewusst ein Textlink und kein zweiter blauer Button.
   In derselben Zeile stehen schon die "Zur Stelle"-Buttons — ein dritter
   Knopf in Signalfarbe darunter nimmt ihnen das Gewicht. */
.hjobs__more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent);
  transition: opacity .15s ease;
}

.hjobs__more:hover {
  opacity: .8;
}

.hjobs__more:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/*
  Umbruchpunkt der Zeile korrigieren.

  components.css legt .jobs__row ab 700px nebeneinander. Das gilt fuer die
  Karriereseite, wo die Zeile die volle Inhaltsbreite hat. Hier steht sie in
  der rechten Spalte und ist damit rund halb so breit: Zwischen 700 und 1024px
  quetschten sich Stellenbezeichnung und Button sonst in eine Zeile, in der
  beide umbrechen. Deshalb hier untereinander, bis die Spalte breit genug ist.
*/
@media (min-width: 700px) and (max-width: 1023.98px) {
  .hjobs__list .jobs__row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (min-width: 1024px) {
  .hjobs {
    padding-block: var(--space-9);
  }

  /* 5 : 7 statt 1 : 1 — die rechte Spalte traegt Ueberschrift, Lead UND die
     Liste mit Buttons, das Bild traegt nur sich selbst. */
  .hjobs__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
  }

  .hjobs__media {
    flex: 0 1 clamp(360px, 40%, 560px);
    aspect-ratio: 3 / 4;
    max-height: 560px;
  }

  .hjobs__text {
    flex: 1 1 0;
    min-width: 0;
  }
}