/*
Theme Name: Mono Studio
Theme URI: https://studio.julia-scharl.cloud
Author: Julia Scharl Studio
Author URI: https://studio.julia-scharl.cloud
Description: 1:1-Portierung des Mono-Designs als Blocktheme. Texte und Karten sind im Editor bearbeitbar, der Graph ist eine eigenständige Komponente. Design lebt komplett in dieser Datei.
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.3.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mono-studio
Tags: block-theme, full-site-editing, one-column
*/

/* ==========================================================================
   MONO STUDIO — Design als CSS. Blöcke bleiben sauber und bearbeitbar.
   Prinzip: Klassen sitzen auf Sektions-Gruppen (.jn-*), die Texte darin
   werden über Nachfahren-Selektoren gestylt und bleiben so valide Blöcke.
   ========================================================================== */

/* Grund-Reset: ohne border-box sprengt width:100% + padding schmale
   Viewports (das Glas-Panel ragte auf dem Handy aus dem Bildschirm). */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --jn-bg: #15161b;
  --jn-ink: #f2f3f5;
  --jn-muted: #9a9ea8;
  --jn-muted-2: #a6aab4;
  --jn-label: #9aa0ac;
  --jn-line: rgba(255, 255, 255, .14);
}

html, body { background: var(--jn-bg); }

body {
  color: var(--jn-ink);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  background-color: var(--jn-bg);
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.5px);
  background-size: 26px 26px;
  overflow-x: hidden;
}

a { color: inherit; }

/* --- Sektion: zentrierter Inhaltsrahmen ---
   Gleichmäßiger, ruhiger Vertikalrhythmus: jede Sektion bringt oben und
   unten denselben Abstand mit. Kein Sonderfall mehr → keine schiefen Lücken. */
.jn-section {
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(44px, 6vw, 68px) clamp(22px, 5vw, 54px);
}
.jn-section .wp-block-heading { color: var(--jn-ink); font-weight: 600; letter-spacing: -.02em; }
.jn-section p { color: var(--jn-muted); line-height: 1.6; }
/* Inhalts-Links (CTAs, Verweise) heben sich vom Fließtext ab */
.jn-section a { color: #e2e4e8; }

/* Kleine Großbuchstaben-Label (Eyebrow) — ohne !important, damit Ottos
   eigene Einstellungen im Editor gewinnen dürfen. */
.jn-eyebrow {
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--jn-label);
  margin: 0;
}

/* ========================= HERO ========================= */
.jn-hero-sec {
  position: relative;
  min-height: 100vh;
  padding: clamp(20px, 4vw, 48px);
  overflow: hidden;
  background:
    radial-gradient(circle at 64% 46%, #22242b, #15161b 72%);
  display: grid;
  grid-template-columns: minmax(0, 42%) 1fr;
  grid-template-rows: auto 1fr auto;
  gap: clamp(16px, 3vw, 40px) clamp(16px, 3vw, 40px);
  align-content: start;
}
.jn-hero-sec::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1.5px);
  background-size: 26px 26px;
  opacity: .7; z-index: 0; pointer-events: none;
}
.jn-hero-sec > * { position: relative; z-index: 2; }

/* obere Leiste (Marke + Navigation) spannt volle Breite */
.jn-topbar {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
}
.jn-topbar .brand {
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: #868a94;
}
.jn-topbar nav { display: flex; gap: 20px; font-size: 14px; color: #b4b8c0; flex-wrap: wrap; }
.jn-topbar nav a { text-decoration: none; }

/* linke Textspalte (oben) */
.jn-hero-text { grid-column: 1; grid-row: 2; align-self: center; min-width: 0; }
.jn-hero-text .jn-eyebrow { color: var(--jn-label); letter-spacing: .24em; }
.jn-hero-text h1 {
  font-size: clamp(28px, 3.8vw, 50px); font-weight: 600; line-height: 1.05;
  letter-spacing: -.03em; margin: 14px 0 0; color: var(--jn-ink);
}
.jn-hero-text > p:not(.jn-eyebrow) {
  font-size: clamp(15px, 1.5vw, 18px); color: var(--jn-muted-2); line-height: 1.6; margin-top: 16px;
}
.jn-hero-text .wp-block-buttons { margin-top: 22px; align-items: center; gap: 18px; }
.jn-hero-text .wp-block-button.is-style-ghost .wp-block-button__link {
  background: transparent; color: #b4b8c0; padding: 0; font-weight: 400; font-size: 14px;
}

/* primärer Button (heller Pill) */
.wp-block-button__link {
  background: #f2f3f5; color: #0d0e11; border-radius: 100px;
  padding: 13px 26px; font-weight: 600; font-size: 15px; text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.45); }

/* Der Block-Wrapper löst sich auf, damit Graph und Panel direkt
   in das Hero-Raster fallen — wie im Original. */
.jn-hero-visual { display: contents; }

