/* ===== News index page ===== */
/* Make news page a bit wider than default container */
.container.news-page {
    max-width: 1280px; /* was probably ~960–1140 */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.news-page {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.news-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.news-page-title {
    font-size: 1.9rem;
    font-weight: 700;
    color: #0f172a;
}

.news-page-subtitle {
    margin: 0.5rem 0 0;
    font-size: 1.25rem; /* increased size */
    line-height: 1.8;
    color: #4b5563; /* slightly darker for better readability */
    font-weight: 500;
}

/* Grid of cards */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

/* Card */
.news-card {
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

    .news-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
        border-color: rgba(34, 197, 94, 0.6);
    }

.news-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Image */

/* === NEWS CARD IMAGE – SHOW FULL IMAGE === */

.news-card-image-wrapper {
    position: relative;
    width: 100%;
    /* no fixed height, no aspect-ratio */
    overflow: visible !important; /* don't crop anything */
    background: #f9fafb;
}

/* Make sure the whole image is visible, no cropping */
.news-card-image {
    display: block;
    width: 100%;
    height: auto !important; /* override any global img height */
    max-width: 100%;
    object-fit: contain !important; /* don't cut any part of the image */
}

/* Remove zoom effect for now to avoid visual cropping feeling */
.news-card:hover .news-card-image {
    transform: none !important;
}

.news-card:hover .news-card-image {
    transform: scale(1.06);
}

/* Category badge */
.news-card-badge {
    position: absolute;
    left: 18px;
    bottom: 18px;
    padding: 6px 18px; /* bigger button */
    font-size: 1rem; /* bigger text */
    line-height: 1.4;
    border-radius: 999px;
    background: linear-gradient(135deg, #10b981, #22c55e);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.65);
}

    .news-card-badge.kh-font {
        font-size: 1.05rem; /* slightly larger for Khmer font */
    }


/* Body */
.news-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.news-card-readmore {
    margin-top: 6px;
    font-size: 0.95rem; /* was 0.85rem */
    font-weight: 600;
    color: #059669;
}


.news-card-date i {
    margin-right: 4px;
}

.news-card-title {
    font-size: 1.2rem; /* was ~1.05rem */
    line-height: 1.4;
    font-weight: 700;
    color: #111827;
    margin: 4px 0 0;
}


.news-card-excerpt {
    font-size: 1rem; /* was ~0.9rem */
    line-height: 1.7;
    color: #4b5563;
    margin: 6px 0 4px;
}


.news-card-readmore {
    margin-top: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #059669;
}

/* Pagination + empty */
.news-pagination {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

.news-empty {
    margin-top: 2rem;
    text-align: center;
    color: #6b7280;
}

/* ===== Responsive tweaks ===== */

@media (max-width: 992px) {
    .news-page-title {
        font-size: 1.6rem;
    }

    .news-page-subtitle {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .news-page {
        padding-top: 2rem;
        padding-bottom: 2.5rem;
    }

    .news-grid {
        gap: 16px;
    }

    .news-card-body {
        padding: 12px 14px 14px;
    }

    .news-card-title {
        font-size: 1rem;
    }

    .news-card-excerpt {
        font-size: 0.88rem;
    }
}
/* ===== Grid of news cards ===== */

/* ===== Grid of news cards ===== */

/* Desktop: 3 per row */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* Medium devices (tablets): 2 per row */
@media (max-width: 992px) {
    .news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

/* Mobile: 1 per row */
@media (max-width: 640px) {
    .news-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 16px;
    }
}

.news-card {
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.10);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
}

.news-card-body {
    padding: 12px 14px 16px;
    flex: 1 1 auto;
}

@media (max-width: 640px) {
    .news-card-title {
        font-size: 1.05rem;
    }

    .news-card-excerpt {
        font-size: 0.95rem;
    }
}
/* ===========================
   BIGGER FONTS FOR NEWS CARD
   =========================== */

/* Title – Khmer */
.news-card-title.kh-font {
    font-size: 1.5rem !important; /* much bigger */
    line-height: 1.6;
    font-weight: 700;
}

/* Source line (author) */
.news-card-body .kh-font,
.news-card-meta {
    font-size: 1.05rem !important;
    line-height: 1.6;
}

/* Excerpt text */
.news-card-excerpt.kh-font {
    font-size: 1.15rem !important;
    line-height: 1.8;
}

/* Read more link */
.news-card-readmore.kh-font {
    font-size: 1.1rem !important;
    font-weight: 700;
}

/* Desktop only – keep big size */
@media (max-width: 768px) {
    .news-card-title.kh-font {
        font-size: 1.25rem !important;
    }

    .news-card-excerpt.kh-font {
        font-size: 1.0rem !important;
    }

    .news-card-readmore.kh-font {
        font-size: 1.0rem !important;
    }
}

@media (max-width: 640px) {
    .news-page-subtitle {
        font-size: 1.1rem;
    }
}
/* =============================
   SUPER LARGE FONTS FOR NEWS CARD
   ============================= */

/* Title */
.news-card-title.kh-font {
    font-size: 1.7rem !important; /* was 1.2–1.5, now larger */
    font-weight: 700;
    line-height: 1.5;
    color: #0f172a;
}

/* Excerpt */
.news-card-excerpt.kh-font {
    font-size: 1.25rem !important; /* was ~1.0–1.15 */
    line-height: 1.85;
    color: #374151;
}

/* Author / Source line */
.news-card-body .kh-font,
.news-card-meta {
    font-size: 1.2rem !important; /* was ~1.05 */
    line-height: 1.7;
    color: #4b5563;
}

/* “Read more” */
.news-card-readmore.kh-font {
    font-size: 1.25rem !important; /* was ~1.0 */
    font-weight: 700;
    color: #059669;
    margin-top: 10px;
}

/* Category badge */
.news-card-badge.kh-font {
    font-size: 1.2rem !important; /* BIGGER badge text */
    padding: 8px 22px !important; /* Bigger button */
    border-radius: 999px;
}

/* Desktop only */
@media (max-width: 1024px) {
    .news-card-title.kh-font {
        font-size: 1.45rem !important;
    }

    .news-card-excerpt.kh-font {
        font-size: 1.15rem !important;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .news-card-title.kh-font {
        font-size: 1.25rem !important;
    }

    .news-card-excerpt.kh-font {
        font-size: 1.05rem !important;
    }

    .news-card-readmore.kh-font {
        font-size: 1.1rem !important;
    }
}


/* ===========================
   RHAC News Page (Modern)
   =========================== */

:root {
    --bg: #f6fbf9;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --line: #e6efe9;
    /* RHAC feel: green + a bit blue */
    --brand1: #0fa56e;
    --brand2: #0ea5e9;
    --shadow: 0 18px 50px rgba(2,6,23,.10);
    --shadow-soft: 0 10px 30px rgba(2,6,23,.08);
    --ring: 0 0 0 4px rgba(14,165,233,.14);
}

.news-page {
    padding-top: 18px;
    padding-bottom: 36px;
}

/* ===== Header ===== */
.news-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.news-page-title {
    margin: 0;
    font-weight: 900;
    letter-spacing: .2px;
    font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.3rem);
    line-height: 1.2;
    /* gradient title */
    background: linear-gradient(90deg, var(--brand1), var(--brand2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.news-page-subtitle {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: clamp(1.02rem, .95rem + .25vw, 1.2rem);
    line-height: 1.5;
}

/* ===== Grid ===== */
.news-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 16px;
}

@media (min-width: 640px) {
    .news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .news-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ===== Card ===== */
.news-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

@media (hover:hover) {
    .news-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow);
        border-color: rgba(15,165,110,.22);
    }
}

.news-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* ===== Image ===== */
.news-card-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, rgba(15,165,110,.10), rgba(14,165,233,.10));
    overflow: hidden;
}

.news-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
    transition: transform .22s ease;
}

@media (hover:hover) {
    .news-card:hover .news-card-image {
        transform: scale(1.05);
    }
}

/* placeholder when no image */
.news-card-placeholder {
    width: 100%;
    height: 100%;
    background: radial-gradient(900px 300px at 20% 10%, rgba(15,165,110,.18), transparent 50%), radial-gradient(800px 260px at 90% 90%, rgba(14,165,233,.18), transparent 55%), linear-gradient(135deg, rgba(2,6,23,.06), rgba(2,6,23,.02));
}

/* ===== Badge ===== */
.news-card-badge {
    position: absolute;
    left: 12px;
    top: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .92rem;
    color: #0b3b2a;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,165,110,.18);
    box-shadow: 0 10px 24px rgba(2,6,23,.10);
    backdrop-filter: blur(6px);
}

/* ===== Body ===== */
.news-card-body {
    padding: 14px 14px 16px;
}

/* meta row */
.news-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.news-card-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: .98rem;
    font-weight: 700;
}

/* title */
.news-card-title {
    margin: 0 0 8px 0;
    font-weight: 900;
    color: var(--text);
    letter-spacing: .1px;
    font-size: 1.25rem;
    line-height: 1.35;
    /* clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-excerpt {
    margin: 0 0 12px 0;
    color: #334155;
    line-height: 1.7;
    font-size: 1.02rem;
    /* clamp to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* read more */
.news-card-readmore {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    color: #0b5fae;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(14,165,233,.18);
    background: linear-gradient(180deg, rgba(14,165,233,.10), rgba(14,165,233,.05));
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

    .news-card-readmore .arrow {
        font-size: 1.05em;
        line-height: 1;
    }

@media (hover:hover) {
    .news-card:hover .news-card-readmore {
        transform: translateY(-1px);
        box-shadow: 0 12px 26px rgba(14,165,233,.16);
        filter: brightness(1.02);
    }
}

/* ===== Pagination ===== */
.news-pagination {
    margin-top: 22px;
    display: flex;
    justify-content: center;
}

    .news-pagination .pagination {
        gap: 6px;
    }

    .news-pagination .page-link {
        border-radius: 12px !important;
        border: 1px solid var(--line) !important;
        color: #0b5fae !important;
        font-weight: 800;
        padding: 8px 12px;
    }

    .news-pagination .page-item.active .page-link {
        background: linear-gradient(90deg, var(--brand1), var(--brand2)) !important;
        border-color: transparent !important;
        color: #fff !important;
        box-shadow: 0 12px 26px rgba(14,165,233,.18);
    }

/* Empty state */
.news-empty {
    margin-top: 20px;
    color: var(--muted);
    font-size: 1.1rem;
}

/* Mobile: nicer padding */
@media (max-width: 480px) {
    .news-card-body {
        padding: 12px 12px 14px;
    }

    .news-card-title {
        font-size: 1.18rem;
    }
}
/* ===== Force FIX: badge not become huge on mobile ===== */
@media (max-width: 576px) {
    .news-grid .news-card .news-card-image-wrapper .news-card-badge,
    .news-grid .news-card .news-card-image-wrapper .news-card-badge.kh-font {
        display: inline-flex !important;
        align-items: center !important;
        /* hard reset size */
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: calc(100% - 24px) !important;
        max-height: none !important;
        /* text size */
        font-size: 14px !important;
        line-height: 1.15 !important;
        /* spacing */
        padding: 6px 10px !important;
        /* prevent wrap creating big shape */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border-radius: 999px !important;
    }
}
/* =========================================
   Mobile/Tablet: badge must NOT cover image
   Move badge below image
   ========================================= */
@media (max-width: 991.98px) {

    /* remove absolute overlay badge */
    .news-card-image-wrapper .news-card-badge {
        position: static !important;
        display: inline-flex !important;
        width: auto !important;
        height: auto !important;
        margin: 10px 12px 0 !important; /* below image */
        padding: 7px 12px !important;
        border-radius: 999px !important;
        font-size: 14px !important;
        line-height: 1.15 !important;
        max-width: calc(100% - 24px) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        background: rgba(255,255,255,.95) !important;
        border: 1px solid rgba(15,165,110,.18) !important;
        box-shadow: 0 10px 22px rgba(2,6,23,.10) !important;
    }

    /* give wrapper a bit of bottom space so badge fits nicely */
    .news-card-image-wrapper {
        padding-bottom: 10px; /* creates space under the image */
    }
}

@media (max-width: 991.98px) {
    .news-card-image-wrapper {
        aspect-ratio: 16 / 9;
    }

    .news-card-image {
        object-fit: cover;
    }
}
/* ======================================
   No Image Card Style
   ====================================== */

.news-card-noimage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 24px;
    background: linear-gradient( 135deg, rgba(15,165,110,.08), rgba(14,165,233,.08) );
    text-align: center;
}

.news-card-noimage-title {
    font-family: "Battambang","Siemreap",sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1.6;
    color: #0fa56e; /* ✅ green brand color */
}

/* Mobile adjust */
@media (max-width: 576px) {
    .news-card-noimage-title {
        font-size: 1.15rem;
    }
}
/* =========================================================
   NEWS CARD IMAGE AREA (consistent)
   ========================================================= */

/* make wrapper behave like a proper hero area */
.news-grid .news-card-image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    /* consistent height for image/no-image */
    aspect-ratio: 16 / 9;
    background: #f3faf7;
}

/* image always fill nicely */
.news-grid .news-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================================
   BADGE (category) - small pill, never circle
   ========================================================= */
.news-grid .news-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.15;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,165,110,.18);
    box-shadow: 0 12px 26px rgba(2,6,23,.12);
    max-width: calc(100% - 24px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================================
   NO IMAGE HERO (beautiful)
   ========================================================= */
.news-grid .news-card-noimage {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    background: radial-gradient(260px 120px at 20% 20%, rgba(15,165,110,.22), transparent 60%), radial-gradient(260px 120px at 80% 80%, rgba(14,165,233,.18), transparent 60%), linear-gradient(135deg, rgba(15,165,110,.08), rgba(14,165,233,.08));
}

    /* small RHAC pill */
    .news-grid .news-card-noimage .noimage-badge {
        display: inline-flex;
        padding: 6px 12px;
        border-radius: 999px;
        font-weight: 1000;
        font-size: 13px;
        color: #0b3b2a;
        background: rgba(255,255,255,.90);
        border: 1px solid rgba(15,165,110,.18);
        margin-bottom: 10px;
    }

    /* title in green */
    .news-grid .news-card-noimage .noimage-title {
        font-weight: 1000;
        font-size: 1.25rem;
        line-height: 1.35;
        color: #0fa56e;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 8px;
    }

    /* subtitle */
    .news-grid .news-card-noimage .noimage-sub {
        font-weight: 700;
        color: #475569;
        font-size: .98rem;
    }

/* =========================================================
   Mobile: badge never covers image (optional)
   ========================================================= */
@media (max-width: 576px) {
    .news-grid .news-card-image-wrapper {
        aspect-ratio: 16 / 10;
    }

    .news-grid .news-card-noimage .noimage-title {
        font-size: 1.12rem;
    }
}
/* =========================================
   FIX: do not cover image
   category tag shown in body instead
   ========================================= */

/* ensure old overlay badge never appears */
.news-card-image-wrapper .news-card-badge {
    display: none !important;
}

/* tag style under image */
.news-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.15;
    color: #0b3b2a;
    background: rgba(15,165,110,.10);
    border: 1px solid rgba(15,165,110,.22);
    margin: 4px 0 10px;
}
/* ======================================
   Increase font size for no-image card
   ====================================== */

