/* ============================================================
   KULIMO - TYPOGRAFIE-FUNDAMENT
   Schriftsystem:
   - Ueberschriften, Unterueberschriften, Labels, Kennzahlen,
     Navigation und Buttons  ->  Geist (Markenschrift)
   - Fliesstext: Absaetze, Listen, Tabellen, Formularfelder
     ->  system-ui (native Systemschrift, beste Lesbarkeit)

   Hinweis zur Technik: die Bausteine der Seite bringen teilweise
   eigene !important-Regeln mit. Damit das Schriftsystem ueberall
   zuverlaessig gewinnt, sind die Selektoren bewusst hoch
   gewichtet (:not(#klm-typo-guard) ist eine nicht existierende
   ID und dient nur der Gewichtung).
   ============================================================ */

/* 1. SCHRIFT-STACKS */
:root{
  --klm-display: 'Geist','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --klm-text: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue','Noto Sans',Arial,sans-serif;
  --klm-font: var(--klm-display);
  --wp--preset--font-family--plus-jakarta-sans: var(--klm-display);
}

/* 2. FLIESSTEXT -> system-ui */
html, body { font-family: var(--klm-text) !important; }
html body :is(div,p,li,ul,ol,dl,dt,dd,td,th,table,caption,blockquote,figcaption,
  small,summary,details,address,time,cite,input,textarea,select,legend,fieldset,
  output,section,article,aside,footer,main,figure,form,hgroup),
html body span:not(:where([class*="icon"],.fa,.fas,.fab,.far,.dashicons)) {
    font-family: var(--klm-text) !important;
}

