/* =========================================================
   Blog index — Travel Editions Blog
========================================================= */

body.te-blog-page .content-area {
	margin-top: 0;
	margin-bottom: 0;
}

body.te-blog-page #inner-wrap {
	background: #fff;
}

.te-blog {
	background: #fff;
}

/* Hero */
.te-blog-hero {
	position: relative;
	min-height: 420px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
	align-items: flex-end;
}

.te-blog-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 35%, rgba(0, 0, 0, 0.35) 100%);
}

.te-blog-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--global-content-width, 1290px);
	margin: 0 auto;
	padding: 0 var(--global-content-edge-padding, 1.5rem) 2.75rem;
}

.te-blog-hero__title {
	margin: 0;
	color: #fff;
	font-family: minion-pro, "Minion Pro", Georgia, serif;
	font-size: clamp(2.5rem, 4vw, 4.5rem);
	font-weight: 700;
	line-height: 1.05;
}

/* Brochure ribbon */
.te-blog-ribbon {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	min-height: 68px;
	padding: 0 30px;
	background: #006d9e;
}

.te-blog-ribbon__line {
	width: 120px;
	height: 1px;
	background: rgba(255, 255, 255, 0.7);
	flex-shrink: 0;
}

.te-blog-ribbon__link {
	color: #fff;
	font-family: minion-pro, "Minion Pro", Georgia, serif;
	font-size: 20px;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
}

.te-blog-ribbon__link:hover,
.te-blog-ribbon__link:focus-visible {
	color: #fff;
	text-decoration: none;
}

/* Intro */
.te-blog-intro {
	padding: 2.25rem 0 1.75rem;
	background: #fff;
	text-align: center;
}

/* Was 620px — pixel-measured the actual paragraph column off blog category
   page.psd at full resolution (2194 design-px -> 1088px live-equivalent):
   this is the same 1100px sitewide content-column standard as everywhere
   else on this page, not a narrower one-off value. 1148px = 1100px content
   + 2x24px border-box padding, same pattern used throughout this file. */
.te-blog-intro__inner {
	max-width: 1148px;
	margin: 0 auto;
	padding: 0 var(--global-content-edge-padding, 1.5rem);
}

/* Font-size was 11px — PSD measures this eyebrow label's cap-height at
   ~16px live-equivalent. */
