/* ==========================================================================
   CEMRCB / RIVER — Design System
   A shared, responsive component layer. All classes are namespaced `ds-`
   so they never collide with legacy page styles. Assumes the site's
   `html { font-size: 62.5% }` base (1rem = 10px).
   ========================================================================== */

:root {
    /* Brand */
    --ds-brand: #004aad;
    --ds-brand-strong: #003a87;
    --ds-brand-soft: #e8f0fb;
    --ds-green: #00703c;
    --ds-green-soft: #e6f2ec;
    --ds-gradient: linear-gradient(135deg, #004aad 0%, #0a6cc4 45%, #00703c 100%);

    /* Neutrals */
    --ds-ink: #0f1b2d;
    --ds-body: #33415c;
    --ds-muted: #64748b;
    --ds-line: #e4e9f2;
    --ds-surface: #ffffff;
    --ds-surface-2: #f6f8fc;
    --ds-page-bg: #f1f4f9;

    /* Semantic */
    --ds-danger: #dc2626;
    --ds-warning: #d97706;
    --ds-success: #16a34a;

    /* Typography */
    --ds-font: "Inter", "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ds-h1: clamp(2.8rem, 1.9rem + 2.6vw, 4.4rem);
    --ds-h2: clamp(2.2rem, 1.7rem + 1.6vw, 3.2rem);
    --ds-h3: clamp(1.8rem, 1.5rem + 0.9vw, 2.2rem);
    --ds-lead: clamp(1.6rem, 1.5rem + 0.4vw, 1.9rem);
    --ds-text: 1.6rem;
    --ds-small: 1.3rem;

    /* Space */
    --ds-1: 0.4rem;
    --ds-2: 0.8rem;
    --ds-3: 1.2rem;
    --ds-4: 1.6rem;
    --ds-5: 2.4rem;
    --ds-6: 3.2rem;
    --ds-7: 4.8rem;
    --ds-8: 6.4rem;
    --ds-9: 9.6rem;

    /* Radius / shadow / motion */
    --ds-radius-sm: 8px;
    --ds-radius: 14px;
    --ds-radius-lg: 22px;
    --ds-radius-pill: 999px;
    --ds-shadow-xs: 0 1px 2px rgba(15, 27, 45, .06);
    --ds-shadow-sm: 0 4px 14px rgba(15, 27, 45, .07);
    --ds-shadow: 0 12px 30px rgba(15, 27, 45, .10);
    --ds-shadow-lg: 0 26px 60px rgba(15, 27, 45, .16);
    --ds-ring: 0 0 0 3px rgba(0, 74, 173, .28);
    --ds-ease: 0.22s cubic-bezier(.4, 0, .2, 1);

    /* Layout */
    --ds-container: 1180px;
    --ds-container-wide: 1400px;
    --ds-container-narrow: 760px;
}

/* --------------------------------------------------------------------------
   Base — opt-in via `.ds` on a wrapper so legacy pages are untouched
   -------------------------------------------------------------------------- */
.ds {
    font-family: var(--ds-font);
    font-size: var(--ds-text);
    line-height: 1.65;
    color: var(--ds-body);
    -webkit-font-smoothing: antialiased;
}

.ds *,
.ds *::before,
.ds *::after {
    box-sizing: border-box;
}

.ds h1,
.ds h2,
.ds h3,
.ds h4 {
    color: var(--ds-ink);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

.ds h1 { font-size: var(--ds-h1); }
.ds h2 { font-size: var(--ds-h2); }
.ds h3 { font-size: var(--ds-h3); }

.ds p { margin: 0; }

.ds a {
    color: var(--ds-brand);
    text-decoration: none;
    transition: color var(--ds-ease);
}

.ds a:hover { color: var(--ds-brand-strong); }

.ds img {
    max-width: 100%;
    height: auto;
    display: block;
}

.ds :focus-visible {
    outline: none;
    box-shadow: var(--ds-ring);
    border-radius: var(--ds-radius-sm);
}

/* --------------------------------------------------------------------------
   Page scaffold
   -------------------------------------------------------------------------- */
.ds-page {
    background: var(--ds-page-bg);
    min-height: 60vh;
    padding: clamp(2.4rem, 1rem + 4vw, 5.6rem) 0 var(--ds-9);
}

.ds-container {
    width: 100%;
    max-width: var(--ds-container);
    margin-inline: auto;
    padding-inline: clamp(1.6rem, 0.8rem + 2vw, 3.2rem);
}

.ds-container--wide { max-width: var(--ds-container-wide); }
.ds-container--narrow { max-width: var(--ds-container-narrow); }

.ds-stack > * + * { margin-top: var(--ds-5); }
.ds-stack-lg > * + * { margin-top: var(--ds-7); }

/* --------------------------------------------------------------------------
   Page header / hero
   -------------------------------------------------------------------------- */
.ds-page-head {
    text-align: center;
    max-width: 70ch;
    margin: 0 auto var(--ds-7);
}

.ds-page-head__eyebrow {
    display: inline-block;
    font-size: var(--ds-small);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ds-brand);
    margin-bottom: var(--ds-3);
}

.ds-page-head h1 { margin-bottom: var(--ds-3); }

.ds-page-head p {
    font-size: var(--ds-lead);
    color: var(--ds-muted);
}

.ds-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--ds-radius-lg);
    background: var(--ds-gradient);
    color: #fff;
    padding: clamp(2.8rem, 1.6rem + 4vw, 5.6rem);
    box-shadow: var(--ds-shadow);
}

