@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body {
    font-family: 'Noto Sans Bengali', 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* ── Card shadows ── */
.card-shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06); transition: box-shadow 0.22s ease, transform 0.22s ease; }
.card-shadow:hover { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.05); transform: translateY(-4px); }

/* ── Animations ── */
@keyframes slideUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.animate-slide-up { opacity: 0; animation: slideUp 0.42s ease forwards; }
@keyframes badgeBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.badge-new { animation: badgeBlink 1.4s ease-in-out infinite; }
@keyframes featuredGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.5); } 50% { box-shadow: 0 0 0 6px rgba(59,130,246,0); } }
.badge-featured { animation: featuredGlow 2s ease-in-out infinite; }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }
.btn-hover { position: relative; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.btn-hover:hover { transform: translateY(-2px); }
.btn-hover .btn-arrow { transition: transform 0.25s ease; }
.btn-hover:hover .btn-arrow { transform: translate(3px, -3px); }

/* ── Line clamp ── */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2563eb; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ── Stagger delays ── */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.10s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.20s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.30s; }
.stagger-7 { animation-delay: 0.35s; }
.stagger-8 { animation-delay: 0.40s; }

/* ── Card base ── */
.ck-card { border-radius: 10px; }

/* ── Card animations ── */
@keyframes ck-slide-up { from { opacity:0; transform:translateY(18px) } to { opacity:1; transform:translateY(0) } }
.ck-anim { opacity:0; animation:ck-slide-up .4s ease forwards; }

/* ── Card bar hover ── */
.ck-card:hover .ck-card-bar { transform: scaleX(1) !important; }

/* ── Admin: Insert from URL button ── */
.ck-insert-url-btn { font-family: inherit; }

/* ============================================================
   RESPONSIVE TABLE WRAPPER
   ============================================================ */
.ck-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    /* Give visual hint on mobile */
    border-radius: 8px;
}
.ck-table-wrap table { margin-bottom: 0; }

