/* =========================================================
   CA SAMAAJ ARTICLES
   FINAL PREMIUM PUBLIC UI
   ALL CSS STRICTLY SCOPED
   ========================================================= */

.ca-articles-public {
    --navy:#062b5b;
    --navy2:#073d70;
    --blue:#086d9d;
    --gold:#f4b52a;
    --text:#092957;
    --muted:#69788e;
    --line:#dfe7ee;
    --soft:#f4f7fa;
    color:var(--text);
}

.ca-articles-public * {
    box-sizing:border-box;
}

.ca-articles-shell {
    width:min(1380px, calc(100% - 64px));
    margin:auto;
}

/* =========================================================
   HERO
   ========================================================= */

.ca-articles-hero {
    padding:35px 0 38px;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(0,135,187,.25),
            transparent 36%
        ),
        linear-gradient(
            110deg,
            #052650 0%,
            #073c6d 56%,
            #08749e 100%
        );

    color:#fff;
}

.ca-articles-hero-grid {
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:58px;
    align-items:center;
}

.ca-articles-breadcrumb {
    display:flex;
    align-items:center;
    gap:9px;

    margin-bottom:27px;

    font-size:13px;
    color:rgba(255,255,255,.9);
}

.ca-articles-breadcrumb a {
    color:inherit;
    text-decoration:none;
}

.ca-articles-eyebrow {
    margin-bottom:15px;

    color:var(--gold);

    font-size:13px;
    font-weight:800;
    letter-spacing:.045em;
}

.ca-articles-hero h1 {
    margin:0;

    color:#fff;

    font-size:clamp(39px,3.7vw,56px);
    line-height:1.07;
    letter-spacing:-.03em;
    font-weight:700;
}

.ca-articles-hero-copy > p {
    max-width:690px;

    margin:21px 0 0;

    color:rgba(255,255,255,.94);

    font-size:17px;
    line-height:1.65;
}

/* =========================================================
   HERO STATS
   ========================================================= */

.ca-articles-stats {
    display:grid;
    grid-template-columns:repeat(4,1fr);

    padding:23px 8px;

    border-radius:12px;

    background:rgba(1,31,67,.66);

    border:1px solid rgba(255,255,255,.07);

    box-shadow:
        0 18px 40px rgba(0,18,48,.23);

    backdrop-filter:blur(4px);
}

.ca-stat {
    text-align:center;

    padding:5px 13px;

    border-right:1px solid rgba(255,255,255,.19);
}

.ca-stat:last-child {
    border-right:0;
}

.ca-stat-icon {
    margin-bottom:10px;

    color:var(--gold);

    font-size:31px;
    line-height:1;
}

.ca-stat strong {
    display:block;

    color:#fff;

    font-size:24px;
    font-weight:800;
    line-height:1.2;
}

.ca-stat span {
    display:block;

    margin-top:5px;

    color:#fff;

    font-size:13px;
    font-weight:600;
}

.ca-stat small {
    display:block;

    margin-top:4px;

    color:rgba(255,255,255,.67);

    font-size:11px;
}

/* =========================================================
   BODY
   ========================================================= */

.ca-articles-body {
    min-height:600px;

    padding:27px 0 55px;

    background:
        linear-gradient(
            180deg,
            #fbfcfd 0%,
            #f4f8fb 100%
        );
}

/* =========================================================
   TOOLBAR
   ========================================================= */

.ca-articles-toolbar {
    display:grid;

    grid-template-columns:
        minmax(280px,1.45fr)
        minmax(190px,.75fr)
        minmax(125px,.5fr)
        auto
        1fr
        auto
        auto;

    gap:13px;
    align-items:center;

    padding:15px;

    margin-bottom:24px;

    background:#fff;

    border:1px solid #e0e7ed;

    border-radius:12px;

    box-shadow:
        0 7px 22px rgba(15,49,82,.08);
}

.ca-search-wrap {
    position:relative;
}

.ca-search-wrap input,
.ca-articles-toolbar select {
    width:100%;
    height:47px;

    padding:0 42px 0 14px;

    border:1px solid #d7e1e9;
    border-radius:8px;

    background:#fff;

    color:#142f51;

    font:inherit;
    font-size:14px;

    outline:none;
}

.ca-articles-toolbar select {
    padding-right:30px;
}

.ca-search-wrap input:focus,
.ca-articles-toolbar select:focus {
    border-color:#4d87b7;

    box-shadow:
        0 0 0 3px rgba(45,116,174,.08);
}

