/* ==========================================================================
   Hans Developer — components & layout
   Loaded after style.css (tokens + base live there).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LAYOUT
   -------------------------------------------------------------------------- */

.hd-container {
	width: 100%;
	max-width: var(--hd-container);
	margin: 0 auto;
	padding: 0 var(--hd-gutter);
}

.hd-section { padding: var(--hd-section-y) 0; }
.hd-section--alt { background: var(--hd-bg-alt); }
.hd-section--tight { padding: 3rem 0; }

.hd-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}

@media (min-width: 1024px) {
	.hd-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 2.5rem; }
	.hd-layout--reading { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* --------------------------------------------------------------------------
   2. SIGNATURE ELEMENTS
   -------------------------------------------------------------------------- */

/* Thin blue accent bar above section titles */
.hd-accent-bar {
	display: block;
	width: 3rem;
	height: 4px;
	margin-bottom: 1.5rem;
	background: var(--hd-accent);
}

.hd-accent-bar--center { margin-left: auto; margin-right: auto; }
.hd-accent-bar--light { background: #fff; }

/* Tiny tracked uppercase label */
.hd-label {
	display: block;
	margin-bottom: 0.75rem;
	color: var(--hd-label);
	font-size: 0.6875rem;
	font-weight: 900;
	letter-spacing: 0.3em;
	line-height: 1.4;
	text-transform: uppercase;
}

.hd-label--accent { color: var(--hd-accent); }
.hd-label--light { color: rgba(255, 255, 255, 0.7); }
.hd-label--tight { letter-spacing: 0.2em; }

/* Section title: WORD <em>ACCENT.</em> */
.hd-title { margin-bottom: 1rem; }
.hd-title .accent {
	color: var(--hd-accent);
	font-style: italic;
}
.hd-title--light { color: #fff; }
.hd-title--light .accent { color: #93c5fd; }

.hd-lede {
	max-width: 46rem;
	color: var(--hd-body);
	font-size: 1.0625rem;
	font-weight: 500;
}

.hd-lede--light { color: rgba(255, 255, 255, 0.85); }

/* Corner badge, e.g. LIMITED OFFER */
.hd-corner-badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	padding: 0.4rem 0.85rem;
	background: var(--hd-accent);
	color: #fff;
	font-size: 0.5625rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Scroll progress bar */
.hd-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 0;
	height: 4px;
	background: var(--hd-accent);
	transition: width 0.1s linear;
	will-change: width;
}

/* --------------------------------------------------------------------------
   3. BUTTONS
   -------------------------------------------------------------------------- */

.hd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.95rem 1.75rem;
	border: 2px solid transparent;
	background: var(--hd-accent);
	color: #fff;
	font-family: var(--hd-font-body);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--hd-speed) var(--hd-ease),
	            color var(--hd-speed) var(--hd-ease),
	            border-color var(--hd-speed) var(--hd-ease),
	            transform var(--hd-speed) var(--hd-ease);
}

.hd-btn:hover { background: var(--hd-accent-hover); color: #fff; transform: translateY(-2px); }
.hd-btn:active { transform: translateY(0); }
.hd-btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }

.hd-btn--outline { background: transparent; border-color: var(--hd-text); color: var(--hd-text); }
.hd-btn--outline:hover { background: var(--hd-text); color: #fff; }

.hd-btn--light { background: #fff; color: var(--hd-primary); }
.hd-btn--light:hover { background: var(--hd-bg-alt); color: var(--hd-primary); }

.hd-btn--ghost-light { background: transparent; border-color: rgba(255,255,255,0.6); color: #fff; }
.hd-btn--ghost-light:hover { background: #fff; color: var(--hd-primary); }

.hd-btn--sm { padding: 0.7rem 1.15rem; font-size: 0.6875rem; }
.hd-btn--block { display: flex; width: 100%; }

/* Underline hover animation for text links */
.hd-link-underline {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--hd-accent);
	font-size: 0.75rem;
	font-weight: 900;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.hd-link-underline::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 0;
	height: 2px;
	background: var(--hd-accent);
	transition: width var(--hd-speed) var(--hd-ease);
}

.hd-link-underline:hover::after { width: 100%; }

/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */

.hd-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 900;
	transition: background var(--hd-speed) var(--hd-ease),
	            box-shadow var(--hd-speed) var(--hd-ease);
}

/* Transparent state (top of page) */
.hd-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 44, 95, 0.65), transparent);
	transition: opacity var(--hd-speed) var(--hd-ease);
	pointer-events: none;
}

/* Scrolled state */
.hd-header.is-scrolled {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	box-shadow: 0 1px 0 var(--hd-border), 0 8px 24px rgba(15, 23, 42, 0.06);
}

.hd-header.is-scrolled::before { opacity: 0; }

.hd-header__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--hd-header-h);
}

/* Logo inverts to white while transparent */
.hd-header__logo img,
.hd-header__logo svg {
	max-height: 42px;
	width: auto;
	filter: brightness(0) invert(1);
	transition: filter var(--hd-speed) var(--hd-ease);
}

.hd-header.is-scrolled .hd-header__logo img,
.hd-header.is-scrolled .hd-header__logo svg { filter: none; }

.hd-header__logo-text {
	color: #fff;
	font-family: var(--hd-font-display);
	font-size: 1.125rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	transition: color var(--hd-speed) var(--hd-ease);
}

.hd-header.is-scrolled .hd-header__logo-text { color: var(--hd-primary); }

/* Desktop nav */
.hd-nav { display: none; }

@media (min-width: 1024px) {
	.hd-nav { display: block; }
}

.hd-nav ul {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hd-nav li { margin: 0; position: relative; }

.hd-nav a {
	position: relative;
	display: block;
	padding: 0.35rem 0;
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: color var(--hd-speed) var(--hd-ease);
}

.hd-header.is-scrolled .hd-nav a { color: var(--hd-text); }

.hd-nav a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: currentColor;
	transition: width var(--hd-speed) var(--hd-ease);
}

.hd-nav a:hover::after,
.hd-nav .current-menu-item > a::after,
.hd-nav .current_page_item > a::after { width: 100%; }

.hd-header.is-scrolled .hd-nav a:hover,
.hd-header.is-scrolled .hd-nav .current-menu-item > a { color: var(--hd-accent); }

/* Sub-menus */
.hd-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	display: block;
	min-width: 220px;
	padding: 0.5rem 0;
	background: #fff;
	border: 1px solid var(--hd-border);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--hd-speed) var(--hd-ease),
	            transform var(--hd-speed) var(--hd-ease),
	            visibility var(--hd-speed);
}

.hd-nav li:hover > .sub-menu,
.hd-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.hd-nav .sub-menu a { padding: 0.6rem 1.25rem; color: var(--hd-text) !important; }
.hd-nav .sub-menu a::after { display: none; }
.hd-nav .sub-menu a:hover { background: var(--hd-bg-alt); color: var(--hd-accent) !important; }

/* Header actions */
.hd-header__actions { display: flex; align-items: center; gap: 0.75rem; }

.hd-call {
	display: none;
	align-items: center;
	gap: 0.5rem;
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: color var(--hd-speed) var(--hd-ease);
}

@media (min-width: 640px) { .hd-call { display: inline-flex; } }

.hd-header.is-scrolled .hd-call { color: var(--hd-text); }
.hd-call:hover { color: var(--hd-accent); }

.hd-pulse {
	position: relative;
	width: 8px;
	height: 8px;
	background: var(--hd-success);
	flex-shrink: 0;
}

.hd-pulse::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--hd-success);
	animation: hd-pulse 2s ease-out infinite;
}

@keyframes hd-pulse {
	0%   { opacity: 0.8; transform: scale(1); }
	100% { opacity: 0;   transform: scale(3); }
}

.hd-header__cta { display: none; }
@media (min-width: 480px) { .hd-header__cta { display: inline-flex; } }

/* Transparent-state CTA is outlined; scrolled turns solid blue */
.hd-header:not(.is-scrolled) .hd-header__cta {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.7);
	color: #fff;
}

.hd-header:not(.is-scrolled) .hd-header__cta:hover { background: #fff; color: var(--hd-primary); }

/* Hamburger */
.hd-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	border: 0;
	background: transparent;
	cursor: pointer;
}

@media (min-width: 1024px) { .hd-burger { display: none; } }

.hd-burger span {
	display: block;
	height: 2px;
	width: 100%;
	background: #fff;
	transition: background var(--hd-speed) var(--hd-ease),
	            transform var(--hd-speed) var(--hd-ease),
	            opacity var(--hd-speed) var(--hd-ease);
}

.hd-header.is-scrolled .hd-burger span { background: var(--hd-text); }

.hd-burger[aria-expanded="true"] span { background: var(--hd-text); }
.hd-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hd-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile panel */
.hd-mobile {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 950;
	width: min(340px, 86vw);
	padding: 5.5rem 1.75rem 2rem;
	background: #fff;
	border-left: 1px solid var(--hd-border);
	box-shadow: -20px 0 50px rgba(15, 23, 42, 0.15);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.35s var(--hd-ease);
}

.hd-mobile.is-open { transform: translateX(0); }

.hd-mobile ul { margin: 0 0 2rem; padding: 0; list-style: none; }
.hd-mobile li { margin: 0; border-bottom: 1px solid var(--hd-border-light); }

.hd-mobile a {
	display: block;
	padding: 1rem 0;
	color: var(--hd-text);
	font-family: var(--hd-font-display);
	font-size: 0.9375rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.hd-mobile a:hover { color: var(--hd-accent); }
.hd-mobile .sub-menu { margin: 0 0 0.5rem 1rem; }
.hd-mobile .sub-menu a { font-size: 0.8125rem; font-weight: 600; }

.hd-overlay {
	position: fixed;
	inset: 0;
	z-index: 940;
	background: rgba(0, 44, 95, 0.6);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--hd-speed) var(--hd-ease), visibility var(--hd-speed);
}

