/* ==========================================================================
   VICS Blog Index — 1:1 with Figma "Blog Index VICS" (node 1-343)
   Scoped under .vblog. Loaded only on the Blog page template.
   ========================================================================== */

.vblog, .vblog *, .vblog *::before, .vblog *::after { box-sizing: border-box; }
.vblog {
	--vb-ink:   #080A18;
	--vb-blue:  #3572FF;
	--vb-dark:  #0D0D0B;
	--vb-body:  #72706B;
	--vb-body2: #7A7770;
	--vb-meta:  #939187;
	--vb-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-family: var(--vb-font);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
.vblog a { text-decoration: none; }
.vblog h1, .vblog h2, .vblog h3, .vblog .vb-featured__title, .vblog .vb-hpv__title { text-shadow: none; }
.vb-wrap { max-width: 1440px; width: 100%; margin: 0 auto; padding: 0 70px; }

/* ============================ HERO ============================ */
.vb-hero { position: relative; background: var(--vb-dark); overflow: hidden; }
.vb-hero::before {
	content: ""; position: absolute; inset: 0;
	background-image: var(--vb-tex); background-size: cover; background-position: center;
	opacity: .18;
}
.vb-hero::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(22,48,107,0.36) 0%, rgba(6,14,32,1) 87%);
	opacity: .9;
}
.vb-hero__grid {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: minmax(0,1fr) 280px;
	justify-content: space-between; align-items: center; gap: 40px;
	min-height: 535px; padding: 96px 70px 72px;
}
.vb-hero__main { max-width: none; }
.vb-hero__eyebrow {
	display: block; font-weight: 500; font-size: 12px; line-height: 14px;
	letter-spacing: 1.5px; color: #fff; text-transform: uppercase;
}
.vb-hero__title {
	margin: 20px 0 0; font-weight: 600; font-size: clamp(24px, calc(5px + 5.83vw), 75px) !important; line-height: 1.05;
	letter-spacing: -1px; color: #fff; width: 100%; max-width: 100%;
}
.vb-hero__title span { color: var(--vb-blue); }
.vb-hero__sub {
	margin: 20px 0 0; max-width: 440px;
	font-weight: 400; font-size: 15px; line-height: 25px; color: rgba(255,255,255,0.82);
}
.vb-hero__topics { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; }
.vb-hero__topic { font-weight: 400; font-size: 12px; line-height: 14px; color: #A09E93; }
.vb-hero__div { width: 1px; height: 12px; background: rgba(255,255,255,0.28); flex: none; }

/* hero featured-preview card — frosted glass (Figma dev spec) */
.vb-hpv {
	display: flex; flex-direction: column; width: 300px;
	border-radius: 4px; overflow: hidden;
	border: 1px solid rgba(255,255,255,0.34);
	background: rgba(255,255,255,0.09);
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.vb-hpv__img { height: 188px; background: #1b1b1b center/cover no-repeat; }
.vb-hpv__body { display: flex; flex-direction: column; gap: 7px; padding: 18px 16px; }
.vb-hpv__label { font-weight: 500; font-size: 10px; line-height: 12px; letter-spacing: 1.2px; color: var(--vb-blue); }
.vb-hpv__title { font-weight: 600; font-size: 16px; line-height: 19px; letter-spacing: -.3px; color: #fff; text-shadow: none; }
.vb-hpv__meta { font-weight: 400; font-size: 11px; line-height: 13px; color: rgba(255,255,255,0.72); }

/* ============================ PAGE ============================ */
.vb-page { background: #fff; padding: 72px 0 96px; }
.vb-page__grid { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 80px; align-items: start; }

/* ---- featured big card ---- */
.vb-featured {
	position: relative; display: block; height: 500px;
	border-radius: 4px; overflow: hidden; background-color: #171714;
}
.vb-featured::before {
	content: ""; position: absolute; inset: 0;
	background-image: var(--vb-fimg); background-size: cover; background-position: center;
	opacity: .5;
}
.vb-featured::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(13,13,10,.18) 0%, rgba(13,13,10,.32) 50%, rgba(10,10,8,.72) 100%);
}
.vb-featured__overlay {
	position: absolute; left: 40px; right: 40px; bottom: 40px; z-index: 5;
	display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 760px;
}
.vb-badge {
	font-weight: 700; font-size: 10px; line-height: 12px; letter-spacing: 1px; color: #fff;
	background: var(--vb-blue); padding: 4px 8px; border-radius: 2px;
}
.vb-featured__cat { font-weight: 500; font-size: 11px; line-height: 13px; letter-spacing: 1px; color: #B2AFA5; }
.vb-featured__title { font-weight: 600; font-size: 30px; line-height: 32px; letter-spacing: -.8px; color: #fff; }
.vb-featured__excerpt { font-weight: 400; font-size: 14px; line-height: 22px; color: #D8D6CE; }
.vb-featured__meta { font-weight: 400; font-size: 11px; line-height: 13px; color: #8C8982; }

/* ---- editor note ---- */
.vb-note {
	display: flex; align-items: center; gap: 14px;
	margin-top: 48px; padding: 24px 0; border-top: 1px solid #DBDBD8;
}
.vb-note__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vb-blue); flex: none; }
.vb-note__text { font-weight: 400; font-size: 15px; line-height: 21px; color: var(--vb-body); }

/* ---- feed item ---- */
.vb-item {
	display: flex; gap: 28px; align-items: flex-start;
	padding: 28px 0; border-top: 1px solid #E0E0DD;
}
.vb-item__img { width: 196px; height: 131px; flex: none; border-radius: 4px; background: #e9e9e6 center/cover no-repeat; }
.vb-item__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vb-item__cat { font-weight: 500; font-size: 10px; line-height: 12px; letter-spacing: 1.2px; color: var(--vb-blue); }
.vb-item__title { font-weight: 600; font-size: 22px; line-height: 25px; letter-spacing: -.4px; color: var(--vb-ink); }
.vb-item:hover .vb-item__title { color: var(--vb-blue); }
.vb-item__excerpt { font-weight: 400; font-size: 13px; line-height: 21px; color: var(--vb-body); }
.vb-item__meta { font-weight: 400; font-size: 11px; line-height: 13px; letter-spacing: .2px; color: var(--vb-meta); }

/* ---- spotlight (full width) ---- */
.vb-spot { display: block; padding: 32px 0; border-top: 1px solid #E0E0DD; }
.vb-spot__img { display: block; width: 100%; height: 300px; border-radius: 4px; background: #e9e9e6 center/cover no-repeat; margin-bottom: 22px; }
.vb-spot__row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.vb-spot__left { display: flex; flex-direction: column; gap: 8px; }
.vb-spot__cat { font-weight: 500; font-size: 10px; line-height: 12px; letter-spacing: 1.2px; color: var(--vb-meta); }
.vb-spot__title { font-weight: 600; font-size: 26px; line-height: 28px; letter-spacing: -.6px; color: var(--vb-ink); }
.vb-spot:hover .vb-spot__title { color: var(--vb-blue); }
.vb-spot__right { display: flex; flex-direction: column; gap: 10px; }
.vb-spot__excerpt { font-weight: 400; font-size: 13px; line-height: 21px; color: var(--vb-body); }
.vb-spot__meta { font-weight: 400; font-size: 11px; line-height: 13px; letter-spacing: .2px; color: var(--vb-meta); }

/* ---- pagination (site style) ---- */
.vb-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 36px; }
.vb-pg {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px;
	border: 1px solid #E0E0DD; border-radius: 4px; background: #fff;
	font-weight: 600; font-size: 14px; line-height: 1; color: var(--vb-ink);
	transition: border-color .15s, background .15s, color .15s;
}
.vb-pg:hover { border-color: var(--vb-blue); color: var(--vb-blue); }
.vb-pg.is-active { background: var(--vb-blue); border-color: var(--vb-blue); color: #fff; }
.vb-pg--nav { color: var(--vb-body); font-weight: 500; }
.vb-pg.is-disabled { opacity: .4; pointer-events: none; }

/* ============================ SIDEBAR ============================ */
.vb-side { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 40px; }
.vb-side__block { border-top: 1px solid #DBDBD8; padding-top: 24px; }
.vb-side__label { display: block; font-weight: 500; font-size: 10px; line-height: 12px; letter-spacing: 1.4px; color: var(--vb-body2); margin-bottom: 16px; }
.vb-side__topics { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vb-side__topics a { font-weight: 400; font-size: 13px; line-height: 15px; color: var(--vb-body2); }
.vb-side__topics a:hover { color: var(--vb-blue); }
.vb-side__cta .vb-side__label { margin-bottom: 10px; }
.vb-cta__title { margin: 0 0 10px; font-weight: 600; font-size: 21px; line-height: 23px; letter-spacing: -.4px; color: var(--vb-ink); }
.vb-cta__text { margin: 0 0 10px; font-weight: 400; font-size: 13px; line-height: 20px; color: var(--vb-body2); }
.vb-cta__link { font-weight: 500; font-size: 12px; line-height: 14px; color: var(--vb-blue); }
.vb-cta__link:hover { text-decoration: underline; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1180px) {
	.vb-wrap { padding: 0 40px; }
	.vb-hero__grid { padding: 88px 40px 64px; }
	.vb-hero__title { width: 100%; max-width: 100%; }
}
@media (max-width: 980px) {
	.vb-hero__grid { grid-template-columns: 1fr; gap: 36px; min-height: 0; padding: 80px 40px 56px; }
	.vb-hpv { width: 100%; max-width: 420px; }
	.vb-hpv__img { height: 200px; }
	.vb-page__grid { grid-template-columns: 1fr; gap: 56px; }
	.vb-side { position: static; }
	.vb-featured { height: 420px; }
	.vb-featured__title { font-size: 26px; line-height: 30px; }
}
@media (max-width: 640px) {
	.vb-wrap { padding: 0 20px; }
	.vb-hero__grid { padding: 64px 20px 44px; }
	.vb-hero__title { width: 100%; max-width: 100%; }
	.vb-hero__sub { font-size: 14px; }
	.vb-page { padding: 48px 0 64px; }
	.vb-featured { height: 360px; }
	.vb-featured__overlay { left: 20px; right: 20px; bottom: 22px; gap: 10px; }
	.vb-featured__title { font-size: 22px; line-height: 26px; letter-spacing: -.5px; }
	/* feed item stacks: image on top */
	.vb-item { flex-direction: column; gap: 14px; padding: 22px 0; }
	.vb-item__img { width: 100%; height: 200px; }
	.vb-item__title { font-size: 19px; line-height: 23px; }
	.vb-spot__img { height: 200px; }
	.vb-spot__row { grid-template-columns: 1fr; gap: 14px; }
	.vb-spot__title { font-size: 21px; line-height: 25px; }
}