.ds-hero::after {
    content: "";
    position: absolute;
    right: -8rem;
    top: -8rem;
    width: 26rem;
    height: 26rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
}

.ds-hero > * { position: relative; z-index: 1; }
.ds-hero h1 { color: #fff; }
.ds-hero p {
    color: rgba(255, 255, 255, .9);
    font-size: var(--ds-lead);
    margin-top: var(--ds-3);
    max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.ds-btn {
    --_bg: var(--ds-brand);
    --_fg: #fff;
    --_bd: var(--ds-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-2);
    padding: 1rem 1.8rem;
    font: inherit;
    font-size: var(--ds-small);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid var(--_bd);
    border-radius: var(--ds-radius-pill);
    background: var(--_bg);
    color: var(--_fg);
    transition: transform var(--ds-ease), box-shadow var(--ds-ease), background var(--ds-ease);
}

.ds-btn:hover {
    color: var(--_fg);
    transform: translateY(-1px);
    box-shadow: var(--ds-shadow-sm);
}

.ds-btn:active { transform: translateY(0); }

.ds-btn--ghost {
    --_bg: transparent;
    --_fg: var(--ds-brand);
    --_bd: var(--ds-line);
}

.ds-btn--ghost:hover {
    --_bg: var(--ds-brand-soft);
    --_fg: var(--ds-brand-strong);
}

.ds-btn--green { --_bg: var(--ds-green); --_bd: var(--ds-green); }
.ds-btn--block { width: 100%; }
.ds-btn--sm { padding: 0.7rem 1.3rem; }

/* --------------------------------------------------------------------------
   Cards & grid
   -------------------------------------------------------------------------- */
.ds-card-grid {
    display: grid;
    gap: var(--ds-5);
    grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
}

.ds-card-grid--2 { grid-template-columns: repeat(auto-fill, minmax(34rem, 1fr)); }

.ds-card {
    display: flex;
    flex-direction: column;
    background: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow-xs);
    overflow: hidden;
    transition: transform var(--ds-ease), box-shadow var(--ds-ease), border-color var(--ds-ease);
}

.ds-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ds-shadow);
    border-color: #cfdcee;
}

.ds-card__media {
    aspect-ratio: 16 / 10;
    width: 100%;
    object-fit: cover;
    background: var(--ds-surface-2);
    border-bottom: 1px solid var(--ds-line);
}

.ds-card__media--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.4rem;
    color: #cbd5e1;
}

.ds-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--ds-2);
    padding: var(--ds-4);
    flex: 1;
}

.ds-card__title {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--ds-ink);
    line-height: 1.35;
}

.ds-card__meta {
    font-size: var(--ds-small);
    color: var(--ds-muted);
}

.ds-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-2);
    margin-top: auto;
    padding-top: var(--ds-3);
}

/* --------------------------------------------------------------------------
   Panel (plain content surface)
   -------------------------------------------------------------------------- */
.ds-panel {
    background: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow-xs);
    padding: clamp(1.8rem, 1rem + 2vw, 3.2rem);
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-1);
    padding: 0.4rem 1rem;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-brand-soft);
    color: var(--ds-brand-strong);
}

.ds-badge--green { background: var(--ds-green-soft); color: var(--ds-green); }
.ds-badge--muted { background: var(--ds-surface-2); color: var(--ds-muted); }
.ds-badge--warning { background: #fef3e2; color: var(--ds-warning); }

/* --------------------------------------------------------------------------
   Forms / search
   -------------------------------------------------------------------------- */
.ds-field {
    width: 100%;
    padding: 1.1rem 1.4rem;
    font: inherit;
    font-size: var(--ds-text);
    color: var(--ds-ink);
    background: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-sm);
    transition: border-color var(--ds-ease), box-shadow var(--ds-ease);
}

.ds-field:focus {
    outline: none;
    border-color: var(--ds-brand);
    box-shadow: var(--ds-ring);
}

.ds-search {
    display: flex;
    gap: var(--ds-2);
    width: min(48rem, 100%);
    margin-inline: auto;
}

.ds-search .ds-field { border-radius: var(--ds-radius-pill); }

