/**
 * Blocks - WordPress Block Editor Overrides
 *
 * Werkstatt-spezifische Block-Anpassungen.
 * Alignment-Klassen und Cover-Blur werden von WordPress Core / Abisko geliefert.
 *
 * @package Werkstatt
 * @version 1.4.0
 * @updated 2026-03-27 — Zeitungs-Layout für Post Preview (#3)
 *
 * v1.4.0: Dots-Ornament (::after), Breathe via padding-inline/block.
 *         Hover auf inset box-shadow reduziert (kein Padding-Wachstum mehr).
 *         Keine Spaltenlinien — Weissraum definiert die Spalten.
 * v1.3.0: Hardcoded Timings durch --content-transition-* ersetzt.
 *         --post-hover-border / --post-hover-padding als CSS Custom Properties.
 */

/* ========================================
   ZITAT-BLÖCKE (core/quote, core/pullquote)
   Typografie (Grösse, Gewicht, Stil) via theme.json.
   Guillemets «» via CSS — kein JS, kein Markup-Eingriff.
   ======================================== */

/* core/quote — Guillemets um den Zitattext */
.wp-block-quote p:first-of-type::before {
  content: "«\00A0"; /* Nicht-umbrechendes Leerzeichen nach « */
}
.wp-block-quote p:last-of-type::after {
  content: "\00A0»"; /* Nicht-umbrechendes Leerzeichen vor » */
}

/* core/pullquote — Abiskos " (80px, weight 800) durch « ersetzen */
.wp-block-pullquote blockquote::before {
  content: "«";
  font-size: 4em;    /* relativ zur eingestellten Zitat-Schriftgrösse */
  font-weight: 300;  /* Uni Neue Light — kein fettes Anführungszeichen */
  font-style: italic;
  line-height: 0.8;
  margin: 0 0 0.1em -0.05em;
}

/* ========================================
   IMAGE & LOGO BLOCKS
   ======================================== */

/**
 * Bilder und Logos: kein Brutalist-A Hover-Effekt
 * (verhindert den 7% Background auf Bild-Links)
 */

.wp-block-image a:hover,
.wp-block-site-logo a:hover {
  background: none;
}

/* ========================================
   OVERFLOW CONTROL
   ======================================== */

/**
 * Verhindert horizontalen Overflow
 * (besser als overflow-x: hidden weil es Sticky nicht bricht)
 */

body {
  overflow-x: clip;
}

/* ========================================
   POST TITLE
   ======================================== */

/**
 * Post-Titel: Uni Neue Heavy, kein Link-Styling
 */

.wp-block-post-title {
  font-family: "Uni Neue Heavy", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-weight: 800;
  font-synthesis: none;
}

.wp-block-post-title a {
  border-bottom: none;
  text-decoration: none;
}

.wp-block-post-title a:hover,
.wp-block-post-title a:focus {
  border-bottom: none;
  background: none;
}

/* ========================================
   POST PREVIEW — ZEITUNGS-LAYOUT (#3)
   ======================================== */

/**
 * Zeitungs-Spaltenstruktur für Query-Loop Post-Items.
 *
 * Vertikale Spaltenlinie: border-right auf jedem Item.
 * overflow: hidden auf .wp-block-query clippt die Linie der letzten Spalte
 * bündig — kein nth-child nötig, funktioniert für alle Spaltenbreiten.
 *
 * Zeilentrenner: Dots-Ornament (·  ·  ·) via ::after statt Linie.
 * Dots sind kein Problem an Grid-Kreuzungen (im Gegensatz zu einer Linie),
 * da Punkte visuell nicht "verbinden".
 *
 * Hover: inset box-shadow + Hintergund. Kein Padding-Wachstum mehr —
 * strukturelles Padding ist jetzt fix (Spaltendefinition).
 * Timing: gleiche Asymmetrie wie Links — schnell rein, langsam raus + Delay.
 *
 * FARBEN (ColorDots-Rollen):
 *   Hover-Rand:  --wp--preset--color--main-link  → Rolle "Main Link"
 *   Hover-BG:    --wp--preset--color--main-bg    → Rolle "Main BG"
 *
 * ⚠ BEKANNTE EINSCHRÄNKUNG (2026-03-05):
 *   main-link und main-bg sind "root"-Rollen — erzeugen keine CSS-Vars.
 *   Fallbacks aktiv: Rand = oklch(0.12 0 0), BG = oklch(1 0 0).
 *   Fix: #220:DOTS
 *
 *   --post-col-gap    Padding beidseitig der Spaltenlinie (Atemraum)
 *   --post-row-gap    Padding oben + unten pro Zeile
 *   --post-sep-color  Spaltenlinie + Dots-Ornament (currentColor gedimmt)
 */

.wp-block-post-template {
  column-gap: 0; /* WP-Gap entfernt — Abstand kommt via padding-inline */
  row-gap: 0;
}

