/**
 * Long-form article layout.
 *
 * Loaded on single posts only. Landing pages keep the full display scale and the
 * pure-black canvas; a 2,000-word article needs different treatment.
 *
 * Three readability decisions worth recording:
 *
 * 1. Display type at 72px is right for a hero and wrong for an article title.
 *    Anton is condensed all-caps, so a long title wrapped to three lines and
 *    pushed the opening paragraph below the fold. Capped at 52px here.
 * 2. Pure #FFFFFF on pure #000000 causes halation — the text appears to glow and
 *    smear at body size, which is tiring across a long read. #E8E8E8 on #141414
 *    measures roughly 13.5:1, far above the WCAG AA 4.5:1 threshold, without the
 *    glare.
 * 3. A sticky rail carrying the contents list and the booking CTA fills the dead
 *    margin and keeps the conversion action on screen for the whole scroll.
 *
 * @package Rhino_Boxing_Theme
 * @since 1.3.0
 */

/* --------------------------------------------------------------------------
   Box model safety net
   The theme's universal `box-sizing: border-box` is declared in style.css, but
   inc/enqueue.php never enqueues that file, so on the live site everything
   computes as content-box. Any `width: 100%` combined with padding therefore
   overflows its parent. Scoped to the article subtree so it fixes this layout
   without changing metrics on pages that were built and tested without it.
   -------------------------------------------------------------------------- */
.rhino-single,
.rhino-single *,
.rhino-single *::before,
.rhino-single *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Article-scoped tokens
   -------------------------------------------------------------------------- */
.rhino-single {
	/* Article shell is narrower than the site container (1280px). At full width
	   the two-column grid produced an over-long measure or a large dead gap; at
	   1100px the copy column lands near 72 characters with no gap. Hero, body,
	   related and navigation all share this width so their left edges align. */
	--article-shell: 1100px;
	--article-bg: #141414;
	--article-page: #0A0A0A;
	--article-card: #1A1A1A;
	--article-card-hover: #202020;
	--article-text: #E8E8E8;
	--article-heading: #FFFFFF;
	--article-muted: #B8B8B8;
	--article-dim: #6D6D6D;
	--article-rule: #2A2A2A;
	--article-measure: 68ch;
}

/* Anchor jumps from the contents list must clear the fixed header, and should
   glide rather than teleport so the reader keeps their bearings. Honoured only
   when the visitor has not asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	html:has(.rhino-single) {
		scroll-behavior: smooth;
	}
}

html:has(.rhino-single) {
	scroll-padding-top: 96px;
}

/* Shared article shell so every band lines up on the same left edge. */
.rhino-article-hero > .container,
.rhino-article-layout,
.rhino-related > .container,
.rhino-single__nav > .container {
	max-width: var(--article-shell);
}

/* --------------------------------------------------------------------------
   Reading progress
   -------------------------------------------------------------------------- */
.rhino-progress {
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	z-index: 60;
	background: transparent;
	pointer-events: none;
}

.rhino-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--brand), var(--brand-vivid));
	transition: width 90ms linear;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.rhino-article-hero {
	background: var(--article-page);
	padding: 132px 0 0;
}

.rhino-article-hero .breadcrumb {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--article-dim);
	margin-bottom: 18px;
}

.rhino-article-hero .breadcrumb a {
	color: var(--article-dim);
	text-decoration: none;
}

.rhino-article-hero .breadcrumb a:hover {
	color: var(--brand);
}

.rhino-chip {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--brand);
	border: 1px solid var(--brand);
	padding: 5px 12px;
	border-radius: 9999px;
	margin-bottom: 18px;
	text-decoration: none;
}

.rhino-chip:hover {
	background: var(--brand);
	color: #141414;
}

/* Article titles top out at 52px, not the 72px hero scale.
   No character cap — a 24ch limit forced long titles into four short lines. The
   title now runs the full width of the article shell, so it breaks into two or
   three full lines instead. */
.rhino-article-hero h1 {
	font-size: clamp(30px, 5vw, 52px);
	line-height: 1.08;
	max-width: none;
	margin: 0 0 24px;
	color: var(--article-heading);
	text-wrap: balance;
}

/* Vietnamese diacritics need more vertical room than Latin caps. */
body.locale-vi .rhino-article-hero h1 {
	line-height: 1.22;
	font-size: clamp(27px, 4.4vw, 46px);
}

.rhino-byline {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding-bottom: 32px;
}

.rhino-byline__avatar,
.rhino-author-mini__av {
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--brand), var(--red, #AE090A));
	font-family: var(--font-display);
	color: #fff;
	flex: 0 0 auto;
}

.rhino-byline__avatar {
	width: 44px;
	height: 44px;
	font-size: 17px;
}