.news-card-noimage .noimage-badge {
    font-size: 16px !important; /* bigger */
    font-weight: 1000 !important;
    padding: 8px 16px !important;
}

.news-card-noimage .noimage-title {
    font-size: 1.6rem !important; /* larger title */
    font-weight: 1000 !important;
    line-height: 1.4 !important;
    color: #0fa56e !important; /* green */
}

/* Responsive tuning */
@media (max-width: 576px) {
    .news-card-noimage .noimage-title {
        font-size: 1.25rem !important;
    }

    .news-card-noimage .noimage-badge {
        font-size: 14px !important;
    }
}
/* ======================================
   BIGGER no-image hero text
   ====================================== */

.news-card-noimage .noimage-badge {
    font-size: 18px !important; /* much bigger */
    font-weight: 1000 !important;
    padding: 10px 18px !important;
}

.news-card-noimage .noimage-title {
    font-size: 2.1rem !important; /* BIG */
    font-weight: 1000 !important;
    line-height: 1.35 !important;
    color: #0fa56e !important;
}

/* Desktop even larger */
@media (min-width: 1200px) {
    .news-card-noimage .noimage-title {
        font-size: 2.4rem !important;
    }
}

/* Mobile responsive */
@media (max-width: 576px) {
    .news-card-noimage .noimage-title {
        font-size: 1.6rem !important;
    }

    .news-card-noimage .noimage-badge {
        font-size: 15px !important;
    }
}
/* =========================================
   FIX: Khmer letters bottom not clipped
   ========================================= */

