:root {
    --cso-navy: #133b5c;
    --cso-blue: #2f6fb2;
    --cso-light-blue: #7cc8e8;
    --cso-text: #29465f;
    --cso-muted: #5f7487;
    --cso-border: #e4eef6;
    --cso-card: #ffffff;
    --cso-soft: #f8fcff;
    --cso-shadow: 0 10px 28px rgba(19, 59, 92, 0.10);
    --cso-radius: 18px;
}

.cso-block,
.cso-block * {
    box-sizing: border-box !important;
}

.cso-block {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    clear: both !important;
    float: none !important;
    margin: 0 auto 28px !important;
    padding: 0 !important;
}

.cso-section-header,
.cso-search-card {
    background: var(--cso-card) !important;
    border: 1px solid var(--cso-border) !important;
    border-radius: var(--cso-radius) !important;
    box-shadow: var(--cso-shadow) !important;
}

.cso-section-header {
    display: block !important;
    width: 100% !important;
    padding: 24px 28px !important;
    margin: 0 0 18px !important;
    text-align: center !important;
}

.cso-section-header h2,
.cso-search-copy h2 {
    margin: 0 0 7px !important;
    color: var(--cso-navy) !important;
    font-size: clamp(1.45rem, 2vw, 2rem) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

.cso-section-header p,
.cso-search-copy p {
    margin: 0 !important;
    color: var(--cso-muted) !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
}

.cso-search-block {
    margin-bottom: 18px !important;
}

.cso-search-card {
    width: 100% !important;
    padding: 18px 22px 14px !important;
    display: grid !important;
    grid-template-columns: minmax(240px, 0.38fr) minmax(320px, 0.62fr) !important;
    gap: 18px !important;
    align-items: center !important;
}

.cso-search-copy {
    text-align: left !important;
}

.cso-search-copy h2 {
    font-size: clamp(1.35rem, 1.8vw, 1.8rem) !important;
}

.cso-search-copy p {
    font-size: 0.96rem !important;
}

.cso-search-form,
.cso-search-form form,
.cso-search-form .is-form-style,
.cso-search-form .is-form-style form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.cso-search-form input[type="search"],
.cso-search-form input[type="text"] {
    min-height: 42px !important;
}

.cso-search-form .is-search-form,
.cso-search-form .is-form-style {
    width: 100% !important;
    max-width: none !important;
}

.cso-search-form .is-search-input {
    border-radius: 999px 0 0 999px !important;
    border-color: var(--cso-border) !important;
}

.cso-search-form .is-search-submit,
.cso-search-form .is-search-icon,
.cso-search-form button {
    border-radius: 0 999px 999px 0 !important;
}

.cso-search-form > *:last-child {
    margin-bottom: 0 !important;
}

/*
 * Hardened layouts: HTML tables, not flexbox/CSS Grid.
 *
 * Elementor/Mesmerize's own container CSS can override flexbox width and
 * grid-template properties even with !important (equal specificity + equal
 * importance is decided by source order, and theme/builder styles often
 * load after plugin styles). Elementor's container styles cannot override
 * table-cell layout, so desktop and tablet use real HTML tables here.
 *
 * Tables don't reflow column count responsively, so mobile uses a separate
 * flex-based grid, toggled in with the display rules further down.
 */
.cso-article-table,
.cso-category-table {
    display: table !important;
    width: 100% !important;
    max-width: none !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 18px !important;
    border: none !important;
    margin: 0 0 -18px !important;
    clear: both !important;
    float: none !important;
}

.cso-article-table tr,
.cso-category-table tr {
    border: none !important;
    background: transparent !important;
}

.cso-article-cell,
.cso-category-cell {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    vertical-align: top !important;
}

.cso-empty-cell {
    visibility: hidden !important;
}

.cso-article-grid-mobile,
.cso-category-grid-mobile {
    display: none;
    width: 100% !important;
    max-width: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    clear: both !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 16px !important;
}

.cso-article-table-tablet,
.cso-category-table-tablet {
    display: none !important;
}

.cso-article-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: var(--cso-card) !important;
    border: 1px solid var(--cso-border) !important;
    border-radius: var(--cso-radius) !important;
    box-shadow: var(--cso-shadow) !important;
}

.cso-article-image-link {
    display: block !important;
    padding: 12px 12px 0 !important;
    background: var(--cso-soft) !important;
}

.cso-article-image {
    display: block !important;
    width: 100% !important;
    height: 170px !important;
    max-height: 170px !important;
    object-fit: cover !important;
    border-radius: 13px !important;
    background: var(--cso-soft) !important;
}

.cso-article-image-placeholder {
    min-height: 170px !important;
    background: linear-gradient(135deg, #eff8fd, #ffffff) !important;
}

.cso-article-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    padding: 15px 17px 18px !important;
}

.cso-article-content h3 {
    margin: 0 0 8px !important;
    color: var(--cso-navy) !important;
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
}

.cso-article-content h3 a,
.cso-category-card {
    color: var(--cso-navy) !important;
    text-decoration: none !important;
}

.cso-article-content h3 a:hover,
.cso-category-card:hover strong {
    color: var(--cso-blue) !important;
}

.cso-article-content p,
.cso-empty-state {
    margin: 0 !important;
    color: var(--cso-muted) !important;
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
}

.cso-category-card {
    height: 100% !important;
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
    min-height: 126px !important;
    padding: 16px !important;
    background: var(--cso-card) !important;
    border: 1px solid var(--cso-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 22px rgba(19, 59, 92, 0.08) !important;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease !important;
}

.cso-category-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(124, 200, 232, 0.7) !important;
    box-shadow: 0 12px 28px rgba(19, 59, 92, 0.12) !important;
}

.cso-category-icon {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
    background: #eff8fd !important;
    color: var(--cso-blue) !important;
}

.cso-category-icon svg {
    width: 28px !important;
    height: 28px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.cso-category-text {
    display: block !important;
    min-width: 0 !important;
}

.cso-category-text strong,
.cso-category-text small,
.cso-category-count {
    display: block !important;
}

.cso-category-text strong {
    margin: 1px 0 3px !important;
    color: var(--cso-navy) !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

.cso-category-count {
    margin: 0 0 6px !important;
    color: var(--cso-blue) !important;
    font-size: 0.78rem !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
}

.cso-category-text small {
    color: var(--cso-muted) !important;
    font-size: 0.86rem !important;
    line-height: 1.35 !important;
}

@media (max-width: 1024px) {
    .cso-article-table-desktop,
    .cso-category-table-desktop {
        display: none !important;
    }

    .cso-article-table-tablet,
    .cso-category-table-tablet {
        display: table !important;
    }
}

/* 767px matches Elementor's own mobile breakpoint and preview panel. */
@media (max-width: 767px) {
    .cso-search-card {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 18px !important;
    }

    .cso-search-copy {
        text-align: center !important;
    }

    .cso-section-header {
        padding: 22px 20px !important;
    }

    .cso-article-table-desktop,
    .cso-article-table-tablet,
    .cso-category-table-desktop,
    .cso-category-table-tablet {
        display: none !important;
    }

    .cso-article-grid-mobile,
    .cso-category-grid-mobile {
        display: flex !important;
    }

    .cso-block {
        margin-bottom: 20px !important;
    }

    .cso-category-card {
        min-height: auto !important;
    }

    .cso-search-card {
        padding: 16px !important;
    }
}