/* ========================================
   V3 SEPARATION LOGIC
   Layered on top of styles.css + styles-v2.css

   Core principle: full-bleed dark elements (.weather, .micro-content,
   .standalone-quote, .section-header) ARE visual separators. Adjacent
   content should not ALSO have separator lines. Grey border-bottom
   only appears between adjacent white-bg blocks.
   ======================================== */

/* --- 1. Remove grey border-bottom from any content block followed by a dark element ---
   The dark element provides the visual break; a grey line before it is redundant. */
:is(.article, .interview, .article-with-photo, .article-with-sidebar, .ranked-list, .image-block, .advice-column):has(+ :is(.weather, .standalone-quote, .micro-content, .section-header)) {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* --- 2. Guide-block borders adjacent to dark elements: remove the redundant one ---
   A 3px rule right next to a full-bleed black block is double-separation. */
.guide-block:has(+ :is(.weather, .standalone-quote, .micro-content)) {
    border-bottom: none;
    margin-bottom: 0;
}

:is(.weather, .standalone-quote, .micro-content) + .guide-block {
    border-top: none;
    margin-top: 0;
}

/* --- 3. Guide-block after a section-header: collapse top border ---
   section-header is a heavy black bar; guide-block top border is redundant. */
.section-header + .guide-block {
    border-top: none;
}

/* --- 4. Nested image-blocks (inside articles) should not get separator treatment --- */
.article .image-block,
.article-with-photo .image-block {
    border-bottom: none;
    padding-bottom: 0;
}

/* --- 5. Last content block: no trailing separator needed --- */
.content > :last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* --- 6. Consistent spacing after dark full-bleed elements ---
   Give white-bg content that follows a dark block a clean, consistent top margin. */
:is(.weather, .standalone-quote, .micro-content) + :is(.article, .interview, .article-with-photo, .article-with-sidebar, .ranked-list, .image-block, .experimental-text, .advice-column) {
    margin-top: 24px;
}

/* --- 7. Consistent spacing before dark full-bleed elements ---
   Ensure white-bg content has a clean gap before a dark block. */
:is(.article, .interview, .article-with-photo, .article-with-sidebar, .ranked-list, .advice-column) + :is(.weather, .standalone-quote, .micro-content) {
    margin-top: 0;
}

/* --- 8. Image-block before article-with-photo: keep the grey line ---
   This is a white-to-white transition (e.g. gecko ad → EWWWW SKIN).
   The base rules already handle this correctly; just ensure margin is consistent. */
.image-block + .article-with-photo,
.image-block + .article {
    margin-top: 24px;
}

/* --- 9. Experimental text: more breathing room --- */
.experimental-text {
    margin: 48px 0;
    padding: 28px 20px;
}

/* --- 10. Interview: more padding top and bottom --- */
.interview {
    padding-top: 16px;
    padding-bottom: 48px;
}