.te-blog-intro__label {
	margin: 0 0 0.6rem;
	color: #006d9e;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Font-size was clamp(1.45rem, 2vw, 1.85rem) (23.2-29.6px) — PSD measures
   this heading at ~55px live-equivalent, matching the same H2 clamp used
   for section headings elsewhere on the site (e.g. "Why Choose Travel
   Editions?"), not a smaller one-off size. Later changed to that same
   clamp(2rem, 3.5vw, 3.6rem); now flattened to 57.6px (the clamp's own
   ceiling) per the same site-wide fix applied to the homepage and About
   Us's equivalent major-section H2s — no viewport-based scaling on
   desktop, with an explicit mobile override below instead. */
.te-blog-intro__title {
	margin: 0 0 0.9rem;
	color: #333;
	font-family: minion-pro, "Minion Pro", Georgia, serif;
	font-size: 57.6px;
	font-weight: 400;
	line-height: 1.2;
}

@media (max-width: 767px) {
	.te-blog-intro__title {
		font-size: 46.3px;
	}
}

/* User-specified final value: 16px (overriding the 21px PSD glyph-height
   estimate from the previous pass). Line-height was still 1.55 (24.8px)
   — brought to the sitewide flat 21px body-copy standard. */
.te-blog-intro__text {
	margin: 0;
	color: #333;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	line-height: 21px;
}

/* Toolbar — matches .te-blog-main__inner below it. Box-sizing is
   border-box, so max-width includes the 1.5rem (24px) side padding; to get
   an actual 1100px CONTENT width (confirmed against blog category
   page.psd: card-grid content span measured at 1088px live-equivalent)
   with that padding preserved outside it, max-width needs to be
   1100 + 2*24 = 1148px, not 1100px itself. Was 900px before that, narrower
   than the design and narrower than the grid it introduces. */
.te-blog-toolbar-wrap {
	max-width: 1148px;
	margin: 0 auto;
	padding: 0 var(--global-content-edge-padding, 1.5rem) 1.75rem;
	background: #fff;
}

.te-blog-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 0;
}

/* Font-size was 16px — PSD measures "Showing 6 articles" (cap+descender
   bbox height 43 design-px) at ~22px live-equivalent. */
.te-blog-toolbar__count {
	margin: 0;
	color: #333;
	font-family: Roboto, sans-serif;
	font-size: 22px;
	line-height: 1.4;
}

.te-blog-toolbar__count strong {
	color: #016d9c;
	font-weight: 700;
}

.te-blog-toolbar__filters {
	display: flex;
	align-items: center;
	gap: 28px;
}

.te-blog-toolbar__field {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

/* Font-size was 14px — PSD measures the "Category"/"Sort By" labels
   (cap-height bbox 34 design-px) at ~17.5px live-equivalent. */
.te-blog-toolbar__field label {
	margin: 0;
	color: #333;
	font-family: Roboto, sans-serif;
	font-size: 17.5px;
	font-weight: 400;
	white-space: nowrap;
}

/* Border was 1px solid #ccc — pixel-measured the same select field in the
   PSD at 4 design-px thick, RGB(41,41,41), which converts (0.4959 scale)
   to exactly 2px #292929 — an identical match to the newsletter form
   fields' border (see newsletter-gravity-forms.css), confirming these
   should share the same heavier style rather than a lighter one-off. */
.te-blog-toolbar__field select {
	min-width: 170px;
	height: 42px;
	padding: 0 14px;
	border: 2px solid #292929;
	border-radius: 4px;
	background: #fff;
	color: #333;
	font-family: Roboto, sans-serif;
	font-size: 15px;
	cursor: pointer;
}

/* Main content area */
.te-blog-main {
	background: #eeedea;
	padding: 2.5rem 0 4.5rem;
}

/* Was 900px — measured the card grid's content span directly off "blog
   category page.psd" at full resolution (2195 design-px, scale 0.4959):
   1088px live-equivalent, i.e. the sitewide 1100px content-column standard,
   not a narrower one-off value. max-width is 1148px (1100 + 2*24px
   padding, border-box) so the actual rendered content (.te-blog-grid,
   which fills this minus its own padding) lands at exactly 1100px with
   the padding preserved outside it — not 1100px total including padding. */
.te-blog-main__inner {
	max-width: 1148px;
	margin: 0 auto;
	padding: 0 var(--global-content-edge-padding, 1.5rem);
}

/* Grid — was a flat 24px gap both directions. Pixel-measured the PSD's own
   card boundaries at full resolution: column gap (left/right space
   between cards) averages 89.5 design-px -> 44px live-equivalent; row gap
   (vertical space between card rows) is 82 design-px -> 41px. Both were
   roughly half the design's actual spacing. */
.te-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	row-gap: 41px;
	column-gap: 44px;
}

.te-blog-card {
	display: flex;
	flex-direction: column;
	background: transparent;
	box-shadow: none;
}

body.te-blog-page .te-blog-card.entry,
body.te-blog-page .te-blog-card.post {
	background: transparent;
	box-shadow: none;
}

/* Was a perfect square (1/1) — pixel-measured the "Battlefields Are Not
   Empty Spaces" card directly off blog category page.psd at full
   resolution: image spans 674x793 design-px, a 0.85:1 (portrait) ratio,
   not square at all. */
.te-blog-card__image-link {
	display: block;
	overflow: hidden;
	aspect-ratio: 0.85 / 1;
}

.te-blog-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Was 1.35rem (21.6px) — PSD measures the image-to-date gap at 73
   design-px, 36px live-equivalent at the sitewide 0.4959 scale factor. */
.te-blog-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 2.25rem 0 0;
}