/* --------------------------------------------------------------------------
   Table
   -------------------------------------------------------------------------- */
.ds-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow-xs);
    background: var(--ds-surface);
}

.ds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.45rem;
}

.ds-table th {
    text-align: left;
    padding: 1.3rem 1.6rem;
    background: var(--ds-surface-2);
    color: var(--ds-ink);
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 1px solid var(--ds-line);
}

.ds-table td {
    padding: 1.2rem 1.6rem;
    border-bottom: 1px solid var(--ds-line);
    color: var(--ds-body);
}

.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr { transition: background var(--ds-ease); }
.ds-table tbody tr:hover { background: var(--ds-brand-soft); }

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.ds-empty {
    text-align: center;
    padding: var(--ds-8) var(--ds-4);
    color: var(--ds-muted);
    background: var(--ds-surface);
    border: 1px dashed var(--ds-line);
    border-radius: var(--ds-radius);
}

.ds-empty__icon {
    font-size: 3.6rem;
    margin-bottom: var(--ds-2);
    opacity: .7;
}

/* --------------------------------------------------------------------------
   Prose (article body)
   -------------------------------------------------------------------------- */
.ds-prose {
    font-size: var(--ds-lead);
    line-height: 1.8;
    color: var(--ds-body);
}

.ds-prose > * + * { margin-top: 1.4em; }
.ds-prose h2 { font-size: var(--ds-h2); margin-top: 1.6em; }
.ds-prose h3 { font-size: var(--ds-h3); margin-top: 1.4em; }
.ds-prose img { border-radius: var(--ds-radius); }
.ds-prose a { text-decoration: underline; }
.ds-prose ul,
.ds-prose ol { padding-left: 1.6em; }
.ds-prose li + li { margin-top: .4em; }

/* --------------------------------------------------------------------------
   Pagination (works with Laravel's default markup too)
   -------------------------------------------------------------------------- */
.ds-pagination {
    margin-top: var(--ds-7);
    display: flex;
    justify-content: center;
}

.ds-pagination nav > div:first-child { display: none; }

.ds-pagination .pagination {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--ds-1);
    list-style: none;
    padding: 0;
    margin: 0;
}

.ds-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    height: 4rem;
    padding: 0 1.2rem;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-body);
    font-size: var(--ds-small);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--ds-ease), color var(--ds-ease), border-color var(--ds-ease);
}

.ds-pagination .page-link:hover {
    background: var(--ds-brand-soft);
    border-color: var(--ds-brand);
    color: var(--ds-brand-strong);
}

.ds-pagination .active .page-link {
    background: var(--ds-brand);
    border-color: var(--ds-brand);
    color: #fff;
}

.ds-pagination .disabled .page-link {
    opacity: .45;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Small utilities
   -------------------------------------------------------------------------- */
.ds-muted { color: var(--ds-muted); }
.ds-center { text-align: center; }
.ds-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ds-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .ds *,
    .ds *::before,
    .ds *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ==========================================================================
   Site footer (rendered outside the `.ds` wrapper — self-contained)
   ========================================================================== */
.ds-footer {
    font-family: var(--ds-font);
    background: #0c1a2e;
    color: #c6d2e2;
    font-size: 1.45rem;
    line-height: 1.7;
}

.ds-footer a {
    color: #c6d2e2;
    text-decoration: none;
    transition: color var(--ds-ease);
}

.ds-footer a:hover { color: #fff; }

.ds-footer__top {
    max-width: var(--ds-container);
    margin-inline: auto;
    padding: clamp(3.2rem, 2rem + 3vw, 5.6rem) clamp(1.6rem, 0.8rem + 2vw, 3.2rem) var(--ds-6);
    display: grid;
    gap: var(--ds-6);
    grid-template-columns: 1.4fr 1fr 1.3fr;
}

@media (max-width: 900px) {
    .ds-footer__top { grid-template-columns: 1fr; gap: var(--ds-5); }
}

.ds-footer__brand-row {
    display: flex;
    align-items: center;
    gap: var(--ds-3);
    margin-bottom: var(--ds-3);
}

.ds-footer__brand-row img {
    height: 4.4rem;
    width: auto;
    background: #fff;
    border-radius: var(--ds-radius-sm);
    padding: .4rem;
}

.ds-footer h4 {
    color: #fff;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 var(--ds-3);
}

.ds-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-2);
}

.ds-footer__links i { width: 1.8rem; text-align: center; margin-right: .6rem; }

.ds-footer__social {
    display: flex;
    gap: var(--ds-2);
    margin-top: var(--ds-3);
}

.ds-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    font-size: 1.7rem;
}

.ds-footer__social a:hover { background: var(--ds-brand); }

.ds-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    text-align: center;
    padding: var(--ds-4);
    font-size: 1.3rem;
    color: #8fa0b6;
}