/* =========================================================
   Bizmantra - Blog section ("Latest Journal")
   assets/css/blog.css?v=1
   - Same system as about.css?v=1: --bm-* tokens, light / dark theme.
   - Fallback values are included, so it also works on its own.
   ========================================================= */
.bmb {
    --b-bg: #FFFFFF;
    --b-card: #F6F8FD;
    --b-line: #E0E7F5;
    --b-sub: #4F5D7A;
    --b-muted: #7A87A3;

    --b-head: var(--bm-head, #16275C);
    --b-text: var(--bm-text, #1B2A4A);
    --b-blue: var(--bm-blue, #5A82E8);
    --b-blue-d: var(--bm-blue-d, #3A5FC7);
    --b-green: var(--bm-green, #9ACD4F);

    position: relative; overflow: hidden;
    padding-block: clamp(56px, 8vw, 104px);
    background: var(--b-bg);
    color: var(--b-text);
    font-family: var(--bm-font, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
}
:root[data-theme="dark"] .bmb {
    --b-bg: #0B1330;
    --b-card: #141E3D;
    --b-line: rgba(143,176,255,.20);
    --b-sub: #B4C1E0;
    --b-muted: #8F9DC2;
}

:where(.bmb) *, :where(.bmb) *::before, :where(.bmb) *::after { box-sizing: border-box; }
:where(.bmb) ul { list-style: none; margin: 0; padding: 0; }
:where(.bmb) h2, :where(.bmb) h3, :where(.bmb) p { margin: 0; }
:where(.bmb) a { color: inherit; text-decoration: none; }
:where(.bmb) img { display: block; max-width: 100%; }
.bmb__i { display: block; flex: none; width: 15px; height: 15px; }
.bmb :focus-visible { outline: 2px solid var(--b-blue-d); outline-offset: 3px; border-radius: 6px; }

.bmb__container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 20px; }

/* ---------------- HEADING ---------------- */
.bmb__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 28px; margin-bottom: 40px; border-bottom: 1px solid var(--b-line); }
.bmb__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--b-blue-d); }
.bmb__eyebrow .bmb__i { width: 16px; height: 16px; }
.bmb__title { margin-top: 12px; font-size: clamp(30px, 4vw, 48px); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; color: var(--b-head); }
.bmb__title span { color: var(--b-blue-d); }
.bmb__all {
    display: inline-flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 3px solid var(--b-green);
    font-size: 15.5px; font-weight: 800; white-space: nowrap; color: var(--b-head);
}
.bmb__all .bmb__i { width: 18px; height: 18px; transition: transform .2s; }
.bmb__all:hover .bmb__i { transform: translateX(4px); }

/* ---------------- GRID (desktop: feature | list | feature) ---------------- */
.bmb__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1.12fr); grid-template-areas: "a l b"; }
.bmb__feat--a { grid-area: a; padding-right: clamp(24px, 3vw, 40px); }
.bmb__feat--b { grid-area: b; padding-left: clamp(24px, 3vw, 40px); }
.bmb__list { grid-area: l; padding-inline: clamp(24px, 3vw, 40px); border-inline: 1px solid var(--b-line); }

/* ---------------- FEATURE CARD ---------------- */
.bmb__feat { position: relative; display: flex; flex-direction: column; min-width: 0; }
.bmb__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 14px; background: var(--b-card); }
.bmb__img, .bmb__art { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }

/* brand cover when no image file exists */
.bmb__art { position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, var(--a1), var(--a2)); color: rgba(255,255,255,.92); }
.bmb__art::before, .bmb__art::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); }
.bmb__art::before { width: 62%; aspect-ratio: 1; right: -12%; top: -30%; }
.bmb__art::after { width: 46%; aspect-ratio: 1; left: -10%; bottom: -34%; background: rgba(255,255,255,.06); }
.bmb__art svg { position: relative; z-index: 1; width: 30%; max-width: 92px; height: auto; }

.bmb__badge { position: absolute; left: 14px; top: 14px; z-index: 2; padding: 6px 11px; border-radius: 6px; background: var(--bg); color: var(--ink); font-size: 12.5px; font-weight: 800; line-height: 1.2; letter-spacing: .01em; }