.hd-overlay.is-open { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */

.hd-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 42vh;
	padding: calc(var(--hd-header-h) + 4rem) 0 3.5rem;
	background: var(--hd-primary);
	overflow: hidden;
}

.hd-hero--tall { min-height: 62vh; }

.hd-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

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

.hd-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 20, 45, 0.92) 0%, rgba(0, 20, 45, 0.55) 50%, rgba(0, 20, 45, 0.35) 100%);
}

.hd-hero__inner { position: relative; z-index: 1; width: 100%; }
.hd-hero .hd-title { color: #fff; }
.hd-hero .hd-title .accent { color: #93c5fd; }

.hd-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-top: 1.25rem;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   6. BREADCRUMBS
   -------------------------------------------------------------------------- */

.hd-breadcrumb {
	margin-bottom: 1.25rem;
	color: var(--hd-label);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.hd-breadcrumb a { color: inherit; }
.hd-breadcrumb a:hover { color: var(--hd-accent); }
.hd-breadcrumb--light,
.hd-breadcrumb--light a { color: rgba(255, 255, 255, 0.75); }
.hd-breadcrumb--light a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   7. POST CARDS
   -------------------------------------------------------------------------- */

.hd-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 640px)  { .hd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px)  { .hd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.hd-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--hd-border);
	transition: border-color var(--hd-speed) var(--hd-ease),
	            box-shadow var(--hd-speed) var(--hd-ease),
	            transform var(--hd-speed) var(--hd-ease);
}

.hd-card:hover {
	border-color: var(--hd-accent);
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
	transform: translateY(-4px);
}

.hd-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--hd-bg-alt);
}

.hd-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--hd-ease);
}

.hd-card:hover .hd-card__media img { transform: scale(1.1); }

.hd-card__cat {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	padding: 0.4rem 0.85rem;
	background: var(--hd-accent);
	color: #fff;
	font-size: 0.5625rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.hd-card__cat:hover { background: var(--hd-accent-hover); color: #fff; }

.hd-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1.5rem;
}

.hd-card__title {
	margin: 0 0 0.75rem;
	font-size: 1.1875rem;
	line-height: 1.15;
}

.hd-card__title a { color: var(--hd-text); }
.hd-card__title a:hover { color: var(--hd-accent); }

.hd-card__excerpt {
	flex: 1 1 auto;
	margin: 0 0 1.25rem;
	color: var(--hd-body);
	font-size: 0.9375rem;
}

.hd-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	color: var(--hd-muted);
	font-size: 0.625rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.hd-meta--spaced { margin-bottom: 0.85rem; }

.hd-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.15rem;
	border-top: 1px solid var(--hd-border-light);
}

/* --------------------------------------------------------------------------
   8. ARTICLE / PROSE
   -------------------------------------------------------------------------- */

.hd-article { max-width: var(--hd-reading); }
.hd-layout .hd-article { max-width: none; }

.hd-prose { font-size: 1.0625rem; line-height: 1.8; }

.hd-prose > h2 { margin-top: 2.75rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.hd-prose > h3 { margin-top: 2.25rem; font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
.hd-prose > h4 { margin-top: 2rem; }
.hd-prose > h2:first-child,
.hd-prose > h3:first-child { margin-top: 0; }

.hd-prose ul, .hd-prose ol { padding-left: 1.5rem; }
.hd-prose li::marker { color: var(--hd-accent); font-weight: 700; }

.hd-prose a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

.hd-prose img,
.hd-prose figure { margin: 2rem 0; }

.hd-prose > *:last-child { margin-bottom: 0; }

/* Author box */
.hd-author {
	display: flex;
	gap: 1.25rem;
	margin-top: 3rem;
	padding: 1.75rem;
	background: var(--hd-bg-alt);
	border: 1px solid var(--hd-border);
}

.hd-author__avatar img { width: 64px; height: 64px; object-fit: cover; }
.hd-author__name { margin: 0 0 0.35rem; font-size: 1rem; }
.hd-author__bio { margin: 0; font-size: 0.9375rem; }

/* Share */
.hd-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--hd-border);
}

.hd-share__label {
	color: var(--hd-label);
	font-size: 0.625rem;
	font-weight: 900;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.hd-share a {
	color: var(--hd-text);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.hd-share a:hover { color: var(--hd-accent); }

/* Tags */
.hd-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }

.hd-tags a {
	padding: 0.4rem 0.8rem;
	background: var(--hd-bg-alt);
	border: 1px solid var(--hd-border);
	color: var(--hd-label);
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.hd-tags a:hover { background: var(--hd-accent); border-color: var(--hd-accent); color: #fff; }

/* --------------------------------------------------------------------------
   9. SIDEBAR
   -------------------------------------------------------------------------- */

.hd-sidebar { display: flex; flex-direction: column; gap: 2rem; }

@media (min-width: 1024px) {
	.hd-sidebar { position: sticky; top: calc(var(--hd-header-h) + 1.5rem); }
}

.hd-widget {
	padding: 1.15rem;
	background: #fff;
	border: 1px solid var(--hd-border);
}

.hd-widget--dark {
	position: relative;
	background: var(--hd-primary);
	border-color: var(--hd-primary);
	color: rgba(255, 255, 255, 0.85);
}

.hd-widget__title {
	margin: 0 0 0.9rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--hd-border);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
}

.hd-widget--dark .hd-widget__title {
	border-color: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.hd-widget ul { margin: 0; padding: 0; list-style: none; }
.hd-widget li { margin: 0; padding: 0.6rem 0; border-bottom: 1px solid var(--hd-border-light); font-size: 0.9375rem; }
.hd-widget li:last-child { border-bottom: 0; padding-bottom: 0; }
.hd-widget li a { color: var(--hd-text); font-weight: 600; }
.hd-widget li a:hover { color: var(--hd-accent); }

/* Recent-post list with thumbnails */
.hd-mini { display: flex; gap: 0.85rem; align-items: flex-start; }
.hd-mini__thumb { flex: 0 0 72px; width: 72px; height: 56px; overflow: hidden; background: var(--hd-bg-alt); }
.hd-mini__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hd-mini__title { display: block; font-size: 0.875rem; font-weight: 700; line-height: 1.35; }
.hd-mini__date { display: block; margin-top: 0.25rem; color: var(--hd-muted); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   10. FORMS
   -------------------------------------------------------------------------- */

.hd-field { margin-bottom: 1rem; }

.hd-field__label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--hd-label);
	font-size: 0.625rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.hd-form--dark .hd-field__label { color: rgba(255, 255, 255, 0.65); }

.hd-input,
.hd-select,
.hd-textarea,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select {
	display: block;
	width: 100%;
	padding: 0.8rem 0.95rem;
	background: #fff;
	border: 1px solid var(--hd-border);
	color: var(--hd-text);
	font-family: var(--hd-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
	transition: border-color var(--hd-speed) var(--hd-ease),
	            box-shadow var(--hd-speed) var(--hd-ease);
	-webkit-appearance: none;
	appearance: none;
}

textarea { min-height: 130px; resize: vertical; }

.hd-input:focus,
.hd-select:focus,
.hd-textarea:focus,
input:focus,
textarea:focus,
select:focus {
	outline: 0;
	border-color: var(--hd-accent);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.hd-input::placeholder,
textarea::placeholder { color: var(--hd-muted); }

.hd-select,
select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2364748b' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 12px 8px;
	padding-right: 2.25rem;
}

/* Dark form variant (sidebar / CTA on navy) */
.hd-form--dark .hd-input,
.hd-form--dark .hd-select,
.hd-form--dark .hd-textarea,
.hd-form--dark input[type="text"],
.hd-form--dark input[type="email"],
.hd-form--dark input[type="tel"],
.hd-form--dark select {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.25);
	color: #fff;
}

.hd-form--dark .hd-input::placeholder { color: rgba(255, 255, 255, 0.45); }
/* The dropdown list is painted by the OS, not by the form's dark surface, so
   the options need their own light palette. Both dark forms share it: this
   rule used to set near-black text while the sidebar rule further down set a
   navy background, and two classes beat one — so the options rendered
   near-black on navy and could not be read. */
.hd-form--dark .hd-select option,
.hd-form--dark select option {
	background-color: #ffffff;
	color: var(--hd-text);
}

.hd-form--dark .hd-input:focus,
.hd-form--dark .hd-select:focus {
	border-color: #93c5fd;
	box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.2);
}

/* Phone field with fixed +91 prefix */
.hd-phone { display: flex; }

.hd-phone__prefix {
	display: inline-flex;
	align-items: center;
	padding: 0 0.85rem;
	background: var(--hd-bg-alt);
	border: 1px solid var(--hd-border);
	border-right: 0;
	color: var(--hd-label);
	font-size: 0.9375rem;
	font-weight: 800;
	white-space: nowrap;
}

.hd-form--dark .hd-phone__prefix {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.25);
	color: rgba(255, 255, 255, 0.8);
}

/* Consent checkbox */
.hd-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-bottom: 1.15rem;
	color: var(--hd-label);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
}

.hd-form--dark .hd-consent { color: rgba(255, 255, 255, 0.7); }

.hd-consent input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0.2rem 0 0;
	flex-shrink: 0;
	accent-color: var(--hd-accent);
}

/* Honeypot — must never be visible or focusable */
.hd-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Submit + feedback */
.hd-form__msg {
	display: none;
	margin-top: 1rem;
	padding: 0.85rem 1rem;
	border-left: 4px solid;
	font-size: 0.875rem;
	font-weight: 600;
}

