/* Homepage feed sections: "Story of the Week" (featured posts) + "Latest Stories"
/* ---------------------------------------------------------- */

.feed-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding-top: max(4.8vmin, 36px);
    color: var(--color-darkgrey);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

/* Follow the same title font as the rest of the site (Ghost's title_font setting) */
.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .feed-section-title {
    font-family: var(--gh-font-heading, var(--font-serif));
    letter-spacing: 0.08em;
}

/* The hairline runs from the end of the label to the edge of the feed */
.feed-section-title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--color-border);
}

.feed-section-title svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

/* Brand gold - the same tone used in overrides.css for the cover tagline */
.feed-section-featured .feed-section-title svg {
    color: #d4af37;
}

.feed-section-title-latest svg {
    color: var(--color-secondary-text);
}

/* The title already introduces the feed, so the feed doesn't need its own top gap */
.feed-section-title + .post-feed {
    padding-top: max(2.4vmin, 20px);
}

.feed-section-featured {
    padding-bottom: max(2.4vmin, 20px);
}

/* The section heading says it already - no need for the badge on every card */
.post-feed-featured .post-card-featured {
    display: none;
}

@media (max-width: 767px) {
    .feed-section-title {
        gap: 10px;
        font-size: 1.6rem;
        letter-spacing: 0.1em;
    }

    .feed-section-title svg {
        width: 16px;
        height: 16px;
    }
}

/* Dark mode
/* ---------------------------------------------------------- */

html.dark-mode .feed-section-title {
    color: #fff;
}

html.dark-mode .feed-section-title::after {
    background: rgba(255, 255, 255, 0.12);
}

@media (prefers-color-scheme: dark) {
    html.auto-color .feed-section-title {
        color: #fff;
    }

    html.auto-color .feed-section-title::after {
        background: rgba(255, 255, 255, 0.12);
    }
}