/* ==========================================================
   CVC Newsletters & Reports — Frontend Styles v1.1.0
   Brand: #096AA9 primary · #144047 dark · #138999 teal
   Fonts: Inter (headings) · Rubik (body)
   ========================================================== */

/* Google Fonts loaded via PHP enqueue — avoids FOUC and @import latency */

.cvc-documents-wrapper,
.cvc-latest-list {
    --cvc-primary:       #096AA9;
    --cvc-primary-dark:  #075d93;
    --cvc-primary-pale:  #d8e7f1;
    --cvc-primary-bg:    #eef5fb;
    --cvc-dark:          #144047;
    --cvc-teal:          #138999;
    --cvc-teal-pale:     #e0f4f6;
    --cvc-light:         #f1f6f7;
    --cvc-text:          #144047;
    --cvc-muted:         #54595f;
    --cvc-border:        #d8e7f1;
    --cvc-white:         #ffffff;
    --cvc-radius:        3px;
    --cvc-radius-md:     6px;
    --cvc-radius-lg:     12px;
    --cvc-shadow:        0 2px 8px rgba(9,106,169,.08);
    --cvc-shadow-hover:  0 8px 28px rgba(9,106,169,.16);
    --cvc-font-body:     'Rubik', sans-serif;
    --cvc-font-head:     'Inter', sans-serif;
    font-family: var(--cvc-font-body);
    box-sizing: border-box;
}

.cvc-documents-wrapper *,
.cvc-latest-list * { box-sizing: border-box; }

/* ─────────────────────────────────────────────
   SECTION TITLE
   ───────────────────────────────────────────── */
.cvc-section-title {
    font-family: var(--cvc-font-head);
    font-size: 28px; font-weight: 700;
    color: var(--cvc-dark);
    margin: 0 0 28px;
}

/* ─────────────────────────────────────────────
   NO DOCS
   ───────────────────────────────────────────── */
.cvc-no-docs {
    text-align: center; padding: 48px 24px;
    color: var(--cvc-muted); font-style: italic;
    background: var(--cvc-light);
    border: 2px dashed var(--cvc-border);
    border-radius: var(--cvc-radius-lg);
}

/* ─────────────────────────────────────────────
   TYPE FILTER BAR
   ───────────────────────────────────────────── */
.cvc-filter-bar {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 28px;
}

.cvc-filter-btn {
    background: var(--cvc-white);
    border: 1.5px solid var(--cvc-border);
    color: var(--cvc-muted);
    padding: 7px 18px;
    border-radius: var(--cvc-radius);
    cursor: pointer;
    font-size: 13px; font-weight: 600;
    font-family: var(--cvc-font-body);
    letter-spacing: .3px;
    text-transform: uppercase;
    transition: all .15s;
    line-height: 1.2;
}
.cvc-filter-btn:hover {
    background: var(--cvc-primary-bg);
    border-color: var(--cvc-primary);
    color: var(--cvc-primary);
}
.cvc-filter-btn.cvc-active {
    background: var(--cvc-primary);
    border-color: var(--cvc-primary);
    color: #fff;
}

/* ─────────────────────────────────────────────
   YEAR TABS
   ───────────────────────────────────────────── */
.cvc-year-tabs {
    display: flex; flex-wrap: wrap; gap: 0;
    border-bottom: 2px solid var(--cvc-border);
    margin-bottom: 32px;
}

.cvc-year-tab {
    background: none; border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 11px 26px;
    font-size: 15px; font-weight: 700;
    font-family: var(--cvc-font-head);
    color: var(--cvc-muted);
    cursor: pointer;
    transition: color .15s, border-color .15s;
    line-height: 1;
}
.cvc-year-tab:hover { color: var(--cvc-primary); }
.cvc-year-tab.cvc-active {
    color: var(--cvc-primary);
    border-bottom-color: var(--cvc-primary);
}

/* ─────────────────────────────────────────────
   YEAR PANELS
   ───────────────────────────────────────────── */
.cvc-year-panel        { display: none; animation: cvcSlideIn .2s ease; }
.cvc-year-panel.cvc-active { display: block; }

@keyframes cvcSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────
   DOCUMENT GRID
   ───────────────────────────────────────────── */