.hd-form__msg.is-visible { display: block; }
.hd-form__msg.is-success { background: rgba(22, 163, 74, 0.1); border-color: var(--hd-success); color: #15803d; }
.hd-form__msg.is-error   { background: rgba(220, 38, 38, 0.08); border-color: var(--hd-danger); color: #b91c1c; }

.hd-form--dark .hd-form__msg.is-success { background: rgba(22, 163, 74, 0.2); color: #86efac; }
.hd-form--dark .hd-form__msg.is-error   { background: rgba(220, 38, 38, 0.2); color: #fca5a5; }

.hd-spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50% !important;
	animation: hd-spin 0.7s linear infinite;
}

.is-loading .hd-spinner { display: inline-block; }

@keyframes hd-spin { to { transform: rotate(360deg); } }

/* Search form */
.hd-search { display: flex; }
.hd-search .hd-input { border-right: 0; }
.hd-search .hd-btn { flex-shrink: 0; padding-left: 1.15rem; padding-right: 1.15rem; }

/* --------------------------------------------------------------------------
   11. CTA BAND
   -------------------------------------------------------------------------- */

.hd-cta {
	position: relative;
	padding: 3.5rem 0;
	background: linear-gradient(135deg, #002c5f 0%, #001d40 70%, #0a4080 100%);
	color: rgba(255, 255, 255, 0.85);
	overflow: hidden;
}

.hd-cta::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 45%;
	height: 100%;
	background: linear-gradient(135deg, rgba(37, 99, 235, 0.35), transparent 70%);
	pointer-events: none;
}

.hd-cta__inner {
        align-items: center;
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
}

@media (min-width: 900px) {
	.hd-cta__inner {
        align-items: center; grid-template-columns: 1fr minmax(0, 420px); gap: 4rem; }
}

/* Glass card wrapper for the CTA form */
.hd-glass {
	padding: 1.75rem;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.18);
}

/* --------------------------------------------------------------------------
   12. PAGINATION
   -------------------------------------------------------------------------- */

.hd-pagination { margin-top: 3rem; }

.hd-pagination .nav-links,
.hd-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: center;
}

.hd-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 0.75rem;
	border: 1px solid var(--hd-border);
	color: var(--hd-text);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: all var(--hd-speed) var(--hd-ease);
}

.hd-pagination .page-numbers:hover { border-color: var(--hd-accent); color: var(--hd-accent); }

.hd-pagination .page-numbers.current {
	background: var(--hd-accent);
	border-color: var(--hd-accent);
	color: #fff;
}

.hd-pagination .page-numbers.dots { border-color: transparent; }

/* Post-to-post navigation */
.hd-postnav {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	margin-top: 3rem;
	background: var(--hd-border);
	border: 1px solid var(--hd-border);
}

@media (min-width: 640px) { .hd-postnav { grid-template-columns: 1fr 1fr; } }

.hd-postnav a {
	display: block;
	padding: 1.5rem;
	background: #fff;
	transition: background var(--hd-speed) var(--hd-ease);
}

.hd-postnav a:hover { background: var(--hd-bg-alt); }
.hd-postnav__dir { display: block; margin-bottom: 0.5rem; color: var(--hd-muted); font-size: 0.625rem; font-weight: 900; letter-spacing: 0.25em; text-transform: uppercase; }
.hd-postnav__title { color: var(--hd-text); font-family: var(--hd-font-display); font-size: 0.9375rem; font-weight: 800; line-height: 1.3; text-transform: uppercase; }
.hd-postnav__next { text-align: right; }

/* --------------------------------------------------------------------------
   13. COMMENTS
   -------------------------------------------------------------------------- */

.hd-comments { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--hd-border); }
.hd-comments__title { margin-bottom: 2rem; font-size: 1.25rem; }
.hd-comments ol.comment-list { margin: 0 0 2.5rem; padding: 0; list-style: none; }
.hd-comments ol.children { margin: 1.5rem 0 0 1.5rem; padding: 0; list-style: none; }
@media (min-width: 640px) { .hd-comments ol.children { margin-left: 3rem; } }

.hd-comment-body {
	padding: 1.25rem;
	margin-bottom: 1.25rem;
	background: var(--hd-bg-alt);
	border: 1px solid var(--hd-border);
}

.hd-comment-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.hd-comment-meta img { width: 40px; height: 40px; }
.hd-comment-author { color: var(--hd-text); font-size: 0.875rem; font-weight: 800; }
.hd-comment-date { color: var(--hd-muted); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
.hd-comment-body p:last-child { margin-bottom: 0; }
.comment-reply-link { font-size: 0.625rem; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; }
.comment-respond { padding: 1.75rem; background: var(--hd-bg-alt); border: 1px solid var(--hd-border); }
.comment-reply-title { font-size: 1rem; margin-bottom: 1.25rem; }
.comment-form label { display: block; margin-bottom: 0.4rem; color: var(--hd-label); font-size: 0.625rem; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; }
.comment-form p { margin-bottom: 1rem; }
.comment-form input[type="submit"] { width: auto; padding: 0.95rem 1.75rem; background: var(--hd-accent); border: 0; color: #fff; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; }
.comment-form input[type="submit"]:hover { background: var(--hd-accent-hover); }
.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; }
.comment-form-cookies-consent input { width: auto; }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */

.hd-footer { background: var(--hd-primary); color: rgba(255, 255, 255, 0.75); }
.hd-footer__main { padding: 3.5rem 0 2.5rem; }

.hd-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

@media (min-width: 768px) { .hd-footer__grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }

.hd-footer__badge {
	display: inline-block;
	margin-bottom: 1.15rem;
	padding: 0.45rem 0.9rem;
	background: var(--hd-accent);
	color: #fff;
	font-family: var(--hd-font-display);
	font-size: 0.6875rem;
	font-weight: 900;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}

.hd-footer h3 {
	margin-bottom: 1.15rem;
	color: #fff;
	font-size: 0.75rem;
	letter-spacing: 0.25em;
}

.hd-footer p { font-size: 0.9375rem; }
.hd-footer ul { margin: 0; padding: 0; list-style: none; }
.hd-footer li { margin-bottom: 0.85rem; font-size: 0.9375rem; }
.hd-footer a { color: rgba(255, 255, 255, 0.75); }
.hd-footer a:hover { color: #fff; }

.hd-footer__loc-name { display: block; color: #fff; font-weight: 800; font-size: 0.875rem; }
.hd-footer__loc-addr { display: block; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); }

.hd-footer__phone {
	display: inline-block;
	margin-bottom: 0.5rem;
	color: #fff;
	font-family: var(--hd-font-display);
	font-size: 1.5rem;
	font-weight: 900;
	letter-spacing: -0.02em;
}

.hd-footer__phone:hover { color: #93c5fd; }

.hd-social { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }

.hd-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	transition: background var(--hd-speed) var(--hd-ease),
	            border-color var(--hd-speed) var(--hd-ease),
	            transform var(--hd-speed) var(--hd-ease);
}

.hd-social a:hover { background: var(--hd-accent); border-color: var(--hd-accent); transform: translateY(-2px); }
.hd-social svg { width: 18px; height: 18px; fill: currentColor; }

.hd-footer__bottom {
	padding: 1.25rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.hd-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hd-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* --------------------------------------------------------------------------
   15. STICKY BOTTOM NAV (mobile)
   -------------------------------------------------------------------------- */

.hd-sticky-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 880;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: var(--hd-primary);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 1024px) { .hd-sticky-nav { display: none; } }

.hd-sticky-nav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	padding: 0.7rem 0.5rem;
	color: #fff;
	font-size: 0.5625rem;
	font-weight: 900;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.hd-sticky-nav a + a { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.hd-sticky-nav a:hover { background: var(--hd-accent); color: #fff; }
.hd-sticky-nav svg { width: 18px; height: 18px; fill: currentColor; }

body.has-sticky-nav { padding-bottom: 62px; }
@media (min-width: 1024px) { body.has-sticky-nav { padding-bottom: 0; } }

/* --------------------------------------------------------------------------
   16. MODAL
   -------------------------------------------------------------------------- */

.hd-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: rgba(0, 44, 95, 0.9);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--hd-speed) var(--hd-ease), visibility var(--hd-speed);
}

.hd-modal.is-open { opacity: 1; visibility: visible; }

.hd-modal__box {
	position: relative;
	width: 100%;
	max-width: 460px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 2rem;
	background: var(--hd-primary);
	border: 1px solid rgba(255, 255, 255, 0.15);
	transform: translateY(16px);
	transition: transform var(--hd-speed) var(--hd-ease);
}

.hd-modal.is-open .hd-modal__box { transform: translateY(0); }

.hd-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 36px;
	height: 36px;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.7);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: color var(--hd-speed) var(--hd-ease);
}

