/* ════════════════════════════════════════════════
   CARO KASPEREIT – Portfolio CSS
   Für Blank Canvas Theme
   ════════════════════════════════════════════════ */

/* ── FARBVARIABLEN ── */
:root {
  --s:  #0a0a0a;
  --w:  #ffffff;
  --gh: #f2f2f2;
  --gm: #999999;
  --gd: #3a3a3a;
  --u:  #1c2fbd;
  --t:  'Cormorant Garamond', serif;
  --x:  'DM Mono', monospace;
}

/* ════════════════════════════════════════════════
   BLAUER 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: 300;
}

/* ════════════════════════════════════════════════
   GRUNDLAYOUT
   ════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

/* Automatische WordPress-Abstände entfernen */
.site-content,
.entry-content,
.entry-content > *,
.post-content,
.page-content {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}

/* Seitentitel (automatisch von WordPress) verstecken */
.entry-title,
.page-title,
h1.entry-title,
.wp-block-post-title,
.entry-header {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Alle Trennlinien entfernen */
hr, .wp-block-separator {
  display: none !important;
}

/* ════════════════════════════════════════════════
   GALERIE – ABSTÄNDE + HOVER (exakte Blank Canvas Klassen)
   ════════════════════════════════════════════════ */

.wp-block-gallery.has-nested-images {
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !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;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:hover img {
  transform: scale(1.05) !important;
}

/* Hover: Ultramarin flächig ohne Verlauf */
.wp-block-gallery.has-nested-images figure.wp-block-image::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(28, 47, 189, 0.6) !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

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

/* Bildunterschrift erscheint beim Hover zentriert */
.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.18em !important;
  text-transform: uppercase !important;
  color: var(--w) !important;
  background: none !important;
  opacity: 0 !important;
  transition: opacity 0.3s !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;
}

/* ════════════════════════════════════════════════
   NAVIGATION
   ════════════════════════════════════════════════ */

#site-header,
.site-header,
header {
  background: var(--w) !important;
  border-bottom: 1px solid var(--s) !important;
  padding: 1rem 3rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

/* Seitenname */
.site-title a,
.site-title {
  font-family: var(--t) !important;
  font-size: 1.3rem !important;
  font-weight: 300 !important;
  font-style: normal !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--s) !important;
  text-decoration: none !important;
}

/* Seitenbeschreibung ausblenden */
.site-description {
  display: none !important;
}

/* Menü */
.main-navigation ul,
nav ul {
  list-style: none !important;
  display: flex !important;
  gap: 2.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.main-navigation a,
nav ul a {
  font-family: var(--x) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--s) !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}

.main-navigation a:hover,
nav ul a:hover {
  color: var(--u) !important;
}

/* ════════════════════════════════════════════════
   TATTOO-SEITE
   Klasse "seite-tattoos" an Gruppe-Block vergeben
   ════════════════════════════════════════════════ */

.seite-tattoos {
  background: var(--s) !important;
  color: var(--w) !important;
  padding: 4rem 3rem !important;
}

.seite-tattoos h1,
.seite-tattoos h2 {
  font-family: var(--t) !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 300 !important;
  letter-spacing: 0.08em !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;
}

/* Beschreibungstext */
.seite-tattoos > p,
.seite-tattoos .wp-block-paragraph {
  font-size: 0.75rem !important;
  line-height: 1.9 !important;
  color: rgba(255,255,255,0.5) !important;
  max-width: 520px !important;
  margin-bottom: 3rem !important;
}

/* Galerie ohne Abstände */
.seite-tattoos .wp-block-gallery {
  gap: 3px !important;
}

/* Bilder */
.seite-tattoos .wp-block-gallery .wp-block-image,
.seite-tattoos .wp-block-gallery figure {
  overflow: hidden !important;
  position: relative !important;
  margin: 0 !important;
}

.seite-tattoos .wp-block-gallery .wp-block-image img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: block !important;
  width: 100% !important;
}

.seite-tattoos .wp-block-gallery .wp-block-image:hover img {
  transform: scale(1.05) !important;
}

/* Hover: Ultramarin flächig */
.seite-tattoos .wp-block-gallery .wp-block-image::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(28, 47, 189, 0.6) !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.seite-tattoos .wp-block-gallery .wp-block-image:hover::after {
  opacity: 1 !important;
}

/* Bildunterschrift beim Hover zentriert anzeigen */
.seite-tattoos .wp-block-gallery 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.18em !important;
  text-transform: uppercase !important;
  color: var(--w) !important;
  background: none !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
  z-index: 2 !important;
  line-height: 1.8 !important;
}

.seite-tattoos .wp-block-gallery .wp-block-image:hover figcaption {
  opacity: 1 !important;
}

