/**
 * Section Separator Styles
 * Modern, corporate-friendly section dividers with subtle visual cues
 */

/* Section Container with Better Definition */

section {
    position: relative;
    border-top: 1px solid transparent;
}

/* Alternating Section Backgrounds for Clear Visual Separation */

section:nth-child(odd) {
    background-color: var(--bg-white);
}

section:nth-child(even) {
    background-color: var(--bg-light);
}

/* Section Divider - Subtle Corporate Style */

section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--secondary-color) 50%,
        transparent 100%
    );
    opacity: 0.3;
}

/* First section (hero) should not have a separator */

section:first-of-type::before,
.product-hero::before {
    display: none;
}

/* Section Title with Modern Accent */

.section-title {
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg,
        var(--primary-color) 0%,
        var(--secondary-color) 100%
    );
    border-radius: 2px;
}

/* Section Padding for Better Spacing */

.detailed-specs-section,
.accessories-section,
.features-section,
.about-section,
.article-section,
.contact-section {
    padding: 4rem 0;
}

/* Corporate Shadow Treatment for Elevated Sections */

.features-section,
.accessories-section,
.about-section {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.03);
}

/* Subtle Gradient Overlays for Depth */

.article-section {
    position: relative;
}

.article-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(180deg,
        rgba(248, 250, 252, 0.8) 0%,
        transparent 100%
    );
    pointer-events: none;
}

/* Contact Section Distinction */

.contact-section {
    border-top: 2px solid var(--border-color);
}

/* Responsive Section Spacing */

@media (max-width: 768px) {
    .detailed-specs-section,
    .accessories-section,
    .features-section,
    .about-section,
    .article-section,
    .contact-section {
        padding: 3rem 0;
    }

    section::before {
        width: 60px;
    }

    .section-title::after {
        width: 40px;
        height: 2px;
    }
}

@media (max-width: 480px) {
    .detailed-specs-section,
    .accessories-section,
    .features-section,
    .about-section,
    .article-section,
    .contact-section {
        padding: 2rem 0;
    }
}