/* ===============================
   CTSFW News – List View
   =============================== */

.ctsfw-news-list {
    font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    margin-top: 1rem;
    /* max-width: 960px; */
    width:80%;
}

/* Layout container for cards */
.ctsfw-news-list--layout-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Empty message */
.ctsfw-news-list--empty {
    font-style: italic;
    opacity: 0.8;
}

/* =========================================================
   Card shell (base)
   ======================================================= */

.ctsfw-news-card {
    border: 1px solid rgba(0, 0, 0, .08);
    padding: 0;
    background: #ffffff;
    transition:
        box-shadow 150ms ease,
        transform 150ms ease,
        border-color 150ms ease,
        background-color 150ms ease;
}

.ctsfw-news-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Inner: flex instead of grid */
.ctsfw-news-card__inner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
}

@media (max-width: 768px) {
    .ctsfw-news-card__inner {
        flex-direction: column;
        padding: 1.25rem 1.5rem;
    }
}

/* Hover */

.ctsfw-news-card:hover,
.ctsfw-news-card:focus-within {
    border-color: #001846;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}

/* =========================================================
   Image
   ======================================================= */

.ctsfw-news-card__image {
    position: relative;
    overflow: hidden;
    min-height: 0;
    flex: 0 0 220px;
}

@media (max-width: 768px) {
    .ctsfw-news-card__image {
        flex: 0 0 auto;
    }
}

.ctsfw-news-card__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform 200ms ease;
}

.ctsfw-news-card:hover .ctsfw-news-card__img,
.ctsfw-news-card:focus-within .ctsfw-news-card__img {
    transform: scale(1.04);
}

/* =========================================================
   Body / header
   ======================================================= */

.ctsfw-news-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1 1 auto;
}

.ctsfw-news-card__header {
    margin-bottom: 0.35rem;
}

/* Title: big, like the email example */
.ctsfw-news-card__title {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 400;
    color: #001846;
}

/* Meta line: "Department: … | Date Published: …" */
.ctsfw-news-card__meta {
    font-size: 1rem;
    line-height: 1.4;
}

/* Department label/value */
.ctsfw-news-card__department {
    font-style: normal;
    font-weight: 600;
    color: #001846;
}

/* Published date (inside the meta) */
.ctsfw-news-card__published-label {
    font-style: normal; 
    font-weight: 600;
    color:#001846;
}

/* Date element itself */
.ctsfw-news-card__date {
    font-style: normal;
}

/* Categories appended to meta, slightly italic */
.ctsfw-news-card__categories {
    font-style: italic;
}

/* Pre-header / excerpt line */
.ctsfw-news-card__excerpt {
    font-size: 1.125rem;
    line-height: 1.6;
    margin-top: 0.5rem;
}

/* =========================================================
   Light / dark theme variants
   You can toggle these by adding the class to the wrapper,
   e.g. class="ctsfw-news-list--layout-list ctsfw-news-list--theme-light"
   or class="... ctsfw-news-list--theme-dark"
   ======================================================= */

/* ---------- Light theme (eggshell background, navy + maroon text) ---------- */
/*
.ctsfw-news-list--theme-light {
    background-color: #f6f4ee;
    padding: 2rem 1.25rem;
}
*/
.ctsfw-news-list--theme-light .ctsfw-news-card {
    background-color: #f6f4ee;
    border-color: transparent;
    box-shadow: none;
}

.ctsfw-news-list--theme-light .ctsfw-news-card:hover,
.ctsfw-news-list--theme-light .ctsfw-news-card:focus-within {
    border-color: #001846;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
}

/* Title: navy on eggshell */
.ctsfw-news-list--theme-light .ctsfw-news-card__title {
    color: #001846;
}

/* Meta: maroon tone for labels/text */
.ctsfw-news-list--theme-light .ctsfw-news-card__meta,
.ctsfw-news-list--theme-light .ctsfw-news-card__department,
.ctsfw-news-list--theme-light .ctsfw-news-card__published-label {
    color: #7b1824;
}

/* Excerpt / pre-header: body text in dark gray */
.ctsfw-news-list--theme-light .ctsfw-news-card__excerpt {
    color: #111827;
}

/* Links in pre-header line (e.g., "Click Here") */
.ctsfw-news-list--theme-light .ctsfw-news-card__excerpt a {
    color: #7b1824;
    text-decoration: underline;
}

/* ---------- Dark theme (navy background, light text) ---------- */

/*
.ctsfw-news-list--theme-dark {
    background-color: #001846;
    padding: 2rem 1.25rem;
}
*/
.ctsfw-news-list--theme-dark .ctsfw-news-card {
    background-color: #001846;
    border-color: transparent;
    box-shadow: none;
}

/* Title: eggshell on navy */
.ctsfw-news-list--theme-dark .ctsfw-news-card__title {
    color: #f6f4ee;
}

/* Meta: slightly lighter navy/blue for department + labels + date */
.ctsfw-news-list--theme-dark .ctsfw-news-card__meta,
.ctsfw-news-list--theme-dark .ctsfw-news-card__department,
.ctsfw-news-list--theme-dark .ctsfw-news-card__published-label,
.ctsfw-news-list--theme-dark .ctsfw-news-card__date {
    color: #d0e2ff;
}

/* Excerpt / pre-header: light text on dark background */
.ctsfw-news-list--theme-dark .ctsfw-news-card__excerpt {
    color: #f6f4ee;
}

/* Links in pre-header line in dark mode */
.ctsfw-news-list--theme-dark .ctsfw-news-card__excerpt a {
    color: #d0e2ff;
    text-decoration: underline;
}

/* Categories in both themes get a subtle tone */
.ctsfw-news-list--theme-light .ctsfw-news-card__categories {
    color: #4b5563;
}

.ctsfw-news-list--theme-dark .ctsfw-news-card__categories {
    color: #cbd5f5;
}

/* =========================================================
   Pagination
   ======================================================= */

.ctsfw-news-pagination {
    margin-top: 2rem;
    text-align: center;
}

.ctsfw-news-pagination ul {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.25rem;
}

.ctsfw-news-pagination li {
    margin: 0;
}

.ctsfw-news-pagination a,
.ctsfw-news-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.4rem 0.7rem;
    font-size: 0.875rem;
    border: 1px solid rgba(0, 0, 0, .12);
    text-decoration: none;
    color: #001846;
    background: #ffffff;
}

.ctsfw-news-pagination .current {
    background: #001846;
    color: #f6f4ee;
    border-color: #001846;
}

.ctsfw-news-pagination a:hover {
    background: #001846;
    color: #f6f4ee;
}