.news-card-noimage {
    overflow: visible !important; /* allow text to breathe */
}

    .news-card-noimage .noimage-title {
        line-height: 1.55 !important; /* increase line spacing */
        padding-bottom: 8px !important; /* extra bottom space */
        overflow: visible !important;
        /* REMOVE clamp cutting bottom */
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
    }

    .news-card-noimage .noimage-badge {
        line-height: 1.4 !important;
    }

/* Make sure wrapper not cutting bottom */
.news-card-image-wrapper {
    overflow: hidden; /* keep image clean */
}

.news-card-noimage {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}
/* =========================================
   Fix: keep "អានបន្ត" aligned (no-image card too)
   ========================================= */

/* Make each card a flex column so footer can stick bottom */
.news-grid .news-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Body grows to fill space */
.news-grid .news-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Readmore stays at bottom of body */
.news-grid .news-card-readmore {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Ensure image/no-image hero same height */
.news-grid .news-card-image-wrapper {
    aspect-ratio: 16 / 9; /* consistent */
}

/* No-image hero should not exceed wrapper height */
.news-grid .news-card-noimage {
    height: 100%;
    padding: 18px !important; /* keep inside */
}

    /* Optional: reduce big title so it doesn't push content too much */
    .news-grid .news-card-noimage .noimage-title {
        margin-bottom: 8px;
    }
/* =========================================
   HARD FIX: make image/no-image hero SAME height
   and keep "អានបន្ត" aligned
   ========================================= */

/* 1) Card becomes flex column (full height) */
.news-grid .news-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 2) FIX hero height to be identical for all cards */
.news-grid .news-card-image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden; /* ✅ important: stop inner content expanding height */
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    /* ✅ lock height (desktop) */
    height: 240px; /* adjust if you want 220/260 */
}