.hd-modal__close:hover { color: #fff; }

/* --------------------------------------------------------------------------
   17. EMPTY STATE / 404
   -------------------------------------------------------------------------- */

.hd-empty { max-width: 40rem; padding: 3rem 0; }

.hd-404-code {
	margin: 0 0 0.5rem;
	color: var(--hd-border);
	font-family: var(--hd-font-display);
	font-size: clamp(5rem, 18vw, 11rem);
	font-weight: 900;
	line-height: 0.85;
	letter-spacing: -0.05em;
}

/* --------------------------------------------------------------------------
   18. ELEMENTOR COMPATIBILITY
   -------------------------------------------------------------------------- */

/* Let Elementor's own containers span full width inside our templates. */
.hd-elementor-canvas > .elementor { width: 100%; }

/* Elementor sets its own radii; honour them inside Elementor-managed regions
   rather than forcing our global zero-radius rule. */
.elementor *,
.elementor *::before,
.elementor *::after { border-radius: revert !important; }

/* Never let the fixed header cover Elementor's editor UI. */
body.elementor-editor-active .hd-header,
body.elementor-editor-active .hd-progress,
body.elementor-editor-active .hd-sticky-nav { position: relative; }

/* Elementor full-width sections inside a constrained article column */
.hd-prose .elementor-section.elementor-section-full_width { margin-left: 0; margin-right: 0; }

/* ==========================================================================
   19. MAGAZINE REDESIGN
   Added in the premium redesign pass. Everything below supersedes the older
   .hd-card / .hd-grid styles, which are kept above for any legacy markup.
   ========================================================================== */

/* --------------------------------------------------------------------------
   19.1 MASTHEAD — compact dark band for listing pages
   -------------------------------------------------------------------------- */

.hd-masthead {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100px;
	margin-top: var(--hd-header-h);
	padding: 1.5rem 0;
	background: linear-gradient(135deg, #002c5f 0%, #001d40 70%, #0a4080 100%);
	overflow: hidden;
}

/* Faint diagonal sheen so the flat dark band still reads as designed */
.hd-masthead::before {
	content: '';
	position: absolute;
	top: -40%;
	right: -10%;
	width: 55%;
	height: 180%;
	background: linear-gradient(135deg, rgba(37, 99, 235, 0.22), transparent 62%);
	transform: skewX(-12deg);
	pointer-events: none;
}

.hd-masthead::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--hd-accent), transparent 60%);
}

.hd-masthead__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.hd-masthead__kicker {
	display: block;
	margin-bottom: 0.6rem;
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.625rem;
	font-weight: 900;
	letter-spacing: 0.42em;
	text-transform: uppercase;
}

.hd-masthead__title {
	margin: 0;
	color: #fff;
	font-family: var(--hd-font-display);
	font-size: clamp(2.25rem, 7vw, 3.75rem);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.hd-masthead__title .accent { color: #fff; font-style: normal; }

.hd-masthead__sub {
	max-width: 44rem;
	margin: 0.9rem 0 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.9375rem;
	font-weight: 500;
}

.hd-masthead__meta {
	margin-top: 0.85rem;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.625rem;
	font-weight: 900;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

@media (min-width: 1024px) {
	.hd-masthead { min-height: 140px; padding: 1.75rem 0; }
}

/* --------------------------------------------------------------------------
   19.2 MAGAZINE GRID
   -------------------------------------------------------------------------- */

.hd-mag-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.hd-cell { min-width: 0; }

@media (min-width: 768px) {
	.hd-mag-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
	.hd-cell--full { grid-column: span 6; }
	.hd-cell--two  { grid-column: span 3; }
	.hd-cell--one  { grid-column: span 3; }
}

@media (min-width: 1024px) {
	.hd-cell--two { grid-column: span 4; }
	.hd-cell--one { grid-column: span 2; }
	.hd-mag-grid--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hd-mag-grid--thirds .hd-cell { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   19.3 CARD — shared base
   -------------------------------------------------------------------------- */

.hd-mag {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--hd-border-light);
	overflow: hidden;
	transition: box-shadow 0.4s var(--hd-ease),
	            transform 0.4s var(--hd-ease),
	            border-color 0.4s var(--hd-ease);
}

.hd-mag:hover {
	border-color: var(--hd-border);
	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.10);
	transform: translateY(-4px);
}

.hd-mag__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--hd-primary);
	aspect-ratio: 16 / 10;
	flex: 0 0 auto;
	/* line-height 0 stops the inline-image baseline gap creating a hairline
	   strip of card background under the image. */
	line-height: 0;
	font-size: 0;
}

.hd-mag__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition: transform 0.7s var(--hd-ease);
	will-change: transform;
}

/* Featured art is usually composed with the subject high in the frame, and
   the bottom third is covered by the scrim and headline. Anchor to the top so
   the car - and any baked-in title graphic - stays visible. */
.hd-mag--featured .hd-mag__media img { object-position: center top; }

.hd-mag--horizontal .hd-mag__media img,
.hd-mag--large .hd-mag__media img,
.hd-mag--small .hd-mag__media img { object-position: center center; }

.hd-mag:hover .hd-mag__media img { transform: scale(1.08); }

/* Category badge sits above the stretched link */
.hd-mag__cat {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	padding: 5px 12px;
	background: var(--hd-primary);
	color: #fff;
	font-size: 0.5625rem;
	font-weight: 900;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	transition: background 0.3s var(--hd-ease);
}

.hd-mag__cat:hover { background: var(--hd-accent); color: #fff; }

.hd-mag__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.45rem;
	padding: 1rem;
}

.hd-mag__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.6rem;
	color: var(--hd-muted);
	font-size: 0.5625rem;
	font-weight: 900;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}

.hd-mag__meta--light { color: rgba(255, 255, 255, 0.75); }

.hd-mag__title {
	margin: 0;
	color: var(--hd-text);
	font-family: var(--hd-font-display);
	font-size: 1.0625rem;
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	transition: color 0.3s var(--hd-ease);
}

.hd-mag__title a { color: inherit; }
.hd-mag:hover .hd-mag__title { color: var(--hd-accent); }

/* Stretched link: makes the entire card clickable without nesting anchors */
.hd-mag__link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
}

.hd-mag__excerpt {
	margin: 0;
	color: var(--hd-label);
	font-size: 0.875rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   19.4 CARD — featured (title overlaid on the image)
   -------------------------------------------------------------------------- */

.hd-mag--featured {
	border: 0;
	background: var(--hd-primary);
}

.hd-mag--featured .hd-mag__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

.hd-mag--featured .hd-mag__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(0, 30, 66, 0.94) 0%,
		rgba(0, 30, 66, 0.66) 42%,
		rgba(0, 30, 66, 0.20) 100%);
	transition: opacity 0.5s var(--hd-ease);
}

.hd-mag--featured .hd-mag__body {
	position: relative;
	z-index: 1;
	justify-content: flex-end;
	min-height: 240px;
	padding: 1.25rem;
}

.hd-mag--featured .hd-mag__title {
	color: #fff;
	font-size: clamp(1.4rem, 4.2vw, 2.35rem);
	line-height: 1.05;
}