/* Font-size was 14px, margin-bottom 0.85rem (13.6px) — PSD measures the
   date text at ~16px live-equivalent, with a ~17px gap before the
   heading. */
.te-blog-card__date {
	margin: 0 0 1.1rem;
	color: #666;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.4;
}

/* Font-size was 1.2rem (19.2px), margin-bottom 1rem (16px) — PSD measures
   this heading (line-to-line baseline distance, at the existing 1.25
   line-height) at ~29px live-equivalent font-size, with a ~35px gap
   before the "Read More" button — both roughly double what was live. */
.te-blog-card__title {
	margin: 0 0 2.2rem;
	font-family: minion-pro, "Minion Pro", Georgia, serif;
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1.25;
}

.te-blog-card__title a {
	color: #333;
	text-decoration: none;
}

.te-blog-card__title a:hover,
.te-blog-card__title a:focus-visible {
	color: #006d9e;
}

.te-blog-card__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-width: 132px;
	margin-top: auto;
	padding: 8.8px 16px;
	background: #2e6b98;
	color: #fff;
	font-family: Roboto, sans-serif;
	font-size: 19px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 4px;
}

.te-blog-card__button:hover,
.te-blog-card__button:focus-visible {
	background: #265a82;
	color: #fff;
}

.te-blog-empty {
	margin: 0;
	padding: 2rem 0;
	color: #333;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	text-align: center;
}

/* Pagination */
.te-blog-pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 2.75rem;
}

.te-blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid #006d9e;
	border-radius: 4px;
	background: #fff;
	color: #006d9e;
	font-family: Roboto, sans-serif;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.te-blog-pagination .page-numbers.current {
	background: #006d9e;
	border-color: #006d9e;
	color: #fff;
}

.te-blog-pagination .page-numbers:hover,
.te-blog-pagination .page-numbers:focus-visible {
	background: #006d9e;
	border-color: #006d9e;
	color: #fff;
}

.te-blog-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: #006d9e;
}

.te-blog-pagination .page-numbers.dots:hover,
.te-blog-pagination .page-numbers.dots:focus-visible {
	background: transparent;
	color: #006d9e;
}

/* Responsive */
@media (max-width: 900px) {
	.te-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.te-blog-hero {
		min-height: 300px;
	}

	.te-blog-hero__inner {
		padding-bottom: 2rem;
	}

	.te-blog-ribbon {
		gap: 14px;
		padding: 0 16px;
	}

	.te-blog-ribbon__line {
		width: 48px;
	}

	.te-blog-ribbon__link {
		font-size: 16px;
		white-space: normal;
		text-align: center;
	}

	.te-blog-intro {
		padding: 1.75rem 0 1.25rem;
	}

	.te-blog-toolbar {
		flex-direction: column;
		align-items: flex-start;
	}

	.te-blog-toolbar__filters {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.te-blog-toolbar__field select {
		width: 100%;
	}

	.te-blog-grid {
		grid-template-columns: 1fr;
	}

	/* !important for the same reason as .te-blog-brochures__title just
	   below: the unconditional (desktop) rule for this selector sits LATER
	   in this file, at `minmax(0,1fr) minmax(0,1fr)`. Equal specificity, so
	   source order let it win even here, and the panel never stacked on a
	   phone — it stayed two columns of 139.5px each, which is what shrank
	   the brochure image to 140px and pinned it to the left edge with 212px
	   of dead space beside it. That is Paul's 24 Jul item e, "in page
	   imagery should be centered as the slight margin shifts look like an
	   error": the image was not off-centre in itself, its column was. */
	.te-blog-brochures__inner {
		grid-template-columns: 1fr !important;
		gap: 2rem !important;
	}

	/* !important needed since the unconditional (desktop) rule for this
	   same selector now sits later in the file at a flat 57.6px — equal
	   specificity, so source order would otherwise let it win here too
	   despite this media query matching. */
	.te-blog-brochures__title {
		font-size: 2rem !important;
	}
}

/* Brochures section */
.te-blog-brochures {
	background: #c0d2e0;
	padding: 3.5rem 0;
}

/* This is a body-content section, not the page's hero/header row (that's
   .te-blog-hero__inner above, which must stay at --global-content-width to
   match the site header and is never touched by this standardization) — was
   incorrectly sharing that same 1290px variable. max-width is 1148px
   (1100 + 2*24px padding, border-box) so the rendered content lands at
   exactly 1100px with the padding preserved outside it. */
.te-blog-brochures__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 3rem;
	max-width: 1148px;
	margin: 0 auto;
	padding: 0 var(--global-content-edge-padding, 1.5rem);
}