.rhino-byline__text,
.rhino-author-mini > span:last-child {
	display: flex;
	flex-direction: column;
}

.rhino-byline__who {
	font-size: 15px;
	font-weight: 600;
	color: var(--article-heading);
}

.rhino-byline__meta {
	font-size: 13px;
	color: var(--article-dim);
}

.rhino-byline__meta span + span::before {
	content: '·';
	margin: 0 8px;
}

.rhino-article-hero__media {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 7;
	overflow: hidden;
	border-radius: 14px;
	background: #1C1C1C;
}

.rhino-article-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rhino-article-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent 55%);
}

/* --------------------------------------------------------------------------
   Two-column body
   -------------------------------------------------------------------------- */
.rhino-article-body {
	background: var(--article-bg);
	padding: 56px 0 80px;
}

.rhino-article-layout {
	display: grid;
	gap: 44px;
	grid-template-columns: minmax(0, 1fr) 320px;
	align-items: start;
}

/* The grid column defines the measure now. Capping the text at 68ch inside an
   876px column left roughly 240px of dead space between the copy and the rail,
   which read as a broken layout. The article shell is narrowed instead, so the
   column itself lands at a comfortable ~78 characters and the text fills it. */
.rhino-single__content {
	max-width: none;
	color: var(--article-text);
}

.rhino-single__content > p,
.rhino-single__content > ul,
.rhino-single__content > ol,
.rhino-single__content > blockquote {
	font-size: 18px;
	line-height: 1.75;
	margin-bottom: 24px;
	color: var(--article-text);
}

/* First paragraph earns extra weight — often the only thing read. */
.rhino-single__content > p:first-of-type {
	font-size: 21px;
	line-height: 1.6;
	color: var(--article-heading);
	border-left: 3px solid var(--brand);
	padding-left: 20px;
}

.rhino-single__content strong {
	color: var(--article-heading);
	font-weight: 700;
}

.rhino-single__content h2 {
	font-size: clamp(23px, 2.6vw, 30px);
	line-height: 1.2;
	margin: 52px 0 16px;
	padding-top: 26px;
	border-top: 1px solid var(--article-rule);
	color: var(--article-heading);
	scroll-margin-top: 96px;
}

.rhino-single__content h2:first-child {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

.rhino-single__content h3 {
	font-size: clamp(19px, 2.2vw, 22px);
	line-height: 1.25;
	margin: 34px 0 12px;
	color: var(--article-heading);
	scroll-margin-top: 96px;
}

.rhino-single__content h4 {
	font-size: 18px;
	margin: 24px 0 10px;
	color: var(--article-heading);
}

.rhino-single__content li {
	margin-bottom: 9px;
}

.rhino-single__content a {
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.rhino-single__content a:hover,
.rhino-single__content a:focus-visible {
	color: var(--link-hover);
}

/* Pull quote */
.rhino-single__content blockquote {
	border-left: 3px solid var(--brand);
	padding: 4px 0 4px 22px;
	margin: 36px 0;
	color: var(--article-heading);
	font-size: 20px;
	font-style: normal;
}

.rhino-single__content blockquote p:last-child {
	margin-bottom: 0;
}

.rhino-single__content blockquote cite {
	display: block;
	margin-top: 10px;
	font-style: normal;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--brand);
}

.rhino-single__content figure,
.rhino-single__content img {
	margin: 30px 0;
	max-width: 100%;
	height: auto;
}

.rhino-single__content img {
	border-radius: 12px;
}

.rhino-single__content figcaption {
	font-size: 14px;
	color: var(--article-dim);
	margin-top: 9px;
}

/* --------------------------------------------------------------------------
   Tables — pricing tables are the backbone of this content
   -------------------------------------------------------------------------- */
.rhino-single__content .wp-block-table,
.rhino-single__content .rhino-table-wrap {
	margin: 30px 0;
	overflow-x: auto;
}

.rhino-single__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.rhino-single__content th,
.rhino-single__content td {
	padding: 12px 14px;
	border: 1px solid var(--article-rule);
	text-align: left;
	vertical-align: top;
}

.rhino-single__content thead th {
	background: #1F1F1F;
	color: var(--article-heading);
	font-weight: 700;
	white-space: nowrap;
}

.rhino-single__content tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, 0.025);
}

.rhino-single__content tbody td:first-child {
	color: var(--article-heading);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Sticky rail
   -------------------------------------------------------------------------- */
.rhino-rail {
	position: sticky;
	top: 96px;
	display: grid;
	gap: 20px;
}

.rhino-rail__card {
	background: var(--article-card);
	border: 1px solid var(--article-rule);
	border-radius: 12px;
	padding: 20px;
}

.rhino-rail__title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--article-dim);
	margin: 0 0 14px;
}

