/* ── In-content imagery: horizontal bands + inline boxes ──────────────────
   Used by the content-expansion programme. Two shapes only, so the whole
   site keeps one visual grammar:
   .sm-imgband  — full-column horizontal image, 21:9-ish, optional caption
   .sm-imgbox   — compact right-floated image card on wide screens          */

.sm-imgband {
	margin: var(--sm-space-8, 2.5rem) 0;
	border-radius: var(--sm-radius-lg, 20px);
	overflow: hidden;
	border: 1px solid var(--sm-border, #E4E6EB);
	background: var(--sm-lightgrey, #F4F5F7);
}
.sm-imgband img {
	display: block;
	width: 100%;
	height: clamp(220px, 32vw, 380px);
	object-fit: cover;
}
.sm-imgband figcaption {
	padding: 0.7rem 1.1rem;
	font-size: 0.8125rem;
	color: var(--sm-muted, #6B6B6B);
	border-top: 1px solid var(--sm-border, #E4E6EB);
	background: var(--sm-white, #fff);
}

.sm-imgbox {
	margin: 0 0 var(--sm-space-5, 1.5rem);
	border-radius: var(--sm-radius-md, 12px);
	overflow: hidden;
	border: 1px solid var(--sm-border, #E4E6EB);
	background: var(--sm-white, #fff);
}
.sm-imgbox img { display: block; width: 100%; height: 200px; object-fit: cover; }
.sm-imgbox figcaption { padding: 0.6rem 0.9rem; font-size: 0.78rem; color: var(--sm-muted, #6B6B6B); }
@media (min-width: 900px) {
	.sm-imgbox { float: right; width: 320px; margin: 0.3rem 0 1.2rem 1.6rem; }
}

/* ── Photo credit ─────────────────────────────────────────────────────────
   Destination photographs come from Wikimedia Commons under CC BY / CC BY-SA,
   which oblige us to name the author and the licence. The credit sits inside
   the caption, set quietly so it reads as a footnote rather than as copy. */
.sm-imgband figcaption .sm-credit,
.sm-imgbox figcaption .sm-credit {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	line-height: 1.4;
	opacity: .7;
}
.sm-imgband figcaption .sm-credit a,
.sm-imgbox figcaption .sm-credit a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.sm-imgband figcaption .sm-credit a:hover,
.sm-imgbox figcaption .sm-credit a:hover { opacity: 1; }