.bmb__body { display: flex; flex: 1; flex-direction: column; padding-top: 22px; }
.bmb__h { font-size: clamp(20px, 1.9vw, 25px); font-weight: 700; line-height: 1.3; letter-spacing: -.015em; color: var(--b-head); text-wrap: balance; }
.bmb__h a::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 14px; }  /* whole card clickable */
.bmb__ex { margin-top: 12px; font-size: 15px; line-height: 1.7; color: var(--b-sub); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.bmb__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--b-line); }
.bmb__body .bmb__ex { margin-bottom: 22px; }
.bmb__m { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--b-muted); white-space: nowrap; }
.bmb__go { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; font-size: 14px; font-weight: 800; color: var(--b-blue-d); }
.bmb__go .bmb__i { transition: transform .2s; }

/* ---------------- CENTER LIST ---------------- */
.bmb__list li { border-bottom: 1px solid var(--b-line); }
.bmb__list li:first-child .bmb__li { padding-top: 0; }
.bmb__list li:last-child { border-bottom: 0; }
.bmb__list li:last-child .bmb__li { padding-bottom: 0; }
.bmb__li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px; padding: 20px 0; }
.bmb__no { padding-top: 3px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--b-blue-d); }
.bmb__li-t { display: block; font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: var(--b-head); transition: color .2s; }
.bmb__li-m { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.bmb__tag { padding: 2px 9px; border: 1px solid var(--b-blue-d); border-radius: 4px; font-size: 12px; font-weight: 800; color: var(--b-blue-d); }

@media (hover: hover) {
    .bmb__feat:hover .bmb__img, .bmb__feat:hover .bmb__art { transform: scale(1.05); }
    .bmb__feat:hover .bmb__h { color: var(--b-blue-d); }
    .bmb__feat:hover .bmb__go .bmb__i { transform: translateX(4px); }
    .bmb__li:hover .bmb__li-t { color: var(--b-blue-d); }
}

/* ---------------- SCROLL REVEAL (only when JS runs) ---------------- */
.bmb-js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; transition-delay: calc(var(--i, 0) * 70ms); }
.bmb-js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------------- TABLET: two cards side by side, list below ---------------- */
@media (max-width: 1023px) {
    .bmb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a b" "l l"; column-gap: 32px; }
    .bmb__feat--a, .bmb__feat--b { padding-inline: 0; }
    .bmb__list { margin-top: 36px; padding: 6px 0 0; border-inline: 0; border-top: 1px solid var(--b-line); }
    .bmb__list li:first-child .bmb__li { padding-top: 20px; }
    .bmb__list li:last-child .bmb__li { padding-bottom: 20px; }
}

/* ---------------- MOBILE: compact cards, then plain list ---------------- */
@media (max-width: 699px) {
    .bmb__container { padding-inline: 16px; }
    .bmb__head { align-items: flex-start; padding-bottom: 20px; margin-bottom: 8px; border-bottom: 0; }
    .bmb__title { font-size: 30px; }
    .bmb__all { display: none; }

    .bmb__grid { display: block; }
    .bmb__feat { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 20px 0 !important; border-bottom: 1px solid var(--b-line); }
    .bmb__media { aspect-ratio: 1; border-radius: 10px; }
    .bmb__badge { left: 6px; top: 6px; padding: 3px 6px; border-radius: 4px; font-size: 10.5px; }
    .bmb__art svg { width: 38%; }
    .bmb__body { padding-top: 0; }
    .bmb__h { font-size: 16.5px; line-height: 1.32; }
    .bmb__ex { margin: 6px 0 0 !important; font-size: 13.5px; line-height: 1.55; -webkit-line-clamp: 2; }
    .bmb__meta { margin-top: 8px; padding-top: 0; border-top: 0; }
    .bmb__m--opt, .bmb__go { display: none; }
    .bmb__m { font-size: 12.5px; }
    .bmb__i { width: 14px; height: 14px; }

    .bmb__list { margin-top: 0; padding: 0; border-top: 0; }
    .bmb__li { grid-template-columns: 26px minmax(0, 1fr); padding: 18px 0 !important; }
    .bmb__li-t { font-size: 16px; }
    .bmb__list li:last-child { border-bottom: 1px solid var(--b-line); }
}

@media (prefers-reduced-motion: reduce) {
    .bmb *, .bmb *::before { transition-duration: .01ms !important; transition-delay: 0ms !important; }
    .bmb-js [data-reveal] { opacity: 1; transform: none; }
}