.te-blog-brochures__media {
	display: flex;
	justify-content: center;
}

.te-blog-brochures__image {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.2));
}

.te-blog-brochures__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.te-blog-brochures__label {
	margin: 0 0 0.5rem;
	color: #016d9c;
	font-family: Roboto, sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.te-blog-brochures__title {
	margin: 0 0 1.25rem;
	color: #333;
	font-family: minion-pro, "Minion Pro", Georgia, serif;
	/* Was clamp(2rem, 3vw, 3rem) (43.2px at 1440px) — this same content
	   ("Begin Your Journey With Our Brochure") renders at 57.6px
	   everywhere else it's reused (homepage, tour pages, About Us), so
	   flattened to match. The existing 32px mobile override below is
	   untouched — that was already a deliberate, separate mobile value. */
	font-size: 57.6px;
	font-weight: 400;
	line-height: 1.15;
}

.te-blog-brochures__text {
	margin: 0 0 1.75rem;
	color: #333;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	/* Was 1.65, then 1.35 — now flat 21px (not a ratio), matching the
	   sitewide standard (see desktop_line_height_audit_20jul21 memory). */
	line-height: 21px;
}

.te-blog-brochures__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.75rem;
	background: #016d9c;
	color: #fff;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 4px;
}

.te-blog-brochures__button:hover,
.te-blog-brochures__button:focus-visible {
	background: #005882;
	color: #fff;
}

/* =========================================================
   Single blog post
========================================================= */

body.te-blog-single-page .content-area {
	margin-top: 0;
	margin-bottom: 0;
}

body.te-blog-single-page #inner-wrap {
	background: #fff;
	padding-top: 0;
}

body.te-blog-single-page .entry.single-entry,
body.te-blog-single-page .te-blog-single__article {
	box-shadow: none;
}

.te-blog-single {
	background: #fff;
	padding: 0 0 4.5rem;
}

/* Previously matched .te-blog-single__inner (1148px/1100px content) on the
   reasoning that it should follow the body-content flow rather than the
   header — overridden 2026-07-21 per explicit client feedback that every
   breadcrumb should line up with the header/logo instead, same as the
   fixes already applied to expert single, Our Brochures, and tour pages
   (see [[breadcrumb_alignment_sweep]]). Broken out to full viewport width
   and re-inset with site-container's own max(24px, ...) formula so it
   stays correct at every viewport width instead of a fixed pixel offset. */
.te-blog-single__breadcrumbs-wrap {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: 0;
	padding-top: 12px;
	padding-bottom: 0;
	padding-left: max(24px, calc((100vw - 1290px) / 2 + 24px));
	padding-right: max(24px, calc((100vw - 1290px) / 2 + 24px));
	box-sizing: border-box;
}

/* max-width is 1148px (1100 + 2*24px padding, border-box) so the actual
   rendered content (title, body copy) lands at exactly 1100px with the
   padding preserved outside it — matches the breadcrumbs bar above. */
.te-blog-single__inner {
	max-width: 1148px;
	margin: 0 auto;
	padding: 0 var(--global-content-edge-padding, 1.5rem);
}

/* Body copy resuming after the in-post newsletter signup currently butts
   straight up against it — the design shows a clear gap before text resumes. */
.te-newsletter-signup + .te-blog-single__inner {
	margin-top: 5rem;
}