.hd-mag--featured:hover .hd-mag__title { color: #fff; }

.hd-mag--featured .hd-mag__excerpt {
	color: rgba(255, 255, 255, 0.8);
	-webkit-line-clamp: 2;
	line-clamp: 2;
	max-width: 46rem;
}

.hd-mag--featured:hover { transform: none; box-shadow: none; }
.hd-mag--featured:hover .hd-mag__media img { transform: scale(1.03); filter: brightness(1.06); }

@media (min-width: 1024px) {
	.hd-mag--featured .hd-mag__body { min-height: 360px; padding: 1.75rem; }
}

/* --------------------------------------------------------------------------
   19.5 CARD — horizontal (newspaper feature)
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
	.hd-mag--horizontal { flex-direction: row; align-items: stretch; }

	.hd-mag--horizontal .hd-mag__media {
		flex: 0 0 40%;
		width: 40%;
		aspect-ratio: auto;
		min-height: 260px;
	}

	.hd-mag--horizontal .hd-mag__body {
		flex: 1 1 60%;
		justify-content: center;
		padding: 1.5rem 1.75rem;
	}

	.hd-mag--horizontal .hd-mag__title { font-size: 1.5rem; }

	.hd-mag--horizontal .hd-mag__excerpt {
		font-size: 0.9375rem;
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}
}

/* --------------------------------------------------------------------------
   19.6 CARD — large / small
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.hd-mag--large .hd-mag__media { aspect-ratio: 16 / 9; }
	.hd-mag--large .hd-mag__body { padding: 1.25rem; }
	.hd-mag--large .hd-mag__title { font-size: 1.375rem; }
	.hd-mag--large .hd-mag__excerpt { -webkit-line-clamp: 3; line-clamp: 3; }

	.hd-mag--small .hd-mag__title { font-size: 0.9375rem; }
}

/* A small card usually shares a row with a taller one. Let its image absorb
   the extra height rather than leaving dead white space under the title. */
@media (min-width: 768px) {
	.hd-mag--small .hd-mag__media {
		flex: 1 1 auto;
		aspect-ratio: auto;
		min-height: 180px;
	}

	.hd-mag--small .hd-mag__body { flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   19.7 PLACEHOLDER — posts with no featured image
   -------------------------------------------------------------------------- */

/* The placeholder state is set in PHP (has_post_thumbnail), not sniffed from
   the image URL, so it works regardless of :has() support. */
.hd-mag__media--placeholder {
	background: linear-gradient(135deg, #002c5f 0%, #001d40 70%, #0a4080 100%);
}

.hd-mag__media--placeholder img { opacity: 0.20; }

.hd-mag__media--placeholder::after {
	content: 'HANS HYUNDAI';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--hd-font-display);
	font-size: 0.75rem;
	font-weight: 900;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	text-indent: 0.4em;
	pointer-events: none;
}

.hd-mag--featured .hd-mag__media--placeholder::after { font-size: 1rem; }

/* --------------------------------------------------------------------------
   19.8 PAGINATION
   -------------------------------------------------------------------------- */

.hd-pagination { margin-top: 2.25rem; }

.hd-pagination .page-numbers {
	min-width: 46px;
	height: 46px;
	border-color: var(--hd-border);
	font-family: var(--hd-font-display);
	font-weight: 900;
	letter-spacing: 0.08em;
}

.hd-pagination .page-numbers.current {
	background: var(--hd-primary);
	border-color: var(--hd-primary);
	color: #fff;
}

.hd-pagination .page-numbers:hover:not(.current):not(.dots) {
	background: var(--hd-accent);
	border-color: var(--hd-accent);
	color: #fff;
}

/* --------------------------------------------------------------------------
   19.9 SIDEBAR — premium widgets
   -------------------------------------------------------------------------- */

.hd-sidebar { gap: 1.25rem; }

.hd-widget--accented { border-top: 3px solid var(--hd-accent); }

.hd-widget--form {
	position: relative;
	background: var(--hd-primary);
	border-color: var(--hd-primary);
	padding-top: 1.9rem;
}

.hd-widget__display {
	margin: 0 0 0.5rem;
	color: #fff;
	font-family: var(--hd-font-display);
	font-size: 1.35rem;
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.hd-widget__display .accent { color: #7fb0ff; font-style: italic; }

.hd-widget__intro {
	margin: 0 0 1.35rem;
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.8125rem;
	line-height: 1.6;
}

/* Underline-style fields, matching the landing page hero form */
.hd-widget--form .hd-field { margin-bottom: 0.9rem; }

.hd-widget--form .hd-field__label {
	color: rgba(255, 255, 255, 0.45);
	font-size: 0.5625rem;
	letter-spacing: 0.25em;
}

.hd-widget--form .hd-input,
.hd-widget--form .hd-select {
	padding: 0.6rem 0;
	/* background-color, not the shorthand — see the note in section 21. */
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 0.9375rem;
}

.hd-widget--form .hd-input:focus,
.hd-widget--form .hd-select:focus {
	border-bottom-color: var(--hd-accent);
	box-shadow: none;
}

.hd-widget--form .hd-select {
	background-position: right 0 center;
	padding-right: 1.4rem;
}

.hd-widget--form .hd-phone__prefix {
	padding: 0 0.6rem 0 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.6);
}

.hd-widget--form .hd-consent {
	margin: 1.1rem 0;
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.6875rem;
}

.hd-widget--form .hd-btn { margin-top: 0.25rem; }

/* Recent-post list */
.hd-minilist { display: flex; flex-direction: column; gap: 0.25rem; }
.hd-minilist li { padding: 0.55rem 0; border-bottom: 1px solid var(--hd-border-light); }
.hd-minilist li:last-child { border-bottom: 0; padding-bottom: 0; }

.hd-mini { display: flex; gap: 0.9rem; align-items: flex-start; }

.hd-mini__thumb {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	overflow: hidden;
	background: var(--hd-bg-alt);
}

.hd-mini__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition: transform 0.5s var(--hd-ease);
}

.hd-mini:hover .hd-mini__thumb img { transform: scale(1.1); }

.hd-mini__text { display: block; min-width: 0; }

.hd-mini__title {
	display: block;
	color: var(--hd-text);
	font-family: var(--hd-font-display);
	font-size: 0.8125rem;
	font-weight: 800;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	transition: color 0.3s var(--hd-ease);
}

.hd-mini:hover .hd-mini__title { color: var(--hd-accent); }

.hd-mini__date {
	display: block;
	margin-top: 0.3rem;
	color: var(--hd-muted);
	font-size: 0.5625rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Category / tag pills */
.hd-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.hd-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.75rem;
	background: #fff;
	border: 1px solid var(--hd-border);
	color: var(--hd-label);
	font-size: 0.5625rem;
	font-weight: 900;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	transition: background 0.3s var(--hd-ease),
	            border-color 0.3s var(--hd-ease),
	            color 0.3s var(--hd-ease);
}

.hd-pill:hover {
	background: var(--hd-primary);
	border-color: var(--hd-primary);
	color: #fff;
}

.hd-pill__count { color: var(--hd-muted); font-size: 0.5625rem; }
.hd-pill:hover .hd-pill__count { color: rgba(255, 255, 255, 0.7); }

/* --------------------------------------------------------------------------
   19.10 SINGLE POST — hero
   -------------------------------------------------------------------------- */

.hd-posthero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 350px;
	padding: calc(var(--hd-header-h) + 3rem) 0 2.5rem;
	background: var(--hd-primary);
	overflow: hidden;
}

.hd-posthero--plain { min-height: 240px; }

.hd-posthero__media { position: absolute; inset: 0; }

.hd-posthero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.hd-posthero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(0, 30, 66, 0.95) 0%,
		rgba(0, 30, 66, 0.72) 45%,
		rgba(0, 30, 66, 0.35) 100%);
}

.hd-posthero__inner { position: relative; z-index: 1; width: 100%; }

.hd-posthero__cat {
	display: inline-block;
	margin-bottom: 1rem;
	padding: 5px 12px;
	background: var(--hd-accent);
	color: #fff;
	font-size: 0.5625rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.hd-posthero__cat:hover { background: #fff; color: var(--hd-primary); }

.hd-posthero__title {
	max-width: 22ch;
	margin: 0;
	color: #fff;
	font-family: var(--hd-font-display);
	font-size: clamp(1.75rem, 5.2vw, 3.25rem);
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -0.035em;
	text-transform: uppercase;
}

.hd-posthero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	margin-top: 1.25rem;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.625rem;
	font-weight: 900;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.hd-posthero__author { display: inline-flex; align-items: center; gap: 0.5rem; }
.hd-posthero__author img { width: 28px; height: 28px; object-fit: cover; }

@media (min-width: 1024px) {
	.hd-posthero { min-height: 500px; padding-bottom: 3.5rem; }
	.hd-posthero__title { max-width: 20ch; }
}

/* --------------------------------------------------------------------------
   19.11 SINGLE POST — prose
   -------------------------------------------------------------------------- */

.hd-layout--reading .hd-article { max-width: 760px; }

.hd-prose { color: #334155; font-size: 1.0625rem; line-height: 1.8; }

.hd-prose > h2 {
	position: relative;
	margin-top: 3rem;
	padding-left: 1rem;
	font-size: 1.5rem;
	letter-spacing: -0.025em;
}

.hd-prose > h2::before {
	content: '';
	position: absolute;
	top: 0.1em;
	bottom: 0.1em;
	left: 0;
	width: 4px;
	background: var(--hd-accent);
}

.hd-prose > h3 {
	margin-top: 2.4rem;
	font-size: 1.25rem;
	font-weight: 800;
}

.hd-prose blockquote {
	margin: 2.25rem 0;
	padding: 1.5rem 1.75rem;
	background: var(--hd-bg-alt);
	border-left: 4px solid var(--hd-accent);
	color: var(--hd-text);
	font-size: 1.125rem;
	font-style: italic;
	font-weight: 500;
}

.hd-prose blockquote p:last-child { margin-bottom: 0; }

/* Square blue bullets */
.hd-prose ul { list-style: none; padding-left: 0; }

.hd-prose ul > li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.65rem;
}

.hd-prose ul > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 7px;
	height: 7px;
	background: var(--hd-accent);
}

.hd-prose ol { padding-left: 1.4rem; }
.hd-prose ol > li::marker { color: var(--hd-accent); font-weight: 900; }

.hd-prose table th {
	background: var(--hd-primary);
	color: #fff;
	border-color: var(--hd-primary);
}

.hd-prose pre { background: #0f172a; color: #e2e8f0; }

.hd-prose a { color: var(--hd-accent); text-decoration: none; font-weight: 600; }
.hd-prose a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Full-bleed images inside the reading column */
.hd-prose .alignfull,
.hd-prose .alignwide {
	margin-left: 50%;
	transform: translateX(-50%);
	max-width: 100vw;
	width: 100vw;
}

@media (min-width: 1024px) {
	.hd-prose .alignwide { width: min(1000px, 92vw); }
	.hd-prose .alignfull { width: min(1200px, 94vw); }
}

/* --------------------------------------------------------------------------
   19.12 TAGS / SHARE / AUTHOR
   -------------------------------------------------------------------------- */

.hd-tagrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--hd-border);
}

.hd-tagrow__label {
	color: var(--hd-muted);
	font-size: 0.5625rem;
	font-weight: 900;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.hd-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem 1.25rem;
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--hd-border);
}

.hd-share__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.hd-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 0.85rem;
	background: #fff;
	border: 1px solid var(--hd-border);
	color: var(--hd-label);
	font-family: var(--hd-font-body);
	font-size: 0.5625rem;
	font-weight: 900;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.3s var(--hd-ease),
	            border-color 0.3s var(--hd-ease),
	            color 0.3s var(--hd-ease);
}

.hd-share__btn svg { width: 14px; height: 14px; fill: currentColor; }

.hd-share__btn:hover {
	background: var(--hd-primary);
	border-color: var(--hd-primary);
	color: #fff;
}

.hd-share__btn.is-copied {
	background: var(--hd-success);
	border-color: var(--hd-success);
	color: #fff;
}

.hd-author {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 2.5rem;
	padding: 1.75rem;
	background: var(--hd-bg-alt);
	border: 1px solid var(--hd-border);
}

@media (min-width: 640px) { .hd-author { flex-direction: row; gap: 1.5rem; } }

.hd-author__avatar img { width: 72px; height: 72px; object-fit: cover; }

.hd-author__kicker {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--hd-muted);
	font-size: 0.5625rem;
	font-weight: 900;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.hd-author__name { margin: 0 0 0.45rem; font-size: 1.0625rem; }
.hd-author__bio { margin: 0; font-size: 0.9375rem; line-height: 1.7; }

/* --------------------------------------------------------------------------
   19.13 RELATED / SECTION TITLES
   -------------------------------------------------------------------------- */

.hd-related { margin-top: 2.5rem; }
.hd-title--sm { font-size: clamp(1.25rem, 2.6vw, 1.65rem); margin-bottom: 1.25rem; }

/* --------------------------------------------------------------------------
   19.14 EMPTY STATES
   -------------------------------------------------------------------------- */

.hd-empty--center { max-width: 44rem; margin: 0 auto; text-align: center; }
.hd-empty--center .hd-accent-bar { margin-left: auto; margin-right: auto; }
.hd-empty__search { max-width: 26rem; margin: 1.75rem auto; }
.hd-404-code { color: var(--hd-border); }

