/* ==========================================================================
   RP ONLINE — ePaper-Widget
   Deploy-Ziel: /news/ig/rpo/css/epaper_widget.css
   Live-URL:    https://static-assets.rp-online.de/news/ig/rpo/css/epaper_widget.css

   Desktop-Layout 1:1 nach Figma
   GERACM-29250 · node 140:11695 (Section „Aktuelle Nachrichten | RP ONLINE")
   - Card: max 1102px, Padding 32px, Radius 12px, brand/rp/secondary #040A14
     auf brand/rp/footer #2A2E36
   - Kopfzeile über die volle Breite, 2px Unterkante in brand/rp/primary #FFCD00
   - Inhaltsreihe: Cover 436px (~45%) + Textspalte 498px, Gap 24px, zentriert
   - Cover im Verhältnis 1,4:1 beschnitten (Kopf der Titelseite sichtbar)
   - Headline/Prio H1: Publico Headline Medium 28px/1.25
   - Copy/Prio C1: Inter Regular 20px/1.25, white/solid
   - Button: volle Spaltenbreite, Radius 256px, Copy/Prio C3 bold 14px/1.5

   Abweichungen von der Figma-Vorlage (bewusst):
   - Button min-height 44px statt 41px — Touch-Target WCAG 2.5.5
   - Hover über eine 8%-Schwarz-Fläche (Atom/State des Design-Systems) statt
     eines zweiten Gelbtons
   - Mobile (< 768px) ist in Figma nicht spezifiziert: gestapelt aus
     Kopfzeile · vollständiger Titelseite · Button, Headline und Copy
     erst ab 768px

   Farb-Hinweis: #FFCD00 ist das Brand-Token brand/rp/primary aus dem
   Figma-File und ersetzt hier bewusst das Hellgelb #FACC00 der
   Datenviz-Basiskonfiguration.

   Spezifität: alle Regeln doppelt geklasst und alle var()-Aufrufe mit
   Literal-Fallback, weil die Artikel-Styles von rp-online.de sonst
   Schrift und Breiten überschreiben.

   Stand: 2026-08-27
   ========================================================================== */

