/* ================================================================= */
/* ARTICLE CARDS (cards.css)                                         */
/* The homepage "Latest Articles" section and the article cards      */
/* inside it (template-parts/content/card-grid.php). The base card   */
/* rules (.rsn-article-card, .rsn-article-content, .rsn-article-date) */
/* are also shared by the stacked list cards on index.php.           */
/* ================================================================= */

/* Container that wraps the "latest articles" section below the title */
.rsn-latest-articles {
    max-width: 1100px; /* Limit section width so it doesn't stretch too wide on big screens */
    margin: 40px auto; /* Center the section horizontally, add vertical spacing */
    padding: 0 20px; /* Left/right breathing room on smaller screens */
}

/* Heading above the article cards (e.g. "Latest Articles") */
.rsn-latest-articles h2 {
    color: var(--rsn-ice); /* Ice — heading text sits on the dark Deep page background */
    font-family: var(--rsn-font-rajdhani); /* H2 role: Rajdhani, since "section headers" is an explicit H2 use case */
    font-weight: var(--rsn-type-h2-weight); /* 600 weight, per the H2 row of the type spec */
    font-size: var(--rsn-type-h2-size); /* 32px, the middle of the H2 role's 28–36px range */
    margin-bottom: 20px; /* Space below the heading before the cards start */
    border-bottom: 3px solid rgba(37, 171, 226, 0.18); /* Signal at 18% opacity — same #25ABE2 brand accent, just faded for a subtler underline */
    padding-bottom: 10px; /* Space between the text and the underline */
}

/* Grid layout that holds the article cards three across; any cards beyond three wrap onto a new row */
.rsn-article-grid {
    display: grid; /* Use CSS grid for layout */
    grid-template-columns: repeat(3, 1fr); /* Three equal-width columns */
    gap: 20px; /* Space between each article card */
}

/* Individual article card styling */
.rsn-article-card {
    background-color: var(--rsn-depth); /* Depth — cards are an explicit use case for this secondary surface color */
    border-radius: 6px; /* Slightly rounded corners */
    overflow: hidden; /* Keep image corners rounded by clipping overflow */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); /* Deeper, darker shadow so cards still read as "lifted" on a dark page */
    display: flex; /* Use flexbox to stack image/text vertically */
    flex-direction: column; /* Stack children top to bottom */
    transition: transform 0.2s ease; /* Smooth animation when hovered */
}

/* Slightly lift the card when the user hovers over it */
.rsn-article-card:hover {
    transform: translateY(-4px); /* Move the card up slightly on hover */
}

/* Featured image inside each article card */
.rsn-article-card img {
    width: 100%; /* Image fills the card's full width */
    height: 180px; /* Fixed height so all cards line up evenly */
    object-fit: cover; /* Crop image to fill the box without distorting it */
}

/* Padding wrapper for the text content inside each card */
.rsn-article-content {
    padding: 15px; /* Inner spacing around the title/excerpt/date */
    flex-grow: 1; /* Let this section expand to fill remaining card height */
    display: flex; /* Stack the title/excerpt/date vertically */
    flex-direction: column; /* Top-to-bottom stacking direction */
}

/* Article title link inside each card */
.rsn-article-content h3 {
    font-family: var(--rsn-font-rajdhani); /* H2 role: Rajdhani, since "card headlines" is explicitly listed under H2's use case */
    font-weight: var(--rsn-type-h2-weight); /* 600 weight, per the H2 row of the type spec */
    font-size: 1.1rem; /* Intentionally smaller than the 28–36px H2 spec range — this is a compact grid card, */
    /* not a full-width section header, so the size is reduced while the family/weight still follow H2 */
    margin-bottom: 8px; /* Space below the title before the excerpt */
}

/* Remove default link underline/color on article title links */
.rsn-article-content h3 a {
    color: var(--rsn-signal); /* Signal — article titles are links, an explicit Signal use case */
    text-decoration: none; /* Remove the default underline */
    transition: color 0.2s ease; /* Smoothly animate the color change on hover below */
}

/* Underline the title link only when hovered, for accessibility/UX */
.rsn-article-content h3 a:hover {
    color: var(--rsn-drive); /* Drive — Signal's designated hover/pressed state */
    text-decoration: underline; /* Show underline on hover to indicate it's clickable */
}

/* Short excerpt/preview text under each article title */
.rsn-article-content p {
    font-family: var(--rsn-font-dm-sans); /* Body role: DM Sans, since "descriptions" is explicitly listed under Body's use case */
    font-weight: var(--rsn-type-body-weight); /* 400 weight, per the Body row of the type spec */
    font-size: 14px; /* Bottom of the Body role's 14–16px range, since this is secondary text next to the title */
    color: rgba(255, 255, 255, 0.75); /* Muted Ice — softened opacity keeps excerpt text secondary to the title */
    margin-bottom: 10px; /* Space below excerpt before the date */
}

/* Publish date shown at the bottom of each card */
.rsn-article-date {
    font-family: var(--rsn-font-dm-mono); /* Label role: DM Mono — the spec's own Label example is a publish date ("May 21, 2026...") */
    font-weight: var(--rsn-type-label-weight); /* 400 weight, per the Label row of the type spec */
    font-size: var(--rsn-type-label-size); /* 10px, the middle of the Label role's 9–11px range */
    color: rgba(255, 255, 255, 0.55); /* Muted Ice — even lower opacity, since this is the least important text in the card */
    margin-top: auto; /* Push the date to the bottom of the flex card */
}



/* Responsive rule: stack cards vertically on narrow/mobile screens */
@media (max-width: 768px) {
    .rsn-article-grid {
        grid-template-columns: 1fr; /* Switch to a single column on small screens */
    }
}