.te-blog-single__breadcrumbs {
	margin: 0;
	color: #006a9c;
	font-family: Roboto, sans-serif;
	/* Was 17px — every other page's breadcrumb (About Us, expert single,
	   Our Brochures, tour single) uses 1.1rem (17.6px); matched here for
	   consistency. Width is intentionally narrower than the header (see
	   .te-blog-single__breadcrumbs-wrap comment above) — only font-size
	   was off here. */
	font-size: 1.1rem;
	line-height: 1.5;
	text-align: left;
}

.te-blog-single__breadcrumbs a {
	color: #006a9c;
	text-decoration: none;
}

.te-blog-single__breadcrumbs a:hover,
.te-blog-single__breadcrumbs a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.te-blog-single__breadcrumb-sep {
	color: #006a9c;
}

/* Was #006a9c (link blue) — the current-page segment isn't a link, so it
   should read as plain text like every other page's breadcrumb (About Us,
   expert single, tour single all use #333 here). */
.te-blog-single__breadcrumb-current {
	color: #333;
}

.te-blog-single__header {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.te-blog-single__title {
	margin: 0 0 1.35rem;
	color: #333;
	font-family: minion-pro, "Minion Pro", Georgia, serif;
	font-size: clamp(2.5rem, 3.5vw, 3.6rem);
	font-weight: 400;
	line-height: 1.15;
}

.te-blog-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.75rem 2.25rem;
}

.te-blog-single__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: #333;
	font-family: minion-pro, "Minion Pro", Georgia, serif !important;
	font-size: 22px;
	line-height: 1.4;
}

.te-blog-single__meta-item i {
	color: #333;
	font-size: 36px;
}

.te-blog-single__figure {
	margin: 0 0 2rem;
}

.te-blog-single__image {
	display: block;
	width: 100%;
	height: auto;
}

.te-blog-single__content {
	color: #333;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.7;
}

.te-blog-single__content p {
	margin: 0 0 1.35rem;
	/* Flat 21px, not a ratio — matches the sitewide body-copy standard. */
	line-height: 21px;
}

.te-blog-single__content p:last-child {
	margin-bottom: 0;
}

.te-blog-single__content h2.wp-block-kadence-advancedheading {
	margin: 20px 0;
}

.te-blog-single__content h3.wp-block-kadence-advancedheading,
.te-blog-single__content h4.wp-block-kadence-advancedheading {
	margin: 0;
}

.te-blog-single__content blockquote.wp-block-quote {
	font-size: 24px;
	font-style: normal;
	line-height: 1.5;
}

.te-blog-single__content blockquote.wp-block-quote > p {
	line-height: 34px;
}

/* Kadence's global body-font rule (body, .entry-content p, etc.) targets the
   <p> nested inside the blockquote directly with !important, which otherwise
   beats the font-family inherited from the blockquote itself. */
.te-blog-single__content blockquote.wp-block-quote,
.te-blog-single__content blockquote.wp-block-quote p {
	font-family: minion-pro, "Minion Pro", Georgia, serif !important;
}

.te-blog-single__content a {
	color: #006a9c;
}

.te-blog-single__content a:hover,
.te-blog-single__content a:focus-visible {
	color: #005882;
}

/* Row Layout blocks used within article body copy inherit Kadence's default
   24px edge padding on .kt-row-column-wrap, making them narrower than the
   plain-paragraph content column they sit alongside. Full-bleed/background
   rows (alignfull, kt-row-has-bg) are left untouched. */
.te-blog-single__content .kb-row-layout-wrap:not(.alignfull):not(.kt-row-has-bg) > .kt-row-column-wrap {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* =========================================================
   Single expert
========================================================= */

body.te-expert-single-page .content-area {
	margin-top: 0;
	margin-bottom: 0;
}

body.te-expert-single-page #inner-wrap {
	background: #fff;
	padding-top: 0;
}

.te-expert-single {
	background: #fff;
	padding: 0 0 4rem;
}

