/*
 * GTC story template (Standard and Feature).
 * Every rule starts at .gtc-story plus a class, so Elementor kit styles
 * (.elementor-kit-N h2, a) don't override it. Colors match the homepage.
 */

/* ---------- Base ---------- */
.gtc-story {
	--gtc-ink: #101828;
	--gtc-text: #1D2939;
	--gtc-ink-2: #344054;
	--gtc-mute: #475467;
	--gtc-line: #E4E7EC;
	--gtc-line-2: #D0D5DD;
	--gtc-tint: #F4F7FB;
	--gtc-blue: #166DFC;
	--gtc-blue-dark: #0F57D1;
	--col: 680px;
	--wide: 1064px;
	--gut: 24px;
	--side: calc((var(--wide) - var(--col)) / 2);
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	background: #FFFFFF;
	color: var(--gtc-ink);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
	padding: 48px 0 72px;
	overflow-x: clip; /* clip, not hidden, so the rail can stick */
}
.gtc-story *,
.gtc-story *::before,
.gtc-story *::after { box-sizing: border-box; }
.gtc-story a { color: var(--gtc-blue); }
.gtc-story a:focus-visible,
.gtc-story button:focus-visible { outline: 3px solid var(--gtc-blue); outline-offset: 2px; }
.gtc-story img { max-width: 100%; height: auto; }
.gtc-story .gtc-story__article { position: relative; }

/* ---------- The layout grid ----------
 * Every block sits in the 680px column. Wide spans 1,064px on the same
 * center line; Full spans the screen. */
.gtc-story .gtc-story__grid {
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--gut), 1fr)
		[wide-start] minmax(0, var(--side))
		[col-start] min(var(--col), 100% - 2 * var(--gut))
		[col-end] minmax(0, var(--side))
		[wide-end] minmax(var(--gut), 1fr)
		[full-end];
}
.gtc-story .gtc-story__grid > * { grid-column: col; min-width: 0; }
.gtc-story .gtc-story__grid > .alignwide { grid-column: wide; }
.gtc-story .gtc-story__grid > .alignfull { grid-column: full; }

/* ---------- Header ---------- */
.gtc-story .gtc-story__topic {
	justify-self: start;
	margin: 0 0 14px;
	font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--gtc-blue); text-decoration: none;
}
.gtc-story .gtc-story__topic:hover { color: var(--gtc-blue-dark); }
.gtc-story .gtc-story__title {
	margin: 0 0 18px;
	font-family: "Source Serif Pro", "Source Serif 4", Georgia, serif;
	font-weight: 700;
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.12;
	letter-spacing: -.01em;
	text-transform: none;
	text-wrap: balance;
	color: var(--gtc-ink);
}
.gtc-story .gtc-story__dek {
	margin: 0 0 24px;
	font-size: 20px; line-height: 1.5;
	color: var(--gtc-mute);
}

.gtc-story .gtc-story__byline {
	display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
	padding-bottom: 20px;
}
.gtc-story .gtc-story__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gtc-story .gtc-story__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 44px; background: var(--gtc-tint); }
.gtc-story .gtc-story__author { display: inline-block; font-size: 15px; font-weight: 700; color: var(--gtc-ink); text-decoration: none; }
.gtc-story .gtc-story__author:hover { color: var(--gtc-blue); }
.gtc-story .gtc-story__when { font-size: 14px; color: var(--gtc-mute); }
.gtc-story .gtc-story__tools { display: flex; align-items: center; gap: 8px; }