/* Tablet */
@media (max-width: 991.98px) {
    .news-grid .news-card-image-wrapper {
        height: 210px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .news-grid .news-card-image-wrapper {
        height: 190px;
    }
}

/* 3) Image fills the locked hero height */
.news-grid .news-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 4) No-image block must fit inside hero (never grow it) */
.news-grid .news-card-noimage {
    height: 100%;
    width: 100%;
    overflow: hidden; /* ✅ important */
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    /* 5) Limit title lines inside no-image so it never pushes height */
    .news-grid .news-card-noimage .noimage-title {
        line-height: 1.55 !important;
        padding-bottom: 6px !important;
        /* ✅ clamp safely without cutting Khmer legs */
        max-height: calc(1.55em * 2 + 10px);
        overflow: hidden;
    }

/* 6) Body fills remaining space; Readmore sticks to bottom */
.news-grid .news-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.news-grid .news-card-readmore {
    margin-top: auto;
}
/* =========================================
   News Page Hero Header (modern + popup shadow)
   ========================================= */

.news-page-header {
    position: relative;
    padding: 22px 22px 20px;
    margin: 18px 0 22px;
    border-radius: 20px;
    border: 1px solid rgba(2,6,23,.06);
    background: radial-gradient(520px 160px at 12% 10%, rgba(15,165,110,.18), transparent 60%), radial-gradient(520px 160px at 88% 0%, rgba(14,165,233,.16), transparent 58%), linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
    box-shadow: 0 22px 70px rgba(2,6,23,.12), 0 8px 22px rgba(2,6,23,.06);
    backdrop-filter: blur(6px);
    overflow: hidden;
}

    /* top accent bar */
    .news-page-header::before {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        top: 0;
        height: 4px;
        border-radius: 999px;
        background: linear-gradient(90deg, #0fa56e, #0ea5e9);
        opacity: .9;
    }

/* title */
.news-page-title {
    margin: 0 0 8px 0;
    font-weight: 1000;
    line-height: 1.2;
    letter-spacing: .2px;
    /* modern size */
    font-size: clamp(2.0rem, 1.4rem + 1.6vw, 3.0rem);
    /* strong + readable */
    color: #0f172a;
    text-shadow: 0 10px 28px rgba(2,6,23,.10);
}

/* subtitle */
.news-page-subtitle {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.75;
    font-weight: 700;
    color: #475569;
    max-width: 62ch;
}

/* Mobile */
@media (max-width: 576px) {
    .news-page-header {
        padding: 16px 16px 14px;
        border-radius: 18px;
        margin: 12px 0 18px;
    }

    .news-page-subtitle {
        font-size: 1.02rem;
    }
}

.news-page-header {
    overflow: visible; /* កុំ hidden */
}

.news-page-header {
    position: relative;
    padding: 28px 28px 26px;
    margin: 18px 0 22px;
    border-radius: 20px;
    border: 1px solid rgba(2,6,23,.06);
    background: radial-gradient(520px 160px at 12% 10%, rgba(15,165,110,.18), transparent 60%), radial-gradient(520px 160px at 88% 0%, rgba(14,165,233,.16), transparent 58%), linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85));
    box-shadow: 0 22px 70px rgba(2,6,23,.12), 0 8px 22px rgba(2,6,23,.06);
    backdrop-filter: blur(6px);
    /* ❌ REMOVE THIS */
    /* overflow: hidden; */

    overflow: visible; /* ✅ IMPORTANT */
}

