/*
 * Single post header, rebuilt 2026-09-10.
 * Text left, image right, image never cropped.
 *
 * THE ONE NUMBER THAT CONTROLS THE SPLIT is --gt-posthead-split below.
 * If you change it, change GT_PH_MEDIA_PX in inc/gt-post-header.php to the
 * new rendered width in pixels, or the browser will fetch the wrong file.
 */

.gt-posthead{
	--gt-posthead-split: 58%;   /* left text column */
	--gt-posthead-gap: 40px;    /* across, side by side */
	--gt-posthead-gap-stacked: 28px;

	/* Match the article body column so the h1 and the first paragraph share a
	 * left edge. Every ancestor here is full width, so the header has to set
	 * its own measure. */
	width: min(1216px, 100% - 64px);
	margin: 0 auto 2.25rem;
	padding: 0;
	background: none;
	color: inherit;
}

/* Breadcrumbs, full width above everything.
 *
 * Rank Math wraps the trail in <nav><p>, and the theme styles p at 16px with a
 * 24px bottom margin. Setting font-size on the wrapper alone did nothing: the
 * p won, so the trail rendered at 16px in bright link blue and competed with
 * the h1 instead of receding below it. Everything here targets the p and the
 * anchors directly.
 */
/*
 * Sits BELOW the header now, as its own block between the title group and the
 * content. It therefore has to set its own measure, exactly as .gt-posthead
 * does, because every ancestor is full width. Same 1216px so the trail lines
 * up with the h1 above it and the contents rail below it.
 *
 * Spacing is deliberately asymmetric: a wide gap above separates it from the
 * header, a tight gap below attaches it to the content it describes.
 */
.gt-posthead__crumbs{
	line-height: 1.5;
}
.gt-crumbs--below{
	width: min(1216px, 100% - 64px);
	margin: -.35rem auto .7rem;
}
@media (max-width: 1024px){
	.gt-crumbs--below{ margin: -.2rem auto .65rem; }
}
.gt-posthead__crumbs p,
.gt-posthead__crumbs nav{
	margin: 0;
	font-size: .8rem;
	line-height: 1.5;
	color: inherit;
	opacity: .78;
}

/*
 * Muting the whole trail made the links indistinguishable from the current
 * page, so nothing looked clickable. A faint underline is the conventional
 * breadcrumb affordance and keeps the trail quiet, and the current page stays
 * plain and a shade lighter so the two read differently.
 */
.gt-posthead__crumbs a{
	font-size: inherit;
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(120,130,150,.45);
	text-underline-offset: 2px;
}
.gt-posthead__crumbs a:hover{
	color: inherit;
	text-decoration-color: currentColor;
}
.gt-posthead__crumbs .last{ opacity: .72; }
.gt-posthead__crumbs .separator{ opacity: .55; padding: 0 .15em; }

/*
 * The last crumb is the post title, character for character identical to the
 * h1 directly beneath it. Repeating 66 characters above a 39px heading is the
 * thing that made this look wrong.
 *
 * Truncated in CSS rather than in PHP on purpose: the full string stays in the
 * DOM for the BreadcrumbList schema and for screen readers, and only the
 * visible line is shortened.
 */
.gt-posthead__crumbs .last{
	display: inline-block;
	max-width: 34ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

@media (max-width: 600px){
	.gt-posthead__crumbs .last{ max-width: 18ch; }
}

/* The two columns. */
.gt-posthead__cover{
	display: grid;
	grid-template-columns: var(--gt-posthead-split) 1fr;
	column-gap: var(--gt-posthead-gap);
	row-gap: 0;
	align-items: center;   /* image vertically centred against the text */
}

.gt-posthead__text{ grid-column: 1; grid-row: 1; min-width: 0; }
.gt-posthead__media{ grid-column: 2; grid-row: 1; min-width: 0; }

/* Meta row. */
.gt-posthead__meta{
	margin: 0 0 .7rem;
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .7;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
}
.gt-posthead__cat{ text-decoration: none; font-weight: 600; }
.gt-posthead__cat:hover{ text-decoration: underline; }

/*
 * Title. The stock hero set 68px/68px in pale blue on a dark image. In a 58%
 * column on white both are wrong, so size and colour are reset here.
 */
.gt-posthead__title{
	margin: 0 0 .75rem;
	font-size: clamp(1.85rem, 2.6vw, 2.65rem);
	line-height: 1.14;
	color: inherit;
	text-wrap: balance;
}

/*
 * Standfirst. No max-width here on purpose: the 58% column sets the measure,
 * and a ch cap would fight it.
 */
.gt-posthead__standfirst{
	margin: 0 0 1rem;
	font-size: 1.02rem;
	line-height: 1.55;
	opacity: .82;
	max-width: none;
}

.gt-posthead__byline{
	display: flex;
	align-items: center;
	gap: .55rem;
	font-size: .86rem;
	opacity: .75;
}
.gt-posthead__byline img{
	width: 32px; height: 32px;
	border-radius: 50%;
	display: block;
}

/*
 * The frame. Constrained, never cropped: the image keeps its own ratio and
 * the column width sets the size. Softer than the full-bleed hero it
 * replaces, because a shadow tuned for a 1215px hero looks clumsy at 500px.
 */
.gt-posthead__frame{
	margin: 0;
	border-radius: 8px;
	overflow: hidden;
	line-height: 0;
	box-shadow: 0 2px 10px rgba(0,0,0,.09);
}
.gt-posthead__img{
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	max-width: 100%;
}

/* No featured image: collapse the media column, text runs full width. */
.gt-posthead--nomedia .gt-posthead__cover,
body.gt-posthead-nomedia .gt-posthead__cover{
	grid-template-columns: 1fr;
	column-gap: 0;
}
.gt-posthead--nomedia .gt-posthead__media,
body.gt-posthead-nomedia .gt-posthead__media{ display: none; }

/* Stack at 1024 and below, text first then image. */
@media (max-width: 1024px){
	.gt-posthead__cover{
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: var(--gt-posthead-gap-stacked);
	}
	.gt-posthead__text{ grid-column: 1; grid-row: 1; }
	.gt-posthead__media{ grid-column: 1; grid-row: 2; }
}

/* Nothing may push the page sideways at any width. */
.gt-posthead, .gt-posthead *{ max-width: 100%; box-sizing: border-box; }