.te-expert-single__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--global-content-edge-padding, 1.5rem);
}

/*
 * .te-expert-single__inner (this wrap's parent) is deliberately narrower
 * (1180px) than the sitewide .site-container header width (1290px) for
 * readability of the bio content — but that meant the breadcrumb, as a
 * plain child, inherited that narrower column too and sat ~55px right of
 * (and narrower than) the site-container the logo/header use, instead of
 * lining up with it like every other page's breadcrumb does. Breaking
 * this element out to full viewport width and re-insetting it with the
 * same max(24px, ...) formula site-container itself uses (rather than a
 * fixed pixel offset) keeps it correct at every viewport width, not just
 * the one it was measured at.
 */
.te-expert-single__breadcrumbs-wrap {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	padding-top: 12px;
	padding-bottom: 0;
	padding-left: max(24px, calc((100vw - 1290px) / 2 + 24px));
	padding-right: max(24px, calc((100vw - 1290px) / 2 + 24px));
	box-sizing: border-box;
}

.te-expert-single__breadcrumbs {
	margin: 0;
	color: #333;
	font-family: Roboto, sans-serif;
	/* Was 15px — every other page's breadcrumb (About Us, blog, tour
	   category) uses 1.1rem (17.6px); matched here for consistency. */
	font-size: 1.1rem;
	line-height: 1.5;
	text-align: left;
}

.te-expert-single__breadcrumbs a {
	color: #006a9c;
	text-decoration: none;
}

.te-expert-single__breadcrumbs a:hover,
.te-expert-single__breadcrumbs a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.te-expert-single__breadcrumb-sep,
.te-expert-single__breadcrumb-current {
	color: #333;
}

.te-expert-single__article {
	box-shadow: none;
}

.te-expert-single__header {
	margin: 2rem 0 2rem;
}

.te-expert-single__title {
	margin: 0;
	color: #111;
	font-family: minion-pro, "Minion Pro", Georgia, serif !important;
	font-size: clamp(2.4rem, 4vw, 3.4rem);
	font-weight: 400 !important;
	line-height: 1.1;
}

.te-expert-single__intro,
.te-expert-single__body {
	color: #333;
	font-family: Roboto, sans-serif !important;
	/* Was 17px — brought to the sitewide 16px body-copy standard (see
	   desktop_line_height_audit_20jul21 memory). */
	font-size: 16px;
	/* Flat 21px, not a ratio (was 1.35, matching "expert article page.psd"'s
	   leading — now the sitewide standard everywhere). */
	line-height: 21px;
}

.te-expert-single__intro p,
.te-expert-single__body p {
	margin: 0 0 1.35rem;
	font-family: Roboto, sans-serif !important;
	/* Same reason as .te-expert-single__quote p above — the sitewide
	   "body p { line-height: 1.75 }" default wins directly on the <p>,
	   overriding the value set one level up. */
	line-height: 21px;
}

.te-expert-single__intro p:last-child,
.te-expert-single__body p:last-child {
	margin-bottom: 0;
}

.te-expert-single__intro p:first-child {
	font-weight: 700;
	margin: 0 0 1.35rem;
}

.te-expert-single__intro {
	margin-bottom: 1.35rem;
}

.te-expert-single__body::after {
	content: "";
	display: table;
	clear: both;
}

.te-expert-single__figure {
	float: right;
	width: 36%;
	margin: .5rem 0 1.35rem 2.5rem;
}

.te-expert-single__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.te-expert-single__quote-wrap {
	margin-top: 2.75rem;
}

.te-expert-single__quote {
	margin: 0;
	padding: 0 0 0 1.35rem;
	border-left: 4px solid #111;
	color: #111;
	font-family: minion-pro, "Minion Pro", Georgia, serif !important;
	font-size: clamp(1.35rem, 2vw, 1.65rem);
	font-style: italic;
	font-weight: 400 !important;
	line-height: 1.45;
}