/* ════════════════════════════════════════════════
   ILLUSTRATION-SEITE
   Klasse "seite-illustrationen" an Gruppe-Block vergeben
   ════════════════════════════════════════════════ */

.seite-illustrationen {
  background: var(--w) !important;
  padding: 4rem 3rem !important;
}

.seite-illustrationen h1,
.seite-illustrationen h2 {
  font-family: var(--t) !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 300 !important;
  letter-spacing: 0.08em !important;
  color: var(--s) !important;
  border-bottom: 1px solid rgba(0,0,0,0.12) !important;
  padding-bottom: 1rem !important;
  margin-bottom: 2.5rem !important;
}

/* Beschreibungstext */
.seite-illustrationen > p,
.seite-illustrationen .wp-block-paragraph {
  font-size: 0.75rem !important;
  line-height: 1.9 !important;
  color: var(--gd) !important;
  max-width: 520px !important;
  margin-bottom: 3rem !important;
}

/* Galerie */
.seite-illustrationen .wp-block-gallery {
  gap: 1.5rem !important;
}

.seite-illustrationen .wp-block-gallery .wp-block-image,
.seite-illustrationen .wp-block-gallery figure {
  overflow: hidden !important;
  position: relative !important;
  margin: 0 !important;
}

.seite-illustrationen .wp-block-gallery .wp-block-image img {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: block !important;
  width: 100% !important;
}

.seite-illustrationen .wp-block-gallery .wp-block-image:hover img {
  transform: scale(1.04) !important;
}

/* Hover: Ultramarin flächig */
.seite-illustrationen .wp-block-gallery .wp-block-image::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(28, 47, 189, 0.6) !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.seite-illustrationen .wp-block-gallery .wp-block-image:hover::after {
  opacity: 1 !important;
}

/* Bildunterschrift beim Hover */
.seite-illustrationen .wp-block-gallery 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.18em !important;
  text-transform: uppercase !important;
  color: var(--w) !important;
  background: none !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
  z-index: 2 !important;
  line-height: 1.8 !important;
}

.seite-illustrationen .wp-block-gallery .wp-block-image:hover figcaption {
  opacity: 1 !important;
}

/* ════════════════════════════════════════════════
   ÜBER MICH
   Klasse "seite-about" an Gruppe-Block vergeben
   ════════════════════════════════════════════════ */

.seite-about {
  padding: 5rem 3rem !important;
  border-top: 1px solid var(--s) !important;
}

.seite-about h1,
.seite-about h2 {
  font-family: var(--t) !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 300 !important;
  letter-spacing: 0.08em !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;
}

/* ════════════════════════════════════════════════
   STARTSEITE HERO
   Klasse "portfolio-hero" an Spalten-Block vergeben
   ════════════════════════════════════════════════ */

.portfolio-hero {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  min-height: 92vh !important;
}

.portfolio-hero .wp-block-column {
  display: flex !important;
  align-items: flex-end !important;
  padding: 3rem !important;
  min-height: 92vh !important;
}

.portfolio-hero .wp-block-column:first-child {
  background: var(--s) !important;
}

.portfolio-hero .wp-block-column:last-child {
  background: var(--gh) !important;
}

.portfolio-hero .wp-block-column:first-child h2 {
  font-family: var(--t) !important;
  font-size: clamp(3rem, 6vw, 5.5rem) !important;
  font-weight: 300 !important;
  color: var(--w) !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.portfolio-hero .wp-block-column:last-child h2 {
  font-family: var(--t) !important;
  font-size: clamp(3rem, 6vw, 5.5rem) !important;
  font-weight: 300 !important;
  color: var(--s) !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.portfolio-hero .wp-block-column:first-child p {
  font-size: 0.55rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.4) !important;
  margin: 0 0 0.6rem !important;
}

.portfolio-hero .wp-block-column:last-child p {
  font-size: 0.55rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--gm) !important;
  margin: 0 0 0.6rem !important;
}

/* ════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════ */

.site-footer,
footer {
  background: var(--s) !important;
  padding: 1.5rem 3rem !important;
  color: rgba(255,255,255,0.3) !important;
}

.site-footer p,
.site-footer a,
footer p,
footer a {
  font-family: var(--x) !important;
  font-size: 0.55rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.3) !important;
  text-decoration: none !important;
}

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */

@media (max-width: 860px) {
  #site-header, .site-header, header {
    padding: 1rem 1.5rem !important;
  }
  .portfolio-hero {
    grid-template-columns: 1fr !important;
  }
  .portfolio-hero .wp-block-column {
    min-height: 50vw !important;
  }
  .seite-tattoos,
  .seite-illustrationen,
  .seite-about {
    padding: 3rem 1.5rem !important;
  }
}