.rhino-toc {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14.5px;
	line-height: 1.45;
	max-height: 60vh;
	overflow-y: auto;
}

.rhino-toc li {
	margin-bottom: 2px;
}

.rhino-toc a {
	display: block;
	padding: 7px 0 7px 14px;
	color: var(--article-muted);
	text-decoration: none;
	border-left: 2px solid var(--article-rule);
}

.rhino-toc a:hover,
.rhino-toc a:focus-visible {
	color: var(--article-heading);
	border-left-color: var(--article-dim);
}

.rhino-toc a.is-active {
	color: var(--brand);
	border-left-color: var(--brand);
	font-weight: 600;
}

.rhino-rail__cta {
	background: linear-gradient(150deg, #23150E, var(--article-card));
}

.rhino-rail__cta p:not(.rhino-rail__title) {
	font-size: 14.5px;
	color: var(--article-muted);
	margin: 0 0 16px;
}

/* The card is a flex column so its children stretch to the content width without
   needing `width: 100%`. That matters because the theme's universal
   `box-sizing: border-box` lives in style.css, which inc/enqueue.php never
   enqueues — so elements compute as content-box and `width: 100%` plus padding
   and border overflowed the card by exactly 36px (32px padding + 4px border).
   `align-self: stretch` is immune to the box model, so this holds either way. */
.rhino-rail__cta {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.rhino-rail__btn {
	display: flex;
	width: auto;
	align-self: stretch;
	justify-content: center;
	padding: 14px 16px;
	font-size: 13px;
	letter-spacing: 0.06em;
	white-space: nowrap;
	min-width: 0;
}

.rhino-rail__phone {
	display: block;
	margin-top: 12px;
	text-align: center;
	font-size: 13px;
	color: var(--article-dim);
	text-decoration: none;
}

.rhino-rail__phone strong {
	color: var(--brand);
}

.rhino-author-mini {
	display: flex;
	gap: 12px;
	align-items: center;
}

.rhino-author-mini__av {
	width: 40px;
	height: 40px;
	font-size: 15px;
}

.rhino-author-mini__name {
	font-size: 14.5px;
	color: var(--article-heading);
	font-weight: 600;
}

.rhino-author-mini__role {
	font-size: 12.5px;
	color: var(--article-dim);
}

/* --------------------------------------------------------------------------
   Mid-article CTA
   Emitted by seo-tools/bin/md-to-wp.py from a [CTA: ...] marker.
   -------------------------------------------------------------------------- */
.rhino-single__content .rhino-inline-cta {
	margin: 44px 0;
	padding: 28px;
	background: linear-gradient(135deg, #1C1310, #191919);
	border: 1px solid var(--article-rule);
	border-left: 3px solid var(--red, #AE090A);
	border-radius: 12px;
}

.rhino-single__content .rhino-inline-cta h3 {
	font-size: 21px;
	margin: 0 0 10px;
	padding-top: 0;
	border-top: 0;
}

.rhino-single__content .rhino-inline-cta p {
	margin: 0 0 18px;
	font-size: 16px;
	color: var(--article-muted);
}

.rhino-single__content .rhino-inline-cta .wp-block-buttons {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.rhino-single__content .rhino-inline-cta .wp-block-button__link {
	display: inline-block;
	border-radius: 9999px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	text-decoration: none;
	padding: 13px 26px;
	border: 2px solid transparent;
	transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.rhino-single__content .rhino-inline-cta .is-style-fill .wp-block-button__link {
	background: var(--red, #AE090A);
	color: #fff;
}

.rhino-single__content .rhino-inline-cta .is-style-fill .wp-block-button__link:hover {
	background: #C40B0C;
	transform: translateY(-2px);
}

.rhino-single__content .rhino-inline-cta .is-style-outline .wp-block-button__link {
	background: transparent;
	border-color: var(--article-rule);
	color: var(--article-heading);
}

.rhino-single__content .rhino-inline-cta .is-style-outline .wp-block-button__link:hover {
	border-color: var(--brand);
	color: var(--brand);
}

/* --------------------------------------------------------------------------
   Editorial placeholders — visible in draft, must never ship
   -------------------------------------------------------------------------- */
.rhino-single__content .seo-image-placeholder,
.rhino-single__content .seo-toc-placeholder {
	background: rgba(174, 9, 10, 0.14);
	border: 1px dashed #AE090A;
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 15px;
	color: #FFC9C9;
}

/* --------------------------------------------------------------------------
   Tags
   -------------------------------------------------------------------------- */
.rhino-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 48px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid var(--article-rule);
}

.rhino-single__tags li {
	margin: 0;
}

.rhino-single__tags a {
	display: inline-block;
	padding: 6px 13px;
	border: 1px solid var(--article-rule);
	border-radius: 9999px;
	font-size: 13px;
	text-decoration: none;
	color: var(--article-muted);
}

.rhino-single__tags a:hover {
	border-color: var(--brand);
	color: var(--brand);
}

/* --------------------------------------------------------------------------
   Related posts
   -------------------------------------------------------------------------- */
.rhino-related {
	background: var(--article-page);
	border-top: 1px solid var(--article-rule);
	padding: 72px 0;
}

.rhino-sec-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 30px;
}

.rhino-sec-head h2 {
	font-size: clamp(22px, 2.6vw, 30px);
	margin: 0;
	color: var(--article-heading);
}

.rhino-sec-head a {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	white-space: nowrap;
}

.rhino-cards {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(3, 1fr);
}

.rhino-card {
	background: var(--article-card);
	border: 1px solid var(--article-rule);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}

.rhino-card:hover,
.rhino-card:focus-visible {
	transform: translateY(-4px);
	border-color: var(--brand);
	background: var(--article-card-hover);
}

.rhino-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	background: #1C1C1C;
	overflow: hidden;
}

.rhino-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rhino-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 20px 22px;
	flex: 1;
}

.rhino-card__chip {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--brand);
}

.rhino-card__title {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 19px;
	line-height: 1.2;
	color: var(--article-heading);
}

.rhino-card__excerpt {
	font-size: 14.5px;
	color: var(--article-muted);
	line-height: 1.55;
}

.rhino-card__meta {
	margin-top: auto;
	font-size: 12px;
	color: var(--article-dim);
}

/* --------------------------------------------------------------------------
   Post navigation
   -------------------------------------------------------------------------- */
.rhino-single__nav {
	background: var(--article-bg);
	border-top: 1px solid var(--article-rule);
	padding: 40px 0;
}

.rhino-single__nav .nav-links {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr 1fr;
}

.rhino-single__nav a {
	display: block;
	max-width: none;
	padding: 20px 22px;
	border: 1px solid var(--article-rule);
	border-radius: 12px;
	background: var(--article-card);
	text-decoration: none;
}

.rhino-single__nav a:hover {
	border-color: var(--brand);
}

.rhino-single__nav .nav-next {
	text-align: right;
}

.rhino-single__nav-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--brand);
	margin-bottom: 6px;
}