.cvc-docs-grid { display: grid; gap: 22px; }
.cvc-cols-1 { grid-template-columns: 1fr; }
.cvc-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cvc-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cvc-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) { .cvc-cols-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .cvc-cols-3, .cvc-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px)  { .cvc-cols-2, .cvc-cols-3, .cvc-cols-4 { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────
   DOCUMENT CARD
   ───────────────────────────────────────────── */
.cvc-doc-card { transition: opacity .15s; }
.cvc-doc-card.cvc-hidden { display: none; }

.cvc-card-inner {
    background: var(--cvc-white);
    border: 1px solid var(--cvc-border);
    border-top: 3px solid var(--cvc-primary);
    border-radius: var(--cvc-radius-lg);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--cvc-shadow);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.cvc-card-inner:hover {
    transform: translateY(-4px);
    box-shadow: var(--cvc-shadow-hover);
    border-color: var(--cvc-primary);
}

/* ── Cover Image ── */
.cvc-card-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--cvc-light);
    flex-shrink: 0;
}
.cvc-card-cover img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.cvc-card-inner:hover .cvc-card-cover img { transform: scale(1.04); }

/* Badge overlay on image */
.cvc-badge-overlay {
    position: absolute !important;
    top: 10px; left: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* ── Card Top (no-image fallback) ── */
.cvc-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 18px 0;
}

/* File type icon block — base styles first, colour overrides after */
.cvc-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border-radius: var(--cvc-radius-md);
    font-size: 12px; font-weight: 900;
    letter-spacing: -.5px; flex-shrink: 0; color: #fff;
    font-family: var(--cvc-font-head);
    /* Default/fallback colour */
    background: linear-gradient(135deg, #144047 0%, #0d2b30 100%);
}
/* These classes are added alongside .cvc-card-icon, so they share the same specificity.
   They MUST come after the base rule to override the fallback background. */
