/*
 Theme Name:   Green Knights Astra Child
 Theme URI:    https://greenknights-126.de
 Description:  Dark, modern "Military Glass" design for Green Knights MMC (Astra Child).
 Author:       Green Knights / ChatGPT
 Template:     astra
 Version:      1.0.0
 Text Domain:  green-knights-astra-child
*/
:root{ --gk-primary:#0a8f49; --gk-bg:#0b0f0c; --gk-text:#d1d5db; }
body{ background:#000; color:var(--gk-text); font-family:Inter,system-ui,sans-serif; }
.gk-glass{ background:rgba(24,24,27,.6); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.1); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.45); }
.gk-pill{ display:inline-flex; align-items:center; padding:.2rem .6rem; border-radius:999px; border:1px solid rgba(16,185,129,.35); background:rgba(16,185,129,.12); color:#7ee0b6; font-size:.75rem; letter-spacing:.08em; }
.gk-btn{ display:inline-flex; gap:.5rem; align-items:center; padding:.75rem 1rem; border-radius:12px; font-weight:600; }
.gk-btn-primary{ background:#0a8f49; color:#fff; }
.gk-btn-ghost{ border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.05); color:#fff; }
.gk-section{ padding:2rem 0; }
.gk-hero{ position:relative; overflow:hidden; padding:5rem 0 2rem; background: linear-gradient(180deg, #0b0f0c 0%, #0a0a0a 60%, #000 100%); }
.gk-hero .gk-bubble1{ position:absolute; left:50%; top:-120px; width:420px; height:420px; transform:translateX(-50%); background:#0a8f49; opacity:.2; filter: blur(60px); border-radius:999px;}
.gk-hero .gk-bubble2{ position:absolute; right:40px; top:160px; width:280px; height:280px; background:#0a8f49; opacity:.12; filter: blur(50px); border-radius:999px;}
.gk-container{ max-width:1140px; margin:0 auto; padding:0 1rem; }
h1,h2,h3{ color:#fff }
.gk-grid{ display:grid; gap:1.25rem; }
@media(min-width:768px){ .gk-grid-2{ grid-template-columns:1fr 1fr } .gk-grid-3{ grid-template-columns:repeat(3,1fr) } .gk-grid-4{ grid-template-columns:repeat(4,1fr) } }
.gk-card{ padding:1.25rem; }
.gk-muted{ color:#a1a1aa }
.gk-tag{ color:#34d399; font-size:.75rem }
.gk-footer{ border-top:1px solid rgba(255,255,255,.1); padding:2.25rem 0; background:rgba(0,0,0,.5) }
.gk-link{ color:#cbd5e1; text-decoration:none }
.gk-link:hover{ color:#fff }

/* --- GK Readmore --- */
.readmore { position: relative; }
.readmore__content { overflow: hidden; }
.readmore--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;           /* <-- 5 Zeilen Vorschau */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.readmore__toggle { margin-top: .75rem; cursor: pointer; }

/* --- GK Colours: Full-Bleed & Tiles --- */
.gk-fullbleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.gk-colour-tile {
  display: grid; 
  place-items: center;
  aspect-ratio: 1 / 1;                 /* quadratische Kachel */
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

.gk-colour-label {
  margin-top: .6rem;
  text-align: center;
  color: #a1a1aa;
  font-size: .95rem;
}

/* Schild als weißes Icon rendern – egal welche Originalfarbe */
.gk-shield {
  width: 88px;
  height: 88px;
  display: block;
  filter: brightness(0) invert(1); /* macht dunkles SVG weiß */
  opacity: .95;
}

/* 5-Spalten-Grid auf großen Screens */
.gk-grid-5 { grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px){ .gk-grid-5{ grid-template-columns: repeat(2,1fr);} }
@media (min-width: 768px){ .gk-grid-5{ grid-template-columns: repeat(3,1fr);} }
@media (min-width: 1024px){ .gk-grid-5{ grid-template-columns: repeat(5,1fr);} }

/* --- HERO SPLIT (Text links • SVG rechts) --- */
.gk-hero.gk-hero--split{
  /* Dark → White Verlauf */
  background: linear-gradient(90deg, #0b0f0c 0%, #0a0a0a 56%, #ffffff 100%);
  position: relative;
}

/* Zwei Spalten bleiben, aber rechte Spalte zentriert das Bild vertikal */
.gk-hero__right{
  display:flex;
  align-items:center;           /* mittig in der Höhe */
  justify-content:flex-end;     /* Bild an die rechte Seite */
}

/* Platte hinter dem SVG (weißer Korpus) */
.gk-hero__plate{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height: clamp(320px, 56vh, 640px); /* bestimmt die Hero-Höhe */
  background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
  border-radius: 24px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  overflow:hidden;
}

/* Das SVG füllt die Höhe der Platte (mit etwas Innenabstand) */
.gk-hero__image{
  height: calc(100% - 48px);   /* „Luft“ oben/unten */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display:block;
}

/* Mobile: Verlauf bleibt dunkel (weiß würde sonst zu hell wirken) */
@media (max-width: 767px){
  .gk-hero.gk-hero--split{
    background: linear-gradient(180deg, #0b0f0c 0%, #0a0a0a 100%);
  }
  .gk-hero__plate{
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
  }
}

/* Layout-Feinschliff für GK Cross im ersten Container */
@media (max-width: 768px) {
  #about .gk-container {
    grid-template-columns: 1fr;
  }
  #about img {
    margin-top: 2rem;
  }
}

/* --- GK News Grid --- */
.gk-grid-3 {
  display:grid;
  grid-template-columns: 1fr;
  gap:1.5rem;
}
@media (min-width:640px){ .gk-grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .gk-grid-3 { grid-template-columns: repeat(3,1fr); } }

.gk-card a:hover h3,
.gk-card h3 a:hover {
  color: #0a8f49;
}

/* --- GK Officers / Members --- */
.gk-card--person {
  text-align:center;
  padding:1.5rem;
  border-radius:16px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.gk-card--person:hover {
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(0,0,0,0.35);
}
.gk-person-img {
  width:140px;
  height:140px;
  object-fit:cover;
  border-radius:50%;
  margin-bottom:.75rem;
  border:2px solid rgba(255,255,255,0.15);
}

/* Trennung Officers ↔ Members */
.gk-divider {
  margin:3rem auto;
  width:80%;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  border-radius:2px;
}

/* Grid für Members etwas enger */
.gk-grid-4 {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.25rem;
}

/* --- GK Timeline --- */
.gk-tl{ --gk: #0a8f49; }
.gk-tl-wrap{ position:relative; overflow:hidden; }
.gk-tl-track{
  display:flex; gap:2rem; overflow-x:auto; padding:1rem 0 2.25rem;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.gk-tl-track::-webkit-scrollbar{ height:8px } 
.gk-tl-track::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:999px }

.gk-tl-item{ position:relative; min-width:320px; flex:0 0 320px; scroll-snap-align:start }
@media(min-width:1280px){ .gk-tl-item{ min-width:380px; flex-basis:380px }}

/* Linie */
.gk-tl-line{
  position:absolute; left:0; right:0; top:38px; height:2px;
  background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.18), rgba(255,255,255,.08));
  pointer-events:none;
}

/* Dot/Button */
.gk-tl-dot{
  background:rgba(24,24,27,.65); border:1px solid rgba(255,255,255,.18);
  width:22px; height:22px; border-radius:999px; display:grid; place-items:center;
  margin-bottom:.75rem; cursor:pointer; transition:transform .2s ease;
}
.gk-tl-dot::after{
  content:""; width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.6);
}
.gk-tl-item.is-active .gk-tl-dot{ border-color: var(--gk); box-shadow: 0 0 0 3px rgba(10,143,73,.25) inset }
.gk-tl-item.is-active .gk-tl-dot::after{ background: var(--gk); }

.gk-tl-year{ color:#e5e7eb; font-weight:800; letter-spacing:.04em; }
.gk-tl-title{ color:#fff; font-weight:700; margin:.2rem 0 .2rem; }
.gk-tl-card{
  background:rgba(24,24,27,.6); border:1px solid rgba(255,255,255,.12); border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.45); padding:1rem; color:#cbd5e1;
  opacity:.65; transform:translateY(6px) scale(.98); transition:all .25s ease;
}
.gk-tl-item.is-active .gk-tl-card{ opacity:1; transform:translateY(0) scale(1) }

/* Mobil: vertikale Timeline */
@media(max-width: 767px){
  .gk-tl-track{ display:block; overflow:visible; padding-bottom:0 }
  .gk-tl-line{ left:12px; top:0; bottom:0; height:auto; width:2px }
  .gk-tl-item{ min-width:unset; flex:none; margin-left:2.2rem; margin-bottom:1.25rem }
  .gk-tl-dot{ position:absolute; left:-2.2rem; top:4px }
}

#hero .gk-btn {
  transition: background .25s ease, transform .25s ease;
}
#hero .gk-btn:hover {
  background:#0ec85d;
  transform:translateY(-2px);
}

/* Hero Buttons passend zum GK-Look */
#hero .gk-btn {
  background:#0a8f49;
  color:#fff;
  padding:.75rem 1.5rem;
  border-radius:.75rem;
  font-weight:600;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.1);
  transition:all .25s ease;
  box-shadow:0 4px 18px rgba(0,0,0,.3);
}
#hero .gk-btn:hover {
  background:#0ec85d;
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(10,143,73,.4);
}
#hero .gk-btn-ghost {
  background:rgba(255,255,255,.05);
}
#hero .gk-btn-ghost:hover {
  background:rgba(255,255,255,.15);
}

/* Sanfter Fade-In Effekt beim Laden */
@keyframes heroFade {
  from {opacity:0; transform:translateY(20px);}
  to {opacity:1; transform:translateY(0);}
}
#hero .gk-container {
  animation: heroFade 1s ease forwards;
}

#codex img {
  animation: gkPulse 4s ease-in-out infinite;
}
@keyframes gkPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(10,143,73,.4)); opacity: 0.85; }
  50% { filter: drop-shadow(0 0 10px rgba(10,143,73,.7)); opacity: 1; }
}

.gk-banner{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-bottom:2px solid rgba(255,255,255,.15);
}

#codex .gk-card {
  text-align: center;
}

#codex .gk-card h2,
#codex .gk-card h3,
#codex .gk-card h4,
#codex .gk-card p {
  text-align: center;
}

#codex .gk-card .readmore__content{
  margin:0 auto;
  max-width:900px;
}

#codex .readmore__content {
  text-align:center;
  margin: 0 auto;
  max-width:900px;
}

/* 5 Zeilen sichtbar */
#codex .readmore--clamped {
  display:-webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient:vertical;
  overflow:hidden;
}