/* Modern generic page template shell for pages still using templates/template-page.php. */

body.hong-page-template-modern {
	background: #f7f4ee;
	color: var(--hong-ink, #171717);
}

.hong-page-template {
	padding: clamp(36px, 5vw, 72px) 20px clamp(64px, 8vw, 112px);
}

.hong-page-entry {
	width: min(1180px, 100%);
	margin: 0 auto;
}

.hong-page-template-has-hero .hong-page-template {
	padding-top: clamp(20px, 3vw, 36px);
}

.hong-page-template__hero {
	position: relative;
	display: grid;
	gap: 16px;
	width: min(1180px, 100%);
	margin: 0 auto clamp(32px, 5vw, 56px);
	padding: clamp(34px, 5vw, 64px);
	overflow: hidden;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78)),
		#fff;
	border: 1px solid rgba(23, 23, 23, 0.1);
	box-shadow: 0 24px 72px rgba(23, 23, 23, 0.08);
}

.hong-page-template__hero::after {
	content: "";
	position: absolute;
	right: clamp(18px, 5vw, 56px);
	bottom: clamp(18px, 5vw, 56px);
	width: clamp(92px, 15vw, 180px);
	height: 10px;
	background: #d94a2b;
}

.hong-page-template__hero-mark {
	width: 44px;
	height: 44px;
	background:
		linear-gradient(90deg, #171717 0 16px, transparent 16px 24px, #d94a2b 24px 44px),
		#171717;
}

/* Sizes here are px: the Genesis 62.5% root turns `rem` into tenths, so the
 * old 0.76rem rendered at 7.6px. */
.hong-page-template__eyebrow,
.hong-page-template-cta__eyebrow {
	margin: 0;
	color: rgba(23, 23, 23, 0.72);
	font-family: var(--hong-mono, monospace);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hong-page-template__title {
	max-width: 920px;
	margin: 0;
	color: #171717;
	font-family: var(--hong-display, var(--hong-sans, sans-serif));
	font-size: clamp(2.35rem, 6vw, 5.35rem);
	font-weight: 560;
	letter-spacing: 0;
	line-height: 0.94;
}

.hong-page-template__lead {
	max-width: 760px;
	margin: 0;
	color: rgba(23, 23, 23, 0.72);
	font-size: clamp(1.08rem, 1.5vw, 1.3rem);
	line-height: 1.55;
}

.hong-page-content {
	width: 100%;
}

.hong-page-content__inner {
	width: min(880px, 100%);
	margin: 0 auto;
}

.hong-page-entry--editorial-v2 .hong-page-content__inner,
body.hong-main-v2--articles .hong-page-content__inner {
	width: 100%;
}

body:is(.hong-treatment-v2-template, .hong-ads-landing-v2-template) :is(.hong-page-template, .hong-page-entry, .hong-page-content, .hong-page-content__inner) {
	max-width: none;
	width: 100%;
}

.hong-page-content__inner > :first-child {
	margin-top: 0;
}

.hong-page-content__inner h1,
.hong-page-content__inner h2,
.hong-page-content__inner h3 {
	color: #171717;
	font-family: var(--hong-display, var(--hong-sans, sans-serif));
	font-weight: 560;
	letter-spacing: 0;
	line-height: 1.05;
}

.hong-page-content__inner h2 {
	font-size: clamp(1.85rem, 3vw, 3rem);
	margin: clamp(34px, 5vw, 58px) 0 14px;
}

.hong-page-content__inner h3 {
	font-size: clamp(1.35rem, 2vw, 1.9rem);
	margin: 32px 0 12px;
}

.hong-page-content__inner p,
.hong-page-content__inner li {
	/* 10px Genesis root: the old max `1.16rem` rendered 11.6px (rem written for a 16px root).
	   Corrected to readable px so un-islanded page prose is legible; islands (higher specificity) still win. */
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.72;
}

.hong-page-content__inner img,
.hong-page-content__inner iframe,
.hong-page-content__inner video,
.hong-page-content__inner table {
	max-width: 100%;
}

.hong-team-single {
	padding: clamp(24px, 4vw, 48px) 20px clamp(64px, 8vw, 112px);
}

.hong-team-single__entry {
	width: min(1180px, 100%);
	margin: 0 auto;
}

.hong-team-single__content {
	width: 100%;
}

.hong-page-template-cta {
	padding: 0 20px clamp(56px, 7vw, 96px);
	background: #f7f4ee;
}

.hong-page-template-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px;
	align-items: end;
	width: min(1180px, 100%);
	margin: 0 auto;
	padding: clamp(28px, 4vw, 48px);
	background: #171717;
	color: rgba(255, 255, 255, 0.74);
}

.hong-page-template-cta__copy {
	display: grid;
	gap: 12px;
	max-width: 760px;
}

/* Dark surface: the floor is 15px here, not 13px. */
.hong-page-template-cta__eyebrow {
	color: rgba(255, 255, 255, 0.82);
	font-size: 15px;
}

.hong-page-template-cta__copy h2 {
	margin: 0;
	color: #fff;
	font-family: var(--hong-display, var(--hong-sans, sans-serif));
	font-size: clamp(1.8rem, 3.2vw, 3rem);
	font-weight: 540;
	letter-spacing: 0;
	line-height: 1;
}

.hong-page-template-cta__copy p {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
}

.hong-page-template-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}

.hong-page-template-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 13px 18px;
	background: #fff;
	color: #171717;
	font-family: var(--hong-sans, sans-serif);
	/* px, not rem: Genesis rebases the root to 10px, so 0.94rem rendered 9.4px. */
	font-size: 16px;
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
}

.hong-page-template-cta__button--secondary {
	background: transparent;
	color: #fff !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.hong-swiss-modern .entry-content .hong-page-template-cta__button,
.hong-swiss-modern .entry-content .hong-page-template-cta__button:visited {
	border-bottom: 0;
	text-decoration: none;
}

.hong-swiss-modern .entry-content .hong-page-template-cta__button--secondary,
.hong-swiss-modern .entry-content .hong-page-template-cta__button--secondary:visited {
	background: transparent !important;
	color: #fff !important;
}

@media (max-width: 760px) {
	.hong-page-template__hero {
		padding: 28px 22px 44px;
	}

	.hong-page-template__hero::after {
		left: 22px;
		right: auto;
		width: 120px;
	}

	.hong-page-template-cta__inner {
		grid-template-columns: 1fr;
	}

	.hong-page-template-cta__actions {
		justify-content: flex-start;
	}

	.hong-page-template-cta__button {
		width: 100%;
	}
}