/* ==================================================================
Bijli Babu — Homepage Redesign Layer (loaded only on the front page)
Builds on top of bijlibabu-core.min.css. Uses the theme's existing
--bb-* color tokens so everything stays visually consistent.
================================================================== */
/* ---------- Popular search chips (hero) ---------- */
.bb-popular-searches a{display:inline-flex;align-items:center;gap:6px}
.bb-popular-searches a i{font-size:10px;opacity:.85}
/* ---------- Section rhythm / spacing polish ---------- */
.bb-section-head .bb-kicker{margin-bottom:8px}
.bb-section-head h2{margin-top:0}
.bb-section-head p{margin-top:2px}
/* ==================================================================
Latest Updates — 4-card row with thumbnail, NEW badge and date
================================================================== */
.bb-updates-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bb-update-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--bb-border);border-radius:10px;overflow:hidden;box-shadow:0 4px 15px rgba(16,35,63,.04);transition:transform .2s ease,box-shadow .2s ease;color:var(--bb-text);text-decoration:none}
.bb-update-card:hover{transform:translateY(-3px);box-shadow:var(--bb-shadow);color:var(--bb-text)}
.bb-update-thumb{position:relative;height:118px;background:var(--bb-bg);display:flex;align-items:center;justify-content:center;color:var(--bb-blue);font-size:26px;overflow:hidden;flex:0 0 auto}
.bb-update-thumb img{width:100%;height:100%;object-fit:cover}
.bb-update-badge{position:absolute;top:9px;left:9px;background:var(--bb-red);color:#fff;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:4px;line-height:1.4}
.bb-update-body{padding:13px 15px 15px;display:flex;flex-direction:column;gap:8px;flex:1}
.bb-update-body strong{font-size:14px;line-height:1.4;font-weight:700;color:var(--bb-navy);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bb-update-body small{font-size:11.5px;color:var(--bb-muted);display:flex;align-items:center;gap:5px;margin-top:auto}
.bb-update-body small i{font-size:10px}
@media (max-width:991px){.bb-updates-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.bb-updates-grid{grid-template-columns:1fr}}
/* ==================================================================
Explore by Category — proper responsive grid of icon tiles
================================================================== */
.bb-category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.bb-category-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;padding:24px 10px 20px;background:#fff;border:1px solid var(--bb-border);border-radius:12px;color:var(--bb-text);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;box-shadow:0 4px 15px rgba(16,35,63,.03)}
.bb-category-tile:hover{transform:translateY(-4px);box-shadow:var(--bb-shadow);border-color:#f3b986;color:var(--bb-text)}
.bb-category-icon{width:54px;height:54px;border-radius:50%;background:#ffedd5;color:var(--bb-blue);display:flex;align-items:center;justify-content:center;font-size:22px;flex:0 0 auto}
.bb-category-icon svg{width:26px;height:26px}
.bb-category-label{font-size:13px;font-weight:700;line-height:1.3;color:var(--bb-navy)}
@media (max-width:767px){.bb-category-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.bb-category-grid{grid-template-columns:repeat(2,1fr);gap:12px}.bb-category-tile{padding:18px 8px 16px}}
/* ==================================================================
Latest Documents + Departmental Corner — compact list layout.
(Popular Questions is its own separate section again, styled by
the theme's original .bb-question-card rules in bijlibabu-core.)
================================================================== */
.bb-docs-dept-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:start}
.bb-list-col-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.bb-list-col-head h3{font-size:17px;font-weight:800;color:var(--bb-navy);margin:0}
.bb-list-col-head a{font-size:12px;font-weight:800;white-space:nowrap}
.bb-doc-list{display:flex;flex-direction:column;gap:10px}
.bb-doc-row{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--bb-border);border-radius:8px;padding:12px 14px;box-shadow:0 3px 10px rgba(16,35,63,.03);transition:box-shadow .2s ease,transform .2s ease}
.bb-doc-row:hover{box-shadow:var(--bb-shadow);transform:translateY(-1px)}
.bb-doc-row-icon{width:40px;height:44px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:#ffedd5;color:#d43d3d;border-radius:6px;font-size:17px}
.bb-doc-row-body{min-width:0;flex:1}
.bb-doc-row-body strong{display:block;font-size:13.5px;font-weight:700;color:var(--bb-navy);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-doc-row-body small{display:block;font-size:11px;color:var(--bb-muted);margin-top:3px}
.bb-doc-row-action{flex:0 0 auto;font-size:11.5px;font-weight:800;color:var(--bb-blue);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;text-decoration:none}
.bb-doc-row-action:hover{color:var(--bb-blue-2)}
.bb-dept-panel-slim{height:auto}
.bb-dept-panel-slim .bb-dept-links{margin-top:14px}
.bb-dept-panel-slim .btn-primary{background:var(--bb-blue)!important;border-color:var(--bb-blue)!important}
.bb-dept-panel-slim .btn-primary:hover{background:var(--bb-blue-2)!important;border-color:var(--bb-blue-2)!important}
@media (max-width:767px){.bb-docs-dept-grid{grid-template-columns:1fr}}
@media (max-width:575px){.bb-doc-row-body strong{white-space:normal}}
/* ==================================================================
Featured Article / Latest Articles — repositioned lower on the
page; kept as "featured main + latest articles on one side"
================================================================== */
.bb-featured-section{scroll-margin-top:20px}
/* ==================================================================
Newsletter band — full-width horizontal variant of the sidebar
newsletter widget, used only on the homepage
================================================================== */
/* The shared bb_render_newsletter_widget() markup is: icon, title , text
, form — all direct children, reused as-is (not modified here since
it also powers the sidebar widget elsewhere). CSS Grid lets us lay that
exact markup out horizontally without needing an extra wrapper element. */
.bb-newsletter-band{background:linear-gradient(160deg,#fff7ed,#ffedd5);padding:0}
.bb-newsletter-band .container{padding-top:40px;padding-bottom:40px}
.bb-newsletter-band .bb-newsletter-widget{
background:#fff;border:1px solid var(--bb-border);border-radius:12px;padding:26px 30px;
text-align:left;box-shadow:0 8px 24px rgba(124,45,18,.06);
display:grid;align-items:center;column-gap:22px;row-gap:3px;
grid-template-columns:auto 1fr auto;
grid-template-areas:"icon title form" "icon text form";
}
.bb-newsletter-band .bb-newsletter-icon{grid-area:icon;margin-bottom:0}
.bb-newsletter-band .bb-newsletter-title{grid-area:title;margin:0}
.bb-newsletter-band .bb-newsletter-text{grid-area:text;margin:0;max-width:420px}
.bb-newsletter-band .bb-newsletter-form{grid-area:form;flex-direction:row;flex-wrap:wrap;gap:10px;min-width:300px}
.bb-newsletter-band .bb-newsletter-input{flex:1 1 200px}
.bb-newsletter-band .bb-newsletter-submit{flex:0 0 auto}
.bb-newsletter-band .bb-newsletter-msg{flex-basis:100%}
@media (max-width:767px){
.bb-newsletter-band .bb-newsletter-widget{grid-template-columns:auto 1fr;grid-template-areas:"icon title" "icon text" "form form"}
.bb-newsletter-band .bb-newsletter-form{flex-direction:column;width:100%;margin-top:14px}
}
/* v3.6.11: accessibility, reduced-motion and safe Elementor compatibility */
.bb-featured-dots button:focus-visible,.bb-popular-dots button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.bb-featured-slides{will-change:transform}
@media (prefers-reduced-motion:reduce){.bb-featured-slides,.bb-popular-track,.bb-featured-ticker-list{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media (min-width:992px){.elementor-page .elementor .container{width:auto;max-width:none;padding-left:0;padding-right:0}}