/* =====================================================================
   BLOG INDEX — featured hero + latest articles grid
   Desktop is sized in vw off the 1440px design (80px = 5.56vw), the same
   as the widget styles; from 1024px down it switches to px / clamp().
   Everything is prefixed .tb- so the widgets' .hero / .btn never collide.
   ===================================================================== */
.tb-blog{
	--tb-navy:#1c3244;
	--tb-ink:#1c2e45;
	--tb-yellow:#e8b64a;
	--tb-cream:#f6efe0;
	--tb-line:#efe6d2;
	--tb-muted:#5b6472;
	--tb-pad-x:5.56vw;
	font-family:var(--thm-body-font, "Sora", sans-serif);
	color:var(--tb-ink);
}
/* theme.css boxes .site-main at 500–1140px with side padding
   (body:not([class*=elementor-page-]) .site-main, 0,2,1) — the blog runs
   edge to edge and carries its own 5.56vw gutters instead */
html body .site-main.tb-blog{max-width:none;width:100%;margin:0;padding:0;}
.tb-blog *,.tb-blog *::before,.tb-blog *::after{box-sizing:border-box;}
.tb-blog a{text-decoration:none;}
.tb-blog img{display:block;max-width:100%;}

/* ---------- shared bits ---------- */
.tb-eyebrow{display:flex;align-items:center;gap:.7vw;}
.tb-eyebrow i{display:block;width:1.58vw;height:.14vw;min-height:2px;background:currentColor;}
.tb-eyebrow span{white-space:nowrap;font-size:.92vw;font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.tb-eyebrow--light{color:var(--tb-yellow);}

.tb-btn{
	display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;
	background:var(--tb-yellow);color:var(--tb-navy);
	font-family:inherit;font-size:1.39vw;font-weight:400;line-height:1.2;text-transform:capitalize;
	padding:1.25vw 2.36vw;border-radius:.42vw;
	transition:filter .2s ease,transform .2s ease;
}
.tb-btn:hover,.tb-btn:focus-visible{color:var(--tb-navy);filter:brightness(1.05);transform:translateY(-2px);}
.tb-btn[aria-busy="true"]{opacity:.7;pointer-events:none;}

.tb-author{display:flex;align-items:center;gap:.9vw;min-width:0;}
.tb-author__avatar{flex:none;width:2.8vw;height:2.8vw;border-radius:50%;object-fit:cover;}
.tb-author__info{display:flex;flex-direction:column;min-width:0;line-height:1.35;}
.tb-author__name{font-weight:600;font-size:1vw;}
.tb-author__role,.tb-author__meta{font-size:.9vw;color:var(--tb-muted);}
.tb-author__meta{font-size:.8vw;}
.tb-author__meta i{font-style:normal;margin:0 .35vw;}

.tb-card__placeholder{display:block;width:100%;height:100%;background:linear-gradient(135deg,#2a4560,var(--tb-navy));}

/* ===== HERO — featured post ===== */
.tb-hero{
	padding:15.4vw var(--tb-pad-x) 7.1vw;  /* top clears the header drawn over the page */
	background:
		radial-gradient(60vw 32vw at -6vw 110%, rgba(232,182,74,.20), rgba(232,182,74,0) 70%),
		var(--tb-navy);
	color:#fff;
}
.tb-hero__inner{display:grid;grid-template-columns:1fr 45.5vw;gap:5.8vw;align-items:center;}
.tb-hero__content{display:flex;flex-direction:column;min-width:0;}

.tb-hero__title{
	margin:2.4vw 0 0;
	font-family:var(--thm-heading-font, 'Big Shoulders Display'),sans-serif;
	font-size:5.4vw;line-height:1;letter-spacing:-.01em;color:#fff;
}
.tb-hero__title a{color:inherit;}
.tb-hero__title-thin{display:block;font-weight:300;}
.tb-hero__title-fat{font-weight:700;}

.tb-hero__text{margin:2.3vw 0 0;max-width:38vw;font-size:1.25vw;line-height:1.6;color:rgba(255,255,255,.78);}

.tb-hero__meta{display:flex;align-items:center;flex-wrap:wrap;gap:1.2vw 1.75vw;margin-top:2.4vw;}
.tb-hero__meta .tb-author__name{font-family:var(--thm-heading-font, 'Big Shoulders Display'),sans-serif;font-weight:500;font-size:1.3vw;}
.tb-hero__meta .tb-author__role{color:rgba(255,255,255,.7);}
.tb-hero__stat{display:flex;align-items:baseline;gap:.75vw;font-size:.97vw;}
.tb-hero__stat span{color:rgba(255,255,255,.7);}
.tb-hero__stat time,.tb-hero__stat b{font-weight:600;color:#fff;}

.tb-hero .tb-btn{margin-top:2.3vw;}

.tb-hero__media{
	position:relative;display:block;overflow:hidden;
	aspect-ratio:518 / 411;border-radius:1.4vw;
	border:1px solid rgba(255,255,255,.12);background:#24405a;
}
.tb-hero__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.tb-hero__media:hover img{transform:scale(1.03);}
.tb-hero__badge{
	position:absolute;top:1.67vw;left:1.67vw;
	background:#fff;color:var(--tb-navy);
	font-size:.92vw;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
	padding:.62vw 1.15vw;border-radius:2vw;
}

/* ===== LATEST ARTICLES ===== */
.tb-latest{padding:7.5vw var(--tb-pad-x) 8.4vw;background:#fff;}

.tb-latest__head{display:flex;justify-content:space-between;align-items:flex-end;gap:3vw;margin-bottom:4.8vw;}
.tb-latest__intro{min-width:0;}
.tb-latest__title{
	margin:1.7vw 0 0;max-width:30vw;
	font-family:var(--thm-heading-font, 'Big Shoulders Display'),sans-serif;
	font-weight:700;font-size:4.17vw;line-height:1;color:var(--tb-ink);
}
.tb-latest__text{margin:1.8vw 0 0;max-width:37vw;font-size:1.25vw;line-height:1.6;color:var(--tb-muted);}

.tb-filter{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.8vw;}
.tb-filter__pill{
	display:inline-flex;align-items:center;
	padding:.8vw 1.4vw;border-radius:2vw;
	background:var(--tb-cream);color:var(--tb-ink);
	font-size:1.05vw;font-weight:600;line-height:1.2;white-space:nowrap;
	transition:background .2s ease,color .2s ease;
}
.tb-filter__pill:hover,.tb-filter__pill:focus-visible{background:#efe2c4;color:var(--tb-ink);}
.tb-filter__pill.is-active{background:var(--tb-navy);color:#fff;}

/* ---------- grid + cards ---------- */
.tb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.28vw;transition:opacity .2s ease;}
.tb-grid.is-loading{opacity:.45;pointer-events:none;}
.tb-grid__empty{grid-column:1 / -1;text-align:center;font-size:1.25vw;color:var(--tb-muted);padding:4vw 0;}

.tb-card{
	display:flex;flex-direction:column;overflow:hidden;
	background:#fff;border:1px solid var(--tb-line);border-radius:1.4vw;
	box-shadow:0 .3vw 1.4vw rgba(28,50,68,.04);
	transition:box-shadow .3s ease,transform .3s ease;
}
.tb-card:hover{transform:translateY(-4px);box-shadow:0 1vw 2.8vw rgba(28,50,68,.10);}
.tb-card__media{display:block;aspect-ratio:320 / 173;overflow:hidden;background:#24405a;}
.tb-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.tb-card:hover .tb-card__media img{transform:scale(1.04);}

.tb-card__body{display:flex;flex-direction:column;flex:1;padding:1.75vw 1.67vw 3vw;}
.tb-card__tags{display:flex;flex-wrap:wrap;gap:.5vw;margin:0;padding:0;list-style:none;}
.tb-card__tags a{
	display:inline-block;padding:.38vw .7vw;border-radius:1vw;
	background:var(--tb-cream);color:var(--tb-ink);
	font-size:.83vw;font-weight:600;line-height:1.2;
}
.tb-card__title{
	margin:1.2vw 0 0;
	font-family:var(--thm-heading-font, 'Big Shoulders Display'),sans-serif;
	font-weight:600;font-size:1.82vw;line-height:1.12;color:var(--tb-ink);
}
.tb-card__title a{color:inherit;transition:color .2s ease;}
.tb-card__title a:hover{color:#b8861f;}
.tb-card__excerpt{margin:1.4vw 0 0;font-size:1.05vw;line-height:1.5;color:var(--tb-muted);}
.tb-author--card{margin-top:auto;padding-top:1.4vw;}

.tb-more{display:flex;justify-content:center;margin-top:4.5vw;}
.tb-more[hidden]{display:none;}
.tb-more .tb-btn{align-self:auto;}

/* ===== RESPONSIVE : starts at 1024px ===== */
@media (max-width:1024px){
	.tb-blog{--tb-pad-x:24px;}

	.tb-eyebrow{gap:10px;}
	.tb-eyebrow i{width:24px;height:2px;}
	.tb-eyebrow span{font-size:13px;}

	.tb-btn{font-size:17px;padding:15px 30px;border-radius:6px;}

	.tb-author{gap:12px;}
	.tb-author__avatar{width:40px;height:40px;}
	.tb-author__name{font-size:14px;}
	.tb-author__role{font-size:13px;}
	.tb-author__meta{font-size:12px;}
	.tb-author__meta i{margin:0 5px;}

	/* hero — one column, copy over image */
	.tb-hero{padding:140px var(--tb-pad-x) 64px;background:radial-gradient(120vw 80vw at -20vw 100%, rgba(232,182,74,.18), rgba(232,182,74,0) 70%),var(--tb-navy);}
	.tb-hero__inner{grid-template-columns:1fr;gap:44px;}
	.tb-hero__content{max-width:640px;}
	.tb-hero__title{margin-top:20px;font-size:clamp(44px,8.5vw,76px);}
	.tb-hero__text{margin-top:20px;max-width:56ch;font-size:clamp(15px,2vw,18px);}
	.tb-hero__meta{gap:14px 24px;margin-top:26px;}
	.tb-hero__meta .tb-author__name{font-size:17px;}
	.tb-hero__stat{gap:8px;font-size:14px;}
	.tb-hero .tb-btn{margin-top:28px;}
	.tb-hero__media{width:100%;max-width:720px;border-radius:16px;}
	.tb-hero__badge{top:16px;left:16px;font-size:12px;padding:8px 14px;border-radius:30px;}

	/* latest — head stacks, two columns of cards */
	.tb-latest{padding:72px var(--tb-pad-x) 80px;}
	.tb-latest__head{flex-direction:column;align-items:flex-start;gap:28px;margin-bottom:40px;}
	.tb-latest__title{margin-top:16px;max-width:520px;font-size:clamp(38px,6.5vw,56px);}
	.tb-latest__text{margin-top:16px;max-width:560px;font-size:clamp(15px,2vw,18px);}
	.tb-filter{justify-content:flex-start;gap:10px;}
	.tb-filter__pill{font-size:14px;padding:10px 18px;border-radius:30px;}

	.tb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
	.tb-grid__empty{font-size:16px;padding:40px 0;}
	.tb-card{border-radius:16px;box-shadow:0 4px 18px rgba(28,50,68,.05);}
	.tb-card__body{padding:22px 22px 30px;}
	.tb-card__tags{gap:6px;}
	.tb-card__tags a{font-size:12px;padding:5px 10px;border-radius:20px;}
	.tb-card__title{margin-top:16px;font-size:24px;}
	.tb-card__excerpt{margin-top:14px;font-size:14px;}
	.tb-author--card{padding-top:18px;}

	.tb-more{margin-top:48px;}
}

@media (max-width:767px){
	.tb-hero{padding:120px 20px 56px;}
	.tb-latest{padding:56px 20px 64px;}
	.tb-hero__title{font-size:clamp(38px,11vw,56px);}
	.tb-hero__meta .tb-author{flex-basis:100%;}
	.tb-hero .tb-btn{align-self:stretch;}
	.tb-hero__media{border-radius:14px;}

	.tb-latest__title{font-size:clamp(34px,10vw,46px);}

	/* pills scroll sideways instead of wrapping onto three lines */
	.tb-filter{flex-wrap:nowrap;width:calc(100% + 40px);margin:0 -20px;padding:0 20px 4px;overflow-x:auto;scrollbar-width:none;}
	.tb-filter::-webkit-scrollbar{display:none;}

	.tb-grid{grid-template-columns:1fr;gap:20px;}
	.tb-card__title{font-size:23px;}
}

@media (prefers-reduced-motion:reduce){
	.tb-blog *{transition:none !important;}
	.tb-card:hover,.tb-btn:hover{transform:none;}
}