.gtc-story .gtc-story__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 14px;
	border: 1px solid var(--gtc-line-2); border-radius: 10px;
	background: #FFFFFF; color: var(--gtc-ink);
	font: 600 14px/1 Inter, system-ui, sans-serif;
	text-decoration: none; text-transform: none; letter-spacing: 0;
	cursor: pointer;
}
.gtc-story .gtc-story__btn:hover { border-color: var(--gtc-ink); color: var(--gtc-ink); background: #FFFFFF; }
.gtc-story .gtc-story__btn.is-done { border-color: #12B76A; }
.gtc-story .gtc-story__btn--lg { min-height: 48px; padding: 0 18px; font-size: 15px; }

.gtc-story .gtc-story__update { margin: 0 0 20px; }
.gtc-story .gtc-story__updated { margin: 0; font-size: 14px; font-weight: 600; color: var(--gtc-ink-2); }
.gtc-story .gtc-story__note {
	margin: 10px 0 0; padding: 12px 14px;
	border-radius: 10px; background: var(--gtc-tint);
	font-size: 15px; line-height: 1.5; color: var(--gtc-ink-2);
}

/* ---------- Lead ---------- */
.gtc-story .gtc-story__lead { margin: 0 0 20px; }
.gtc-story .gtc-story__lead-img { display: block; width: 100%; height: auto; max-height: none !important; border-radius: 4px; } /* Hello caps .post .wp-post-image at 500/400/300px */
.gtc-story .gtc-story__lead figcaption,
.gtc-story .gtc-story__hero-caption {
	margin: 8px 0 0;
	font-size: 12px; line-height: 1.5; font-style: normal; color: var(--gtc-mute);
}
.gtc-story .gtc-story__lead--video > * { margin: 0; }
.gtc-story .gtc-story__lead--video iframe { width: 100%; }

/* ---------- Ads ---------- */
/* Every slot is empty (no height) until AdButler prints something. */
.gtc-story .gtc-story__ad:not(:has(.gtc-story__ad-slot :is(a, img, iframe))) .gtc-story__ad-slot { min-height: 0; }
.gtc-story .gtc-story__ad-slot > div { max-width: 100%; }

/* Article sponsor line: compact. Written for the native card template
 * (.gtc-card); the generic rules cover a plain image + text ad. */
.gtc-story .gtc-story__ad--sponsor { margin: 0 0 28px; }
.gtc-story .gtc-story__ad--sponsor .gtc-story__ad-slot:has(:is(a, img, iframe)) {
	padding: 12px 16px 12px 12px;
	border: 1px solid var(--gtc-line); border-radius: 12px;
	background: var(--gtc-tint);
}
.gtc-story .gtc-story__ad--sponsor img { max-width: 64px; max-height: 64px; width: auto; object-fit: contain; border-radius: 8px; }
.gtc-story .gtc-story__ad--sponsor .gtc-card-wrap,
.gtc-story .gtc-story__ad--sponsor .gtc-card { margin: 0 !important; }
.gtc-story .gtc-story__ad--sponsor .gtc-card-label { display: none; }
.gtc-story .gtc-story__ad--sponsor .gtc-card {
	display: grid !important;
	grid-template-columns: 64px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.gtc-story .gtc-story__ad--sponsor .gtc-card__media { width: 64px; height: 64px; aspect-ratio: auto; border-radius: 8px; overflow: hidden; }
.gtc-story .gtc-story__ad--sponsor .gtc-card__media img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.gtc-story .gtc-story__ad--sponsor .gtc-card__body { padding: 0; }
.gtc-story .gtc-story__ad--sponsor .gtc-card__title { font-size: 16px; line-height: 1.3; }
.gtc-story .gtc-story__ad--sponsor .gtc-card__dek { display: none; }

/* Current AdButler "Article Sponsor" template (.article-sponsor, old Genesis
 * column classes). One box only: the wrapper drops its tint and the old
 * markup becomes a compact logo + line row. Remove once the compact
 * template replaces it. */
.gtc-story .gtc-story__ad--sponsor .gtc-story__ad-slot:has(.article-sponsor) {
	padding: 0; border: 0; background: none;
}
.gtc-story .gtc-story__ad--sponsor .article-sponsor {
	display: grid !important;
	grid-template-columns: 64px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	margin: 0 !important;
	padding: 12px 16px 12px 12px !important;
	border: 1px solid var(--gtc-line) !important;
	border-radius: 12px;
	background: var(--gtc-tint) !important;
	box-shadow: none !important;
	font-family: Inter, system-ui, sans-serif;
}
.gtc-story .gtc-story__ad--sponsor .article-sponsor::before,
.gtc-story .gtc-story__ad--sponsor .article-sponsor::after { content: none !important; display: none !important; }
.gtc-story .gtc-story__ad--sponsor .article-sponsor > div {
	float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important;
}
.gtc-story .gtc-story__ad--sponsor .article-sponsor .sponsor-logo a { display: block; line-height: 0; }
.gtc-story .gtc-story__ad--sponsor .article-sponsor .sponsor-logo img {
	width: 64px; height: 64px; max-width: 64px; max-height: 64px;
	object-fit: contain; border-radius: 8px; background: #fff; margin: 0 !important;
}
.gtc-story .gtc-story__ad--sponsor .article-sponsor .sponsor-description span {
	display: block; margin: 0 0 2px;
	font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--gtc-muted, #6b6b6b);
}
.gtc-story .gtc-story__ad--sponsor .article-sponsor .sponsor-description p {
	margin: 0 !important; font-size: 14px !important; line-height: 1.4 !important;
}
.gtc-story .gtc-story__ad--sponsor .article-sponsor .sponsor-description a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Phone/tablet stand-in for the rail: only under 1,024px. A hidden slot is
 * never requested. */
.gtc-story .gtc-story__ad--inline-rail { display: none; }

/* ---------- Story body ---------- */
/* Text rules reach only the story's own blocks (direct children and what's
 * inside them). Ads, story cards and other embeds keep their own styles. */
.gtc-story .gtc-story__content {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 18px; line-height: 1.5;
	color: var(--gtc-text);
}
.gtc-story .gtc-story__content > * { margin-top: 0; margin-bottom: 22px; }
.gtc-story .gtc-story__content > p,
.gtc-story .gtc-story__content > ul,
.gtc-story .gtc-story__content > ol,
.gtc-story .gtc-story__content > blockquote p { font-size: inherit; line-height: inherit; color: inherit; }
.gtc-story .gtc-story__content > :is(p, ul, ol, blockquote, h2, h3, h4) :is(strong, b) { font-weight: 700; color: var(--gtc-ink); }
.gtc-story .gtc-story__content > :is(p, ul, ol, blockquote, h2, h3, h4, table, .wp-block-table) a,
.gtc-story .gtc-story__content figcaption a { color: var(--gtc-blue); text-decoration: underline; text-underline-offset: 2px; }
.gtc-story .gtc-story__content > :is(p, ul, ol, blockquote, h2, h3, h4) a:hover { color: var(--gtc-blue-dark); }
.gtc-story .gtc-story__content > h2,
.gtc-story .gtc-story__content > h3,
.gtc-story .gtc-story__content > h4 {
	font-family: "Source Serif Pro", "Source Serif 4", Georgia, serif;
	font-weight: 700; color: var(--gtc-ink);
	text-transform: none; letter-spacing: -.005em;
}
.gtc-story .gtc-story__content > h2 { margin: 36px 0 12px; font-size: 27px; line-height: 1.25; }
.gtc-story .gtc-story__content > h3 { margin: 30px 0 10px; font-size: 22px; line-height: 1.3; }
.gtc-story .gtc-story__content > h4 { margin: 26px 0 10px; font-size: 19px; line-height: 1.35; }
.gtc-story .gtc-story__content > ul,
.gtc-story .gtc-story__content > ol { padding-left: 1.3em; }
.gtc-story .gtc-story__content > :is(ul, ol) li { margin: 0 0 10px; }
.gtc-story .gtc-story__content > :is(ul, ol) li::marker { color: var(--gtc-mute); }
.gtc-story .gtc-story__content blockquote {
	margin-left: 0; margin-right: 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--gtc-ink);
	font-size: 20px; line-height: 1.55; color: var(--gtc-ink);
}
.gtc-story .gtc-story__content blockquote p:last-child { margin-bottom: 0; }
.gtc-story .gtc-story__content blockquote cite { display: block; margin-top: 8px; font-size: 15px; font-style: normal; color: var(--gtc-mute); }
.gtc-story .gtc-story__content hr { border: 0; border-top: 1px solid var(--gtc-line); margin: 36px 0; }
.gtc-story .gtc-story__content table { width: 100%; border-collapse: collapse; font-size: 16px; }
.gtc-story .gtc-story__content th,
.gtc-story .gtc-story__content td { padding: 8px 10px; border-bottom: 1px solid var(--gtc-line); text-align: left; }
.gtc-story .gtc-story__content .wp-block-table { overflow-x: auto; }

/* Images and media */
.gtc-story .gtc-story__content figure { margin-left: 0; margin-right: 0; }
.gtc-story .gtc-story__content > figure,
.gtc-story .gtc-story__content > .wp-block-image,
.gtc-story .gtc-story__content > .wp-block-gallery,
.gtc-story .gtc-story__content > .wp-block-embed,
.gtc-story .gtc-story__content > .wp-block-video { margin-top: 8px; margin-bottom: 32px; }
.gtc-story .gtc-story__content .wp-block-image img { display: block; width: 100%; height: auto; border-radius: 4px; }
.gtc-story .gtc-story__content .alignfull img,
.gtc-story .gtc-story__content .alignfull.wp-block-image img { border-radius: 0; }
.gtc-story .gtc-story__content figcaption,
.gtc-story .gtc-story__content .wp-element-caption {
	margin: 8px 0 0;
	font-size: 12px; line-height: 1.5; font-style: normal; color: var(--gtc-mute); text-align: left;
}
/* Captions of wide and full images stay at column width. */
.gtc-story .gtc-story__content .alignwide > figcaption,
.gtc-story .gtc-story__content .alignfull > figcaption {
	max-width: var(--col);
	margin-left: auto; margin-right: auto;
}
.gtc-story .gtc-story__content .alignfull > figcaption { padding: 0 var(--gut); max-width: calc(var(--col) + 2 * var(--gut)); }
/* Small aligned images: no wrapping in the grid; they sit at half width. */
.gtc-story .gtc-story__content > .alignleft { justify-self: start; max-width: 50%; float: none; }
.gtc-story .gtc-story__content > .alignright { justify-self: end; max-width: 50%; float: none; }
.gtc-story .gtc-story__content > .aligncenter,
.gtc-story .gtc-story__content > .wp-block-image > .aligncenter { margin-left: auto; margin-right: auto; }
.gtc-story .gtc-story__content > .wp-block-image.is-style-inset img { border: 1px solid var(--gtc-line); }
.gtc-story .gtc-story__content iframe,
.gtc-story .gtc-story__content video { max-width: 100%; }
.gtc-story .gtc-story__content .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper { position: relative; }
.gtc-story .gtc-story__content .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* In-article Ad blocks keep their own styles (gtc-ads.css). */
.gtc-story .gtc-story__content > .gtc-ad,
.gtc-story .gtc-story__content > .in-article-ads { margin-top: 8px; margin-bottom: 32px; }

/* Story cards and other embeds sit in the column. */
.gtc-story .gtc-story__content .gtc-card-wrap { max-width: 100%; }

/* ---------- End of story ---------- */
.gtc-story .gtc-story__endbar {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	padding: 20px 0; margin-top: 8px;
	border-top: 1px solid var(--gtc-line);
}
.gtc-story .gtc-story__comments { margin-top: 24px; font-size: 16px; color: var(--gtc-ink-2); }
.gtc-story .gtc-story__comments h2,
.gtc-story .gtc-story__comments h3,
.gtc-story .gtc-story__comments .comments-title,
.gtc-story .gtc-story__comments .comment-reply-title {
	margin: 0 0 16px;
	font: 800 22px/1.25 Inter, system-ui, sans-serif;
	color: var(--gtc-ink); text-transform: none; letter-spacing: 0;
}
.gtc-story .gtc-story__comments ol,
.gtc-story .gtc-story__comments ul { list-style: none; margin: 0; padding: 0; }
.gtc-story .gtc-story__comments .comment-body,
.gtc-story .gtc-story__comments article.comment { padding: 16px 0; border-top: 1px solid var(--gtc-line); }
.gtc-story .gtc-story__comments .children { margin-left: 24px; }
.gtc-story .gtc-story__comments .avatar { border-radius: 50%; }
.gtc-story .gtc-story__comments .comment-author { font-weight: 700; color: var(--gtc-ink); }
.gtc-story .gtc-story__comments .comment-metadata,
.gtc-story .gtc-story__comments .comment-meta { font-size: 13px; color: var(--gtc-mute); }
.gtc-story .gtc-story__comments .comment-metadata a { color: inherit; text-decoration: none; }
.gtc-story .gtc-story__comments iframe { width: 100%; }

/* ---------- More stories ---------- */
.gtc-story .gtc-story__more {
	width: min(var(--wide), 100% - 2 * var(--gut));
	margin: 56px auto 0;
	padding-top: 24px;
	border-top: 2px solid var(--gtc-ink);
}
.gtc-story .gtc-story__more-title {
	margin: 0 0 20px;
	font: 800 22px/1.2 Inter, system-ui, sans-serif;
	color: var(--gtc-ink); text-transform: none; letter-spacing: 0;
}
.gtc-story .gtc-story__more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.gtc-story .gtc-story__card { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gtc-story .gtc-story__card-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--gtc-tint); }
.gtc-story .gtc-story__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gtc-story .gtc-story__card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gtc-story .gtc-story__kicker { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gtc-blue); }
/* Cards use the homepage's card type (Inter 800); serif is for the story itself. */
.gtc-story .gtc-story__card-title {
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: 18px; line-height: 1.3; font-weight: 800;
	text-transform: none; letter-spacing: -.005em;
}
.gtc-story .gtc-story__card-link { color: var(--gtc-ink); text-decoration: none; }
.gtc-story .gtc-story__card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.gtc-story .gtc-story__card-link:hover { color: var(--gtc-blue); }
.gtc-story .gtc-story__card-date { margin: 0; font-size: 13px; color: var(--gtc-mute); }