/* --- Card ---------------------------------------------------------------- */
.rpo-epaper {
  /* Farbtokens */
  --rpo-black-solid: #040A14;
  --rpo-black-almost: #2A2E36;
  --rpo-white-solid: #FFFFFF;
  --rpo-primary: #FFCD00;
  --rpo-state-hover: rgba(4, 10, 20, 0.08);

  /* Layout-Tokens */
  --rpo-max-width: 1102px;
  --rpo-cover-col: 45%;
  --rpo-radius-card: 12px;
  --rpo-radius-media: 4px;
  --rpo-radius-pill: 256px;

  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  margin: 24px auto;
  padding: 16px;
  background: var(--rpo-black-solid, #040A14);
  border: 1px solid var(--rpo-black-almost, #2A2E36);
  border-radius: var(--rpo-radius-card, 12px);
  color: var(--rpo-white-solid, #FFFFFF);
  font-family: Inter, FontFallback, sans-serif;
  font-feature-settings: 'tnum';
  font-size: 16px;
  text-align: left;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.rpo-epaper *,
.rpo-epaper *::before,
.rpo-epaper *::after {
  box-sizing: border-box;
}

/* Artikel-Styles der Seite dürfen Schrift und Ausrichtung nicht kapern */
.rpo-epaper span,
.rpo-epaper img,
.rpo-epaper svg {
  font-family: Inter, FontFallback, sans-serif;
  font-style: normal;
  text-transform: none;
  text-align: left;
  max-width: 100%;
}

.rpo-epaper:focus-visible {
  outline: 3px solid var(--rpo-primary, #FFCD00);
  outline-offset: 3px;
}

/* --- Kopfzeile ----------------------------------------------------------- */
.rpo-epaper .rpo-epaper__head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--rpo-primary, #FFCD00);
}

.rpo-epaper .rpo-epaper__kicker {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--rpo-white-solid, #FFFFFF);
}

.rpo-epaper .rpo-epaper__chevron {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  overflow: visible;
}

.rpo-epaper .rpo-epaper__chevron path {
  fill: none;
  stroke: var(--rpo-white-solid, #FFFFFF);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Titelseite ---------------------------------------------------------- */
.rpo-epaper .rpo-epaper__media {
  display: block;
  width: 100%;
  aspect-ratio: 0.7;
  background: var(--rpo-white-solid, #FFFFFF);
  border-radius: var(--rpo-radius-media, 4px);
  overflow: hidden;
  box-shadow: 0 13px 40px rgba(4, 10, 20, 0.35);
}

.rpo-epaper .rpo-epaper__cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
}

/* --- Textspalte ---------------------------------------------------------- */
.rpo-epaper .rpo-epaper__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Headline und Copy erst ab Desktop (in Figma nicht für Mobile definiert) */
.rpo-epaper .rpo-epaper__body {
  display: none;
}

.rpo-epaper .rpo-epaper__headline {
  display: block;
  font-family: 'Publico Headline', 'PublicoHeadline', 'Publico Text', Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--rpo-white-solid, #FFFFFF);
}

.rpo-epaper .rpo-epaper__text {
  display: block;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--rpo-white-solid, #FFFFFF);
}

/* --- CTA ----------------------------------------------------------------- */
.rpo-epaper .rpo-epaper__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  overflow: hidden;
  background: var(--rpo-primary, #FFCD00);
  border-radius: var(--rpo-radius-pill, 256px);
  color: var(--rpo-black-solid, #040A14);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

/* Hover-State analog Atom/State des RP-Design-Systems */
.rpo-epaper .rpo-epaper__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
}

.rpo-epaper:hover .rpo-epaper__cta::after,
.rpo-epaper:focus-visible .rpo-epaper__cta::after {
  background: var(--rpo-state-hover, rgba(4, 10, 20, 0.08));
}

/* --- bp-sm: 460px -------------------------------------------------------- */
@media (min-width: 460px) {
  .rpo-epaper {
    padding: 20px;
  }

  .rpo-epaper .rpo-epaper__kicker {
    font-size: 18px;
  }
}

/* --- bp-md: 768px — Layout nach Figma ------------------------------------ */
@media (min-width: 768px) {
  .rpo-epaper {
    display: grid;
    grid-template-columns: minmax(0, var(--rpo-cover-col, 45%)) minmax(0, 1fr);
    grid-template-areas:
      'head head'
      'media col';
    column-gap: 24px;
    row-gap: 16px;
    align-items: center;
    max-width: var(--rpo-max-width, 1102px);
    padding: 24px;
  }

  .rpo-epaper .rpo-epaper__head {
    grid-area: head;
    align-self: start;
    gap: 8px;
    padding-bottom: 8px;
  }

  .rpo-epaper .rpo-epaper__chevron {
    width: 24px;
    height: 24px;
  }

  .rpo-epaper .rpo-epaper__media {
    grid-area: media;
    /* Cover wird auf 1,4:1 beschnitten, sichtbar bleibt der Kopf der Seite */
    aspect-ratio: 1.4;
    border-radius: 0;
  }

  .rpo-epaper .rpo-epaper__cover {
    object-fit: cover;
  }

  .rpo-epaper .rpo-epaper__col {
    grid-area: col;
    justify-content: center;
    gap: 8px;
    height: 100%;
  }

  .rpo-epaper .rpo-epaper__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

/* --- bp-lg: 1024px — Figma-Referenzgrößen -------------------------------- */
@media (min-width: 1024px) {
  .rpo-epaper {
    padding: 32px;
  }

  .rpo-epaper .rpo-epaper__kicker {
    font-size: 20px;
  }

  .rpo-epaper .rpo-epaper__headline {
    font-size: 28px;
  }

  .rpo-epaper .rpo-epaper__text {
    font-size: 20px;
  }

  .rpo-epaper .rpo-epaper__cta {
    font-size: 14px;
  }
}

/* --- Motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .rpo-epaper .rpo-epaper__cta::after {
    transition: background-color 300ms ease-out;
  }
}