/* ════════════════════════════════════════════════
   CARO KASPEREIT — Portfolio CSS
   Für Blank Canvas Theme — sauberer Neuaufbau
   ════════════════════════════════════════════════ */

:root {
  --s:  #0a0a0a;
  --w:  #ffffff;
  --gh: #f2f2f2;
  --gm: #999999;
  --gd: #3a3a3a;
  --u:  #1B2FCB;
  --x:  'DM Mono', monospace;
}

/* Streifen ganz oben */
body::before {
  content: 'Kreativleistung aus Berlin';
  display: block;
  background: var(--u);
  color: #ffffff;
  text-align: center;
  padding: 0.55rem 2rem;
  font-family: var(--x);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Grundlayout */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--w);
  color: var(--s);
  font-family: var(--x);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.03em;
}

.entry-title, .page-title, h1.entry-title, .wp-block-post-title, .entry-header {
  display: none !important;
}

hr, .wp-block-separator { display: none !important; }

/* Navigation */
header {
  background: var(--w) !important;
  border-bottom: 1px solid var(--s) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

.wp-block-site-title a {
  font-family: var(--x) !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.ck-sitename a {
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  font-weight: 700 !important;
}

/* Hero — auf großen Screens seitenfüllend */
.ck-hero { gap: 20px !important; }
.ck-hero .wp-block-image { flex: 1 1 50% !important; min-width: 0 !important; margin: 0 !important; }
.ck-hero .wp-block-image img { width: 100% !important; height: 72vh !important; object-fit: cover !important; }
@media (max-width: 860px) {
  .ck-hero { flex-direction: column !important; }
  .ck-hero .wp-block-image img { height: 46vh !important; }
}

.wp-block-navigation a {
  font-family: var(--x) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  transition: color 0.15s !important;
}

.wp-block-navigation a:hover { color: var(--u) !important; }

/* Überschriften — bewusst serifenlos, DM Mono, kräftiger als Fließtext */
h1, h2, h3 {
  font-family: var(--x) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* Neu heute: Block-Schatten + CSS-Kipp-Effekt auf den Hero-Bildern */
.ck-shadow img, .ck-shadow.wp-block-image img {
  box-shadow: 9px 9px 0 var(--u);
  border: 1px solid var(--s);
}
.ck-shadow-mirror img, .ck-shadow-mirror.wp-block-image img {
  box-shadow: -9px 9px 0 var(--u);
  border: 1px solid var(--s);
}
.ck-tilt { perspective: 700px; }
.ck-tilt img { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.ck-tilt:hover img { transform: rotateY(-8deg) rotateX(4deg) scale(1.02); }
.ck-tilt-mirror:hover img { transform: rotateY(8deg) rotateX(4deg) scale(1.02); }

/* Galerien — global: blockige Ultramarin-Fläche fährt beim Hover ein, passend zum Schlagschatten-Stil */
.wp-block-gallery.has-nested-images { gap: 10px !important; }

.wp-block-gallery.has-nested-images figure.wp-block-image {
  margin: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

.wp-block-gallery.has-nested-images figure.wp-block-image img {
  display: block !important;
  width: 100% !important;
}

.wp-block-gallery.has-nested-images figure.wp-block-image::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--u) !important;
  transform: translateY(100%) !important;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:hover::after {
  transform: translateY(0) !important;
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 1.5rem !important;
  font-family: var(--x) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--w) !important;
  background: none !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease 0.1s !important;
  z-index: 2 !important;
  line-height: 1.8 !important;
  margin: 0 !important;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:hover figcaption {
  opacity: 1 !important;
}

/* Etwas Weißraum: vereinzelte Bilder versetzt für unregelmäßige Lücken */
.wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(4n+2) {
  margin-top: 28px !important;
}
.wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(5n+4) {
  margin-top: -14px !important;
}

/* Tattoo-Kapitel — hell, das ruhige Gegenstück zur Illustration */
.seite-tattoos { padding: 4rem 3rem !important; }

.seite-tattoos h2 {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  border-bottom: 1px solid rgba(0,0,0,0.12) !important;
  padding-bottom: 1rem !important;
  margin-bottom: 2.5rem !important;
}

/* Illustration-Kapitel — invertiert, bewusster Kontrast als Kapitelwechsel */
.seite-illustrationen {
  background: var(--s) !important;
  padding: 4rem 3rem !important;
}

.seite-illustrationen h2 {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  color: var(--w) !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  padding-bottom: 1rem !important;
  margin-bottom: 2.5rem !important;
}

/* Über mich — bereit für die noch zu erstellende Sektion */
.seite-about {
  padding: 5rem 3rem !important;
  border-top: 1px solid var(--s) !important;
}

.seite-about h2 {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  border-bottom: 1px solid rgba(0,0,0,0.12) !important;
  padding-bottom: 1rem !important;
  margin-bottom: 2rem !important;
}

.seite-about p {
  font-size: 0.82rem !important;
  line-height: 2 !important;
  color: var(--gd) !important;
}

.seite-about .ck-tag {
  display: inline-block;
  font-family: var(--x);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid var(--s);
  padding: 0.4rem 0.75rem;
  margin: 0 0.4rem 0.4rem 0;
}

/* Footer */
footer {
  background: var(--s) !important;
  color: rgba(255,255,255,0.5) !important;
}

footer p, footer a {
  font-family: var(--x) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.5) !important;
  text-decoration: none !important;
}

/* Responsive */
@media (max-width: 860px) {
  .seite-tattoos, .seite-illustrationen, .seite-about {
    padding: 3rem 1.5rem !important;
  }
}