/* ── Content tables (wysiwyg / post_content) ── */
.ck-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.ck-content table th {
    background: #1d4ed8;
    color: #fff;
    padding: .6rem .9rem;
    text-align: left;
    font-weight: 700;
}
.ck-content table td {
    padding: .6rem .9rem;
    border-bottom: 1px solid #e2e8f0;
    color: #374151;
    vertical-align: top;
}
.ck-content table tr:nth-child(even) td { background: #eff6ff; }

/* ── Summary table (single-job.php .ck-tbl) ── */
.ck-tbl-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ck-tbl { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ck-tbl tr { border-bottom: 1px solid #e2e8f0; }
.ck-tbl tr:last-child { border-bottom: none; }
.ck-tbl tr:nth-child(even) td { background: #f8fafc; }
.ck-tbl .th-row td { background: #1d4ed8 !important; color: #fff; font-weight: 700; padding: .7rem 1rem; }
.ck-tbl td { padding: .65rem 1rem; vertical-align: top; color: #374151; }
.ck-tbl .lbl { font-weight: 700; color: #1e293b; width: 44%; min-width: 110px; }
.ck-tbl .dead { color: #b91c1c; font-weight: 700; }

/* ============================================================
   CARD GRID — fully responsive
   ============================================================ */
.ck-section-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 480px) {
    .ck-section-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (min-width: 900px) {
    .ck-section-grid { grid-template-columns: repeat(3, 1fr); gap: 15px; }
}
@media (min-width: 1200px) {
    .ck-section-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   SECTION HEADER — stack on mobile
   ============================================================ */
.ck-section-hd {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    border: 1px solid rgba(226,232,240,.6);
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.ck-section-hd-left {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 1;
    min-width: 0;
}
.ck-section-hd-icon {
    width: 48px;
    height: 48px;
    border-radius: .875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #eff6ff;
    color: #1d4ed8;
}
.ck-section-hd-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 .15rem;
    line-height: 1.3;
}
.ck-section-hd-sub {
    font-size: .8rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}
.ck-section-hd-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border-radius: .625rem;
    font-size: .8rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    color: #374151;
    text-decoration: none;
    background: #fff;
    transition: all .18s;
    white-space: nowrap;
    flex-shrink: 0;
}
.ck-section-hd-link:hover { border-color: #93c5fd; background: #eff6ff; }

@media (max-width: 479px) {
    .ck-section-hd-icon { width: 40px; height: 40px; }
    .ck-section-hd-title { font-size: 1rem; }
    .ck-section-hd-sub { font-size: .75rem; }
}

/* ============================================================
   JOB CARD — inner content mobile fixes
   ============================================================ */
.ck-job-card-header {
    padding: .6rem .85rem;
    border-bottom: 1px solid #e2e8f0;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.ck-job-card-body { padding: .875rem; }
.ck-job-card-title {
    font-size: .95rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 .45rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ck-job-card-meta { display: flex; flex-direction: column; gap: .3rem; }
.ck-job-card-meta-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .775rem;
    color: #475569;
    flex-wrap: wrap;
}
.ck-job-card-btns {
    margin-top: .8rem;
    display: flex;
    gap: .5rem;
}
.ck-job-card-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .5rem .4rem;
    border-radius: .625rem;
    font-size: .775rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .18s;
    cursor: pointer;
    border: none;
    font-family: inherit;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   HERO SECTION MOBILE
   ============================================================ */
@media (max-width: 479px) {
    .ck-hero h1 { font-size: 1.75rem !important; }
    .ck-hero-sub { font-size: .9rem !important; }
    .ck-hero-sub2 { font-size: .78rem !important; }
    .ck-search-wrap { margin-left: .5rem; margin-right: .5rem; }
    .ck-kw-row { gap: .3rem; }
    .ck-kw-chip { font-size: .7rem; padding: .2rem .6rem; }
    .ck-live-badge { font-size: .78rem; padding: .3rem .75rem; }
}

/* ============================================================
   FILTER BAR — mobile horizontal scroll
   ============================================================ */
.ck-filter-bar { overflow: hidden; }
.ck-filter-inner {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .5rem .75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    flex-wrap: nowrap;
}
.ck-filter-inner::-webkit-scrollbar { display: none; }
.ck-chip-btn { flex-shrink: 0; }

/* ============================================================
   HOMEPAGE OUTPUT — full-width sections with padding
   ============================================================ */
#ck-output,
#ck-results {
    width: 100%;
    overflow-x: hidden;
}
.ck-section {
    padding: 0 .75rem;
    margin-bottom: 1.25rem;
}
@media (min-width: 640px) {
    .ck-section { padding: 0 1rem; margin-bottom: 1.5rem; }
}

/* The grid inside each section */
.ck-section > div[style*="grid"] {
    grid-template-columns: 1fr !important;
}
@media (min-width: 480px) {
    .ck-section > div[style*="grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (min-width: 900px) {
    .ck-section > div[style*="grid"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (min-width: 1200px) {
    .ck-section > div[style*="grid"] {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ============================================================
   SINGLE JOB PAGE — mobile tweaks
   ============================================================ */
/* Hero row stacks on mobile */
.ck-hero-row {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
}
@media (min-width: 640px) {
    .ck-hero-row {
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left;
    }
}

/* Main layout: single column on mobile, sidebar below */
.ck-main {
    grid-template-columns: 1fr !important;
    padding: 1rem .75rem 2.5rem !important;
    gap: 1.25rem !important;
}
@media (min-width: 1024px) {
    .ck-main { grid-template-columns: 1fr 300px !important; padding: 1.75rem 1rem 3rem !important; }
}

/* Sidebar not sticky on mobile */
.ck-sidebar { position: static !important; }
@media (min-width: 1024px) {
    .ck-sidebar { position: sticky !important; top: 1.25rem !important; align-self: flex-start !important; }
}

/* Card body padding tighter on mobile */
@media (max-width: 479px) {
    .ck-hd { padding: .7rem .875rem; }
    .ck-body { padding: .875rem; }
    .ck-hero-h1 { font-size: 1.3rem !important; }
    .ck-tbl td { padding: .55rem .75rem; font-size: .82rem; }
    .ck-tbl .lbl { min-width: 90px; width: 40%; }
    .ck-dl { padding: .75rem .875rem; }
    .ck-dl-row { gap: .4rem; }
    .ck-sim-grid { grid-template-columns: 1fr !important; }
    .ck-sim-card { padding: .75rem; }
    .ck-sim-thumb { width: 44px; height: 44px; }
}

/* Share buttons — wrap to 2 columns on very small screens */
@media (max-width: 360px) {
    .ck-share-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Content tables in single post */
@media (max-width: 600px) {
    .ck-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: .8rem; }
    .ck-content table th, .ck-content table td { padding: .4rem .55rem; white-space: nowrap; }
}

/* TOC bar on mobile: hide label */
@media (max-width: 479px) {
    .ck-toc-label { display: none !important; }
    .ck-toc-link { font-size: .75rem; padding: .35rem .55rem; }
    .ck-nav-cur { max-width: 11rem; }
}

/* ============================================================
   ARCHIVE PAGE — mobile
   ============================================================ */
.ck-wrap {
    padding: 1rem .75rem 2.5rem !important;
}
@media (min-width: 640px) {
    .ck-wrap { padding: 1.5rem 1rem 3rem !important; }
}

@media (max-width: 479px) {
    .ck-hero .ck-hero-inner { padding: 0; }
    .ck-toolbar { flex-direction: column !important; gap: .65rem; }
    .ck-sort-wrap { width: 100%; }
    .ck-sort-select { flex: 1; }
    .ck-hero h1 { font-size: 1.4rem !important; }
    .ck-hero p { font-size: .82rem !important; }
    .ck-stat-pill { font-size: .75rem; padding: .3rem .75rem; }
    .ck-pagination { gap: .35rem; }
    .ck-page-btn { min-width: 2rem; height: 2rem; font-size: .8rem; }
    .ck-card-body { padding: .875rem; }
    .ck-card-title { font-size: .9rem; }
    .ck-card-btns { gap: .4rem; }
    .ck-btn { padding: .45rem .3rem; font-size: .72rem; }
}

/* Archive grid full-width override */
.ck-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}
@media (min-width: 480px) { .ck-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 900px) { .ck-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 1200px) { .ck-grid { grid-template-columns: repeat(4, 1fr) !important; } }

/* ============================================================
   GLOBAL: Prevent horizontal overflow
   ============================================================ */
img { max-width: 100%; height: auto; }

/* Circular image grid */
.ck-circ-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: .75rem;
    margin-bottom: .75rem;
}
@media (min-width: 480px) {
    .ck-circ-grid { grid-template-columns: 1fr 1fr !important; }
}

/* Deadline row wrap on small screens */
@media (max-width: 360px) {
    .ck-dl-row { flex-direction: column; align-items: flex-start; gap: .3rem; }
}

/* Apply sidebar buttons on mobile */
@media (max-width: 479px) {
    .ck-sidebar .ck-body > a,
    .ck-sidebar .ck-body > div > a { font-size: .9rem !important; }
}

/* Print */
@media print { .no-print { display: none !important; } body { background: #fff !important; color: #000 !important; } }