/**
 * Blog Base Styles
 * ============================================================================
 * Shared base styles for blog listing items, post meta, and read links.
 * Used by content-blog.css (which handles both archive and single posts).
 *
 * Load order: After styles.css, before content-blog.css
 * Dependencies: 00-tokens.css, styles.css
 *
 * Components:
 * - .listing-item: Blog post card container
 * - .listing-item-img: Post thumbnail/featured image
 * - .listing-item-content: Post content wrapper
 * - .post-meta, .meta-item: Post metadata (date, author, read time)
 * - .read-post-link: "Read post" link styling
 * ============================================================================
 */

/* ==========================================================================
   1. Listing Item Base
   ========================================================================== */

.listing-item {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.listing-item-img {
    width: 100%;
    background-size: cover;
    background-position: center;
}

.listing-item-content {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.listing-item-content h3 a {
    color: var(--brand-main);
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
}

/* ==========================================================================
   2. Post Meta Base
   ========================================================================== */

.post-meta {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    flex-wrap: wrap;
    font-size: 16px;
    color: var(--black);
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.meta-item svg {
    stroke: var(--brand-highlight);
    width: 18px;
    height: 18px;
}

.meta-item p {
    margin: 0;
    display: inline;
}

/* ==========================================================================
   3. Read Post Link Base
   ========================================================================== */

.read-post-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--brand-main);
    text-decoration: none;
    letter-spacing: 0.25px;
}

.read-post-link:hover {
    color: var(--brand-main-dark);
    text-decoration: underline;
}

/* ==========================================================================
   4. Text Icon Helper
   ========================================================================== */

.text-icon {
    font-size: 16px;
    color: var(--text-secondary);
}

/* ==========================================================================
   5. Blog Section Container Base
   Shared background and positioning for blog intro and content sections
   ========================================================================== */

.blog-intro,
.blog-content {
    background-color: var(--cream);
    position: relative;
}

.blog-intro .content,
.blog-content .content {
    padding-bottom: 75px;
    padding-top: 75px;
}