.news-page-title {
    font-family: "Moul", "Battambang", sans-serif;
    font-weight: 500;
    font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
    line-height: 1.9; /* Khmer safe */
    padding-bottom: .3rem; /* give space for leg */
    margin-bottom: .5rem;
    overflow: visible; /* prevent clipping */
    display: inline-block; /* important */

    text-shadow: none; /* remove heavy shadow */
}
/* =========================================
   FIX: noimage-title Khmer last letter clipped (INDEX)
   ========================================= */

.news-grid .news-card-noimage {
    overflow: visible !important; /* allow glyphs */
}

    /* remove any clamp that can cut Khmer */
    .news-grid .news-card-noimage .noimage-title {
        display: block !important;
        max-height: none !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        overflow: visible !important;
        white-space: normal !important;
        line-height: 1.65 !important; /* Khmer-safe */
        padding-bottom: 10px !important; /* prevent bottom cut */
        padding-right: 6px !important; /* prevent last letter cut */

        letter-spacing: 0 !important;
        text-shadow: none !important;
    }

/* if wrapper was clipping */
.news-grid .news-card-image-wrapper {
    overflow: hidden; /* keep rounded corners */
}
/* =========================================
   HARD FIX: noimage-title last letter clipped (INDEX)
   Keep wrapper overflow hidden, but give safe padding
   ========================================= */

