/* ==========================================================================
   BYB Global — Insights (blog)
   home.php (Posts page) + archive.php (post archives). Shared .blog-item /
   .blog-cta also used by single posts (article.css holds the .art-* rules).
   Tokens only — no new colours, fonts or radii. Sharp corners;
   the only curved elements are the two site buttons (components.css).
   ========================================================================== */

.blog-page, .art-page {
	font-family:var(--sans);
	color:var(--text);
	background:#fff;
	font-size:15px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
.blog-page *, .blog-page *::before, .blog-page *::after,
.art-page *, .art-page *::before, .art-page *::after { box-sizing:border-box; }
.blog-page .serif, .art-page .serif { font-family:var(--serif); }

.blog-container { max-width:var(--container); margin:0 auto; padding:0 var(--container-pad); }

/* ---------- Shared type ---------- */
.blog-eyebrow {
	display:inline-flex; align-items:center; gap:12px;
	font-size:var(--fs-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--gold-dark);
}
.blog-eyebrow::before { content:""; width:28px; height:1px; background:var(--gold); }
.blog-eyebrow--light { color:var(--gold-light); }
.blog-h2 { font-family:var(--serif); font-weight:300; font-size:clamp(28px,3.4vw,42px); line-height:1.15; color:var(--black); margin:12px 0 0; text-wrap:balance; }
.blog-h2--light { color:#fff; }

.blog-meta {
	display:flex; flex-wrap:wrap; align-items:center; gap:6px 0;
	margin:0; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
}
.blog-meta > * + *::before { content:""; display:inline-block; width:1px; height:10px; margin:0 12px; background:var(--line-2); vertical-align:-1px; }
.blog-meta__cat { color:var(--gold-dark); font-weight:500; text-decoration:none; }
a.blog-meta__cat:hover { color:var(--ink); }

/* ==========================================================================
   LISTING — masthead
   ========================================================================== */
.blog-hero {
	position:relative; overflow:hidden; color:#fff; padding:88px 0 72px; border-bottom:1px solid var(--line-dark);
	background-color:var(--ink); background-size:cover; background-position:center; background-repeat:no-repeat;
}
.blog-hero__overlay {
	position:absolute; inset:0; z-index:0; pointer-events:none;
	background:linear-gradient(180deg, rgba(11,11,13,0.9) 0%, rgba(11,11,13,0.82) 55%, rgba(11,11,13,0.94) 100%);
}
.blog-hero__inner { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:24px 72px; align-items:end; }
.blog-kicker {
	grid-column:1 / -1; display:inline-flex; align-items:center; gap:14px;
	font-size:var(--fs-eyebrow); letter-spacing:0.24em; text-transform:uppercase; color:var(--gold-light);
}
.blog-kicker::before { content:""; width:34px; height:1px; background:var(--gold); }
.blog-hero__title { font-family:var(--serif); font-weight:300; font-size:clamp(52px,8vw,104px); line-height:.98; letter-spacing:-0.01em; color:#fff; margin:0; text-wrap:balance; }
.blog-hero__sub { margin:0 0 10px; font-size:15.5px; line-height:1.8; color:rgba(255,255,255,0.78); max-width:460px; }
.blog-hero__link {
	grid-column:2; justify-self:start; display:inline-flex; align-items:center; gap:10px;
	font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-light); text-decoration:none;
}
.blog-hero__link svg { width:16px; height:16px; transition:transform var(--t-spring); }
.blog-hero__link:hover svg { transform:translateX(4px); }

/* ---------- Topic navigation ---------- */
.blog-topics { background:#fff; border-bottom:1px solid var(--hairline); }
.blog-topics__row { display:flex; align-items:center; gap:28px; }
.blog-topics__group { display:flex; align-items:center; gap:18px; flex:none; padding-left:28px; border-left:1px solid var(--hairline); }
.blog-topics__label { font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }
.blog-topics__drop { position:relative; flex:none; margin-left:auto; }
.blog-topics__drop summary { display:flex; align-items:center; gap:12px; list-style:none; cursor:pointer; padding:22px 0 20px; font-size:11.5px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); transition:color var(--t-fast); }
.blog-topics__drop summary::-webkit-details-marker { display:none; }
.blog-topics__drop summary:hover, .blog-topics__drop[open] summary, .blog-topics__drop[data-active] summary { color:var(--ink); }
.blog-topics__chev { width:7px; height:7px; margin-left:2px; border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:translateY(-2px) rotate(45deg); transition:transform .25s ease; }
.blog-topics__drop[open] .blog-topics__chev { transform:translateY(1px) rotate(-135deg); }
.blog-topics__panel { position:absolute; right:0; top:100%; z-index:20; list-style:none; margin:0; padding:10px 0; min-width:240px; max-height:320px; overflow-y:auto; background:#fff; border:1px solid var(--hairline); box-shadow:0 24px 46px -26px rgba(0,0,0,0.3); }
.blog-topics__panel a { display:block; padding:11px 24px; font-size:12px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color var(--t-fast), background var(--t-fast); }
.blog-topics__panel a:hover, .blog-topics__panel a[aria-current="page"] { color:var(--ink); background:var(--paper); }
.blog-topics__all { position:relative; flex:none; display:block; padding:22px 0 20px; font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color var(--t-fast); }
.blog-topics__all::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left center; transition:transform var(--t-spring); }
.blog-topics__all:hover, .blog-topics__all[aria-current="page"] { color:var(--ink); }
.blog-topics__all:hover::after, .blog-topics__all[aria-current="page"]::after { transform:scaleX(1); }
.blog-topics__list {
	display:flex; gap:24px; list-style:none; margin:0; padding:0;
}
.blog-topics__list a {
	position:relative; display:block; padding:22px 0 20px; white-space:nowrap;
	font-size:11.5px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase;
	color:var(--muted); text-decoration:none; transition:color var(--t-fast);
}
.blog-topics__list a::after {
	content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--gold);
	transform:scaleX(0); transform-origin:left center; transition:transform var(--t-spring);
}
.blog-topics__list a:hover { color:var(--ink); }
.blog-topics__list a:hover::after, .blog-topics__list a[aria-current="page"]::after { transform:scaleX(1); }
.blog-topics__list a[aria-current="page"] { color:var(--ink); }

/* ---------- Posts ---------- */
.blog-list-wrap { padding:72px 0 var(--sec-py); }

/* Lead story (page 1 of the index) */
.blog-lead {
	position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	border:1px solid var(--hairline); margin-bottom:var(--sec-py-tight);
}
.blog-lead__body { display:flex; flex-direction:column; justify-content:center; gap:18px; padding:56px 56px 52px; }
.blog-lead__label { font-size:var(--fs-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--ink); font-weight:500; }
.blog-lead__label::after { content:""; display:block; width:36px; height:2px; margin-top:14px; background:var(--gold); }
.blog-lead__title { font-family:var(--serif); font-weight:300; font-size:clamp(30px,3.4vw,46px); line-height:1.1; margin:0; text-wrap:balance; }
.blog-lead__title a { color:var(--black); text-decoration:none; transition:color var(--t-fast); }
.blog-lead__title a:hover { color:var(--gold-dark); }
.blog-lead__excerpt { margin:0; font-size:15.5px; line-height:1.8; color:var(--muted); max-width:520px; }
.blog-lead__more, .blog-item__more {
	display:inline-flex; align-items:center; gap:10px;
	font-size:11.5px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-dark); text-decoration:none;
}
.blog-lead__more svg, .blog-item__more svg { width:16px; height:16px; transition:transform var(--t-spring); }
.blog-lead:hover .blog-lead__more svg, .blog-item:hover .blog-item__more svg { transform:translateX(5px); }
.blog-lead__media { position:relative; min-height:380px; background:var(--ink); overflow:hidden; }
.blog-lead__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.blog-lead__cover {
	position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between;
	padding:40px; outline:1px solid rgba(183,162,106,0.28); outline-offset:-20px;
	background-color:var(--ink); background-size:cover; background-position:center; background-repeat:no-repeat;
}
.blog-lead__cover-overlay {
	position:absolute; inset:0; z-index:0; pointer-events:none;
	background:linear-gradient(180deg, rgba(11,11,13,0.82) 0%, rgba(11,11,13,0.68) 55%, rgba(11,11,13,0.86) 100%);
}
.blog-lead__cover-k { position:relative; z-index:1; font-size:var(--fs-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--gold-light); padding:4px 8px; }
.blog-lead__cover-t { position:relative; z-index:1; font-size:clamp(44px,5vw,72px); font-weight:300; line-height:1; color:var(--gold); padding:0 8px 4px; }