.rhino-single__nav-title {
	color: var(--article-heading);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Closing CTA band — cream break after a long dark read
   -------------------------------------------------------------------------- */
.rhino-article-band {
	background: var(--light-relief, #FFF8F1);
	color: #141414;
	padding: 68px 0;
	text-align: center;
}

.rhino-article-band h2 {
	color: #141414;
	font-size: clamp(26px, 4vw, 42px);
	margin: 0 0 14px;
}

.rhino-article-band p {
	color: #3A3A3A;
	max-width: 54ch;
	margin: 0 auto 26px;
}

.rhino-cta-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

/* The cream band inverts the canvas, so the outline button needs dark ink rather
   than the orange-on-dark treatment used everywhere else on the site. */
.rhino-article-band .btn-outline {
	background: transparent;
	border-color: #C9BDB2;
	color: #141414;
}

.rhino-article-band .btn-outline:hover {
	background: #141414;
	border-color: #141414;
	color: var(--light-relief, #FFF8F1);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.rhino-article-layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	/* Rail moves above the article so the contents and CTA are seen first. */
	.rhino-rail {
		position: static;
		order: -1;
		grid-template-columns: 1fr 1fr;
	}

	.rhino-rail__card--toc {
		grid-column: 1 / -1;
	}

	.rhino-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.rhino-article-hero {
		padding-top: 104px;
	}

	.rhino-article-hero h1 {
		max-width: none;
	}

	.rhino-single__content > p,
	.rhino-single__content > ul,
	.rhino-single__content > ol {
		font-size: 17px;
	}

	.rhino-single__content > p:first-of-type {
		font-size: 19px;
	}

	.rhino-single__content h2 {
		margin: 36px 0 14px;
		padding-top: 20px;
	}

	.rhino-single__content th,
	.rhino-single__content td {
		padding: 10px;
		font-size: 15px;
	}

	.rhino-rail {
		grid-template-columns: 1fr;
	}

	.rhino-cards,
	.rhino-single__nav .nav-links {
		grid-template-columns: 1fr;
	}

	.rhino-single__nav .nav-next {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rhino-progress__bar,
	.rhino-card {
		transition: none;
	}

	.rhino-card:hover {
		transform: none;
	}
}