/**
 * Dividers Component
 *
 * Enthält:
 * - Gradient Dividers (Wiederverwendbar)
 * - Gelb → Blau & Blau → Gelb Varianten
 * - Full-Width Styles
 * - WordPress Block Styles
 * - Responsive Styles
 *
 * Dependencies:
 * - base.css (CSS Variables)
 *
 * Extrahiert aus ui-elements.css: Zeilen 354-554
 * Datei-Größe: ~200 Zeilen
 *
 * @package SLV_Transporte
 * @version 1.0.0
 */

/* ============================================
   GRADIENT DIVIDERS (Wiederverwendbar)
   ============================================ */

/**
 * Gradient Divider - Basis-Klasse
 *
 * Wiederverwendbare Trennstriche mit SLV Brand-Gradients
 * Basierend auf Header/Footer Gradients:
 * - Gelb → Blau: #fcbc5b → #5cb8e9
 * - Blau → Gelb: #5cb8e9 → #fcbc5b
 *
 * Verwendung in Gutenberg:
 * - Via Patterns: "SLV Dividers" Kategorie
 * - Via Block Styles: core/separator
 *
 * WICHTIG: Bestehende Header/Footer Gradients bleiben unverändert!
 */
.gradient-divider {
  height: 5px;
  border: none;
  margin: var(--slv-space-l) 0;
  border-radius: 0;
  width: 100%;
}

/**
 * Gradient Divider - Gelb → Blau
 * Entspricht Header-Top Gradient
 */
.gradient-divider--yellow-blue {
  background: linear-gradient(90deg, #fcbc5b 0%, #5cb8e9 100%);
}

/**
 * Gradient Divider - Blau → Gelb
 * Entspricht Footer-Top Gradient
 */
.gradient-divider--blue-yellow {
  background: linear-gradient(90deg, #5cb8e9 0%, #fcbc5b 100%);
}

/**
 * Thick Variante - Dickerer Trennstrich
 */
.gradient-divider--thick {
  height: 10px;
}

/**
 * Extra Spacing Variante - Mehr Abstand
 */
.gradient-divider--spacing-xl {
  margin: var(--slv-space-xl) 0;
}

/**
 * Responsive Anpassungen
 * Kleinere Höhe auf Mobile für bessere Proportionen
 */
@media (max-width: 767px) {
  .gradient-divider {
    height: 3px;
    margin: var(--slv-space-m) 0;
  }

  .gradient-divider--thick {
    height: 6px;
  }
}

/**
 * Block Styles für core/separator
 *
 * WordPress fügt automatisch .is-style-{name} Klassen hinzu
 * Diese Styles ermöglichen es, bestehende Separator-Blöcke
 * direkt im Editor mit Gradient-Styles zu versehen
 */
.wp-block-separator.is-style-gradient-yellow-blue {
  height: 5px;
  border: none;
  margin: var(--slv-space-l) 0;
  border-radius: 0;
  background: linear-gradient(90deg, #fcbc5b 0%, #5cb8e9 100%);
}

.wp-block-separator.is-style-gradient-blue-yellow {
  height: 5px;
  border: none;
  margin: var(--slv-space-l) 0;
  border-radius: 0;
  background: linear-gradient(90deg, #5cb8e9 0%, #fcbc5b 100%);
}

/**
 * Responsive Anpassungen für Block Styles
 */
@media (max-width: 767px) {
  .wp-block-separator.is-style-gradient-yellow-blue,
  .wp-block-separator.is-style-gradient-blue-yellow {
    height: 3px;
    margin: var(--slv-space-m) 0;
  }
}

/**
 * Full-Width Dividers - ERZWINGE volle Breite für ALLE Gradient Dividers
 *
 * WICHTIG: Alle Gradient Dividers sollen IMMER die volle Viewport-Breite nutzen,
 * unabhängig von der alignfull Klasse oder Parent-Container Beschränkungen.
 *
 * Diese Regeln überschreiben:
 * - Container max-width (z.B. 1140px)
 * - Container padding
 * - WordPress Layout-Constraints
 */

/* UNIVERSELLE REGEL: Alle Gradient Dividers auf volle Breite */
.gradient-divider,
.wp-block-separator.gradient-divider,
.gradient-divider--yellow-blue,
.gradient-divider--blue-yellow,
.wp-block-separator.is-style-gradient-yellow-blue,
.wp-block-separator.is-style-gradient-blue-yellow {
  /* Volle Viewport-Breite erzwingen */
  width: 100vw !important;
  max-width: 100vw !important;

  /* Aus Container "ausbrechen" - negative Margins */
  /* Berechnung: 50% (Container-Mitte) - 50vw (Viewport-Mitte) */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  /* Kein Padding - volle Breite ohne Einschränkungen */
  padding-left: 0 !important;
  padding-right: 0 !important;

  /* Position für Edge Cases */
  position: relative;
  left: 0;
  right: 0;
}

/* Spezifische Regel für alignfull (falls vorhanden, verstärkt die Regel) */
.gradient-divider.alignfull,
.wp-block-separator.gradient-divider.alignfull,
.wp-block-separator.is-style-gradient-yellow-blue.alignfull,
.wp-block-separator.is-style-gradient-blue-yellow.alignfull {
  /* Volle Viewport-Breite erzwingen */
  width: 100vw;
  max-width: 100vw;

  /* Aus Container "ausbrechen" - negative Margins */
  /* Berechnet basierend auf Container-Position */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* Kein Padding */
  padding-left: 0;
  padding-right: 0;

  /* Position für Edge Cases */
  position: relative;
  left: 0;
  right: 0;
}

/**
 * Alternative: Wenn Divider in .feature-section Container ist
 * Diese Section hat max-width: 1140px + padding: 32px
 */
.feature-section .gradient-divider.alignfull,
.feature-section .wp-block-separator.gradient-divider.alignfull {
  /* Extra Margin-Berechnung für Container mit Padding */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/**
 * Fallback für Dividers OHNE alignfull aber in is-layout-constrained
 * WordPress .is-layout-constrained Container können die Breite beschränken
 */
.is-layout-constrained > .gradient-divider:not(.alignfull),
.is-layout-constrained > .wp-block-separator.gradient-divider:not(.alignfull) {
  /* Wenn KEIN alignfull → Warnung via Kommentar */
  /* Diese Divider werden NICHT volle Breite haben */
  /* Lösung: Im WordPress Editor "Volle Breite" Ausrichtung wählen */
}

/**
 * Responsive Anpassungen für alignfull Dividers
 */
@media (max-width: 767px) {
  .gradient-divider.alignfull,
  .wp-block-separator.gradient-divider.alignfull {
    /* Mobile: Gleiche volle Breite, ggf. angepasste Margins */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

/* ===========================================
   GRADIENT DIVIDER SCROLL ANIMATION
   Wipe-Effekt von links nach rechts
   @since 1.2.0 - Animation Enhancement Phase 3
   =========================================== */

/**
 * Divider Initial State
 * Startet mit scaleX(0) für Wipe-Effekt von links
 * Wird durch scroll-animations.js aktiviert
 */
.gradient-divider.scroll-reveal {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.8s ease-out;
}

/**
 * Divider Visible State
 * Volle Breite mit smooth Wipe-Animation
 */
.gradient-divider.scroll-reveal.is-visible {
    transform: scaleX(1);
}

/**
 * Accessibility: Reduced Motion
 * Deaktiviert Animation für Nutzer mit Bewegungsempfindlichkeit
 */
@media (prefers-reduced-motion: reduce) {
    .gradient-divider.scroll-reveal {
        transform: scaleX(1);
        transition: none;
    }
}