/* ============================================================
   categories.css — Category listing pages (Financial, Health, Math, Other)
   Loaded last via @section('styles') to win all specificity battles.
   ============================================================ */

/* ════════════════════════════════════════════
   1. PAGE WRAPPER — two-tone backgrounds
   Gradient break at 410px covers navbar(88px) +
   cat-header content (badge + h1 + p + search + padding ≈ 320px).
   ════════════════════════════════════════════ */

.cat-page { padding-bottom: 52px !important; }

.cat-financial {
    background: linear-gradient(180deg,
        #166AC5 0px, #1976d2 410px,
        #eef2f9 410px) !important;
}
.cat-health {
    background: linear-gradient(180deg,
        #b71c1c 0px, #c62828 410px,
        #eef2f9 410px) !important;
}
.cat-math {
    background: linear-gradient(180deg,
        #4a148c 0px, #6a1b9a 410px,
        #eef2f9 410px) !important;
}
.cat-others {
    background: linear-gradient(180deg,
        #004d40 0px, #00695c 410px,
        #eef2f9 410px) !important;
}


/* ════════════════════════════════════════════
   2. CATEGORY HERO HEADER
   ════════════════════════════════════════════ */
.cat-header {
    text-align: center;
    padding: 24px 0 28px;
}

/* Pill badge */
.cat-badge {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.28);
    color: rgba(255,255,255,0.90);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 12px;
    letter-spacing: 0.4px;
}

.cat-header h1 {
    font-size: 1.9rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    letter-spacing: -0.3px;
    line-height: 1.2 !important;
    padding: 0 !important;
    display: block !important;
    border-radius: 0 !important;
    text-align: center !important;
}

.cat-header p.lead {
    font-size: 13px !important;
    color: rgba(255,255,255,0.76) !important;
    font-weight: 300 !important;
    max-width: 560px;
    margin: 0 auto !important;
    line-height: 1.7 !important;
}

/* ── Search inside hero ── */
.cat-header .search-container {
    margin-top: 0;
    margin-bottom: 0 !important;
}

/* Override custom.css .search-input height/style */
.cat-header .search-wrapper .search-input,
.cat-header .search-input {
    background: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    box-shadow: 0 6px 28px rgba(0,0,0,0.18) !important;
    height: 46px !important;
    padding: 0 46px 0 50px !important;
    font-size: 13.5px !important;
    color: #1a2540 !important;
    line-height: 46px !important;
}
.cat-header .search-input:focus {
    box-shadow: 0 8px 32px rgba(0,0,0,0.22) !important;
}
.cat-header .search-input::placeholder { color: #a0b0cc !important; }
.cat-header .search-icon  { color: #a0b0cc !important; font-size: 14px !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important; }
.cat-header .search-clear { color: #c0ccdd !important; right: 16px !important; }
.cat-header #search-count { color: rgba(255,255,255,0.72) !important; font-size: 12.5px !important; }
.cat-header .no-results-box { margin-top: 12px; }


/* ════════════════════════════════════════════
   3. GRID LABEL ROW (between hero and cards)
   ════════════════════════════════════════════ */
.cat-grid-label-row {
    padding: 0 !important;
    margin-top: 0 !important;
}

.cat-grid-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 8px 12px;
}

.cat-grid-label-text {
    font-size: 11px;
    font-weight: 700;
    color: #8a97b5;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Styled pill for the count */
.cat-grid-count {
    font-size: 11.5px;
    font-weight: 600;
    color: #166AC5;
    background: rgba(54, 82, 146, 0.09);
    border: 1px solid rgba(54, 82, 146, 0.14);
    padding: 3px 10px;
    border-radius: 50px;
    min-width: 20px;
    text-align: center;
}


/* ════════════════════════════════════════════
   4. COLUMN & CARD LAYOUT
   ════════════════════════════════════════════ */

/* Each column starts at its own height — prevents bottom gap */
.cat-page .col-lg-3,
.cat-page .col-sm-6 {
    padding: 6px !important;
    align-self: start !important;   /* ← kills the "height: 100%" row-stretching */
}

/* Link wrapper — NOT height: 100% so it wraps content */
.cat-page .service-link {
    display: block !important;
    height: auto !important;
    text-decoration: none !important;
}

/* ════════════════════════════════════════════
   5. CARD — override ALL style.css rules
   (style.css: background #EEF5F8, text-align center, margin-top 30px)
   ════════════════════════════════════════════ */
.cat-page .service-box {
    background: #ffffff !important;
    text-align: left !important;
    margin-top: 0 !important;
    border: 1px solid #e4ecf7 !important;
    border-top: 3px solid #dce6f5 !important;
    border-radius: 10px !important;
    padding: 14px 15px !important;
    height: auto !important;
    position: relative;
    display: block !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease,
                border-color 0.18s ease, background 0.18s ease;
    /* kill style.css hover transform */
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none;
}

/* Re-apply our hover */
.cat-page .service-link:hover .service-box {
    -webkit-transform: translateY(-2px) !important;
    transform: translateY(-2px) !important;
    background: #f8fbff !important;
}

/* Category top-border + shadow on hover */
.cat-financial .service-link:hover .service-box {
    border-top-color: #166AC5 !important;
    box-shadow: 0 5px 18px rgba(21,101,192,0.13) !important;
    border-color: #c5d8f4 !important;
}
.cat-health .service-link:hover .service-box {
    border-top-color: #c62828 !important;
    box-shadow: 0 5px 18px rgba(198,40,40,0.12) !important;
    border-color: #f5cccc !important;
}
.cat-math .service-link:hover .service-box {
    border-top-color: #6a1b9a !important;
    box-shadow: 0 5px 18px rgba(106,27,154,0.12) !important;
    border-color: #dccfee !important;
}
.cat-others .service-link:hover .service-box {
    border-top-color: #00695c !important;
    box-shadow: 0 5px 18px rgba(0,105,92,0.12) !important;
    border-color: #b2d8d4 !important;
}

/* Kill old pseudo-elements */
.cat-page .service-box::before,
.cat-page .service-box::after { display: none !important; }

.cat-page .service-text { display: block !important; }

/* ════════════════════════════════════════════
   6. HEADING — override style.css pill/badge styling
   (style.css: background rgba(50,33,83,.1), padding 5px 10px,
    display inline-block, border-radius 10px, margin-top 20px, font-size 20px)
   ════════════════════════════════════════════ */
.cat-page h3.service-heading {
    /* Kill style.css badge */
    background: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    display: block !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    /* Our styles */
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1e2d50 !important;
    margin-bottom: 5px !important;
    line-height: 1.35 !important;
    text-align: left !important;
    transition: color 0.16s;
}

.cat-financial .service-link:hover h3.service-heading { color: #166AC5 !important; }
.cat-health    .service-link:hover h3.service-heading { color: #c62828 !important; }
.cat-math      .service-link:hover h3.service-heading { color: #6a1b9a !important; }
.cat-others    .service-link:hover h3.service-heading { color: #00695c !important; }

/* ── Description ── */
.cat-page p.service-para {
    font-size: 12px !important;
    font-weight: 300 !important;
    color: #8a98b8 !important;
    line-height: 1.55 !important;
    margin: 0 !important;          /* kill style.css margin-top: 20px */
    text-align: left !important;
    letter-spacing: 0 !important;
}


/* ════════════════════════════════════════════
   7. RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 991px) {
    .cat-financial { background: linear-gradient(180deg, #166AC5 0, #1976d2 380px, #eef2f9 380px) !important; }
    .cat-health    { background: linear-gradient(180deg, #b71c1c 0, #c62828 380px, #eef2f9 380px) !important; }
    .cat-math      { background: linear-gradient(180deg, #4a148c 0, #6a1b9a 380px, #eef2f9 380px) !important; }
    .cat-others    { background: linear-gradient(180deg, #004d40 0, #00695c 380px, #eef2f9 380px) !important; }
    .cat-header h1 { font-size: 1.65rem !important; }
}

@media (max-width: 767px) {
    .cat-financial { background: linear-gradient(180deg, #166AC5 0, #1976d2 460px, #eef2f9 460px) !important; }
    .cat-health    { background: linear-gradient(180deg, #b71c1c 0, #c62828 460px, #eef2f9 460px) !important; }
    .cat-math      { background: linear-gradient(180deg, #4a148c 0, #6a1b9a 460px, #eef2f9 460px) !important; }
    .cat-others    { background: linear-gradient(180deg, #004d40 0, #00695c 460px, #eef2f9 460px) !important; }
    .cat-header    { padding: 18px 0 22px; }
    .cat-header h1 { font-size: 1.45rem !important; }
    .cat-page .col-lg-3,
    .cat-page .col-sm-6 { padding: 5px !important; }
}

@media (max-width: 575px) {
    .cat-financial { background: linear-gradient(180deg, #166AC5 0, #1976d2 500px, #eef2f9 500px) !important; }
    .cat-health    { background: linear-gradient(180deg, #b71c1c 0, #c62828 500px, #eef2f9 500px) !important; }
    .cat-math      { background: linear-gradient(180deg, #4a148c 0, #6a1b9a 500px, #eef2f9 500px) !important; }
    .cat-others    { background: linear-gradient(180deg, #004d40 0, #00695c 500px, #eef2f9 500px) !important; }
}