.ca-search-icon {
    position:absolute;

    right:15px;
    top:50%;

    transform:translateY(-50%);

    color:#234e78;

    font-size:22px;
}

.ca-filter-button {
    height:47px;

    padding:0 22px;

    border:0;
    border-radius:8px;

    background:
        linear-gradient(
            180deg,
            #0a447d,
            #062d5c
        );

    color:#fff;

    font:inherit;
    font-size:14px;
    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 5px 10px rgba(6,46,92,.18);
}

.ca-toolbar-spacer {
    min-width:20px;
}

.ca-sort-caption {
    color:#657389;
    font-size:13px;
}

.ca-view-toggle {
    display:flex;

    overflow:hidden;

    border:1px solid #d7e1ea;
    border-radius:8px;

    background:#fff;
}

.ca-view-toggle button {
    width:43px;
    height:43px;

    border:0;

    background:#fff;

    color:#435c78;

    cursor:pointer;

    font-size:18px;
}

.ca-view-toggle button.active {
    background:#062e5e;
    color:#fff;
}

.ca-filter-summary {
    display:flex;
    justify-content:space-between;

    margin:-8px 2px 18px;

    color:#6c7989;

    font-size:13px;
}

.ca-filter-summary a {
    color:#075c9d;
    font-weight:700;
}

/* =========================================================
   GRID
   ========================================================= */

.ca-articles-grid {
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:21px;
}

/* =========================================================
   CARD
   ========================================================= */

.ca-article-card {
    display:flex;
    flex-direction:column;

    overflow:hidden;

    min-width:0;

    background:#fff;

    border:1px solid #dfe6ec;

    border-radius:12px;

    box-shadow:
        0 7px 19px rgba(15,52,85,.075);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.ca-article-card:hover {
    transform:translateY(-3px);

    box-shadow:
        0 13px 28px rgba(15,52,85,.13);
}

/* IMAGE */

.ca-article-media {
    position:relative;

    display:block;

    height:185px;

    overflow:hidden;

    background:#e3eaf0;
}

.ca-article-media img {
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

/* FALLBACK */

.ca-article-fallback {
    position:relative;

    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #dae7f1,
            #b6cadc
        );
}

.ca-fallback-pattern {
    position:absolute;
    inset:0;

    opacity:.4;

    background:
        radial-gradient(
            circle at 76% 25%,
            rgba(255,255,255,.8),
            transparent 23%
        ),
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.11) 0,
            rgba(255,255,255,.11) 2px,
            transparent 2px,
            transparent 17px
        );
}

.ca-article-fallback span {
    position:relative;
    z-index:2;

    padding:14px 24px;

    color:#193d61;

    font-size:32px;
    font-weight:900;
    letter-spacing:.08em;

    text-align:center;

    text-shadow:
        0 1px 0 rgba(255,255,255,.85);
}

.ca-topic-gst {
    background:
        linear-gradient(
            135deg,
            #d4e6dc,
            #afd0be
        );
}

.ca-topic-audit {
    background:
        linear-gradient(
            135deg,
            #d8e0ea,
            #b5c5d5
        );
}

.ca-topic-income-tax {
    background:
        linear-gradient(
            135deg,
            #e3e6ea,
            #c1cbd6
        );
}

.ca-topic-tds {
    background:
        linear-gradient(
            135deg,
            #dceafa,
            #adcbe7
        );
}

/* CATEGORY + DATE */

.ca-article-category,
.ca-article-date {
    position:absolute;

    top:12px;

    z-index:4;

    padding:7px 11px;

    border-radius:7px;

    color:#fff;

    font-size:10px;
    font-weight:800;
    line-height:1;
}

.ca-article-category {
    left:12px;

    background:#075c9e;
}

.ca-article-date {
    right:12px;

    background:rgba(4,24,48,.89);
}

/* CARD BODY */

.ca-article-card-body {
    display:flex;
    flex-direction:column;

    flex:1;

    padding:19px 20px 21px;
}

.ca-article-card h2 {
    margin:0;

    font-size:20px;
    line-height:1.3;
    font-weight:800;
}

.ca-article-card h2 a {
    color:#082a58;
    text-decoration:none;
}

.ca-article-card h2 a:hover {
    color:#0765a2;
}

.ca-article-excerpt {
    margin:13px 0 0;

    color:#657388;

    font-size:14px;
    line-height:1.67;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:4;

    overflow:hidden;

    min-height:94px;
}

.ca-article-bottom {
    margin-top:auto;
}

.ca-article-meta {
    display:flex;
    flex-wrap:wrap;

    gap:12px;

    align-items:center;

    margin-top:16px;

    color:#57657a;

    font-size:12px;
}