/* keep hero clean */
.news-grid .news-card-image-wrapper {
    overflow: hidden;
}

/* make no-image area have safe inner space */
.news-grid .news-card-noimage {
    height: 100%;
    width: 100%;
    padding: 22px 26px !important; /* ✅ more left/right space */
    box-sizing: border-box !important;
    overflow: hidden !important; /* keep inside hero */
}

    /* title Khmer-safe: never touch edges */
    .news-grid .news-card-noimage .noimage-title {
        display: inline-block !important; /* ✅ important */
        max-width: 92% !important; /* ✅ prevents edge clipping */
        margin: 0 auto 10px !important;
        text-align: center !important;
        line-height: 1.65 !important;
        padding: 6px 10px 12px !important; /* ✅ extra bottom + right padding */
        box-sizing: border-box !important;
        overflow: visible !important;
        white-space: normal !important;
        word-break: break-word !important;
        letter-spacing: 0 !important;
        /* remove any clamp that cuts */
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        max-height: none !important;
    }

    /* badge also safe */
    .news-grid .news-card-noimage .noimage-badge {
        display: inline-block !important;
        margin: 0 auto 12px !important;
        padding: 8px 16px !important;
        line-height: 1.4 !important;
    }

/* Mobile tuning */
@media (max-width: 576px) {
    .news-grid .news-card-noimage {
        padding: 18px 18px !important;
    }

        .news-grid .news-card-noimage .noimage-title {
            max-width: 96% !important;
            padding: 6px 8px 12px !important;
        }
}
/* =========================================
   FIX: noimage-badge Khmer clipping
   ========================================= */

.news-grid .news-card-noimage {
    position: relative;
    padding-top: 40px !important; /* give space on top */
}

    /* badge safe positioning */
    .news-grid .news-card-noimage .noimage-badge {
        position: relative !important; /* ❌ remove absolute */
        top: auto !important;
        left: auto !important;
        display: inline-block !important;
        padding: 8px 18px !important;
        margin-bottom: 16px !important;
        line-height: 1.6 !important; /* Khmer safe */
        overflow: visible !important;
        border-radius: 999px;
    }
/* =====================================================
   NO-IMAGE HERO (INDEX) — Khmer Safe + More Beautiful
   Put at END of news.css
   ===================================================== */

/* Keep rounded corners clean */
.news-grid .news-card-image-wrapper {
    overflow: hidden;
}

