/* ============================================================
   POKORNY CHILD – ICON SYSTEM
   icons.css
   Einbinden via functions.php (siehe dort)

   Verwendung im Editor (HTML-Block):
   <svg class="icon icon--lg"><use href="/wp-content/themes/pokorny-child/assets/icons/icons.svg#icon-analyse"/></svg>
   ============================================================ */

/* ----------------------------------------------------------
   BASIS
   ---------------------------------------------------------- */

.icon {
  display:        inline-block;
  vertical-align: middle;
  flex-shrink:    0;
  /* Farbe per currentColor steuerbar (für Line-Icons) */
  fill:           none;
  stroke:         currentColor;
}

/* ----------------------------------------------------------
   GRÖSSEN
   ---------------------------------------------------------- */

.icon--xs  { width: 16px; height: 16px; }
.icon--sm  { width: 20px; height: 20px; }
.icon      { width: 24px; height: 24px; }  /* Standard */
.icon--md  { width: 32px; height: 32px; }
.icon--lg  { width: 48px; height: 48px; }
.icon--xl  { width: 64px; height: 64px; }
.icon--2xl { width: 80px; height: 80px; }

/* ----------------------------------------------------------
   FARBVARIANTEN (für Line-Icons)
   ---------------------------------------------------------- */

.icon--navy   { color: var(--color-navy);  stroke: var(--color-navy);  }
.icon--gold   { color: var(--color-gold);  stroke: var(--color-gold);  }
.icon--cream  { color: var(--color-cream); stroke: var(--color-cream); }
.icon--muted  { color: var(--color-text-muted); stroke: var(--color-text-muted); }

/* ----------------------------------------------------------
   ICON-WRAPPER (Kreis-Hintergrund)
   ---------------------------------------------------------- */

.icon-wrap {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  border-radius:   50%;
  flex-shrink:     0;
  transition:      background-color var(--transition-base),
                   transform var(--transition-base);
}

/* Größen für Wrapper */
.icon-wrap--sm  { width: 40px;  height: 40px;  }
.icon-wrap--md  { width: 56px;  height: 56px;  }
.icon-wrap--lg  { width: 72px;  height: 72px;  }
.icon-wrap--xl  { width: 96px;  height: 96px;  }

/* Varianten */
.icon-wrap--cream {
  background-color: var(--color-cream-dark);
}

.icon-wrap--gold {
  background-color: rgba(184, 154, 90, 0.15);
}

.icon-wrap--navy {
  background-color: var(--color-navy-light);
}

.icon-wrap--outline {
  background-color: transparent;
  border:           1.5px solid var(--color-border-gold);
}

/* Hover-Effekt auf Karten */
.wp-block-group:hover .icon-wrap--gold,
.wp-block-group:hover .icon-wrap--cream {
  background-color: rgba(184, 154, 90, 0.25);
  transform:        scale(1.05);
}

/* ----------------------------------------------------------
   ICON + TEXT LAYOUTS
   ---------------------------------------------------------- */

/* Horizontale Reihe: Icon links, Text rechts */
.icon-row {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-md);
}

.icon-row--center {
  align-items: center;
}

/* Vertikale Spalte: Icon oben, Text darunter */
.icon-col {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-sm);
}

.icon-col--center {
  align-items: center;
  text-align:  center;
}

/* ----------------------------------------------------------
   VORTEILSLISTE (Häkchen-Liste)
   ---------------------------------------------------------- */

.benefit-list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-md);
}

.benefit-list li {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-sm);
  font-size:   var(--text-base);
  color:       var(--color-text-secondary);
  line-height: 1.6;
}

.benefit-list li .icon {
  margin-top:  2px; /* optische Ausrichtung */
  flex-shrink: 0;
}

/* Auf dunklem Hintergrund */
.section-navy .benefit-list li,
.has-navy-background-color .benefit-list li {
  color: rgba(245, 242, 236, 0.8);
}

/* ----------------------------------------------------------
   SERVICE-KARTEN MIT ICONS
   ---------------------------------------------------------- */

.service-card {
  background:    var(--color-white);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-xl);
  display:       flex;
  flex-direction: column;
  gap:           var(--space-md);
  transition:    transform var(--transition-base),
                 box-shadow var(--transition-base),
                 border-color var(--transition-base);
}

.service-card:hover {
  transform:     translateY(-4px);
  box-shadow:    var(--shadow-md);
  border-color:  var(--color-border-gold);
}

.service-card__icon {
  /* Icon-Wrapper in Karte */
}

.service-card__title {
  font-family:   var(--font-heading);
  font-size:     var(--text-xl);
  font-weight:   600;
  color:         var(--color-navy);
  margin:        0;
  line-height:   1.3;
}

.service-card__text {
  font-size:   var(--text-base);
  color:       var(--color-text-secondary);
  line-height: 1.7;
  margin:      0;
}