.ca-article-meta b {
    font-weight:500;
}

.ca-reviewed-badge {
    padding:5px 9px;

    border-radius:6px;

    background:#e5f7ea;

    color:#16763c;

    font-weight:700;
}

.ca-read-guide {
    display:inline-block;

    margin-top:19px;

    color:#005aa3;

    font-size:14px;
    font-weight:800;

    text-decoration:none;
}

.ca-read-guide:hover {
    text-decoration:underline;
}

/* =========================================================
   LIST MODE
   ========================================================= */

.ca-list-mode .ca-articles-grid {
    grid-template-columns:1fr;
}

.ca-list-mode .ca-article-card {
    display:grid;

    grid-template-columns:330px minmax(0,1fr);

    min-height:210px;
}

.ca-list-mode .ca-article-media {
    height:100%;
    min-height:210px;
}

.ca-list-mode .ca-article-card-body {
    padding:24px 27px;
}

.ca-list-mode .ca-article-excerpt {
    min-height:auto;
    -webkit-line-clamp:3;
}

/* =========================================================
   PAGINATION
   ========================================================= */

.ca-articles-pagination {
    display:flex;
    justify-content:center;

    margin-top:29px;
}

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

.ca-articles-pagination nav span[aria-current="page"] span {
    background:#062e5e !important;
    color:#fff !important;
    border-color:#062e5e !important;
}

/* =========================================================
   EMPTY
   ========================================================= */

.ca-articles-empty {
    padding:70px 20px;

    text-align:center;

    background:#fff;

    border:1px solid #e0e7ed;

    border-radius:12px;
}

.ca-articles-empty h2 {
    margin:0;

    color:#082958;
}

.ca-articles-empty p {
    color:#69768a;
}

.ca-articles-empty a {
    color:#075d9e;
    font-weight:800;
}

/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1100px) {

    .ca-articles-shell {
        width:min(100% - 36px,1100px);
    }

    .ca-articles-hero-grid {
        grid-template-columns:1fr;
        gap:28px;
    }

    .ca-articles-stats {
        max-width:760px;
    }

    .ca-articles-toolbar {
        grid-template-columns:
            1.4fr
            1fr
            .7fr
            auto;
    }

    .ca-toolbar-spacer,
    .ca-sort-caption {
        display:none;
    }

    .ca-view-toggle {
        grid-column:4;
    }

    .ca-articles-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}

/* =========================================================
   PHONE
   ========================================================= */

@media(max-width:639px) {

    .ca-articles-shell {
        width:calc(100% - 28px);
    }

    .ca-articles-hero {
        padding:23px 0 26px;
    }

    .ca-articles-breadcrumb {
        margin-bottom:19px;
        font-size:12px;
    }

    .ca-articles-eyebrow {
        margin-bottom:10px;

        font-size:11px;
    }

    .ca-articles-hero h1 {
        font-size:30px;
        line-height:1.09;
    }

    .ca-articles-hero h1 br {
        display:none;
    }

    .ca-articles-hero-copy > p {
        margin-top:13px;

        font-size:14px;
        line-height:1.58;
    }

    .ca-articles-stats {
        grid-template-columns:repeat(2,1fr);

        padding:8px;
    }

    .ca-stat {
        padding:14px 7px;

        border-bottom:
            1px solid rgba(255,255,255,.16);
    }

    .ca-stat:nth-child(2) {
        border-right:0;
    }

    .ca-stat:nth-child(3),
    .ca-stat:nth-child(4) {
        border-bottom:0;
    }

    .ca-stat strong {
        font-size:19px;
    }

    .ca-stat-icon {
        font-size:23px;
    }

    .ca-articles-body {
        padding-top:18px;
    }

    .ca-articles-toolbar {
        display:flex;
        flex-direction:column;
        align-items:stretch;

        padding:12px;

        gap:9px;
    }

    .ca-search-wrap input,
    .ca-articles-toolbar select,
    .ca-filter-button {
        height:45px;
    }

    .ca-view-toggle {
        display:none;
    }

    .ca-articles-grid {
        grid-template-columns:1fr;

        gap:16px;
    }

    .ca-article-media {
        height:180px;
    }

    .ca-article-card-body {
        padding:17px;
    }

    .ca-article-card h2 {
        font-size:18px;
    }

    .ca-article-excerpt {
        min-height:auto;

        -webkit-line-clamp:5;
    }

    .ca-list-mode .ca-article-card {
        display:flex;
    }

}