/* src/styles/components/articles.css */

.articles-section {
    background-color: var(--secondary-off-white);
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.article-card {
    background-color: var(--secondary-off-white);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* ===== POLISHING PASS: STEP 9.4 ===== */
    /* Add subtle shadow and lift effect on hover */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}


.article-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.article-card-image {
    width: 100%;
    height: 200px; /* Fixed height for uniformity */
    object-fit: cover; /* Ensures the image covers the area without distortion */
}

.article-card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows content to fill space */
}

.article-card-content h3 {
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.article-card-content p {
    flex-grow: 1; /* Pushes the link to the bottom */
    margin-bottom: 1rem;
    color: var(--text-main-charcoal);
}

.read-more-link {
    color: var(--primary-deep-blue);
    font-weight: 700;
    text-decoration: none;
    align-self: flex-start; /* Aligns link to the left */
}

.read-more-link:hover {
    text-decoration: underline;
    color: var(--accent-matte-gold);
}


/* --- Device-Specific Layouts --- */
@media (max-width: 820px) { /* Tablets */
    .articles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) { /* Phones */
    .articles-grid { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
    .articles-grid { gap: 1.5rem; }
    .article-card-content { padding: 1rem; }
    .article-card-content h3 { font-size: 1.1rem; }
}