/*
 * "Guide" blog post template (template-guide.php, includes/guide.php). Scoped to .vb-guide.
 * Editorial: one reading column of Lexend, headings in Instrument Serif, photos a little wider than the
 * text (portrait ones beside it). Site-kit tokens (--vb-color-*) and the self-hosted
 * fonts from fonts.css.
 */
.vb-guide {
	--g-col: 700px;
	--g-wide: 860px;
	--g-lead: 1100px;
	--g-pad: 20px;
	--g-ink: var(--vb-color-primary, #231F20);
	--g-red: var(--vb-color-accent, #EF4343);
	--g-mono: var(--vb-font-mono, "Courier Prime", monospace);
	--g-muted: rgba(35, 31, 32, .72);
	--g-rule: rgba(35, 31, 32, .15);
	display: block;
	padding: clamp(40px, 6vw, 80px) 0 0;
	color: var(--g-ink);
	font-family: "Lexend", sans-serif;
	font-size: 18px;
	line-height: 1.7;
}
.vb-guide p { margin: 0 0 1.1em; font-size: inherit; line-height: inherit; color: inherit; text-wrap: pretty; }
.vb-guide a { color: var(--g-red); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.vb-guide a:hover,
.vb-guide a:focus-visible { color: var(--g-ink); }

/* ---------- Title, standfirst, lead photo ---------- */
.vb-guide__header { max-width: 900px; margin: 0 auto; padding: 0 var(--g-pad); text-align: center; }
.vb-guide .vb-guide__kicker {
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--g-red);
}
.vb-guide .vb-guide__title {
	max-width: 15em;
	margin: 0 auto;
	font-family: "Instrument Serif", serif;
	font-weight: 400;
	font-size: clamp(42px, 5.6vw, 76px);
	line-height: 1.02;
	text-transform: none;
	color: var(--g-ink);
	text-wrap: balance;
}
.vb-guide .vb-guide__dek { max-width: 34em; margin: 22px auto 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--g-muted); }

/* ---------- Photos ---------- */
.vb-guide .vb-guide__photo { margin: 32px 0 36px; }
.vb-guide .vb-guide__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--vb-color-cream, #F4F2EB); }
.vb-guide .vb-guide__photo--portrait img { aspect-ratio: 4 / 5; }
.vb-guide .vb-guide__credit { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--g-muted); }
.vb-guide .vb-guide__photo--lead { max-width: var(--g-lead); margin: clamp(32px, 4vw, 56px) auto clamp(40px, 5vw, 64px); padding: 0 var(--g-pad); }

/* ---------- Reading column ---------- */
.vb-guide__body { max-width: calc(var(--g-col) + 2 * var(--g-pad)); margin: 0 auto; padding: 0 var(--g-pad); }
.vb-guide .vb-guide__intro > p:first-child { font-size: 21px; line-height: 1.6; }

/* ---------- Sections ---------- */
.vb-guide__section { margin-top: clamp(64px, 8vw, 96px); scroll-margin-top: 170px; } /* clears the fixed header (--vb-header-height is only set on the header itself) */
.vb-guide .vb-guide__h2 {
	margin: 0 0 14px;
	font-family: "Instrument Serif", serif;
	font-weight: 400;
	font-size: clamp(36px, 4vw, 52px);
	line-height: 1.05;
	text-transform: none;
	color: var(--g-ink);
	text-wrap: balance;
}
.vb-guide .vb-guide__lede { font-size: 20px; line-height: 1.55; color: var(--g-muted); }