/* No-image hero layout: give safe top/bottom padding */
.news-grid .news-card-noimage {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    /* ✅ more breathing room so Khmer marks never touch edges */
    padding: 34px 26px 28px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* center nicely */
    text-align: center;
    /* modern soft background */
    background: radial-gradient(260px 150px at 18% 18%, rgba(15,165,110,.22), transparent 62%), radial-gradient(280px 160px at 82% 82%, rgba(14,165,233,.18), transparent 64%), linear-gradient(135deg, rgba(15,165,110,.08), rgba(14,165,233,.08)) !important;
}

    /* Badge: do NOT stick to top edge */
    .news-grid .news-card-noimage .noimage-badge {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        display: inline-block !important;
        padding: 10px 18px !important;
        /* ✅ Khmer safe */
        line-height: 1.7 !important;
        margin: 0 0 14px 0 !important;
        border-radius: 999px;
        background: rgba(255,255,255,.92);
        border: 1px solid rgba(15,165,110,.20);
        box-shadow: 0 10px 22px rgba(2,6,23,.08);
    }

    /* Title: Khmer-safe, no clipping, more balanced */
    .news-grid .news-card-noimage .noimage-title {
        display: inline-block !important;
        max-width: 92% !important; /* ✅ avoid touching edges */
        box-sizing: border-box !important;
        /* ✅ Khmer safe spacing */
        line-height: 1.75 !important;
        padding: 6px 10px 14px !important; /* ✅ extra bottom for legs */
        margin: 0 !important;
        letter-spacing: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        word-break: break-word !important;
        /* ✅ slightly smaller so it fits hero better (prettier) */
        font-size: clamp(1.55rem, 1.05rem + 1.2vw, 2.05rem) !important;
        font-weight: 1000 !important;
        color: #0fa56e !important;
        /* make lines look nicer */
        text-wrap: balance;
        text-shadow: none !important;
    }

    /* Optional subtitle if you use it */
    .news-grid .news-card-noimage .noimage-sub {
        margin-top: 10px;
        color: #475569;
        font-weight: 700;
    }

/* Mobile tuning */
@media (max-width: 576px) {
    .news-grid .news-card-noimage {
        padding: 26px 16px 22px !important;
    }

        .news-grid .news-card-noimage .noimage-title {
            max-width: 96% !important;
            font-size: 1.45rem !important;
            line-height: 1.8 !important;
            padding-bottom: 14px !important;
        }

        .news-grid .news-card-noimage .noimage-badge {
            padding: 9px 16px !important;
            line-height: 1.75 !important;
        }
}
/* =========================
   NO IMAGE BADGE (exact like screenshot)
   ========================= */


.noimage-badge {
    background: #ffffff !important;
    color: #009245 !important; /* RHAC green text */
    border: 2px solid #00b96a !important;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: .4px;
    padding: 10px 20px;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(0,185,106,.18), 0 2px 6px rgba(0,0,0,.06);
    transition: all .25s ease;
}
/* ===== FINAL STABLE: always aligned + never overlap ===== */

/* 1) fixed media height for all cards */
.news-card-image-wrapper {
    position: relative !important;
    height: 260px !important;
    overflow: hidden !important;
    border-radius: 20px !important;
}

/* 2) no-image background fills */
.news-card-noimage {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg,#d9efe6,#cfe6de) !important;
    /* IMPORTANT: not vertical center */
    display: block !important;
    padding: 18px 18px 18px !important;
    /* ✅ reserve space for badge so title never touches */
    padding-top: 92px !important;
    box-sizing: border-box !important;
}

/* 3) badge fixed position (same row always) */
.noimage-badge {
    position: absolute !important;
    top: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    padding: 10px 28px !important;
    border-radius: 999px !important;
    background: #f3f9f6 !important;
    border: 2px solid #0f9d58 !important;
    color: #0f9d58 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* 4) title: centered horizontally, but not overlapping */
.noimage-title {
    margin: 0 auto !important;
    width: min(92%, 520px) !important;
    text-align: center !important;
    color: #0f9d58 !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    /* keep it neat */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
/* Force smaller noimage title */
.news-card-noimage .noimage-title{
  font-size: 18px !important;      /* smaller */
  line-height: 1.35 !important;
  font-weight: 700 !important;     /* reduce from 800 */
  letter-spacing: 0 !important;
}
.news-card-noimage .noimage-title{
  font-size: 16px !important;
}
/* FORCE smaller font for noimage title (override kh-font & others) */
.news-card-noimage .noimage-title.kh-font{
  font-size: 28px !important;     /* ✅ make smaller */
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

/* optional: even smaller on mobile */
@media (max-width: 576px){
  .news-card-noimage .noimage-title.kh-font{
    font-size: 26px !important;
  }
}