/* Fourth spot: native ad when one serves, else the stand-in story. */
.gtc-story .gtc-story__more-spot { min-width: 0; }
.gtc-story .gtc-story__more-spot:has(.gtc-story__ad-slot :is(a, img, iframe)) .gtc-story__card--alt { display: none; }
.gtc-story .gtc-story__ad--more .gtc-card-wrap,
.gtc-story .gtc-story__ad--more .gtc-card { margin: 0 !important; }
/* Shaped like the story cards beside it: image on top (lined up with theirs),
 * Sponsored tag, headline, "Presented by". The Advertisement heading,
 * description and call to action are hidden; the Sponsored tag carries the
 * disclosure, as in the events list. */
.gtc-story .gtc-story__ad--more .gtc-card-label,
.gtc-story .gtc-story__ad--more .gtc-card__dek,
.gtc-story .gtc-story__ad--more .gtc-card__desc,
.gtc-story .gtc-story__ad--more .gtc-card__cta { display: none !important; }
.gtc-story .gtc-story__ad--more .gtc-card { display: flex !important; flex-direction: column; gap: 10px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.gtc-story .gtc-story__ad--more .gtc-card__media { width: 100% !important; aspect-ratio: 4 / 3 !important; height: auto !important; border-radius: 8px; overflow: hidden; }
.gtc-story .gtc-story__ad--more .gtc-card__media img { width: 100%; height: 100%; object-fit: cover; }
.gtc-story .gtc-story__ad--more .gtc-card__body { display: flex; flex-direction: column; gap: 6px; padding: 0 !important; }
.gtc-story .gtc-story__ad--more .gtc-card__title { margin: 0; font: 800 18px/1.3 Inter, system-ui, sans-serif !important; letter-spacing: -.005em; }
.gtc-story .gtc-story__ad--more .gtc-card__meta { margin: 0; font-size: 13px; color: var(--gtc-mute); }
.gtc-story .gtc-story__ad--more .gtc-story__ad-slot,
.gtc-story .gtc-story__ad--more .gtc-story__ad-slot > div { height: auto !important; min-height: 0 !important; }

/* ---------- Rail (Standard, 1,024px and wider) ---------- */
.gtc-story .gtc-story__rail { display: none; }
.gtc-story .gtc-story__rail-seg { position: absolute; width: 300px; left: var(--rail-left); }
.gtc-story .gtc-story__rail-seg[hidden] { display: none; }
.gtc-story .gtc-story__rail-stick { position: sticky; top: var(--gtc-sticky-top, 24px); }
.gtc-story .gtc-story__rail .gtc-card-wrap,
.gtc-story .gtc-story__rail .gtc-card { margin-top: 0 !important; margin-bottom: 0 !important; }
.gtc-story .gtc-story__rail .gtc-story__ad-slot,
.gtc-story .gtc-story__rail .gtc-story__ad-slot > div { height: auto !important; min-height: 0 !important; }

/* Centered column, rail in the right margin (needs ~1,400px). */
@media (min-width: 1400px) {
	.gtc-story--standard .gtc-story__rail { display: block; position: absolute; inset: 0; pointer-events: none; }
	.gtc-story--standard .gtc-story__rail-seg { pointer-events: auto; }
	.gtc-story--standard { --rail-left: calc(50% + var(--col) / 2 + 48px); }
}

/* 1,024–1,399px: the column slides left so the rail fits beside it.
 * Wide images span the column and the rail. */
@media (min-width: 1024px) and (max-width: 1399px) {
	.gtc-story--standard .gtc-story__grid {
		grid-template-columns:
			[full-start] minmax(var(--gut), 1fr)
			[wide-start col-start] var(--col)
			[col-end] 348px
			[wide-end] minmax(var(--gut), 1fr)
			[full-end];
	}
	.gtc-story--standard .gtc-story__content .alignwide > figcaption { margin-left: 0; }
	.gtc-story--standard .gtc-story__rail { display: block; position: absolute; inset: 0; pointer-events: none; }
	.gtc-story--standard .gtc-story__rail-seg { pointer-events: auto; }
	.gtc-story--standard { --rail-left: calc(50% - (var(--col) + 348px) / 2 + var(--col) + 48px); }
}

@media (max-width: 1023px) {
	.gtc-story--standard .gtc-story__ad--inline-rail { display: block; margin-top: 8px; margin-bottom: 32px; }
	.gtc-story .gtc-story__more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Feature hero ---------- */
.gtc-story--feature { padding-top: 0; }
.gtc-story .gtc-story__hero {
	position: relative;
	height: min(78vh, 780px); min-height: 520px;
	margin: 0 0 16px;
	background: var(--gtc-ink);
	overflow: hidden;
}
.gtc-story .gtc-story__hero-media { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
/* Any image inside (lazy-load and image plugins can drop or wrap our class),
 * and !important on size because some set height: auto. */
.gtc-story .gtc-story__hero-media :is(img, picture, picture > img) {
	position: absolute !important; inset: 0 !important;
	display: block;
	width: 100% !important; height: 100% !important;
	max-width: none !important; max-height: none !important;
	margin: 0 !important;
	object-fit: cover; object-position: 50% 30%;
}
.gtc-story .gtc-story__hero::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
	background: linear-gradient(180deg, rgba(16, 24, 40, 0) 0%, rgba(16, 24, 40, .85) 75%);
}
.gtc-story .gtc-story__hero-text {
	position: absolute; left: 0; right: 0; bottom: 56px; z-index: 1;
	display: flex; flex-direction: column; align-items: center;
	padding: 0 max(var(--gut), calc(50% - 560px));
	text-align: center;
}
.gtc-story .gtc-story__hero-text .gtc-story__topic {
	justify-self: auto;
	color: #FFFFFF;
	border-bottom: 3px solid var(--gtc-blue); padding-bottom: 2px;
}
.gtc-story .gtc-story__hero-text .gtc-story__title { color: #FFFFFF; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.08; }
.gtc-story .gtc-story__hero-text .gtc-story__dek { max-width: 760px; margin-bottom: 0; color: #E4E7EC; }
.gtc-story .gtc-story__head--after-hero .gtc-story__hero-caption { margin: 0 0 20px; }
.gtc-story .gtc-story__hero-caption--phone { display: none; }
.gtc-story .gtc-story__head--after-hero .gtc-story__byline { padding-top: 18px; border-top: 1px solid var(--gtc-line); }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
	.gtc-story { --gut: 20px; padding-top: 24px; padding-bottom: 48px; }
	.gtc-story .gtc-story__title { font-size: 30px; line-height: 1.15; }
	.gtc-story .gtc-story__dek { font-size: 18px; }
	.gtc-story .gtc-story__share-text { display: none; }
	.gtc-story .gtc-story__head .gtc-story__share,
	.gtc-story .gtc-story__head .gtc-story__tools .gtc-story__btn { padding: 0 12px; }
	.gtc-story .gtc-story__endbar .gtc-story__share-text { display: inline; }
	.gtc-story .gtc-story__endbar .gtc-story__btn { flex: 1 1 0; }

	/* Lead and full-width photos edge to edge; captions padded. */
	.gtc-story .gtc-story__lead { grid-column: full; }
	.gtc-story .gtc-story__lead-img { border-radius: 0; }
	.gtc-story .gtc-story__lead figcaption { padding: 0 var(--gut); }
	.gtc-story .gtc-story__content { font-size: 17px; line-height: 1.5; }
	.gtc-story .gtc-story__content > .wp-block-image:not(.alignleft):not(.alignright):not(.is-style-inset),
	.gtc-story .gtc-story__content > .wp-block-gallery,
	.gtc-story .gtc-story__content > .wp-block-cover,
	.gtc-story .gtc-story__content > .alignwide { grid-column: full; }
	.gtc-story .gtc-story__content > .wp-block-image:not(.alignleft):not(.alignright):not(.is-style-inset) img,
	.gtc-story .gtc-story__content > .alignwide img { border-radius: 0; }
	.gtc-story .gtc-story__content > .wp-block-image:not(.alignleft):not(.alignright):not(.is-style-inset) figcaption,
	.gtc-story .gtc-story__content > .wp-block-gallery > figcaption,
	.gtc-story .gtc-story__content > .alignwide > figcaption { padding: 0 var(--gut); }
	.gtc-story .gtc-story__content > .wp-block-gallery { padding: 0; }
	.gtc-story .gtc-story__content h2 { font-size: 23px; margin-top: 32px; }

	/* More stories: list with small thumbnails. */
	.gtc-story .gtc-story__more { margin-top: 40px; }
	.gtc-story .gtc-story__more-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.gtc-story .gtc-story__card { flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--gtc-line); }
	.gtc-story .gtc-story__card-media { flex: 0 0 76px; width: 76px; height: 76px; aspect-ratio: auto; }
	.gtc-story .gtc-story__card-title { font-size: 16px; }
	.gtc-story .gtc-story__more-spot .gtc-story__ad--more { padding: 14px 0; border-bottom: 1px solid var(--gtc-line); }
	.gtc-story .gtc-story__more-spot .gtc-story__ad--more:not(:has(.gtc-story__ad-slot :is(a, img, iframe))) { padding: 0; border: 0; }
	.gtc-story .gtc-story__ad--more .gtc-card { display: grid !important; grid-template-columns: minmax(0, 1fr) 76px; }
	.gtc-story .gtc-story__ad--more .gtc-card__media { order: 2; width: 76px !important; height: 76px !important; aspect-ratio: auto !important; }
	.gtc-story .gtc-story__ad--more .gtc-card__body { order: 1; }
	.gtc-story .gtc-story__ad--more .gtc-card__title { font-size: 16px !important; }

	/* Feature: tall photo, headline below it in dark type. */
	.gtc-story .gtc-story__hero { height: auto; min-height: 0; margin: -24px 0 0; background: none; overflow: visible; }
	.gtc-story .gtc-story__hero::after { display: none; }
	.gtc-story .gtc-story__hero-media { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 5; }
	.gtc-story .gtc-story__hero-text { position: static; padding: 24px var(--gut) 8px; }
	.gtc-story .gtc-story__hero-text .gtc-story__topic { color: var(--gtc-ink); }
	.gtc-story .gtc-story__hero-text .gtc-story__title { color: var(--gtc-ink); font-size: 30px; line-height: 1.15; }
	.gtc-story .gtc-story__hero-text .gtc-story__dek { color: var(--gtc-mute); font-size: 17px; }
	/* Caption right under the photo, before the headline. */
	.gtc-story .gtc-story__hero-caption--phone { display: block; margin: 8px 0 0; padding: 0 var(--gut); }
	.gtc-story .gtc-story__head--after-hero .gtc-story__hero-caption { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.gtc-story * { scroll-behavior: auto; }
}

/* =====================================================================
 * Part 2: newsletter, support ask, Google card, phone bar.
 * Visibility comes from classes the <head> script puts on <html>:
 *   .gtc-reader-sub   recognized subscriber: no signup prompts, support ask
 *   .gtc-from-google  arrived from Google: Google card
 * ===================================================================== */

.gtc-story .gtc-nl,
.gtc-story .gtc-support {
	padding: 24px 24px 20px;
	border: 1px solid var(--gtc-line);
	border-radius: 14px;
	background: var(--gtc-tint);
	font-family: Inter, system-ui, sans-serif;
	color: var(--gtc-ink);
}
.gtc-story .gtc-story__content > .gtc-nl { margin: 12px 0 34px; }
.gtc-story .gtc-nl__kicker {
	margin: 0 0 6px;
	font: 800 12px/1.2 Inter, system-ui, sans-serif;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--gtc-blue);
}
.gtc-story .gtc-nl__title {
	margin: 0;
	font: 800 22px/1.2 Inter, system-ui, sans-serif;
	letter-spacing: -.01em; color: var(--gtc-ink); text-transform: none;
	text-wrap: balance;
}
.gtc-story .gtc-nl__dek { margin: 8px 0 0; font-size: 16px; line-height: 1.45; color: var(--gtc-mute); }
.gtc-story .gtc-nl__form { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.gtc-story .gtc-nl__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gtc-story .gtc-nl__input {
	flex: 1 1 240px; min-width: 0;
	height: 48px; margin: 0; padding: 0 14px;
	border: 1px solid var(--gtc-line-2); border-radius: 10px;
	background: #FFFFFF;
	font: 500 16px Inter, system-ui, sans-serif; /* 16px: no zoom on iPhone */
	color: var(--gtc-ink);
	box-shadow: none;
}
.gtc-story .gtc-nl__input:focus { border-color: var(--gtc-blue); outline: 3px solid rgba(22, 109, 252, .2); outline-offset: 0; }
.gtc-story .gtc-nl__btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 22px; margin: 0;
	border: 0; border-radius: 10px;
	background: var(--gtc-blue); color: #FFFFFF;
	font: 700 16px/1.2 Inter, system-ui, sans-serif;
	text-decoration: none; text-transform: none; letter-spacing: 0;
	cursor: pointer;
}
.gtc-story .gtc-nl__btn:hover,
.gtc-story .gtc-nl__btn:focus { background: var(--gtc-blue-dark); color: #FFFFFF; }
.gtc-story .gtc-nl__fine {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px;
	margin: 12px 0 0;
	font-size: 13px; line-height: 1.4; color: var(--gtc-mute);
}
.gtc-story .gtc-nl__hide {
	margin: 0; padding: 0; border: 0; background: none;
	font: 500 13px/1.4 Inter, system-ui, sans-serif;
	color: var(--gtc-mute); text-decoration: underline; text-underline-offset: 2px;
	cursor: pointer;
}
.gtc-story .gtc-nl__hide:hover { color: var(--gtc-ink); background: none; }

/* End of story */
.gtc-story .gtc-story__growth { margin: 40px 0 8px; }
.gtc-story .gtc-story__growth-inner { display: grid; gap: 16px; }
.gtc-story .gtc-nl--end { padding: 30px 30px 24px; }
.gtc-story .gtc-nl--end .gtc-nl__title,
.gtc-story .gtc-support .gtc-nl__title { font-size: 26px; }
.gtc-story .gtc-support { display: none; background: #101828; border-color: #101828; }
.gtc-story .gtc-support .gtc-nl__kicker { color: #8DB8FF; }
.gtc-story .gtc-support .gtc-nl__title { color: #FFFFFF; }
.gtc-story .gtc-support .gtc-nl__dek { color: #C3CAD5; }
.gtc-story .gtc-support .gtc-nl__btn:focus-visible { outline: 3px solid #8DB8FF; outline-offset: 2px; }
.gtc-story .gtc-support .gtc-nl__btn { margin-top: 16px; }

/* Google preferred source (whole card is the link, as in the mockup) */
.gtc-story .gtc-gcard {
	display: none;
	align-items: center; gap: 16px;
	padding: 18px 20px;
	border: 1px solid var(--gtc-line); border-radius: 12px;
	background: #FFFFFF; color: var(--gtc-ink);
	font-family: Inter, system-ui, sans-serif;
	text-decoration: none;
}
.gtc-story .gtc-gcard:hover { border-color: var(--gtc-line-2); color: var(--gtc-ink); }
.gtc-story .gtc-gcard__icon {
	flex: none;
	width: 48px; height: 48px; border-radius: 50%;
	border: 1px solid var(--gtc-line);
	display: flex; align-items: center; justify-content: center;
	color: var(--gtc-ink);
}
.gtc-story .gtc-gcard__text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; font-size: 14px; line-height: 1.4; color: var(--gtc-mute); }
.gtc-story .gtc-gcard__text strong { font-size: 16px; font-weight: 800; color: var(--gtc-ink); }
.gtc-story .gtc-gcard__btn {
	flex: none;
	display: inline-flex; align-items: center;
	height: 44px; padding: 0 16px; border-radius: 10px;
	background: var(--gtc-ink); color: #FFFFFF;
	font-size: 14px; font-weight: 700; white-space: nowrap;
}
.gtc-story .gtc-gcard:hover .gtc-gcard__btn { background: #000000; }

/* Support link for readers who aren't recognized subscribers */
.gtc-story .gtc-support-line {
	margin: -4px 0 0; padding: 0 4px;
	font: 400 15px/1.5 Inter, system-ui, sans-serif; color: var(--gtc-mute);
}
.gtc-story .gtc-support-line a { font-weight: 700; color: var(--gtc-blue); text-decoration: none; white-space: nowrap; }
.gtc-story .gtc-support-line a:hover { text-decoration: underline; }

/* Who sees what */
html.gtc-reader-sub .gtc-story .gtc-nl,
html.gtc-reader-sub .gtc-nlbar { display: none !important; }
html.gtc-reader-sub .gtc-story .gtc-support { display: block; }
html.gtc-reader-sub .gtc-story .gtc-support-line { display: none; }
html.gtc-from-google .gtc-story .gtc-gcard { display: flex; }

/* Phone slide-up bar (fixed, so it escapes the story's overflow clip) */
.gtc-nlbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
	display: flex; align-items: center; gap: 10px;
	padding: 12px 10px calc(12px + env(safe-area-inset-bottom)) 16px;
	background: #101828; color: #FFFFFF;
	font: 600 15px/1.3 Inter, system-ui, sans-serif;
	box-shadow: 0 -8px 24px rgba(16, 24, 40, .18);
	transform: translateY(110%);
	transition: transform .3s ease;
}
.gtc-nlbar[hidden] { display: none; }
.gtc-nlbar.is-open { transform: translateY(0); }
.gtc-nlbar.is-open.is-tucked { transform: translateY(110%); }
.gtc-nlbar__text { flex: 1 1 auto; min-width: 0; }
.gtc-nlbar__go {
	flex: 0 0 auto;
	min-height: 40px; padding: 0 16px; margin: 0;
	border: 0; border-radius: 10px;
	background: #166DFC; color: #FFFFFF;
	font: 700 15px/1 Inter, system-ui, sans-serif; text-transform: none; letter-spacing: 0;
	cursor: pointer;
}
.gtc-nlbar__x {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; margin: 0; padding: 0;
	border: 0; border-radius: 50%;
	background: transparent; color: #D0D5DD;
	cursor: pointer;
}
.gtc-nlbar__go:hover, .gtc-nlbar__go:focus { background: #0F57D1; color: #FFFFFF; }
.gtc-nlbar__x:hover, .gtc-nlbar__x:focus { background: rgba(255, 255, 255, .1); color: #FFFFFF; }
.gtc-nlbar__card { display: none; }

/* Desktop: a corner card with the form in it */
@media (min-width: 761px) {
	.gtc-nlbar--phone-only { display: none !important; }
	.gtc-nlbar {
		left: auto; right: 24px; bottom: 24px;
		display: block;
		width: 360px; padding: 0;
		background: transparent; box-shadow: none;
		transform: translateY(calc(100% + 48px));
	}
	.gtc-nlbar.is-open.is-tucked { transform: translateY(calc(100% + 48px)); }
	.gtc-nlbar__text, .gtc-nlbar__go { display: none; }
	.gtc-story .gtc-nlbar__card {
		display: block;
		margin: 0; padding: 22px 22px 16px;
		border: 1px solid var(--gtc-line); border-radius: 16px;
		background: #FFFFFF;
		box-shadow: 0 16px 40px rgba(16, 24, 40, .18);
	}
	.gtc-story .gtc-nlbar__card .gtc-nl__title { padding-right: 28px; font-size: 19px; }
	.gtc-story .gtc-nlbar__card .gtc-nl__dek { font-size: 14px; }
	.gtc-story .gtc-nlbar__card .gtc-nl__form { margin-top: 14px; }
	.gtc-story .gtc-nlbar__card .gtc-nl__input { flex-basis: 100%; height: 44px; }
	.gtc-story .gtc-nlbar__card .gtc-nl__btn { flex: 1 1 100%; min-height: 44px; }
	.gtc-story .gtc-nlbar__card .gtc-nl__hide { margin-top: 10px; }
	.gtc-nlbar__x { position: absolute; top: 10px; right: 10px; color: var(--gtc-mute, #475467); }
	.gtc-nlbar__x:hover, .gtc-nlbar__x:focus { background: #F2F4F7; color: #101828; }
}

@media (max-width: 760px) {
	.gtc-story .gtc-nl,
	.gtc-story .gtc-support { padding: 20px 18px 16px; }
	.gtc-story .gtc-nl__title { font-size: 20px; }
	.gtc-story .gtc-nl--end .gtc-nl__title,
	.gtc-story .gtc-support .gtc-nl__title { font-size: 22px; }
	.gtc-story .gtc-nl__btn { flex: 1 1 100%; }
	.gtc-story .gtc-support .gtc-nl__btn { width: 100%; }
	.gtc-story .gtc-gcard { flex-wrap: wrap; }
	.gtc-story .gtc-gcard__text { flex-basis: calc(100% - 64px); }
	.gtc-story .gtc-gcard__btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.gtc-nlbar { transition: none; }
}

/* =====================================================================
 * Part 3: sponsors and the sports season row.
 * ===================================================================== */

/* Topic label + "Presented by" (sponsored topics) */
.gtc-story .gtc-story__topline {
	justify-self: start;
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
	margin: 0 0 14px;
	font-family: Inter, system-ui, sans-serif;
}
.gtc-story .gtc-story__topline .gtc-story__topic { margin: 0; }
.gtc-story .gtc-story__presented,
.gtc-story .gtc-story__sponsorby {
	display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
	font: 600 12px/1.3 Inter, system-ui, sans-serif;
	letter-spacing: .02em; color: var(--gtc-mute);
}
.gtc-story .gtc-story__sponsorby {
	justify-self: start;
	margin: 0 0 14px;
	font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.gtc-story .gtc-story__sponsor-name {
	display: inline-flex; align-items: center; gap: 6px;
	font-weight: 700; letter-spacing: 0; text-transform: none;
	color: var(--gtc-ink); text-decoration: none;
}
.gtc-story .gtc-story__sponsorby .gtc-story__sponsor-name { font-size: 14px; }
.gtc-story a.gtc-story__sponsor-name:hover span { text-decoration: underline; text-underline-offset: 2px; }
.gtc-story .gtc-story__sponsor-logo {
	width: 24px; height: 24px; object-fit: contain;
	border-radius: 4px; background: #FFFFFF;
}
/* Feature hero: white over the photo on desktop */
.gtc-story .gtc-story__hero-text .gtc-story__topline,
.gtc-story .gtc-story__hero-text .gtc-story__sponsorby { justify-self: auto; justify-content: center; }
.gtc-story .gtc-story__hero-text :is(.gtc-story__presented, .gtc-story__sponsorby, .gtc-story__sponsor-name) { color: #FFFFFF; }

/* Paid story disclosure */
.gtc-story .gtc-story__disclosure {
	margin: 28px 0 0; padding: 16px 0 0;
	border-top: 1px solid var(--gtc-line);
	font: 400 14px/1.5 Inter, system-ui, sans-serif; color: var(--gtc-mute);
}
.gtc-story .gtc-story__disclosure a { color: var(--gtc-blue); }

/* Sports logo row: label and logos appear once a logo serves.
 * Empty slots must stay in the layout (no display: none), or the ad
 * loader never sees them scroll into view and never requests them. */
.gtc-story .gtc-story__season { margin: 0; }
.gtc-story .gtc-story__season:has(.gtc-story__ad-slot :is(a, img, iframe)) { margin: 0 0 28px; }
.gtc-story .gtc-story__season-label {
	margin: 0 0 10px;
	font: 700 11px/1.2 Inter, system-ui, sans-serif;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--gtc-mute); text-align: center;
}
.gtc-story .gtc-story__season:not(:has(.gtc-story__ad-slot :is(a, img, iframe))) .gtc-story__season-label { display: none; }
.gtc-story .gtc-story__season-logos { display: flex; flex-wrap: wrap; justify-content: center; }
.gtc-story .gtc-story__ad--season { flex: 0 0 25%; min-width: 0; margin: 0; padding: 0 6px; box-sizing: border-box; }
.gtc-story .gtc-story__ad--season:not(:has(.gtc-story__ad-slot :is(a, img, iframe))) { flex: 0 0 0; width: 0; padding: 0; }
/* Two sponsors: larger, centered */
.gtc-story .gtc-story__season-logos:not(:has(.gtc-story__ad--season:nth-child(3) :is(a, img, iframe))):not(:has(.gtc-story__ad--season:nth-child(4) :is(a, img, iframe))) .gtc-story__ad--season:has(:is(a, img, iframe)) { flex-basis: 37%; }
.gtc-story .gtc-story__ad--season .gtc-story__ad-slot:has(:is(a, img, iframe)) {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 2 / 1; padding: 8px;
	border: 1px solid var(--gtc-line); border-radius: 10px;
	background: #FFFFFF; overflow: hidden;
}
.gtc-story .gtc-story__ad--season .gtc-story__ad-slot > div,
.gtc-story .gtc-story__ad--season a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.gtc-story .gtc-story__ad--season img { width: 100% !important; height: 100% !important; max-width: 100%; object-fit: contain; }

@media (max-width: 760px) {
	/* 2 × 2 on phones */
	.gtc-story .gtc-story__ad--season:has(:is(a, img, iframe)),
	.gtc-story .gtc-story__season-logos:not(:has(.gtc-story__ad--season:nth-child(3) :is(a, img, iframe))):not(:has(.gtc-story__ad--season:nth-child(4) :is(a, img, iframe))) .gtc-story__ad--season:has(:is(a, img, iframe)) { flex-basis: 50%; }
	.gtc-story .gtc-story__ad--season:has(:is(a, img, iframe)) { margin-bottom: 12px; }
}
}
@media (max-width: 760px) {
	/* Feature hero on phones: headline sits below the photo in dark type */
	.gtc-story .gtc-story__hero-text :is(.gtc-story__presented, .gtc-story__sponsorby) { color: var(--gtc-mute); }
	.gtc-story .gtc-story__hero-text .gtc-story__sponsor-name { color: var(--gtc-ink); }
}

/* "From the sponsor" (paid stories): shows only when the sponsor's ad serves */
/* Empty box stays in the layout at no height (see the logo row note). */
.gtc-story .gtc-story__from { margin: 0; }
.gtc-story .gtc-story__from:has(.gtc-story__ad-slot :is(a, img, iframe)) { margin: 32px 0 0; }
.gtc-story .gtc-story__from:not(:has(.gtc-story__ad-slot :is(a, img, iframe))) .gtc-story__from-label { display: none; }
.gtc-story .gtc-story__from-label {
	margin: 0 0 10px;
	font: 700 12px/1.2 Inter, system-ui, sans-serif;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--gtc-mute);
}
.gtc-story .gtc-story__ad--from { margin: 0; }
.gtc-story .gtc-story__ad--from .gtc-card-label { display: none !important; }
.gtc-story .gtc-story__ad--from .gtc-card-wrap,
.gtc-story .gtc-story__ad--from .gtc-card { margin: 0 !important; }
.gtc-story .gtc-story__grid:has(.gtc-story__from .gtc-story__ad-slot :is(a, img, iframe)) + .gtc-story__grid .gtc-story__disclosure { margin-top: 16px; border-top: 0; padding-top: 0; }