/**
 * Articles Component Styles
 *
 * This file contains all styles for articles and news content including:
 * - Article titles and body
 * - News entries and cards
 * - News body text formatting
 * - Responsive adjustments
 */

@layer components.articles {
    /* ========================================
       Container Query Definitions
       ======================================== */
    .newsList {
        container-type: inline-size;
        container-name: news-list;
    }

    /* ========================================
       Articles
       ======================================== */
    .art-title {
        font-size: var(--text-3xl);
        color: var(--color-text-bright);
        text-transform: uppercase;
        font-family: var(--font-heading);
        line-height: var(--line-height-tight);
    }

    .art-title.center {
        text-align: center;
    }

    .art-body {
        line-height: 1.7;
    }

    .art-body p {
        margin-block-end: var(--space-4);
    }

    .art-body p:last-child {
        margin-block-end: 0;
    }

    /* ========================================
       Section Headings
       ======================================== */
    .section-heading {
        font-size: var(--text-xl);
        color: var(--color-text-heading);
        text-transform: uppercase;
        font-family: var(--font-heading);
        letter-spacing: 1px;
        margin-block-end: var(--space-4);
        padding-block-end: var(--space-2);
        border-block-end: 2px solid var(--color-primary);
        display: inline-block;
    }

    /* ========================================
       News & Cards
       ======================================== */
    .newsTitle {
        font-size: var(--text-2xl);
        color: var(--color-text-heading);
        text-align: center;
        text-transform: uppercase;
        font-family: var(--font-heading);
    }

    .news-entry {
        background-color: var(--color-bg-card);
        border-radius: 0 var(--radius-lg);
        padding: var(--space-3); /* Mobile-first base */
        margin-block: var(--space-5) var(--space-6);
        position: relative;
        transition: transform var(--transition-fast), box-shadow var(--transition-normal);
    }

    .news-entry:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .news-entry .title {
        color: #EEE;
        font-size: var(--text-lg);
        margin-block-end: var(--space-1);
        text-transform: uppercase;
        font-family: var(--font-heading);
    }

    .news-date {
        display: block;
        font-size: var(--text-xs);
        color: var(--color-text-muted);
        margin-block-end: var(--space-3);
    }

    .news-entry .date {
        font-size: var(--text-xs);
        text-align: end;
        padding-block-start: var(--space-3);
        color: var(--color-text-muted);
    }

    /* ========================================
       News Body
       ======================================== */
    .newsBody {
        text-align: justify;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .newsBody a {
        word-break: break-all;
    }

    /* ========================================
       Container Query Responsive Adjustments
       ======================================== */

    /* News cards respond to their container width */
    @container news-list (min-width: 500px) {
        .news-entry {
            padding: var(--space-5) var(--space-6);
        }

        .news-entry .title {
            font-size: var(--text-xl);
        }
    }

    @container news-list (max-width: 350px) {
        .news-entry {
            padding: var(--space-2);
            margin-block: var(--space-3) var(--space-4);
        }

        .news-entry .title {
            font-size: var(--text-base);
        }
    }

    /* ========================================
       Viewport-based Fallbacks
       (for browsers without container query support)
       ======================================== */
    @supports not (container-type: inline-size) {
        /* Very small screens */
        @media (max-width: 400px) {
            .news-entry {
                padding: var(--space-2);
            }
        }

        /* Tablet and up */
        @media (min-width: 600px) {
            .news-entry {
                padding: var(--space-5) var(--space-6);
            }
        }
    }
}