/* --------------------------------------------------------------------------
   19.15 BACK TO TOP
   -------------------------------------------------------------------------- */

.hd-totop {
	position: fixed;
	right: 1rem;
	bottom: 5.25rem;
	z-index: 870;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--hd-primary);
	border: 0;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.3s var(--hd-ease),
	            transform 0.3s var(--hd-ease),
	            visibility 0.3s,
	            background 0.3s var(--hd-ease);
}

.hd-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.hd-totop:hover { background: var(--hd-accent); }
.hd-totop svg { width: 18px; height: 18px; fill: currentColor; }

@media (min-width: 1024px) { .hd-totop { right: 1.75rem; bottom: 1.75rem; } }

/* --------------------------------------------------------------------------
   19.16 STICKY BOTTOM NAV — dark + auto-hide
   -------------------------------------------------------------------------- */

.hd-sticky-nav {
	background: var(--hd-primary);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	transition: transform 0.35s var(--hd-ease);
	will-change: transform;
}

.hd-sticky-nav.is-hidden { transform: translateY(100%); }
.hd-sticky-nav a + a { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.hd-sticky-nav a:hover { background: var(--hd-accent); }

/* --------------------------------------------------------------------------
   19.17 HEADER REFINEMENTS
   -------------------------------------------------------------------------- */

.hd-header__logo img { max-height: 40px; }
@media (min-width: 1024px) { .hd-header__logo img { max-height: 48px; } }

/* Active nav item keeps a persistent blue indicator once scrolled */
.hd-header.is-scrolled .hd-nav .current-menu-item > a,
.hd-header.is-scrolled .hd-nav .current_page_item > a { color: var(--hd-accent); }

.hd-header.is-scrolled .hd-nav .current-menu-item > a::after,
.hd-header.is-scrolled .hd-nav .current_page_item > a::after {
	width: 100%;
	background: var(--hd-accent);
}

/* CTA: white on the transparent header, blue once solid */
.hd-header.is-scrolled .hd-header__cta {
	background: var(--hd-accent);
	border-color: var(--hd-accent);
	color: #fff;
}

.hd-header.is-scrolled .hd-header__cta:hover {
	background: var(--hd-accent-hover);
	border-color: var(--hd-accent-hover);
}

/* --------------------------------------------------------------------------
   19.18 SCROLL REVEAL
   -------------------------------------------------------------------------- */

/* Content is visible by default. The hidden start state applies only once
   JavaScript has confirmed it is running (html.hd-js), so a script failure
   can never leave the page blank. */
.hd-js .hd-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s var(--hd-ease), transform 0.6s var(--hd-ease);
}

.hd-js .hd-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.hd-js .hd-reveal { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   19.19 MOBILE REFINEMENTS
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	/* Full-bleed imagery on phones */
	.hd-mag--featured .hd-mag__body { min-height: 240px; }

	.hd-mag__body { padding: 0.9rem; }
	.hd-mag__title { font-size: 1rem; }

	.hd-layout { gap: 2rem; }

	/* Sidebar drops below the feed, form first */
	.hd-sidebar { position: static; }
}

@media (max-width: 400px) {
	.hd-masthead__kicker { letter-spacing: 0.3em; }
	.hd-share__btn span { display: none; }
	.hd-share__btn { padding: 0.6rem; }
}

/* ==========================================================================
   20. NEWSPAPER SECTIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   20.1 LATEST BLOGS TICKER
   -------------------------------------------------------------------------- */

.hd-ticker {
	display: flex;
	align-items: stretch;
	min-height: 36px;
	background: #fff;
	border-bottom: 1px solid var(--hd-border-light);
	overflow: hidden;
}

.hd-ticker__label {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0 1rem;
	background: var(--hd-primary);
	color: #fff;
	font-size: 0.625rem;
	font-weight: 900;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hd-ticker__viewport {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	/* Fade the right edge so titles slide out rather than getting chopped. */
	-webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
	mask-image: linear-gradient(to right, #000 92%, transparent 100%);
}

.hd-ticker__track {
	display: flex;
	width: max-content;
	animation: hd-ticker-scroll 35s linear infinite;
	will-change: transform;
}

.hd-ticker:hover .hd-ticker__track,
.hd-ticker:focus-within .hd-ticker__track { animation-play-state: paused; }

.hd-ticker__list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.hd-ticker__list li { margin: 0; display: inline-flex; align-items: center; }

.hd-ticker__list li::after {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	margin: 0 1rem;
	background: var(--hd-accent);
	flex: 0 0 auto;
}

.hd-ticker__list a {
	display: inline-block;
	padding: 0.55rem 0;
	color: var(--hd-text);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hd-ticker__list a:hover { color: var(--hd-accent); }

@keyframes hd-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.hd-ticker__track { animation: none; }
	.hd-ticker__viewport { overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   20.2 HIGHLIGHTS
   -------------------------------------------------------------------------- */

.hd-highlights { margin-bottom: 1.75rem; }

.hd-highlights__grid {
	display: grid;
	/* Below desktop: lead spans the full width, the two side lists sit
	   beside each other as a 2-column block (three items each). */
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.hd-hl__lead { grid-column: 1 / -1; }

@media (min-width: 1024px) {
	.hd-highlights__grid {
		grid-template-columns: 20% minmax(0, 1fr) 20%;
		gap: 1rem;
		align-items: stretch;
	}

	.hd-hl__lead { grid-column: auto; }
}

/* --- lead --- */

.hd-hl__lead {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 260px;
	background: var(--hd-primary);
	overflow: hidden;
	order: -1;
}

@media (min-width: 1024px) {
	.hd-hl__lead { min-height: 400px; order: 0; }
}

.hd-hl__lead-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	line-height: 0;
	font-size: 0;
}

.hd-hl__lead-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.7s var(--hd-ease);
	will-change: transform;
}

.hd-hl__lead:hover .hd-hl__lead-media img { transform: scale(1.04); }

.hd-hl__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(0, 30, 66, 0.94) 0%,
		rgba(0, 30, 66, 0.62) 45%,
		rgba(0, 30, 66, 0.18) 100%);
}

.hd-hl__lead-body { position: relative; z-index: 1; padding: 1.25rem; }

@media (min-width: 1024px) { .hd-hl__lead-body { padding: 1.75rem; } }

.hd-hl__lead-title {
	margin: 0 0 0.5rem;
	color: #fff;
	font-family: var(--hd-font-display);
	font-size: clamp(1.35rem, 3.4vw, 2.1rem);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.hd-hl__lead-title a { color: inherit; }

.hd-hl__lead-excerpt {
	max-width: 46rem;
	margin: 0 0 0.6rem;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.875rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- side columns --- */

.hd-hl__col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--hd-border-light);
}

@media (min-width: 1024px) {
	.hd-hl__col { grid-auto-rows: 1fr; }
}

.hd-hl__item { margin: 0; border-bottom: 1px solid var(--hd-border-light); }
.hd-hl__item:last-child { border-bottom: 0; }

.hd-hl__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	height: 100%;
	padding: 0.7rem;
	transition: background 0.3s var(--hd-ease);
}

.hd-hl__link:hover { background: var(--hd-bg-alt); }

.hd-hl__num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: var(--hd-primary);
	color: #fff;
	font-family: var(--hd-font-display);
	font-size: 0.5625rem;
	font-weight: 900;
	letter-spacing: 0;
}

.hd-hl__link:hover .hd-hl__num { background: var(--hd-accent); }

.hd-hl__thumb {
	flex: 0 0 56px;
	width: 56px;
	height: 44px;
	overflow: hidden;
	background: var(--hd-bg-alt);
	line-height: 0;
	font-size: 0;
}

.hd-hl__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.hd-hl__text { min-width: 0; }

.hd-hl__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--hd-text);
	font-family: var(--hd-font-display);
	font-size: 0.6875rem;
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	transition: color 0.3s var(--hd-ease);
}

.hd-hl__link:hover .hd-hl__title { color: var(--hd-accent); }

.hd-hl__date {
	display: block;
	margin-top: 0.2rem;
	color: var(--hd-muted);
	font-size: 0.5rem;
	font-weight: 900;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   20.3 CATEGORY TABS
   -------------------------------------------------------------------------- */

.hd-tabs {
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--hd-border);
}

.hd-tabs__scroll {
	display: flex;
	gap: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.hd-tabs__scroll::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) { .hd-tabs__scroll { flex-wrap: wrap; overflow: visible; } }

.hd-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex: 0 0 auto;
	padding: 0.7rem 0.9rem;
	border-bottom: 2px solid transparent;
	color: var(--hd-label);
	font-size: 0.625rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color 0.3s var(--hd-ease),
	            background 0.3s var(--hd-ease),
	            border-color 0.3s var(--hd-ease);
}

.hd-tab:hover { color: var(--hd-accent); border-bottom-color: var(--hd-accent); }

.hd-tab.is-active {
	background: var(--hd-primary);
	border-bottom-color: var(--hd-primary);
	color: #fff;
}