.service-card__link {
  display:      flex;
  align-items:  center;
  gap:          6px;
  color:        var(--color-gold-dark);
  font-size:    var(--text-sm);
  font-weight:  600;
  margin-top:   auto; /* schiebt Link ans Ende */
  transition:   color var(--transition-fast),
                gap var(--transition-fast);
  text-decoration: none;
}

.service-card__link:hover {
  color: var(--color-gold);
  gap:   10px;
}

/* ----------------------------------------------------------
   PROZESS-SCHRITTE MIT ICONS
   ---------------------------------------------------------- */

.process-step {
  display:    flex;
  gap:        var(--space-lg);
  align-items: flex-start;
  position:   relative;
}

/* Verbindungslinie zwischen Schritten */
.process-step:not(:last-child)::after {
  content:          '';
  position:         absolute;
  left:             38px;   /* Mitte des Icon-Wrappers (80px/2 - 2px) */
  top:              90px;   /* unterhalb des Icons */
  bottom:           -24px;
  width:            1px;
  background:       linear-gradient(to bottom, var(--color-gold), transparent);
}

.process-step__number {
  font-family:    var(--font-body);
  font-size:      0.65rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  color:          var(--color-gold);
  margin-bottom:  var(--space-xs);
  display:        block;
}

.process-step__title {
  font-family:  var(--font-heading);
  font-size:    var(--text-xl);
  font-weight:  600;
  color:        var(--color-navy);
  margin:       0 0 var(--space-sm);
  line-height:  1.3;
}

.process-step__text {
  font-size:   var(--text-base);
  color:       var(--color-text-secondary);
  line-height: 1.7;
  margin:      0;
}

/* Auf dunklem Hintergrund */
.section-navy .process-step__title,
.has-navy-background-color .process-step__title {
  color: var(--color-text-on-dark);
}

.section-navy .process-step__text,
.has-navy-background-color .process-step__text {
  color: rgba(245, 242, 236, 0.75);
}

/* ----------------------------------------------------------
   TESTIMONIAL MIT QUOTE-ICON
   ---------------------------------------------------------- */

.testimonial {
  position:      relative;
  padding:       var(--space-xl);
  background:    var(--color-cream-dark);
  border-radius: var(--radius-lg);
}

.testimonial__quote-icon {
  position:   absolute;
  top:        var(--space-lg);
  left:       var(--space-lg);
  opacity:    0.4;
}

.testimonial__text {
  font-family:  var(--font-heading);
  font-style:   italic;
  font-size:    var(--text-xl);
  color:        var(--color-navy);
  line-height:  1.5;
  margin:       0 0 var(--space-md);
  padding-left: var(--space-xl); /* Platz für Quote-Icon */
}

.testimonial__author {
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
  font-weight: 500;
}

/* ----------------------------------------------------------
   KONTAKT-ZEILEN
   ---------------------------------------------------------- */

.contact-item {
  display:     flex;
  align-items: center;
  gap:         var(--space-md);
  font-size:   var(--text-base);
  color:       var(--color-text-secondary);
  text-decoration: none;
  transition:  color var(--transition-fast);
}

.contact-item:hover {
  color: var(--color-gold);
}

.contact-item .icon {
  color:       var(--color-gold);
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   SOCIAL MEDIA ICONS
   ---------------------------------------------------------- */

.social-links {
  display: flex;
  gap:     var(--space-md);
}

.social-link {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            40px;
  height:           40px;
  border-radius:    50%;
  border:           1.5px solid var(--color-border-gold);
  color:            var(--color-gold);
  transition:       background-color var(--transition-base),
                    color var(--transition-base),
                    border-color var(--transition-base);
  text-decoration:  none;
}

.social-link:hover {
  background-color: var(--color-gold);
  color:            var(--color-navy);
  border-color:     var(--color-gold);
}

/* ----------------------------------------------------------
   ANIMATIONS (opt-in via Klasse)
   ---------------------------------------------------------- */

/* Sanftes Einblenden beim Scrollen (wird via JS aktiviert) */
.icon-wrap.animate-in {
  animation: iconFadeUp 0.5s var(--ease-out) both;
}

@keyframes iconFadeUp {
  from {
    opacity:   0;
    transform: translateY(12px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

/* Pulse-Effekt für CTA-Icons */
.icon-wrap--pulse {
  animation: iconPulse 2.5s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 154, 90, 0.3); }
  50%       { box-shadow: 0 0 0 12px rgba(184, 154, 90, 0); }
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 768px) {
  .icon--xl  { width: 56px; height: 56px; }
  .icon--2xl { width: 64px; height: 64px; }

  .icon-wrap--xl { width: 72px; height: 72px; }

  .process-step {
    flex-direction: column;
    gap:            var(--space-md);
  }

  .process-step:not(:last-child)::after {
    display: none; /* Verbindungslinie mobil ausblenden */
  }

  .service-card {
    padding: var(--space-lg);
  }
}