.te-expert-single__quote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.te-expert-single__quote p {
	margin: 0;
	/* Without this, the sitewide "body p { line-height: 1.75 }" default wins
	   on the paragraph itself, overriding the 1.45 already set (correctly,
	   matching the PSD's ~1.48 pull-quote ratio) one level up on .te-expert-
	   single__quote — line-height doesn't stay inherited once another rule
	   targets the element directly. */
	line-height: 1.45;
}

.te-expert-single__quote cite,
.te-expert-single__quote footer {
	display: none;
}

.te-expert-single__quote-attribution {
	margin: 1rem 0 0 1.35rem;
	color: #111;
	font-family: Roboto, sans-serif;
	font-size: 1rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.4;
}

.te-expert-single__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	margin-top: 3.5rem;
	padding-top: 0;
}

.te-expert-single__nav-spacer {
	flex: 1 1 auto;
}

.te-expert-single__nav-item {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	color: #006d9e;
	text-decoration: none;
}

.te-expert-single__nav-item:hover,
.te-expert-single__nav-item:focus-visible {
	color: #005882;
	text-decoration: none;
}

.te-expert-single__nav-item--next {
	margin-left: auto;
}

body.te-expert-single-page .te-expert-single__nav-label,
body.te-expert-single-page .te-expert-single__nav-arrow {
	color: #006d9e;
	font-family: minion-pro, "Minion Pro", Georgia, serif !important;
	font-size: clamp(1.45rem, 2vw, 1.7rem);
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1.15;
}

body.te-expert-single-page .te-expert-single__nav-arrow {
	font-size: 1.15rem;
}

.te-expert-single__nav-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border: 1px solid #006d9e;
	border-radius: 8px;
	background: transparent;
	color: #006d9e;
	line-height: 1;
}

body.te-expert-single-page .te-expert-single__nav-item:hover .te-expert-single__nav-label,
body.te-expert-single-page .te-expert-single__nav-item:focus-visible .te-expert-single__nav-label,
body.te-expert-single-page .te-expert-single__nav-item:hover .te-expert-single__nav-button,
body.te-expert-single-page .te-expert-single__nav-item:focus-visible .te-expert-single__nav-button,
body.te-expert-single-page .te-expert-single__nav-item:hover .te-expert-single__nav-arrow,
body.te-expert-single-page .te-expert-single__nav-item:focus-visible .te-expert-single__nav-arrow {
	border-color: #005882;
	color: #005882 !important;
}

@media (max-width: 768px) {
	.te-expert-single {
		padding: 0 0 3rem;
	}

	.te-expert-single__header {
		margin: 1.5rem 0 1.5rem;
	}

	.te-expert-single__figure {
		float: none;
		width: 100%;
		margin: 0 0 1.5rem;
	}

	.te-expert-single__intro,
	.te-expert-single__body {
		font-size: 16px;
	}

	.te-expert-single__quote-wrap {
		margin-top: 2rem;
	}

	.te-expert-single__nav {
		flex-direction: column;
		align-items: stretch;
		gap: 1.25rem;
		margin-top: 2.5rem;
	}

	.te-expert-single__nav-item--next {
		justify-content: flex-end;
		margin-left: 0;
	}
}

/* Featured expert tours carousel */
.te-expert-tours {
	margin-top: 2.5rem;
}

.te-expert-tours__main {
	background: #eeedea;
	padding: 0 0 4rem;
}

body.te-expert-single-page .te-expert-tours .te-blog-intro {
	padding-top: 3rem;
	padding-bottom: 1.75rem;
	background: #eeedea;
}

.te-expert-tours__slider {
	overflow: visible;
}

.te-expert-tours__slider-shell {
	padding-top: 0;
	padding-bottom: 0;
}

body.te-expert-single-page .te-expert-tours .tour-departure,
body.te-expert-single-page .te-expert-tours .tour-price-label,
body.te-expert-single-page .te-expert-tours .tour-button {
	font-family: Roboto, sans-serif !important;
}

@media (max-width: 768px) {
	.te-expert-tours__main {
		padding-bottom: 3rem;
	}
}