.hd-tab.is-active:hover { color: #fff; }

.hd-tab__dot {
	width: 6px;
	height: 6px;
	background: var(--hd-danger);
	flex: 0 0 auto;
}

.hd-tab.is-active .hd-tab__dot { background: #fff; }

.hd-tab__count { color: var(--hd-muted); font-size: 0.5625rem; }
.hd-tab.is-active .hd-tab__count { color: rgba(255, 255, 255, 0.65); }

/* --------------------------------------------------------------------------
   20.4 TRENDING CAROUSEL
   -------------------------------------------------------------------------- */

.hd-trend { margin-bottom: 2rem; }

.hd-trend__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.hd-trend__head .hd-title--sm { margin-bottom: 0; }

.hd-trend__nav { display: flex; gap: 0.4rem; flex: 0 0 auto; }

.hd-trend__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: #fff;
	border: 1px solid var(--hd-border);
	color: var(--hd-text);
	font-size: 0.875rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.3s var(--hd-ease),
	            border-color 0.3s var(--hd-ease),
	            color 0.3s var(--hd-ease);
}

.hd-trend__btn:hover:not([disabled]) {
	background: var(--hd-primary);
	border-color: var(--hd-primary);
	color: #fff;
}

.hd-trend__btn[disabled] { opacity: 0.35; cursor: default; }

.hd-trend__rail {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 0.25rem;
}

.hd-trend__rail::-webkit-scrollbar { display: none; }
.hd-trend__rail:focus-visible { outline: 3px solid var(--hd-accent); outline-offset: 3px; }

.hd-trend__card,
.hd-missed__card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	width: 62%;
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid var(--hd-border-light);
	overflow: hidden;
	transition: box-shadow 0.4s var(--hd-ease),
	            transform 0.4s var(--hd-ease),
	            border-color 0.4s var(--hd-ease);
}

@media (min-width: 640px)  { .hd-trend__card { width: 240px; } }
@media (min-width: 1024px) { .hd-trend__card { width: 220px; } }

.hd-trend__card:hover,
.hd-missed__card:hover {
	border-color: var(--hd-border);
	box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09);
	transform: translateY(-3px);
}

.hd-trend__media,
.hd-missed__media {
	position: relative;
	overflow: hidden;
	background: var(--hd-primary);
	line-height: 0;
	font-size: 0;
}

.hd-trend__media  { aspect-ratio: 3 / 2; }
.hd-missed__media { aspect-ratio: 16 / 9; }

.hd-trend__media img,
.hd-missed__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition: transform 0.7s var(--hd-ease);
	will-change: transform;
}

.hd-trend__card:hover .hd-trend__media img,
.hd-missed__card:hover .hd-missed__media img { transform: scale(1.08); }

.hd-trend__body,
.hd-missed__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.85rem;
}

.hd-trend__title,
.hd-missed__title {
	margin: 0;
	color: var(--hd-text);
	font-family: var(--hd-font-display);
	font-size: 0.8125rem;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.3s var(--hd-ease);
}

.hd-trend__title a,
.hd-missed__title a { color: inherit; }

.hd-trend__card:hover .hd-trend__title,
.hd-missed__card:hover .hd-missed__title { color: var(--hd-accent); }

/* --------------------------------------------------------------------------
   20.5 YOU MAY HAVE MISSED
   -------------------------------------------------------------------------- */

.hd-missed__rail {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.hd-missed__rail::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
	.hd-missed__rail {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		overflow: visible;
	}

	.hd-missed__card { width: auto; }
}

/* "You may also like" on single posts reuses the missed rail but shows four. */
@media (min-width: 1024px) {
	.hd-section--tight .hd-missed__rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   20.6 MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 639px) {
	/* Two side-by-side columns at phone width need a smaller thumb. */
	.hd-hl__thumb { flex: 0 0 44px; width: 44px; height: 36px; }
	.hd-hl__link { gap: 0.45rem; padding: 0.55rem; }
	.hd-hl__title { font-size: 0.625rem; }

	.hd-ticker__label { padding: 0 0.7rem; letter-spacing: 0.18em; }
	.hd-ticker__list a { font-size: 0.6875rem; }
	.hd-highlights { margin-bottom: 1.25rem; }
	.hd-trend__head { align-items: center; }
	.hd-trend__nav { display: none; }
}

/* ==========================================================================
   21. VISUAL FIXES
   Selectors here are mapped to the theme's real class names:
   .hd-hl__lead-media (not .hd-highlights__lead), .hd-trend / .hd-missed
   (not .hd-trending), .hd-field (not .hd-form__field).
   ========================================================================== */

/* --------------------------------------------------------------------------
   21.1 SIDEBAR FORM — premium dark card
   -------------------------------------------------------------------------- */

.hd-widget--form {
	position: relative;
	padding: 24px;
	background: #002c5f;
	border: 1px solid #002c5f;
	border-top: 3px solid var(--hd-accent);
}

.hd-widget--form .hd-widget__title {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	color: #fff;
	font-family: var(--hd-font-display);
	font-size: 1.1rem;
	font-weight: 900;
	letter-spacing: -0.01em;
	line-height: 1.1;
	text-transform: uppercase;
}

/* Corner badge sits flush in the top-right, under the accent line. */
.hd-widget--form .hd-corner-badge {
	top: 3px;
	right: 0;
	padding: 5px 10px;
	background: var(--hd-accent);
	font-size: 0.5rem;
	letter-spacing: 0.18em;
}

.hd-widget--form .hd-field { margin-bottom: 14px; }

.hd-widget--form .hd-field__label {
	display: block;
	margin-bottom: 4px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.hd-widget--form .hd-input,
.hd-widget--form .hd-select,
.hd-widget--form input[type="text"],
.hd-widget--form input[type="email"],
.hd-widget--form input[type="tel"],
.hd-widget--form select {
	width: 100%;
	padding: 10px 0;
	/* background-color, not the shorthand: the shorthand also cleared the
	   chevron background-image, leaving these selects with no dropdown
	   indicator at all. */
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	outline: 0;
	box-shadow: none;
	transition: border-color 0.3s var(--hd-ease);
}

.hd-widget--form .hd-input:focus,
.hd-widget--form .hd-select:focus,
.hd-widget--form input:focus,
.hd-widget--form select:focus {
	border-bottom-color: var(--hd-accent);
	box-shadow: none;
}

.hd-widget--form .hd-input::placeholder { color: rgba(255, 255, 255, 0.4); }

/* The base chevron is slate grey, which disappears on the navy panel. */
.hd-widget--form .hd-select,
.hd-widget--form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-position: right 2px center;
	padding-right: 22px;
}

.hd-widget--form select option,
.hd-widget--form .hd-select option {
	background-color: #ffffff;
	color: var(--hd-text);
}

/* +91 prefix matches the underline treatment */
.hd-widget--form .hd-phone__prefix {
	padding: 10px 8px 10px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	font-weight: 700;
}

.hd-widget--form .hd-consent {
	margin: 16px 0 0;
	color: rgba(255, 255, 255, 0.5);
	font-size: 10px;
	line-height: 1.5;
}

.hd-widget--form .hd-btn {
	width: 100%;
	margin-top: 16px;
	padding: 14px;
	background: var(--hd-accent);
	border: 0;
	color: #fff;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	transition: background 0.3s var(--hd-ease);
}

.hd-widget--form .hd-btn:hover { background: var(--hd-accent-hover); transform: none; }

.hd-widget--form .hd-form__msg { font-size: 12px; }

/* --------------------------------------------------------------------------
   21.2 CARD IMAGE SIZING — one consistent ratio per variant
   -------------------------------------------------------------------------- */

