/* ===========================================================================
   kr3m — Beitragsarchiv und Einzelbeitrag

   Wird nur auf der News-Seite und auf Einzelbeiträgen geladen
   (siehe kr3m_enqueue_assets in functions.php). Die News-Zeile über dem
   Footer steht dagegen in layout.css, weil sie auf jeder Seite erscheint.
   =========================================================================== */

/* --- Archiv ---------------------------------------------------------------- */

.kr-newsarchive__lead {
  font-size: clamp(var(--fs-body), 1.6vw, var(--fs-body-lg));
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  max-width: 62ch;
}

/* Der Abstand zwischen Seitenkopf und Liste kommt aus layout.css
   (.kr-pagehead + .kr-section). */
.kr-newsarchive .wp-block-post-template {
  display: grid;
  gap: clamp(var(--space-6), 3vw, var(--space-10));
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .kr-newsarchive .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  .kr-newsarchive .wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.kr-newsarchive .wp-block-post {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    border-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.kr-newsarchive .wp-block-post:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Beitragsbild: einheitliche Fläche. height:auto ist nötig, weil die
   width/height-Attribute am <img> sonst gegen aspect-ratio gewinnen. */
.kr-newsarchive .wp-block-post-featured-image {
  margin: 0;
}

.kr-newsarchive .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.kr-newsarchive__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) var(--space-6);
  flex: 1;
}

.kr-newsarchive .wp-block-post-date {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
}

.kr-newsarchive .wp-block-post-title {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

.kr-newsarchive .wp-block-post-title a {
  color: var(--text-strong);
  text-decoration: none;
}

.kr-newsarchive .wp-block-post-title a:hover { color: var(--kr-red); }

/* Tag-Qualifier nötig: style.css setzt global
   ".wp-site-blocks p { margin-block-end: 0 }" mit Klasse und Tag. */
.kr-newsarchive p.wp-block-post-excerpt__excerpt {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  margin-block: 0;
}

.kr-newsarchive .wp-block-post-excerpt {
  margin-block-start: var(--space-1);
}

.kr-newsarchive .wp-block-query-pagination {
  margin-block-start: clamp(var(--space-10), 5vw, var(--space-16));
  justify-content: center;
  gap: var(--space-4);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
}

.kr-newsarchive .wp-block-query-pagination a { color: var(--kr-red); text-decoration: none; }
.kr-newsarchive .wp-block-query-pagination a:hover { text-decoration: underline; }
.kr-newsarchive .wp-block-query-pagination-numbers .current { color: var(--text-strong); }

@media (prefers-reduced-motion: reduce) {
  .kr-newsarchive .wp-block-post:hover { transform: none; }
}

/* --- Einzelbeitrag --------------------------------------------------------- */

.kr-article__date {
  display: block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--kr-red);
  margin-block-end: var(--space-4);
}

/* Der Beitragstitel ist die h1 der Seite und nutzt denselben Maßstab wie die
   Seitenköpfe der Unterseiten — dort sitzt die Regel an .kr-pagehead h1,
   die hier ebenfalls greift. Nur die Zeilenlänge weicht ab: Beitragstitel
   sind länger als Seitentitel. */
.kr-pagehead h1.kr-article__title {
  max-width: 34ch;
}

.kr-article__hero {
  margin-block-end: clamp(var(--space-8), 4vw, var(--space-12));
}

.kr-article__hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* Einleitungssatz. Im Altdesign standen diese Sätze als h5/h6 im Text;
   beim Import sind sie zu Absätzen mit dieser Klasse geworden. */
.kr-article p.kr-post-lead {
  font-size: clamp(var(--fs-body), 1.6vw, var(--fs-body-lg));
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
  margin-block-end: var(--space-6);
}

/* Bilder im Beitragstext */
.kr-article .wp-block-image img {
  height: auto;
  border-radius: var(--radius-md);
}

.kr-article .wp-block-image,
.kr-article .wp-block-gallery {
  margin-block: clamp(var(--space-8), 4vw, var(--space-12));
}

.kr-article .wp-block-gallery {
  gap: var(--space-4);
}

/* Galerien als gleichmässiges Raster statt im Flex-Layout von WordPress.
   Dort füllt das letzte Bild einer unvollständigen Reihe die ganze Breite —
   bei 4, 5 und 7 Bildern, wie sie in den übernommenen Beiträgen vorkommen,
   sah das nach einem Fehler aus. Das Raster hält alle Spalten gleich breit
   und lässt eine angefangene Reihe angefangen. */
.kr-article .wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  align-items: start;
}

/* Das :not(#individual-image) ist kein Versehen und keine Kosmetik.

   WordPress setzt die Spaltenbreiten seines Flex-Layouts mit genau diesem
   Selektor: ".wp-block-gallery.has-nested-images figure.wp-block-image:not(
   #individual-image) { width: calc(33.33% - …) }". Das :not() mit einer
   ID-Bedingung hebt die Spezifität auf ID-Ebene — eine Regel aus reinen
   Klassen verliert dagegen, egal wie viele Klassen sie nennt und egal wie
   spät sie geladen wird.

   Im Raster sind diese Prozentbreiten schädlich: sie rechnen dann gegen die
   Breite der Rasterspalte statt gegen die Galerie, und die Bilder schrumpften
   auf ein Fünftel. Mit derselben :not()-Bedingung liegt diese Regel eine
   Klasse darüber und gewinnt.

   width: 100% statt auto, weil die Figure selbst ein Flex-Container ist und
   sich mit auto auf ihren Inhalt zusammenzieht statt die Spalte zu füllen. */
.kr-article .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  width: 100%;
  flex: none;
  margin: 0;
}

.kr-article .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.kr-article figcaption {
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  color: var(--text-subtle);
  margin-block-start: var(--space-2);
  text-align: center;
}

/* --- Zurück zur Übersicht -------------------------------------------------- */

.kr-article__back {
  margin-block-start: clamp(var(--space-10), 5vw, var(--space-16));
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--border-subtle);
}

.kr-article__back a {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--kr-red);
  text-decoration: none;
}

.kr-article__back a:hover { text-decoration: underline; }