li.wp-block-post {
  --post-col-gap: 1em; /* Horizontaler Atemraum (ohne Linie etwas kompakter) */
  --post-row-gap: 2.25em; /* Vertikaler Atemraum (Zeilen klar voneinander getrennt) */
  --post-sep-color: color-mix(in oklch, currentColor 18%, transparent);

  padding-inline: var(--post-col-gap);
  padding-block: var(--post-row-gap);

  /* Hover: Ausgangs-State */
  box-shadow: inset 0 0 0 0px
    var(--wp--preset--color--accent);
  background-color: transparent;
  border-radius: 3px;

  /* Raus: langsam + Delay */
  transition: box-shadow var(--content-transition-out) ease-in
      var(--content-transition-delay),
    background-color var(--content-transition-out) ease-in
      var(--content-transition-delay);
}

li.wp-block-post:hover {
  box-shadow: inset 0 0 0 1px
    var(--wp--preset--color--accent);
  background-color: var(--wp--preset--color--background);

  /* Rein: schnell */
  transition: box-shadow var(--content-transition-in-slow) ease-out,
    background-color var(--content-transition-in) ease-out;
}

/* Breathe: Bild dehnt sich auf Hover, schwingt langsam zurück */

li.wp-block-post .wp-block-post-featured-image {
  overflow: hidden; /* Geclippter Rahmen für scale-Animation */
}

li.wp-block-post .wp-block-post-featured-image img {
  transform: scale(1);
  transition: transform 20s ease-out; /* langsam raus — Breath nachschwingt */
  will-change: transform;
}

li.wp-block-post:hover .wp-block-post-featured-image img {
  transform: scale(5);
  transition: transform 60s ease-in; /* etwas schneller rein */
}

/* Dots-Ornament: Zeilentrenner zwischen Karten-Zeilen */
li.wp-block-post::after {
  content: "·  ·  ·"; /* U+00B7 Middle Dot — dezenter als Bullet */
  display: block;
  text-align: center;
  margin-top: var(--post-row-gap);
  font-size: 0.85em;
  letter-spacing: 0.5em;
  color: var(--post-sep-color);
}

li.wp-block-post:last-child::after {
  display: none; /* Kein Ornament nach dem letzten Item */
}

/* ========================================
   ARCHIVES
   ======================================== */

/**
 * Lange Archiv-Listen: Scroll statt Endlos-Höhe
 */

ul.wp-block-archives {
  max-height: 50vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

/* ========================================
   KATEGORIE-ENDICON (.kat-endicon)
   ======================================== */

/**
 * Icon nach dem Post-Loop, rechts unten,
 * ausserhalb der Inhaltsspalte ragend.
 *
 * Positionierung relativ zu <main> (position: relative).
 * Das Icon ragt rechts über die alignwide-Spalte hinaus.
 * pointer-events: none — kein Klick-Fang.
 *
 * @since 1.5.0
 * @ticket Icon-System V1 (#115)
 */

/* ========================================
   PAGINATION: FOLGESEITEN ZURÜCKSKALIEREN
   ========================================

/**
 * Auf Seite 2, 3, etc. den Hero-Bereich (H1, Teaser, Bild)
 * kompakt darstellen. Der Besucher kennt die Seite bereits.
 *
 * Body-Class 'is-paged' wird in functions.php gesetzt
 * wenn is_paged() === true.
 *
 * H1 → H2-Grösse, Teaser/Bild ausblenden.
 *
 * @since 2.2.0
 * @ticket #372
 */

/* H1 auf Folgeseiten: zurückskaliert */
body.is-paged main > .wp-block-group:first-child h1 {
  font-size: var(--wp--preset--font-size--x-large, 2rem);
  margin-bottom: 0.5em;
}

/* Teaser-Text und Hero-Bild auf Folgeseiten: weg */
/* Media-Text-Block (Bild + Teaser) direkt in entry-content */
body.is-paged .entry-content > .wp-block-media-text:first-child,
/* Fallback: Group-wrapped hero elements */
body.is-paged main > .wp-block-group:first-child h2,
body.is-paged main > .wp-block-group:first-child .wp-block-media-text,
body.is-paged main > .wp-block-group:first-child figure,
body.is-paged main > .wp-block-group:first-child blockquote,
body.is-paged main > .wp-block-group:first-child .wp-block-cover {
  display: none;
}

/* ========================================
   ENDICON (Kategorie-Icons)
   ======================================== */

/* main braucht position: relative als Anker */
main:has(.kat-endicon) {
  position: relative;
}

.kat-endicon {
  /* Positionierung: rechts unten, aus der Spalte ragend */
  position: absolute;
  bottom: var(--wp--preset--spacing--60, 2rem);
  right: calc(-1 * var(--wp--preset--spacing--40, 1rem));
  /* Grösse: gross genug um als Marke zu wirken */
  width: clamp(80px, 12vw, 160px);
  /* Kein Einfluss auf Layout oder Interaktion */
  pointer-events: none;
  margin: 0;
  padding: 0;
  z-index: 0;
  /* Dezenz via Opacity — Startwert zum Justieren */
  opacity: 0.12;
}