.hd-mag__media {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.hd-mag--grid .hd-mag__media { aspect-ratio: 16 / 10; }

.hd-mag--featured .hd-mag__media { aspect-ratio: auto; }

.hd-mag--horizontal .hd-mag__media { aspect-ratio: 4 / 3; }

.hd-mag--large .hd-mag__media { aspect-ratio: 16 / 10; }

/*
 * Small cards keep a 4:3 base ratio for consistency, but stay flex-growable so
 * that when a small card shares a grid row with a taller one the image absorbs
 * the extra height instead of leaving dead whitespace under the title.
 * (aspect-ratio sets the base size; flex-grow expands beyond it.)
 */
.hd-mag--small .hd-mag__media { aspect-ratio: 4 / 3; }

@media (min-width: 768px) {
	.hd-mag--small .hd-mag__media { flex: 1 1 auto; min-height: 180px; }

	.hd-mag--horizontal .hd-mag__media { aspect-ratio: auto; min-height: 280px; }
	.hd-mag--large .hd-mag__media { min-height: 220px; }
}

@media (min-width: 1024px) {
	.hd-mag--featured .hd-mag__body { min-height: 380px; }
	.hd-mag--large .hd-mag__media { min-height: 240px; }
}

/* Every card image fills its box, however it is sized. */
.hd-mag__media img,
.hd-hl__lead-media img,
.hd-hl__thumb img,
.hd-trend__media img,
.hd-missed__media img,
.hd-mini__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Hero art anchors high — the scrim and headline cover the lower third. */
.hd-mag--featured .hd-mag__media img,
.hd-hl__lead-media img { object-position: center top; }

/* Highlights lead fills its column. */
.hd-hl__lead-media { height: 100%; }

@media (min-width: 1024px) {
	.hd-hl__lead { min-height: 400px; }
}

/* Carousel and missed-band ratios. */
.hd-trend__media  { aspect-ratio: 3 / 2; }
.hd-missed__media { aspect-ratio: 16 / 9; }

/* Placeholders fill exactly like real thumbnails. */
.hd-mag__media--placeholder img { object-fit: cover; }

/* --------------------------------------------------------------------------
   21.3 FOOTER CTA — balanced heights, less dead space
   -------------------------------------------------------------------------- */

.hd-cta { padding: 48px 0; }

.hd-cta__inner {
        align-items: center;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 24px;
}

@media (min-width: 900px) {
	.hd-cta__inner {
        align-items: center;
		flex-direction: row;
		align-items: center;
		gap: 40px;
	}

	.hd-cta__content { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
	.hd-cta__form    { flex: 0 0 420px; max-width: 420px; }
}

/* Larger, bolder copy so the left column carries its share of the width. */
.hd-cta__content .hd-title {
	margin-bottom: 0.75rem;
	font-size: clamp(1.75rem, 4vw, 3rem);
	line-height: 1;
}

.hd-cta__content .hd-lede { font-size: 16px; line-height: 1.6; }

/* Compact the form so it stops out-growing the copy beside it. */
.hd-cta__form { padding: 28px; }
.hd-cta__form .hd-field { margin-bottom: 12px; }
.hd-cta__form .hd-consent { margin-bottom: 0.9rem; }
.hd-cta__form .hd-btn { margin-top: 0.25rem; }

@media (max-width: 767px) {
	.hd-cta { padding: 32px 0; }
	.hd-cta__form { flex: 1 1 auto; width: 100%; max-width: 100%; padding: 20px; }
}

/* --- Enquiry form: 3-up row for the parity selects (preserved) --- */
.hd-field-row { display: grid; grid-template-columns: 1fr; gap: 0 0.75rem; }
@media (min-width: 480px) { .hd-field-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hd-widget--form .hd-field-row { grid-template-columns: 1fr 1fr; }
.hd-widget--form .hd-field-row .hd-field:first-child { grid-column: 1 / -1; }

/* ==========================================================
   IMAGE SYSTEM v2
   Two deliberate strategies:
     - Hero-style boxes (lead, grid cards, trending, missed)
       keep object-fit: cover. Cropping there is intentional.
     - Side items and sidebar thumbs are IMAGE-FIRST: the box
       takes the image's own shape, so nothing is cropped.
   ========================================================== */

/* --- CTA (kept from the previous block) --- */
.hd-cta { padding: 3rem 0; }
.hd-cta__inner { align-items: center; }
.hd-cta__content { display: flex; flex-direction: column; justify-content: center; }

/* ----------------------------------------------------------
   IMAGE-FIRST: highlights side items
   The <img> flows at its natural ratio and the box wraps it,
   so there is nothing to crop and nothing to letterbox.
   No object-fit here on purpose - with height:auto the image
   already has its own shape, and `contain` would only start
   mattering if a height were forced, which is what produces
   letterboxing.
   ---------------------------------------------------------- */

.hd-hl__link {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    height: auto;
    position: relative;
    background: #fff;
    border: 1px solid var(--hd-border-light);
    overflow: hidden;
}

.hd-hl__link:hover { background: #f8fafc; }

.hd-hl__thumb {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
    line-height: 0;
    font-size: 0;
    background: var(--hd-bg-alt);
}

.hd-hl__thumb img {
    position: static;
    width: 100%;
    height: auto;
    display: block;
    object-fit: fill;
}

.hd-hl__num {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 5;
}

.hd-hl__text {
    flex: 0 0 auto;
    padding: 8px 10px;
    min-width: 0;
}

.hd-hl__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
}

.hd-hl__date { font-size: 0.55rem; margin-top: 3px; }

.hd-hl__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
}

.hd-hl__col .hd-hl__item {
    flex: 0 0 auto;
    overflow: hidden;
    border: none;
    margin: 0;
    min-height: 0;
}

@media (min-width: 1024px) {
    .hd-highlights__grid {
        /* Side width sets thumb height (natural 1.91:1), thumb height sets the
           column height, and the lead stretches to match. Measured at 1440px:
             1.2fr sides (331px) -> columns 685px -> lead 0.81:1, 60% cropped
             190px  sides        -> columns ~464px -> lead 1.78:1, 11% cropped
           Because the side images are natural-ratio at ANY width, narrowing
           costs them nothing and rescues the lead. Widen this one value if you
           would rather have larger side thumbs than an uncropped hero. */
        grid-template-columns: 190px minmax(0, 1fr) 190px;
        gap: 12px;
        align-items: start;
    }

    /* The columns are as tall as their content; the lead matches them so the
       row does not end with a large empty block under the hero. */
    .hd-hl__lead { align-self: stretch; }
}

/* Lead keeps the hero treatment - cropping is intended here. */
.hd-hl__lead { height: 100%; min-height: 320px; }
.hd-hl__lead-media { height: 100%; }
.hd-hl__lead-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* ----------------------------------------------------------
   IMAGE-FIRST: sidebar "Latest Stories" thumbnails
   ---------------------------------------------------------- */

.hd-mini__thumb {
    flex: 0 0 90px;
    width: 90px;
    height: auto;
    align-self: flex-start;
    overflow: hidden;
    background: var(--hd-bg-alt);
    line-height: 0;
    font-size: 0;
}

.hd-mini__thumb img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: fill;
}

/* ----------------------------------------------------------
   COVER boxes - cropping is intentional on these
   ---------------------------------------------------------- */

.hd-mag__media,
.hd-trend__media,
.hd-missed__media,
.hd-posthero__media {
    position: relative;
    overflow: hidden;
}

.hd-mag__media img,
.hd-trend__media img,
.hd-missed__media img,
.hd-posthero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.hd-mag--featured .hd-mag__media { aspect-ratio: 16 / 9; min-height: 380px; }
.hd-mag--grid .hd-mag__media { aspect-ratio: 16 / 9; }
.hd-mag--large .hd-mag__media { aspect-ratio: 16 / 9; min-height: 280px; }

.hd-mag--horizontal .hd-mag__media { aspect-ratio: auto; min-height: 240px; }
@media (min-width: 768px) {
    .hd-mag--horizontal .hd-mag__media { flex: 0 0 46%; width: 46%; }
}

/* Small cards sit at their natural height rather than stretching, which
   otherwise turns the image box portrait. */
.hd-mag--small { height: auto; }
.hd-mag--small .hd-mag__media {
    flex: 0 0 auto;
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 0;
}

.hd-mag:hover .hd-mag__media img { transform: scale(1.05); }
.hd-mag__media img { transition: transform 0.7s ease; }

.hd-trend__media  { aspect-ratio: 16 / 9; }
.hd-missed__media { aspect-ratio: 16 / 9; }

.hd-posthero__media { min-height: 400px; }
.hd-posthero__media img { object-position: center top; }

.hd-mag__media--placeholder,
.hd-hl__lead-media.hd-mag__media--placeholder {
    background: linear-gradient(135deg, #002c5f 0%, #001d40 70%, #0a4080 100%);
}

/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 1023px) {
    .hd-highlights__grid {
        grid-template-columns: 1fr 1fr;
        min-height: auto;
        gap: 8px;
    }
    .hd-hl__lead { grid-column: 1 / -1; min-height: 200px; }
}

@media (max-width: 639px) {
    /* Reset the old 44x36 side-by-side thumb from the newspaper pass. */
    .hd-hl__thumb { flex: 0 0 auto; width: 100%; height: auto; min-height: 0; }
    .hd-hl__title { font-size: 0.65rem; }
}

/* ==========================================================
   19.10b SINGLE POST HERO — brand band + header treatment

   The split layout (photo on one side, headline on the other)
   is deliberate and is NOT changed here. Everything below is
   colour, depth and separation only.
   ========================================================== */

/* --- 1. Band background + diagonal brand sheen --------------------------
   Base gradient is the masthead's, so the two never drift apart. The sheen
   is a second background layer rather than the masthead's skewed pseudo-
   element: that element has a hard leading edge, which is invisible across
   a 100px masthead but prints a 565px seam down a post hero. Both stops
   fade to zero, so there is no edge to see at any height. */
.hd-posthero {
    background:
        linear-gradient(112deg,
            rgba(37, 99, 235, 0) 42%,
            rgba(37, 99, 235, 0.20) 62%,
            rgba(37, 99, 235, 0) 84%),
        linear-gradient(135deg, #002c5f 0%, #001d40 70%, #0a4080 100%);
}

/* --- 3. The photo -------------------------------------------------------
   The scrim exists to make white text readable when the title is laid OVER
   the picture. In this split layout the title sits beside it, so the scrim
   only dulls the photo and hides any text baked into it. Replaced with a
   hairline frame plus a soft drop shadow. */
.hd-posthero__scrim {
    background: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.hd-posthero__media {
    box-shadow: 0 24px 55px rgba(0, 12, 30, 0.42);
}

/* --- 4. Split proportions ----------------------------------------------
   Without this the columns are sized by the image's own pixel width, so a
   portrait photo would flip the split. Fixed ratio + natural image height
   means the picture is never cropped, whatever its shape. */
@media (min-width: 900px) {
    .hd-posthero {
        align-items: center;
        gap: clamp(1.5rem, 3vw, 3rem);
    }

    .hd-posthero__media {
        flex: 0 0 52%;
        width: 52%;
        min-height: 0;
    }

    .hd-posthero__media img { height: auto; }

    .hd-posthero__inner {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
}

/* --- 5. Stacked below 900px --------------------------------------------
   Side by side on a phone leaves both halves too narrow to read. */
@media (max-width: 899px) {
    .hd-posthero {
        display: block;
        padding: calc(var(--hd-header-h) + 1.5rem) 0 2.25rem;
    }

    .hd-posthero__media {
        min-height: 0;
        margin-bottom: 1.75rem;
    }

    .hd-posthero__media img { height: auto; }

    .hd-posthero__inner { width: 100%; }
}

/* --- 6. Bottom accent ---------------------------------------------------
   Terminates the band so no colour bleeds into the white section below. */
.hd-posthero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--hd-accent) 0%, transparent 60%);
    pointer-events: none;
    z-index: 3;
}

/* --- 7. Header over the navy band --------------------------------------
   The transparent header darkens whatever is behind it with a black-navy
   gradient. Over a photo that is needed; over the hero's own navy it just
   prints a muddy stripe across the top of the band. On single posts the
   band is always navy, so the gradient goes and a hairline marks the edge
   instead. Scrolled state is untouched. */
.single .hd-header:not(.is-scrolled)::before { opacity: 0; }

.single .hd-header:not(.is-scrolled)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.16);
    pointer-events: none;
    z-index: 2;
}