/* SOS Blog Display — scoped styles
   Override any colour by setting the variables on .sosf / .sosg from your theme. */

.sosf, .sosg {
	--sos-sand:#F4ECDD;
	--sos-ink:#2B2620;
	--sos-muted:#6F6A60;
	--sos-terra:#C2552B;
	--sos-teal:#379184;
	--sos-font-head:'Fraunces', Georgia, 'Times New Roman', serif;
	--sos-font-body:'Plus Jakarta Sans', system-ui, sans-serif;
	box-sizing:border-box;
	font-family:var(--sos-font-body);
	color:var(--sos-ink);
}
.sosf *, .sosg * { box-sizing:border-box; }

/* ---------- Featured hero ---------- */
.sosf {
	background:var(--sos-sand);
	border-radius:20px;
	padding:clamp(24px,4vw,56px);
}
.sosf__eyebrow {
	margin:0 0 22px;
	color:var(--sos-terra);
	font-weight:600;
	font-size:.72rem;
	letter-spacing:.22em;
	text-transform:uppercase;
}
.sosf__grid {
	display:grid;
	grid-template-columns:1.15fr 1fr;
	gap:clamp(24px,4vw,56px);
	align-items:center;
}
.sosf__media {
	display:block;
	border-radius:16px;
	min-height:300px;
	background-size:cover;
	background-position:center;
}
.sosf__cat {
	margin:0 0 14px;
	color:var(--sos-muted);
	font-size:.74rem;
	letter-spacing:.12em;
	font-weight:600;
}
.sosf__title {
	font-family:var(--sos-font-head);
	font-weight:600;
	font-size:clamp(1.6rem,3vw,2.3rem);
	line-height:1.12;
	margin:0 0 16px;
}
.sosf__title a { color:inherit; text-decoration:none; }
.sosf__title a:hover { color:var(--sos-terra); }
.sosf__excerpt {
	color:#4a463f;
	font-size:1.02rem;
	line-height:1.6;
	margin:0 0 18px;
	max-width:46ch;
}
.sosf__meta { color:var(--sos-muted); font-size:.86rem; margin:0 0 26px; }
.sosf__btn {
	display:inline-block;
	background:var(--sos-terra);
	color:#fff;
	text-decoration:none;
	font-weight:600;
	font-size:.92rem;
	padding:13px 26px;
	border-radius:999px;
	transition:transform .2s ease, background .2s ease;
}
.sosf__btn:hover { transform:translateY(-2px); background:#aa481f; color:#fff; }

/* ---------- Latest grid ---------- */
.sosg { padding:clamp(20px,3vw,40px) 0; }
.sosg__head {
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:16px;
	margin-bottom:26px;
}
.sosg__heading {
	font-family:var(--sos-font-head);
	font-weight:600;
	font-size:clamp(1.5rem,2.6vw,2rem);
	margin:0;
}
.sosg__viewall { color:var(--sos-terra); text-decoration:none; font-weight:600; font-size:.92rem; }
.sosg__viewall:hover { text-decoration:underline; }
.sosg__grid {
	display:grid;
	grid-template-columns:repeat(var(--sos-cols,3), 1fr);
	gap:24px;
}
.sosg__card {
	display:flex;
	flex-direction:column;
	background:#fff;
	border:1px solid #ece4d6;
	border-radius:16px;
	overflow:hidden;
	text-decoration:none;
	color:inherit;
	transition:transform .25s ease, box-shadow .25s ease;
}
.sosg__card:hover { transform:translateY(-4px); box-shadow:0 16px 30px -18px rgba(43,38,32,.4); }
.sosg__media {
	position:relative;
	display:block;
	aspect-ratio:16/10;
	background-size:cover;
	background-position:center;
}
.sosg__pill {
	position:absolute;
	left:14px;
	bottom:14px;
	background:rgba(33,28,22,.72);
	color:#fff;
	font-size:.62rem;
	font-weight:600;
	letter-spacing:.1em;
	padding:6px 12px;
	border-radius:999px;
}
.sosg__foot { padding:18px 18px 22px; }
.sosg__meta {
	display:block;
	color:var(--sos-muted);
	font-size:.7rem;
	letter-spacing:.08em;
	font-weight:600;
	margin-bottom:8px;
}
.sosg__title {
	display:block;
	font-family:var(--sos-font-head);
	font-weight:600;
	font-size:1.12rem;
	line-height:1.28;
	color:var(--sos-ink);
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
	.sosf__grid { grid-template-columns:1fr; }
	.sosf__media { min-height:220px; order:-1; }
	.sosg__grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
	.sosg__grid { grid-template-columns:1fr; }
}