/* Shared styles for HR factory blog articles (marker: hrf-blog-post-root)
   Hero-Formate:
   - .hrf-blog-hero-media--person   Portraits / Projektkarriere (16:9, Gesicht betont)
   - .hrf-blog-hero-media--landscape Standard-Querformat (16:9)
   - .hrf-blog-hero-media--scene    Event-/Raumfotos (4:3)
   - .hrf-blog-hero-media--wide     Ultraweit (≈21:9)
   - .hrf-blog-hero-media--square   1:1 (Infografik-Helden)
   Ohne Modifier setzt interactions.js das Format anhand der Bildmaße.
*/

.hrf-blog-post-root {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}

.hrf-blog-post-root * {
  box-sizing: border-box;
}

.hrf-blog-post-root a {
  color: #01408D;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.hrf-blog-post-root a:hover {
  color: #F84F48;
}

.hrf-blog-post-root img {
  max-width: 100%;
  height: auto;
}

.hrf-blog-post-root [data-screen-label="Artikel-Hero"] > div:first-child,
.hrf-blog-post-root [data-screen-label="Article-Hero"] > div:first-child {
  max-width: 1180px !important;
}

/* ===== Hero-Rahmen ===== */
.hrf-blog-post-root .hrf-blog-hero-media {
  overflow: hidden;
  border-radius: 24px;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.hrf-blog-post-root .hrf-blog-hero-media > img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center center;
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(1, 43, 94, 0.18);
}

/* Portrait / Person: Gesicht im oberen Drittel halten, kein „Stirn-Schnitt“ */
.hrf-blog-post-root .hrf-blog-hero-media--person > img {
  aspect-ratio: 16 / 9;
  object-position: center 22%;
}

/* Klassisches Querformat */
.hrf-blog-post-root .hrf-blog-hero-media--landscape > img {
  aspect-ratio: 16 / 9;
  object-position: center center;
}

/* Event / Raum (4:3) – nicht in flaches Banner pressen */
.hrf-blog-post-root .hrf-blog-hero-media--scene > img {
  aspect-ratio: 4 / 3;
  object-position: center center;
  max-height: min(72vh, 640px);
}

/* Ultraweit */
.hrf-blog-post-root .hrf-blog-hero-media--wide > img {
  aspect-ratio: 21 / 9;
  object-position: center center;
}

/* Quadrat */
.hrf-blog-post-root .hrf-blog-hero-media--square > img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center center;
  background: #EAF0F8;
  max-height: min(70vh, 560px);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}

/* Peach-Blob hinter dem Hero */
.hrf-blog-post-root .hrf-blog-hero-media > [aria-hidden="true"] {
  max-width: 100%;
}

/* Inline-Abbildungen: nie hart beschneiden */
.hrf-blog-post-root figure img,
.hrf-blog-post-root article img:not(.hrf-blog-hero-media img) {
  height: auto !important;
  object-fit: contain;
}

.hrf-blog-post-root figure.hrf-blog-figure--square img,
.hrf-blog-post-root img.hrf-blog-figure--square {
  width: min(100%, 560px);
  margin-inline: auto;
}

/* ===== Tablet: TOC nicht sticky ===== */
@media (max-width: 1100px) {
  .hrf-blog-post-root .hrf-blog-toc,
  .hrf-blog-post-root #hrf-sp-toc,
  .hrf-blog-post-root #hrf-blog-toc {
    position: static !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100%;
    top: auto !important;
  }

  .hrf-blog-post-root article {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100%;
  }

  .hrf-blog-post-root [data-screen-label="Artikel"] > div,
  .hrf-blog-post-root [data-screen-label="Article"] > div {
    flex-direction: column !important;
    gap: 28px !important;
  }
}

/* ===== Handy ===== */
@media (max-width: 720px) {
  .hrf-blog-post-root .hrf-blog-toc,
  .hrf-blog-post-root #hrf-sp-toc,
  .hrf-blog-post-root #hrf-blog-toc {
    display: none !important;
  }

  .hrf-blog-post-root [data-screen-label="Artikel"] > div,
  .hrf-blog-post-root [data-screen-label="Article"] > div {
    gap: 0 !important;
  }
}

@media (max-width: 640px) {
  .hrf-blog-post-root h1 {
    font-size: clamp(28px, 8.2vw, 38px) !important;
    max-width: none !important;
  }

  .hrf-blog-post-root h2 {
    font-size: clamp(22px, 6.5vw, 30px) !important;
  }

  /* Format-Klassen behalten – kein erzwungenes 4:5 mehr */
  .hrf-blog-post-root .hrf-blog-hero-media > img,
  .hrf-blog-post-root [data-screen-label="Artikel-Hero"] .hrf-blog-hero-media > img,
  .hrf-blog-post-root [data-screen-label="Article-Hero"] .hrf-blog-hero-media > img {
    max-height: min(58vh, 420px);
  }

  .hrf-blog-post-root .hrf-blog-hero-media--person > img {
    aspect-ratio: 4 / 5;
    object-position: center 18%;
    max-height: min(70vh, 520px);
  }

  .hrf-blog-post-root .hrf-blog-hero-media--scene > img {
    aspect-ratio: 4 / 3;
    max-height: min(55vh, 420px);
  }

  .hrf-blog-post-root .hrf-blog-hero-media--wide > img {
    aspect-ratio: 16 / 9;
    max-height: min(42vh, 320px);
  }

  .hrf-blog-post-root .hrf-blog-hero-media > [aria-hidden="true"] {
    display: none !important;
  }

  .hrf-blog-post-root .hrf-blog-meta {
    gap: 10px 14px !important;
  }

  .hrf-blog-post-root .hrf-blog-meta-sep {
    display: none !important;
  }

  .hrf-blog-post-root #kontakt > div,
  .hrf-blog-post-root [data-screen-label="Kontakt"] > div,
  .hrf-blog-post-root [data-screen-label="Contact"] > div,
  .hrf-blog-post-root [data-screen-label="Karriere"] > div,
  .hrf-blog-post-root [data-screen-label="Career"] > div {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hrf-blog-post-root {
    scroll-behavior: auto;
  }
}