/* Salesforce Blog Page - Consistent Section Spacing Overrides */

/* ===== Uniform 30px gap between ALL sections ===== */

/* Remove all inherited top/bottom padding from section wrappers */
.blog_main_wrapper .odos_wrapper {
    padding: 0 !important;
    margin-top: 30px;
}

.blog_main_wrapper .blog_section_4_cards {
    padding: 0;
    margin-top: 30px;
}

.blog_main_wrapper .blog_conclusion_section {
    padding: 0;
    margin-top: 30px;
}

/* --- Inner container padding resets --- */
.blog_main_wrapper .odos_wrapper .odos_principles_section .odos_principles_container .odos_principles_heading {
    padding: 0 !important;
    padding-bottom: 20px !important;
}

.blog_main_wrapper .odos_wrapper .odos_brand_piller_section .odos_brand_piller_container .odos_brand_piller_cards_container {
    padding: 20px 0 0 0;
}

.blog_main_wrapper .blog_section_4_cards .section_4_cards_container {
    padding: 20px 0 0 0;
}

/* --- Remove extra h1 top margin inside blog sections --- */
.blog_main_wrapper .odos_wrapper h1,
.blog_main_wrapper .blog_section_4_cards h1,
.blog_main_wrapper .blog_conclusion_section h1 {
    margin-top: 0;
}

/* --- Intro section consistent bottom spacing --- */
.blog_main_wrapper .intro_section {
    padding-bottom: 0;
}


/* ===== PAGE-OPEN ANIMATIONS ===== */

/* Hero banner fade-in + slide-up */
@keyframes blogFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes blogFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes blogSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes blogGradientGlow {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 100%;
        opacity: 1;
    }
}

/* Hero image */
.blog_main_wrapper .blog_main_hero_section {
    animation: blogFadeIn 0.8s ease-out both;
}

/* Intro title */
.blog_main_wrapper .intro_section h1 {
    animation: blogSlideInLeft 0.7s ease-out 0.3s both;
}

.blog_main_wrapper .intro_section p {
    animation: blogFadeInUp 0.6s ease-out 0.5s both;
}

/* Scroll reveal animations (already triggered via JS IntersectionObserver) */
.reveal-hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered card entrance (applied via nth-child) */
.reveal-visible.col-lg-4:nth-child(1),
.reveal-visible.col-lg-6:nth-child(1) {
    transition-delay: 0s;
}

.reveal-visible.col-lg-4:nth-child(2),
.reveal-visible.col-lg-6:nth-child(2) {
    transition-delay: 0.1s;
}

.reveal-visible.col-lg-4:nth-child(3) {
    transition-delay: 0.2s;
}

/* Gradient underline subtle animation on headings */
.blog_main_wrapper h1 span {
    animation: blogGradientGlow 0.8s ease-out 0.6s both;
}