/* 3. UEBERSCHRIFTEN -> Geist */
html body :is(h1,h2,h3,h4,h5,h6,.wp-block-heading):not(#klm-typo-guard),
html body :is(h1,h2,h3,h4,h5,h6,.wp-block-heading):not(#klm-typo-guard) * {
    font-family: var(--klm-display) !important;
}

/* 3b. UNTERUEBERSCHRIFTEN, LABELS, KENNZAHLEN -> Geist */
html body :is([class*="title"],[class*="Title"],[class*="heading"],[class*="Heading"],
  [class*="headline"],[class*="subhead"],[class*="eyebrow"],[class*="kicker"],
  [class*="overline"],[class*="label"],[class*="badge"],[class*="chip"],
  [class*="stat"],[class*="metric"],[class*="counter"],[class*="kpi"],
  [class*="uppercase"],[class*="tracking-w"],[class*="tracking-["]):not(#klm-typo-guard) {
    font-family: var(--klm-display) !important;
}

/* 3c. DISPLAY-GROESSEN (keine Absaetze) -> Geist */
html body :is([class*="text-3xl"],[class*="text-4xl"],[class*="text-5xl"],
  [class*="text-6xl"],[class*="text-7xl"],[class*="text-8xl"],
  [class*="text-9xl"]):not(p):not(#klm-typo-guard) {
    font-family: var(--klm-display) !important;
}

/* 3d. NAVIGATION, BUTTONS, FORMULAR-LABELS -> Geist */
html body :is(nav,.nav,[class*="nav-"],[class*="navbar"],[class*="navigation"],
  [class*="menu"],button,[role="button"],.btn,[class*="btn"],[class*="button"],
  .wp-block-button__link,label,input[type="submit"],input[type="button"],
  input[type="reset"]):not(#klm-typo-guard),
html body :is(nav,.nav,[class*="nav-"],[class*="navbar"],[class*="navigation"],
  [class*="menu"],button,[role="button"],.btn,[class*="btn"],[class*="button"],
  .wp-block-button__link,label):not(#klm-typo-guard) * {
    font-family: var(--klm-display) !important;
}

/* 3e. Module mit eigener ID-Spezifitaet nachziehen */
html body #klm-hub, html body #klm-hub *,
html body #klm-hub [class], html body #klm-hub [class] *,
html body #klm-hub [class] [class], html body #klm-hub [class] [class] *,
html a#klm-skip,
html #klm-awards-section-strict.klm-isolated-module .klm-awards-headline,
html #klm-awards-section-strict.klm-isolated-module .klm-awards-subhead,
html #klm-awards-section-strict.klm-isolated-module .klm-award-label,
html #kpt-section :is(h1,h2,h3,h4,h5,h6,[class*="title"],[class*="label"]) {
    font-family: var(--klm-display) !important;
}
html #kpt-section :is(p,li),
html #wp--skip-link--target .sharedaddy :is(p,a,div,span,h3),
html [id^="jp-carousel"] :is(p,a,span,div,label,h2,textarea,input) {
    font-family: var(--klm-text) !important;
}

/* 4. BEWUSST GESETZTE AKZENT-SCHRIFTEN BLEIBEN ERHALTEN */
html body .has-instrument-serif-font-family:not(#klm-typo-guard), html body .has-instrument-serif-font-family:not(#klm-typo-guard) * { font-family: 'Instrument Serif', serif !important; }
html body .has-lora-font-family:not(#klm-typo-guard), html body .has-lora-font-family:not(#klm-typo-guard) * { font-family: Lora, serif !important; }
html body .has-playfair-display-font-family:not(#klm-typo-guard), html body .has-playfair-display-font-family:not(#klm-typo-guard) * { font-family: 'Playfair Display', serif !important; }

/* 5. MONOSPACE */
html body :is(code,kbd,pre,samp,.font-mono):not(#klm-typo-guard),
html body :is(code,kbd,pre,samp,.font-mono):not(#klm-typo-guard) * {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace !important;
}

/* 6. TYPO-SKALA (Standardwerte - Klassen im Seiten-Code duerfen ueberschreiben) */
h1, h2, h3, h4, h5, h6 {
    text-transform: none;
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 1.5rem !important;
}
h1 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.03em; line-height: 1.06; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem);  letter-spacing: -0.02em; line-height: 1.12; }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.875rem); letter-spacing: -0.01em; line-height: 1.2; }
h4 { font-size: 1.25rem;   letter-spacing: normal; line-height: 1.3; }
h5 { font-size: 1.0625rem; line-height: 1.35; }
h6 { font-size: 0.9375rem; letter-spacing: 0.02em; line-height: 1.4; }

/* 7. FLIESSTEXT-GROESSEN */
body { font-size: 1.0625rem; line-height: 1.7; font-weight: 400; }
p    { font-size: 1.0625rem; line-height: 1.7; }

/* 8. BARRIEREFREIHEIT: Legasthenie-Modus behaelt Vorrang */
html.klm-dys body :where(p,li,a,span,h1,h2,h3,h4,h5,h6,button,input,textarea,label,td,th,figcaption,blockquote,strong,em,small,div):not(#klm-typo-guard):not(code):not(kbd):not(pre):not(samp),
html.klm-dys body #klm-hub *, html.klm-dys body #klm-awards-section-strict * {
    font-family: Verdana, Tahoma, 'Trebuchet MS', Arial, sans-serif !important;
}

/* 1. THE GRID: Force 4 equal columns and 100% width */
ul.wp-block-latest-posts {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 30px 0 !important;
    list-style: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 2. THE CARD: Force width and portrait shape */
ul.wp-block-latest-posts li {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    width: 100% !important; /* Forces card to fill the grid column */
    min-height: 550px !important; /* Sets the height */
    padding: 30px 24px !important;
    margin: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background-color: #111 !important;
    box-sizing: border-box !important;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* 3. THE IMAGE: Forced Background Coverage */
ul.wp-block-latest-posts li .wp-block-latest-posts__featured-image,
ul.wp-block-latest-posts li .wp-block-latest-posts__featured-image a,
ul.wp-block-latest-posts li img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    max-width: none !important;
    max-height: none !important;
    transition: transform 0.6s ease !important;
}

/* 4. THE GRADIENT OVERLAY */
ul.wp-block-latest-posts li::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* 5. THE TEXT: Prevent vertical stacking */
ul.wp-block-latest-posts li > a:not(.wp-block-latest-posts__featured-image),
ul.wp-block-latest-posts li div,
ul.wp-block-latest-posts li time {
    position: relative !important;
    z-index: 2 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    /* CRITICAL: Stops the letter-by-letter stacking */
    word-break: normal !important; 
    overflow-wrap: break-word !important;
    white-space: normal !important; 
}

/* Title Styling */
ul.wp-block-latest-posts li > a:not(.wp-block-latest-posts__featured-image) {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
}

/* Date Styling */
ul.wp-block-latest-posts li .wp-block-latest-posts__post-date {
    font-size: 0.85rem !important;
    opacity: 0.8 !important;
}

/* INTERACTION: Hover Effects */
ul.wp-block-latest-posts li:hover {
    transform: translateY(-8px) !important;
}
ul.wp-block-latest-posts li:hover img {
    transform: scale(1.1) !important;
}

/* RESPONSIVE: Tablet & Mobile */
@media (max-width: 1024px) {
    ul.wp-block-latest-posts { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    ul.wp-block-latest-posts { grid-template-columns: 1fr !important; }
    ul.wp-block-latest-posts li { min-height: 450px !important; }
}