/* ==========================================================================
   Symbolik-Liste — fokussierte Logo-Ausschnitte
   -------------------------------------------------------------------------- */
/* Die Section „Die Farben der Gemeinschaft" (Hero-Body) wird zu einem
   2x2-Grid. Jeder Listeneintrag zeigt das GitCover-Logo (1× geladen,
   per background-position-×-Spritesheet-Technik) und einen erläuternden
   Text.

   Das Original-Logo ist 740×740 px. Für die 88×88-Container nutzen wir
   background-size: 150px 150px (Verkleinerung um Faktor 4.9), damit
   die Form und Farbe der Elemente groß und deutlich sichtbar ist.

   Formel für background-position:
     Faktor = 150/740 ≈ 0.203
     background-position = -(clip_center_x - 44) * 0.203
                         , -(clip_center_y - 44) * 0.203
   wobei (clip_center_x, clip_center_y) der Mittelpunkt des Elements
   im Original-Logo ist.
   ============================================================ */

.symbolik-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
}

.symbolik-item {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3);
  background: #FFF;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(15, 27, 51, 0.04);
}

/* Quadratisches „Passepartout" — 5% Radius, nicht Kreis */
.symbolik-clip {
  width: 88px;
  height: 88px;
  border-radius: 5%;
  background-color: var(--c-slate-50);
  background-image: url("/assets/img/gitcover-logo.png");
  background-repeat: no-repeat;
  background-size: 150px 150px; /* Logo auf 150×150 verkleinert (Faktor 4.9) */
  /* Akzent-Border passend zur Farbe — wird per Modifier gesetzt */
  border: 2px solid var(--c-line);
  position: relative;
  overflow: hidden;
}

/* Akzent-Border per Farb-Modifier */
.symbolik-item--grun     .symbolik-clip { border-color: var(--c-green); }
.symbolik-item--orange   .symbolik-clip { border-color: var(--c-amber); }
.symbolik-item--blau     .symbolik-clip { border-color: var(--c-blue); }
.symbolik-item--grau     .symbolik-clip { border-color: var(--c-coverage); }
/* EN/VI Slug-Varianten */
.symbolik-item--green    .symbolik-clip { border-color: var(--c-green); }
.symbolik-item--cam      .symbolik-clip { border-color: var(--c-amber); }
.symbolik-item--blue     .symbolik-clip { border-color: var(--c-blue); }
.symbolik-item--gray     .symbolik-clip { border-color: var(--c-coverage); }
.symbolik-item--xanh-la  .symbolik-clip { border-color: var(--c-green); }
.symbolik-item--xanh-duong .symbolik-clip { border-color: var(--c-blue); }
.symbolik-item--xam      .symbolik-clip { border-color: var(--c-coverage); }

/* ============================================================
   Ausschnitt-Positionierung pro Farbe (background-size 150×150)
   ============================================================ */

/* Grün: Hand + Pixel-Element (links, oben)
   Bounding Box: x=120..340, y=130..580 (220×450)
   Mittelpunkt: (230, 355)
   Manuelle Feinjustierung — siehe dist-Version. */
.symbolik-clip--grun {
  background-position: 10px -30px;
}

/* Orange: Netzwerk-Knoten (rechts, oben)
   Bounding Box: x=395..660, y=155..510 (265×355)
   Mittelpunkt: (527, 332)
   Manuelle Feinjustierung — siehe dist-Version. */
.symbolik-clip--orange {
  background-position: -70px -27px;
}

/* Blau: Datenbank-Zylinder (Mitte, unten)
   Bounding Box: x=185..475, y=370..650 (290×280)
   Mittelpunkt: (330, 510)
   Manuelle Feinjustierung — siehe dist-Version. */
.symbolik-clip--blau {
  background-position: -20px -65px;
}

/* Grau: Gesamter Ring (das ganze Logo, klein mit innerem Rand zum Rahmen) */
.symbolik-clip--grau {
  background-size: 52px 52px; /* Klein, mit deutlichem inneren Rand */
  background-position: center center;
  background-repeat: no-repeat;
}

/* EN/VI: gleiche Positionen (manuell feinjustiert) */
.symbolik-clip--green    { background-position: 10px -30px; }
.symbolik-clip--cam      { background-position: -70px -27px; }
.symbolik-clip--blue     { background-position: -20px -65px; }
.symbolik-clip--gray     {
  background-size: 52px 52px;
  background-position: center center;
  background-repeat: no-repeat;
}
.symbolik-clip--xanh-la  { background-position: 10px -30px; }
.symbolik-clip--xanh-duong { background-position: -20px -65px; }
.symbolik-clip--xam      {
  background-size: 52px 52px;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Text-Bereich rechts neben dem Clip */
.symbolik-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: var(--fs-sm);
}

.symbolik-key {
  color: var(--text-strong);
  font-weight: 600;
  font-size: 0.95rem;
}

.symbolik-desc {
  color: var(--text-body);
}

/* Mobile: 1 Spalte, etwas kleinere Clips
   Position-Skalierung folgt den Desktop-Feinjustierungen.
   Formel: Mobile = (Desktop - 12) * 0.727
   Wobei 12 = (Container-Center-Desktop 44 - Container-Center-Mobile 32)
   und 0.727 = Background-Scale (109/150) */
@media (max-width: 600px) {
  .symbolik-list {
    grid-template-columns: 1fr;
  }
  .symbolik-item {
    grid-template-columns: 64px 1fr;
  }
  .symbolik-clip {
    width: 64px;
    height: 64px;
    background-size: 109px 109px; /* Skaliert (150 × 64/88) */
  }
  /* Grün: Desktop 10px -30px → Mobile (10-12)*0.727, (-30-12)*0.727 = -1.5px -30.5px → -1px -30px */
  .symbolik-clip--grun,
  .symbolik-clip--green,
  .symbolik-clip--xanh-la { background-position: -1px -30px; }
  /* Orange: Desktop -70px -27px → (-70-12)*0.727, (-27-12)*0.727 = -59.6px -28.3px → -60px -28px */
  .symbolik-clip--orange,
  .symbolik-clip--cam { background-position: -60px -28px; }
  /* Blau: Desktop -20px -65px → (-20-12)*0.727, (-65-12)*0.727 = -23.3px -56.0px → -23px -56px */
  .symbolik-clip--blau,
  .symbolik-clip--blue,
  .symbolik-clip--xanh-duong { background-position: -23px -56px; }
  /* Grau: noch kleinerer innerer Rand */
  .symbolik-clip--grau,
  .symbolik-clip--gray,
  .symbolik-clip--xam {
    background-size: 38px 38px;
  }
}