.cvc-icon-pdf               { background: linear-gradient(135deg, #e02020 0%, #b91c1c 100%); }
.cvc-icon-docx,
.cvc-icon-doc               { background: linear-gradient(135deg, #096AA9 0%, #075d93 100%); }
.cvc-icon-jpg,
.cvc-icon-jpeg,
.cvc-icon-png               { background: linear-gradient(135deg, #138999 0%, #0e7280 100%); }

/* ── Card Body ── */
.cvc-card-body {
    padding: 14px 18px 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* Type badge */
.cvc-type-badge {
    display: inline-block;
    font-size: 10px; font-weight: 700;
    padding: 3px 10px; border-radius: var(--cvc-radius);
    letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
    font-family: var(--cvc-font-body);
}
.cvc-type-newsletter       { background: #d8e7f1; color: #096aa9; }
.cvc-type-annual_report    { background: #e0f4f6; color: #138999; }
.cvc-type-financial_report { background: #fef3c7; color: #92400e; }
.cvc-type-impact_report    { background: #e8e4f9; color: #5b21b6; }
.cvc-type-other            { background: #f1f6f7; color: #54595f; }

/* Date */
.cvc-card-date {
    font-size: 11px; font-weight: 500;
    color: var(--cvc-muted); display: block;
    text-transform: uppercase; letter-spacing: .4px;
    font-family: var(--cvc-font-head);
}

/* Title */
.cvc-card-title {
    font-family: var(--cvc-font-head);
    font-size: 16px; font-weight: 700;
    color: var(--cvc-dark);
    margin: 0; line-height: 1.35;
}

/* Description */
.cvc-card-desc {
    font-size: 13px; color: var(--cvc-muted);
    margin: 0; line-height: 1.65; flex: 1;
}

/* ── Card Footer ── */
.cvc-card-footer {
    padding: 12px 18px 18px;
    margin-top: auto;
}

.cvc-download-btn {
    display: inline-flex;
    align-items: center; justify-content: center;
    gap: 8px;
    background: var(--cvc-primary);
    color: #fff !important;
    text-decoration: none !important;
    padding: 10px 22px;
    border-radius: var(--cvc-radius);
    font-size: 13px; font-weight: 600;
    font-family: var(--cvc-font-body);
    width: 100%;
    letter-spacing: .3px;
    text-transform: uppercase;
    border: 2px solid var(--cvc-primary);
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
}
.cvc-download-btn:hover {
    background: var(--cvc-primary-dark);
    border-color: var(--cvc-primary-dark);
    transform: translateY(-1px);
}

.cvc-coming-soon {
    display: block; text-align: center;
    font-size: 12px; color: var(--cvc-muted);
    font-style: italic; padding: 10px 0;
}

/* ─────────────────────────────────────────────
   LATEST LIST  [cvc_newsletter_latest]
   ───────────────────────────────────────────── */
.cvc-latest-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
}

.cvc-latest-item {
    display: flex; align-items: center; gap: 12px;
    background: var(--cvc-white);
    border: 1px solid var(--cvc-border);
    border-left: 3px solid var(--cvc-primary);
    border-radius: var(--cvc-radius-md);
    padding: 12px 16px;
    transition: box-shadow .15s;
}
.cvc-latest-item:hover { box-shadow: var(--cvc-shadow); }

.cvc-latest-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.cvc-latest-title {
    font-size: 14px; font-weight: 600;
    font-family: var(--cvc-font-head);
    color: var(--cvc-dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.cvc-latest-date {
    font-size: 11px; color: var(--cvc-muted);
    text-transform: uppercase; letter-spacing: .3px;
}
.cvc-latest-link {
    font-size: 13px; font-weight: 700;
    color: var(--cvc-primary) !important;
    text-decoration: none !important;
    white-space: nowrap; flex-shrink: 0;
    text-transform: uppercase; letter-spacing: .3px;
}
.cvc-latest-link:hover { text-decoration: underline !important; }

/* ─────────────────────────────────────────────
   EMPTY FILTER STATE
   ───────────────────────────────────────────── */
.cvc-filter-empty {
    text-align: center;
    padding: 32px 20px;
    color: var(--cvc-muted);
    font-style: italic;
    font-size: 14px;
    background: var(--cvc-light);
    border: 1px dashed var(--cvc-border);
    border-radius: var(--cvc-radius-md);
    margin-top: 8px;
}

/* ─────────────────────────────────────────────
   RESPONSIVE — TABLET  (≤ 768px)
   ───────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Section title smaller */
    .cvc-section-title {
        font-size: 22px;
        margin-bottom: 20px;
    }

    /* Filter buttons: full-width row, easier to tap */
    .cvc-filter-bar {
        gap: 6px;
        margin-bottom: 20px;
    }
    .cvc-filter-btn {
        padding: 9px 14px;
        font-size: 12px;
        flex: 1 1 auto;
        text-align: center;
        min-height: 40px;
    }

    /* Year tabs: smaller padding so they don't overflow */
    .cvc-year-tab {
        padding: 10px 16px;
        font-size: 14px;
    }

    /* Card body padding tighter */
    .cvc-card-top  { padding: 14px 14px 0; }
    .cvc-card-body { padding: 12px 14px 4px; }
    .cvc-card-footer { padding: 10px 14px 14px; }

    /* Latest list: wrap download link below title on tablet */
    .cvc-latest-item {
        flex-wrap: wrap;
        gap: 8px;
    }
    .cvc-latest-info { width: 100%; min-width: 0; }
    .cvc-latest-link {
        margin-left: auto;
        font-size: 12px;
        padding: 6px 12px;
        background: var(--cvc-primary);
        color: #fff !important;
        border-radius: var(--cvc-radius);
        text-transform: uppercase;
        letter-spacing: .3px;
    }
    .cvc-latest-link:hover {
        background: var(--cvc-primary-dark);
        text-decoration: none !important;
    }
}

/* ─────────────────────────────────────────────
   RESPONSIVE — PHONE  (≤ 480px)
   ───────────────────────────────────────────── */
@media (max-width: 480px) {

    /* Stack all grids to 1 column (catches cols-1 through cols-4) */
    .cvc-docs-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    /* Section title */
    .cvc-section-title { font-size: 20px; }

    /* Year tabs: smaller, wrap gracefully */
    .cvc-year-tabs { margin-bottom: 20px; }
    .cvc-year-tab {
        padding: 9px 12px;
        font-size: 13px;
    }

    /* Filter buttons: even smaller, full-width feel */
    .cvc-filter-btn {
        padding: 10px 10px;
        font-size: 11px;
        flex: 1 1 calc(50% - 3px);
        min-height: 44px; /* iOS min touch target */
    }

    /* Ensure download button is large enough to tap */
    .cvc-download-btn {
        padding: 12px 20px;
        font-size: 14px;
        min-height: 48px;
    }

    /* Card cover image: slightly shorter on phone */
    .cvc-card-cover { aspect-ratio: 2/1; }

    /* Card body */
    .cvc-card-top  { padding: 14px 14px 0; }
    .cvc-card-body { padding: 12px 14px 0; }
    .cvc-card-footer { padding: 12px 14px 16px; }
    .cvc-card-title { font-size: 15px; }

    /* Latest list: stack vertically, full-width button */
    .cvc-latest-item { flex-direction: column; align-items: flex-start; gap: 8px; }
    .cvc-type-badge  { align-self: flex-start; }
    .cvc-latest-link { width: 100%; text-align: center; }
}

/* ─────────────────────────────────────────────
   PRINT
   ───────────────────────────────────────────── */
@media print {
    .cvc-filter-bar, .cvc-year-tabs { display: none; }
    .cvc-year-panel { display: block !important; }
    .cvc-doc-card   { break-inside: avoid; }
}