.blog-list__head { margin-bottom:36px; }

/* Separated cards: each cell carries its own hairline border with a gap
   between, so cards read as individual pieces instead of one fused block. */
.blog-grid {
	display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--blog-gap,28px);
}
.blog-item {
	position:relative; display:flex; flex-direction:column; background:#fff;
	border:1px solid var(--hairline); overflow:hidden;
	transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.blog-item::before {
	content:""; position:absolute; left:0; top:0; width:2px; height:0; background:var(--gold);
	transition:height .3s ease; z-index:1;
}
.blog-item:hover { transform:translateY(-5px); border-color:var(--gold); box-shadow:0 24px 46px -30px rgba(0,0,0,0.38); }
.blog-item:hover::before { height:100%; }
.blog-item:focus-within { outline:2px solid var(--gold); outline-offset:-2px; }
.blog-item__media { aspect-ratio:3 / 2; overflow:hidden; background:var(--paper); }
.blog-item__media img { width:100%; height:100%; object-fit:cover; display:block; }
.blog-item__cover {
	position:relative; display:flex; align-items:flex-end; width:100%; height:100%; padding:24px 26px; overflow:hidden;
	background-color:var(--ink); background-size:cover; background-position:center; background-repeat:no-repeat;
	outline:1px solid rgba(183,162,106,0.28); outline-offset:-14px;
	font-size:34px; font-weight:300; line-height:1; color:var(--gold);
}
.blog-item__cover-overlay {
	position:absolute; inset:0; z-index:0; pointer-events:none;
	background:linear-gradient(180deg, rgba(11,11,13,0.8) 0%, rgba(11,11,13,0.62) 55%, rgba(11,11,13,0.84) 100%);
}
.blog-item__cover-text { position:relative; z-index:1; }
.blog-item__body { display:flex; flex-direction:column; gap:14px; flex:1; padding:28px 28px 30px; }
.blog-item__title { font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.22; margin:0; }
.blog-item__title a { color:var(--black); text-decoration:none; }
.blog-item__title a::after { content:""; position:absolute; inset:0; z-index:2; }
.blog-item__title a:focus-visible { outline:none; }
.blog-item__excerpt { margin:0; flex:1; font-size:14px; line-height:1.75; color:var(--muted); }

/* ---------- Pagination ---------- */
.blog-pagination { margin-top:56px; }
.blog-pagination .nav-links { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.blog-pagination .page-numbers {
	display:inline-flex; align-items:center; justify-content:center; gap:6px;
	min-width:44px; height:44px; padding:0 14px; border:1px solid var(--hairline);
	font-size:13px; font-weight:500; color:var(--text); text-decoration:none;
	transition:border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.blog-pagination a.page-numbers:hover { border-color:var(--gold); color:var(--gold-dark); }
.blog-pagination .page-numbers.current { background:var(--ink); border-color:var(--ink); color:#fff; }
.blog-pagination .page-numbers.dots { border-color:transparent; }

.blog-empty { padding:40px 0; text-align:center; }
.blog-empty .serif { font-size:30px; font-weight:300; color:var(--black); margin:0 0 10px; }
.blog-empty p { color:var(--muted); }
.blog-empty a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px; }

/* ---------- Editorial pillars ---------- */
.blog-pillars-wrap { background:var(--paper); padding:var(--sec-py) 0; }
.blog-pillars-head { margin-bottom:40px; }
.blog-pillars {
	display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; margin:0; padding:0;
	border-top:1px solid var(--hairline); border-left:1px solid var(--hairline);
}
.blog-pillar { background:#fff; padding:32px 28px; border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.blog-pillar__no { display:block; font-size:34px; font-weight:300; line-height:1; color:var(--gold); margin-bottom:18px; }
.blog-pillar__title { font-family:var(--sans); font-size:15px; font-weight:600; color:var(--black); margin:0 0 8px; }
.blog-pillar__desc { font-size:13.5px; line-height:1.7; color:var(--muted); margin:0; }

/* ---------- Closing CTA (listing + article) ---------- */
.blog-cta { background:var(--grad-dark-gold); padding:80px 0; }
.blog-cta__inner { display:grid; grid-template-columns:minmax(0,1.3fr) auto; gap:32px 64px; align-items:end; }
.blog-cta p { margin:16px 0 0; max-width:540px; font-size:15px; line-height:1.8; color:rgba(255,255,255,0.74); }
.blog-cta__actions { display:flex; flex-wrap:wrap; gap:14px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1040px) {
	/* The topics row (All · Topics · Country) is ~980px on one line; below that
	   it wraps instead of widening the whole page. */
	.blog-topics__row { flex-wrap:wrap; column-gap:28px; }
	.blog-topics__group { flex-shrink:1; min-width:0; }
	.blog-hero__inner { grid-template-columns:1fr; }
	.blog-hero__link { grid-column:1; }
	.blog-lead { grid-template-columns:1fr; }
	.blog-lead__media { order:-1; min-height:0; aspect-ratio:16 / 9; }
	.blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.blog-pillars { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.blog-cta__inner { grid-template-columns:1fr; align-items:start; }
}
/* Phones and small tablets: the topics stack under "All" (the one-line bar
   needs ~900px). flex:1 1 100% + min-width:0 let the group and its list wrap
   inside the screen; with the desktop flex:none they kept their one-line width
   and pushed the whole blog page ~1,000px wide. */
@media (max-width: 900px) {
	.blog-topics__row { flex-wrap:wrap; gap:8px 22px; }
	.blog-topics__group { border-left:0; padding-left:0; flex-wrap:wrap; gap:4px 18px; flex:1 1 100%; min-width:0; }
	.blog-topics__list { flex-wrap:wrap; gap:0 22px; min-width:0; }
	.blog-topics__list a { padding:12px 0 10px; }
	.blog-topics__all, .blog-topics__drop summary { padding:16px 0 12px; }
}
@media (max-width: 720px) {
	.blog-topics__drop { margin-left:0; width:100%; }
	.blog-topics__panel { position:static; box-shadow:none; border-width:1px 0 0; max-height:none; }
	.blog-container { padding-left:var(--container-pad-mobile); padding-right:var(--container-pad-mobile); }
	.blog-hero { padding:64px 0 48px; }
	.blog-list-wrap { padding:48px 0 var(--sec-py-mobile); }
	.blog-lead__body { padding:32px 24px 36px; }
	.blog-grid, .blog-pillars { grid-template-columns:1fr; }
	.blog-grid { --blog-gap:20px; }
	.blog-item__body { padding:24px; }
	.blog-pillars-wrap { padding:var(--sec-py-mobile) 0; }
	.blog-cta { padding:56px 0; }
	.blog-cta__actions .byb-btn { flex:1 1 auto; }
	/* Wrapped meta lines would start on a separator — use spacing instead. */
	.blog-meta { column-gap:18px; }
	.blog-meta > * + *::before { display:none; }
}

@media (prefers-reduced-motion: reduce) {
	.blog-item, .blog-item::before, .blog-topics__list a::after,
	.blog-lead__more svg, .blog-item__more svg, .blog-hero__link svg { transition:none !important; }
	.blog-lead:hover .blog-lead__more svg, .blog-item:hover .blog-item__more svg,
	.blog-hero__link:hover svg, .blog-item:hover { transform:none !important; }
}