/* Graph: rechte Spalte, vertikal zentriert und in der Höhe begrenzt,
   damit die Knoten nicht in einem übergroßen leeren Feld schweben.
   (Der ResizeObserver in view.js richtet die Knoten bei jeder
   Größenänderung neu aus, daher ist das timing-sicher.) */
#jn-graph { grid-column: 2; grid-row: 2 / 4; align-self: center; position: relative; width: 100%; height: clamp(480px, 62vh, 620px); overflow: hidden; }

/* Defensive: fehlt der Graph mal (entfernt/verschoben), zieht sich der
   Text sauber auf volle Breite, statt ein Loch zu hinterlassen. */
.jn-hero-sec:not(:has(#jn-graph)) .jn-hero-text { grid-column: 1 / -1; }

/* Glas-Panel: links unten, unter dem Text */
.jn-panel {
  grid-column: 1; grid-row: 3; align-self: end;
  position: relative; overflow: hidden; width: 100%; max-width: 360px;
  background: radial-gradient(160% 110% at 16% -16%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.05) 20%, rgba(255,255,255,0) 44%), rgba(150,156,168,.03);
  border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 22px 24px;
  backdrop-filter: url(#liquidGlass) saturate(1.5) brightness(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 2px 0 rgba(255,255,255,.60), inset 5px 7px 18px rgba(255,255,255,.11), inset -5px -8px 22px rgba(0,0,0,.36), 0 30px 60px rgba(0,0,0,.48);
}
.jn-panel #jn-kind { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #9aa0ac; }
.jn-panel #jn-title { font-size: 18px; font-weight: 600; margin: 8px 0 12px; }
.jn-panel #jn-desc { font-size: 13.5px; color: #bcc0c8; line-height: 1.7; margin: 0; }
.jn-panel #jn-json {
  margin: 18px 0 0; padding: 15px 17px; border-radius: 12px; background: rgba(10,11,14,.45);
  border: 1px solid rgba(255,255,255,.09); color: #c4c8d0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.5;
  max-height: 200px; overflow: auto; white-space: pre;
}
.jn-panel .hint { font-size: 11px; color: #6a6e78; margin-top: 16px; letter-spacing: .04em; }

/* ===================== KARTEN (Glas) ===================== */
.jn-cards { gap: 16px; }
.jn-card {
  border: 1px solid var(--jn-line); border-radius: 16px; padding: 24px;
  background: radial-gradient(155% 110% at 12% -14%, rgba(255,255,255,.30) 0%, rgba(255,255,255,.05) 18%, rgba(255,255,255,0) 42%), rgba(150,156,168,.05);
  backdrop-filter: blur(11px) saturate(1.4); -webkit-backdrop-filter: blur(11px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 2px 0 rgba(255,255,255,.54), inset 5px 7px 18px rgba(255,255,255,.10), inset -5px -8px 22px rgba(0,0,0,.32), 0 26px 54px rgba(0,0,0,.42);
  transition: transform .3s ease, border-color .3s ease;
}
.jn-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.3); }
.jn-card .wp-block-heading { font-size: 20px; margin: 0 0 8px; }
.jn-card p { font-size: 14px; color: var(--jn-muted); }
.jn-card .tag {
  display: inline-block; font-size: 11px; letter-spacing: .06em; color: #c4c8d0;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10);
  padding: 4px 11px; border-radius: 100px; margin-bottom: 4px;
}

/* Schritt-Karten (linker Strich) */
.jn-step { border-left: 2px solid #3a3e46; padding: 6px 0 6px 18px; }
.jn-step .num { font-size: 12px; color: var(--jn-label); letter-spacing: .1em; text-transform: uppercase; }
.jn-step .wp-block-heading { font-size: 19px; margin: 6px 0 0; }
.jn-step p { font-size: 14px; margin-top: 6px; }

/* Notizen-Tags */
.jn-tags .wp-block-button__link {
  background: transparent; border: 1px solid #2a2d33; color: #b4b8c0;
  border-radius: 100px; padding: 10px 18px; font-size: 14px; font-weight: 400;
}

/* Fußbereich */
.jn-footer { border-top: 1px solid rgba(255,255,255,.08); padding: clamp(40px,7vw,72px) clamp(22px,5vw,54px); }
.jn-footer .inner { max-width: 1200px; margin-inline: auto; }
.jn-footer p { color: #868a94; font-size: 14px; }

/* Sichtbarer Fokus für Tastaturnutzer (Barrierefreiheit) */
a:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid #e2e4e8;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===================== responsiv ===================== */
@media (max-width: 860px) {
  .jn-hero-sec { min-height: auto; grid-template-columns: 1fr; grid-template-rows: none; }
  .jn-topbar,
  .jn-hero-text,
  #jn-graph,
  .jn-panel { grid-column: 1; grid-row: auto; }
  #jn-graph { min-height: 62vh; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: rgba(150,156,168,.05); }
  .jn-panel { max-width: 100%; margin-top: 0; }
}