/**
 * Divider Component
 * Juliana y Fadi Tango Website
 * 
 * Wiederverwendbare Trennlinien für die gesamte Website
 */

/* ==================== STANDARD DIVIDER ==================== */

.divider {
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--color-primary) 50%, 
        transparent 100%
    );
    margin: 6rem 0;/*6rem 0;*/
    position: relative;
}

.divider::before {
    content: '✦';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-gray-750);
    color: var(--color-primary);
    font-size: var(--font-size-3xl);
    padding: 0 1rem;
}

/* ==================== DIVIDER VARIANTEN ==================== */

/* Divider ohne Symbol */
.divider--simple::before {
    content: none;
}

/* Divider mit anderem Symbol */
.divider--star::before {
    content: '★';
}

.divider--diamond::before {
    content: '◆';
}

.divider--heart::before {
    content: '♥';
}

.divider--circle::before {
    content: '●';
}

/* ==================== SPACING VARIANTEN ==================== */

/* Weniger Abstand */
.divider--small {
    margin: 3rem 0;
}

/* Mehr Abstand */
.divider--large {
    margin: 8rem 0;
}

/* Dezent: dünner, transparenter, schmaler - für Trennlinien innerhalb
   von Content-Blöcken (z.B. zwischen einzelnen Testimonials), statt
   als große Section-Trennung. Kombiniert mit .divider--simple genutzt,
   da hier kein ✦-Symbol gewünscht ist. */
.divider--subtle {
    height: 1px;
    max-width: 700px;
    margin: 1.5rem auto;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(221, 191, 95, 0.3) 20%,
        rgba(221, 191, 95, 0.3) 80%,
        transparent 100%
    );
}

/* ==================== FARB-VARIANTEN ==================== */

/* Weiße Linie */
.divider--white {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        transparent 100%
    );
}

.divider--white::before {
    color: #fff;
}

/* Gold intensiv */
.divider--gold-bright {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(221, 191, 95, 0.8) 50%, 
        transparent 100%
    );
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
    .divider {
        margin: 4rem 0;
    }
    
    .divider--small {
        margin: 2rem 0;
    }
    
    .divider--large {
        margin: 5rem 0;
    }
    
    .divider::before {
        font-size: var(--font-size-xl);
        padding: 0 0.75rem;
    }
}