/* ============================================================
   IORDEN — news.css
   Additions only. Load AFTER style.css — reuses your existing
   custom properties, fonts, and .container/.section/.header/
   .footer/.btn classes.
   ============================================================ */

/* Top band on news.php: same idea as the hero — a dark section
   sits directly under the fixed transparent header, so it needs
   extra top padding to clear it. */
.news-band {
    padding-top: clamp(9rem, 14vw, 11rem);
    padding-bottom: 3rem;
}

/* --- News list (news.php) ------------------------------------ */
.news-list {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.news-card {
    display: flex;
    gap: 1.75rem;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 1.75rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.news-card:hover {
    box-shadow: 0 10px 40px rgba(32, 70, 27, 0.1);
    transform: translateY(-3px);
}

.news-card__image {
    flex: 0 0 180px;
    height: 120px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--mint);
}

.news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-card__body {
    flex: 1;
    min-width: 0;
}

.news-card__date {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--green-hover);
}

.news-card__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--green);
    margin: 0.4rem 0 0.5rem;
}

.news-card__excerpt {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 640px) {
    .news-card { flex-direction: column; }
    .news-card__image { width: 100%; height: 160px; }
}

/* --- Individual article page (news/*.php) --------------------- */
.article-title {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    margin-bottom: 0.5rem;
}

.article-date {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
}

.article-hero-image {
    max-width: 900px;
    margin: 0 auto 2.5rem;
}

.article-hero-image img {
    width: 100%;
    border-radius: 10px;
}

/* Smaller variant for logos/emblems rather than full-width photos */
.article-hero-image--small {
    max-width: 260px;
}

.article-body {
    max-width: 680px;
    margin: 0 auto;
}

.article-body p {
    margin-bottom: 1.5rem;
}

.back-link {
    display: inline-block;
    margin-bottom: 1.5rem;
}

/* --- Multi-image gallery row (photos side by side, same overall
   width as the single image above the article — 900px total,
   split evenly between however many photos are in the row) ---- */
.article-gallery {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    gap: 1rem;
}

.article-gallery img {
    flex: 1;
    min-width: 0;
    border-radius: 10px;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

@media (max-width: 640px) {
    .article-gallery { flex-direction: column; }
}