.vb-guide__entry { margin-top: 30px; }
.vb-guide .vb-guide__name {
	margin: 0 0 6px;
	font-family: "Instrument Serif", serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 1.15;
	text-transform: none;
	color: var(--g-ink);
}
.vb-guide .vb-guide__name a { color: inherit; text-decoration: none; }
.vb-guide .vb-guide__name a:hover,
.vb-guide .vb-guide__name a:focus-visible { color: var(--g-red); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* The SVG's viewBox is cropped to the stroke, so vertical-align: baseline puts the arrow's foot on the text's baseline. */
.vb-guide .vb-guide__ext { display: inline-block; width: .36em; height: .36em; margin-left: .22em; vertical-align: baseline; overflow: visible; fill: none; stroke: var(--g-red); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vb-guide__entry p { margin: 0; }
.vb-guide__note { margin-top: 30px; }

/* ---------- Portrait photo beside the text ----------
   Desktop: the photo on the left, the heading, intro and places on the right, in a band a little wider
   than the reading column. Narrower screens: the same order as the other sections (heading, intro,
   photo, places); the copy wrapper steps aside (display: contents) so the photo can slot in. */
@media (min-width: 1040px) {
	.vb-guide__section--side {
		--g-side: 960px;
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		column-gap: 48px;
		margin-left: calc((var(--g-col) - var(--g-side)) / 2);
		margin-right: calc((var(--g-col) - var(--g-side)) / 2);
	}
	/* The photo runs the full height of the text. The frame takes the photo's own shape (--g-ar, set by
	   vb_guide_photo()) as its minimum, so a tall photo isn't cropped top and bottom, and stretches when
	   the text is longer; the photo then fills it, cropped at the sides. */
	.vb-guide .vb-guide__section--side > .vb-guide__photo { position: relative; width: 100%; align-self: stretch; aspect-ratio: var(--g-ar, 4 / 5); margin: 6px 0 0; }
	.vb-guide .vb-guide__section--side > .vb-guide__photo img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
	.vb-guide .vb-guide__section--side > .vb-guide__photo .vb-guide__credit { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 24px 12px 8px; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); }
	.vb-guide .vb-guide__section--side .vb-guide__entry:first-of-type { margin-top: 24px; }
}
@media (max-width: 1039px) {
	.vb-guide__section--side { display: flex; flex-direction: column; }
	.vb-guide__section--side .vb-guide__copy { display: contents; }
	.vb-guide__section--side .vb-guide__copy > * { order: 2; }
	.vb-guide__section--side .vb-guide__copy > .vb-guide__h2,
	.vb-guide__section--side .vb-guide__copy > .vb-guide__lede { order: 0; }
	.vb-guide__section--side > .vb-guide__photo { order: 1; }
	.vb-guide .vb-guide__section--side .vb-guide__lede { margin-bottom: 0; }
	.vb-guide .vb-guide__section--side .vb-guide__photo { margin-bottom: 6px; }
}

/* ---------- Closing ---------- */
.vb-guide__close { padding-top: clamp(40px, 5vw, 56px); border-top: 2px solid var(--g-ink); }
.vb-guide .vb-guide__cta { margin: 28px 0 0; }
.vb-guide a.vb-guide__btn {
	display: inline-block;
	padding: 14px 24px;
	background: var(--g-red);
	color: var(--vb-color-cream, #F4F2EB);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .15s;
}
.vb-guide a.vb-guide__btn:hover,
.vb-guide a.vb-guide__btn:focus-visible { background: var(--g-ink); color: #fff; }

/* "Similar articles" under the guide. */
.vb-guide-more { padding-top: clamp(56px, 8vw, 96px); }

/* Photos in the column are a little wider than the text on desktop. */
@media (min-width: 960px) {
	.vb-guide__body .vb-guide__photo { margin-left: calc((var(--g-col) - var(--g-wide)) / 2); margin-right: calc((var(--g-col) - var(--g-wide)) / 2); }
}
@media (max-width: 767px) {
	.vb-guide { font-size: 17px; }
	.vb-guide .vb-guide__intro > p:first-child { font-size: 19px; }
	.vb-guide .vb-guide__lede { font-size: 18px; }
	.vb-guide .vb-guide__name { font-size: 27px; }
	.vb-guide .vb-guide__photo--lead { padding: 0; }
}