/* ==========================================================================
   Voice of Akash — front page only (enqueued when is_front_page()).
   Body classes: .voa-home-layout (front page), .voa-hero-active (hero on).

   Contents
   1. Hero (parent #intro-container, re-composed)
   2. Hero carousel
   3. Page frame: full-width section flow instead of content + sidebar
   4. Section system (.voa-section) and the content sections
   5. Explore (Sidebar widgets, full width)
   6. Journal (latest posts)
   7. Session offer
   ========================================================================== */


/* 1. Hero
   Parent DOM, kept as is:
   section#intro-container.intro-container
     div#intro.intro > div.intro-inner > .voa-hero__copy   (title, body, CTA)
     .voa-hero__media                                       (carousel)
   ========================================================================== */

.voa-hero-active .intro-container {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	background: var(--voa-ink);
	color: var(--voa-on-dark);
	border-bottom: 1px solid var(--voa-line-strong);
}

/* Material texture (Customizer image or site background), very low contrast. */
.voa-hero-active .intro-container::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--voa-hero-texture, none);
	background-position: center;
	background-size: cover;
	opacity: 0.12;
}

/* Warm, quiet light from the lower left; keeps the copy zone dark. */
.voa-hero-active .intro-container::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(90% 70% at 0% 100%, rgba(140, 106, 63, 0.16), transparent 70%),
		linear-gradient(180deg, rgba(15, 13, 11, 0.2), rgba(15, 13, 11, 0.6));
	pointer-events: none;
}

.voa-hero-active .intro {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;      /* vertically centred in the dark field */
	justify-content: center;  /* horizontally centred; the text itself stays left-aligned */
	padding: clamp(2.5rem, 7vw, 4rem) var(--voa-gutter);
}

.voa-hero-active .intro-inner {
	width: 100%;
	max-width: 36rem;
	margin: 0;
	padding: 0;
}

.voa-hero__eyebrow {
	max-width: 34rem;
	margin: 0 0 var(--voa-space-sm);
	color: var(--voa-brass-light); /* 8.7:1 on ink */
}

.voa-hero__title {
	max-width: 18ch;
	margin: 0 0 var(--voa-space-md);
	color: var(--voa-on-dark);
	font-family: var(--voa-font-serif);
	font-size: var(--voa-h1);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.02em;
}

.voa-hero__body {
	max-width: 34rem; /* ≈ 60 characters per line */
	color: var(--voa-on-dark-muted);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.voa-hero__body p {
	margin: 0 0 1em;
}

.voa-hero__body p:last-child {
	margin-bottom: 0;
}

.voa-hero__body strong {
	color: var(--voa-on-dark);
	font-weight: 600;
}

.voa-hero__body a {
	color: var(--voa-on-dark);
	text-decoration-color: var(--voa-brass-light);
}

.voa-hero__cta {
	margin: var(--voa-space-lg) 0 0;
}

/* Phones and tablets (≤ 879px): the carousel sits between the title and the text.
   The copy wrappers become layout-transparent (display: contents), so label,
   title, carousel, text and button are ordered in one column. The HTML order is
   unchanged, so screen readers still read title → text → button, then images. */
@media (max-width: 54.9375em) {
	.voa-hero-active .intro,
	.voa-hero-active .intro-inner,
	.voa-hero-active .voa-hero__copy {
		display: contents;
	}

	.voa-hero__eyebrow,
	.voa-hero__title,
	.voa-hero__body,
	.voa-hero__cta {
		position: relative;
		z-index: 2;
		box-sizing: border-box;
		justify-self: center;
		width: 100%;
		max-width: calc(36rem + var(--voa-gutter) * 2);
		padding-left: var(--voa-gutter);
		padding-right: var(--voa-gutter);
	}

	.voa-hero__eyebrow { order: 1; margin: 0; padding-top: var(--voa-space-lg); }
	.voa-hero__title   { order: 2; margin: var(--voa-space-sm) 0 var(--voa-space-md); }
	.voa-hero-active .voa-hero__media { order: 3; }
	.voa-hero__body    { order: 4; margin: var(--voa-space-md) 0 0; }
	.voa-hero__cta     { order: 5; margin: var(--voa-space-md) 0 0; padding-bottom: var(--voa-space-lg); }

	/* No label: the title opens the hero. */
	.voa-hero__title:first-child {
		padding-top: var(--voa-space-lg);
	}

	.voa-hero__body {
		font-size: 1rem;
		line-height: 1.6;
	}

	.voa-hero__body p {
		margin-bottom: 0.8em;
	}
}

/* Desktop: editorial copy column on the left, image field on the right. */
@media (min-width: 55em) {
	.voa-hero-active .intro-container {
		grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
		min-height: max(760px, calc(100svh - var(--voa-masthead-h) - var(--voa-nav-h)));
	}

	/* Same padding on every side, so the copy block sits in the centre of the dark column. */
	.voa-hero-active .intro {
		grid-column: 1;
		grid-row: 1;
		padding: clamp(2.5rem, 6vh, 5rem) clamp(2rem, 4vw, 4.5rem);
	}

	.voa-hero-active .voa-hero__media {
		grid-column: 2;
		grid-row: 1;
	}
}

/* Shorter laptop screens (e.g. 1366 × 768): keep title, text and button above the fold. */
@media (min-width: 55em) and (max-height: 860px) {
	/* The hero fits the screen, so the centred copy and its button stay above the fold. */
	.voa-hero-active .intro-container {
		min-height: max(520px, calc(100svh - var(--voa-masthead-h) - var(--voa-nav-h)));
	}

	.voa-hero-active .intro {
		padding-top: clamp(1.5rem, 4vh, 2.5rem);
		padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
	}

	.voa-hero__title {
		font-size: clamp(2.5rem, 1.4rem + 2.2vw, 3.6rem);
		margin-bottom: var(--voa-space-sm);
	}

	.voa-hero__body {
		font-size: 1rem;
		line-height: 1.6;
	}

	.voa-hero__body p {
		margin-bottom: 0.75em;
	}

	.voa-hero__cta {
		margin-top: var(--voa-space-md);
	}
}


/* 2. Hero carousel
   Slow 1.2s cross-fade, discreet indicators, pause control.
   Without JavaScript the first image shows on its own.
   ========================================================================== */

.voa-hero__media {
	position: relative;
	z-index: 1;
	min-height: 0;
	aspect-ratio: 4 / 3;
	background: #1A1714;
	overflow: hidden;
}

@media (min-width: 55em) {
	.voa-hero__media {
		aspect-ratio: auto;
		min-height: 100%;
	}
}

.voa-hero__slides,
.voa-hero__slide {
	position: absolute;
	inset: 0;
	margin: 0;
}

.voa-hero__slide {
	opacity: 0;
	transition: opacity var(--voa-transition-carousel);
}

.voa-hero__slide.is-active {
	opacity: 1;
}

.voa-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* Legibility overlays: a soft fade into the copy column (desktop) and a low
   gradient behind the indicators. The ambient tone eases as slides change. */
.voa-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(0deg, rgba(15, 13, 11, 0.55) 0%, rgba(15, 13, 11, 0) 28%),
		linear-gradient(90deg, rgba(15, 13, 11, 0.35) 0%, rgba(15, 13, 11, 0) 22%);
	opacity: 1;
	transition: opacity var(--voa-transition-carousel);
	pointer-events: none;
}

.voa-hero__media[data-tone="b"]::after {
	opacity: 0.82;
}

/* Empty placeholder field until images are added in the Customizer. */
.voa-hero__media--empty {
	background:
		linear-gradient(135deg, rgba(200, 169, 126, 0.08), rgba(200, 169, 126, 0) 60%),
		#1A1714;
	border-left: 1px solid var(--voa-line-dark);
}

.voa-hero__hint {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 3;
	width: min(80%, 22rem);
	margin: 0;
	transform: translate(-50%, -50%);
	color: var(--voa-on-dark-muted);
	font-size: var(--voa-text-small);
	text-align: center;
}

/* Controls (hidden until hero-carousel.js enhances the carousel). */
.voa-hero__controls {
	position: absolute;
	left: var(--voa-space-md);
	bottom: var(--voa-space-sm);
	z-index: 3;
	display: flex;
	align-items: center;
	gap: var(--voa-space-xs);
}

.voa-hero__controls[hidden] {
	display: none;
}

.voa-hero__dots {
	display: flex;
	align-items: center;
}

.voa-hero__dot,
.voa-hero__toggle {
	position: relative;
	width: 2.75rem;
	min-height: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--voa-on-dark);
	letter-spacing: 0;
	transition: none;
}

.voa-hero__dot:hover,
.voa-hero__toggle:hover {
	background: transparent;
	transform: none;
}

/* Indicator: a thin line that lengthens and turns brass when active. */
.voa-hero__dot::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.75rem;
	height: 1px;
	margin-left: -0.875rem;
	background: currentColor;
	opacity: 0.5;
	transform: scaleX(0.5);
	transition:
		transform var(--voa-transition),
		opacity var(--voa-transition),
		background-color var(--voa-transition);
}

.voa-hero__dot:hover::before,
.voa-hero__dot:focus-visible::before {
	opacity: 0.9;
	transform: scaleX(0.75);
}

.voa-hero__dot[aria-current="true"]::before {
	background: var(--voa-brass-light);
	opacity: 1;
	transform: scaleX(1);
	height: 2px;
}

/* Pause / play icon. */
.voa-hero__toggle-icon,
.voa-hero__toggle-icon::before {
	position: absolute;
	top: 50%;
	left: 50%;
}

.voa-hero__toggle-icon {
	width: 10px;
	height: 12px;
	margin: -6px 0 0 -5px;
	border-left: 2px solid currentColor;
	border-right: 2px solid currentColor;
	opacity: 0.85;
}

.voa-hero__toggle[aria-pressed="true"] .voa-hero__toggle-icon {
	width: 0;
	height: 0;
	margin: -6px 0 0 -3px;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent currentColor;
}

.voa-hero__toggle:hover .voa-hero__toggle-icon,
.voa-hero__toggle:focus-visible .voa-hero__toggle-icon {
	opacity: 1;
	color: var(--voa-brass-light);
}

/* Optional slideshow shortcode (e.g. MetaSlider) filling the image field. */
.voa-hero__media--shortcode .metaslider,
.voa-hero__media--shortcode .metaslider > div,
.voa-hero__media--shortcode .flexslider,
.voa-hero__media--shortcode .flex-viewport,
.voa-hero__media--shortcode .slides,
.voa-hero__media--shortcode .slides > li {
	height: 100% !important; /* MetaSlider sets inline sizes */
	margin: 0;
}

.voa-hero__media--shortcode .metaslider {
	position: absolute;
	inset: 0;
}

.voa-hero__media--shortcode .slides img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.voa-hero__media--shortcode .caption-wrap,
.voa-hero__media--shortcode .flex-direction-nav {
	display: none; /* no per-slide captions or arrows over the image */
}

@media (prefers-reduced-motion: reduce) {
	.voa-hero__slide,
	.voa-hero__media::after {
		transition: none;
	}
}


/* 3. Page frame: the front page reads as full-width sections
   (the parent's sidebar column is not printed on the front page,
   see inc/homepage.php, so `.no-widgets-sidebar` applies).
   ========================================================================== */

.voa-home-layout .site-content {
	padding-bottom: 0;
}

.voa-home-layout .site-content-inner {
	max-width: none;
	padding: 0;
}

.voa-home-layout .content-area,
.voa-home-layout .site-main,
.voa-home-layout .site-main > .entry,
.voa-home-layout .site-main > .entry > .entry-content-container,
.voa-home-layout .site-main > .entry > .entry-content-container > .entry-content {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
}

.voa-home-layout .site-main > .entry > .entry-content-container {
	padding-top: 0;
}

.voa-home-layout .entry-skip-links {
	margin: 0;
}

/* Any block that is not a full-width section keeps the content measure,
   so ordinary blocks added in the editor always look right. */
.voa-home-layout .site-main > .entry > .entry-content-container > .entry-content > *:not(.voa-section):not(.alignfull):not(.front-page-section) {
	box-sizing: border-box;
	max-width: calc(var(--voa-content-max) + var(--voa-gutter) * 2);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--voa-gutter);
	padding-right: var(--voa-gutter);
}

.voa-home-layout .site-main > .entry > .entry-content-container > .entry-content > p:empty {
	display: none;
}


/* 4. Section system
   Content sections are Group blocks with the class "voa-section" plus one
   modifier (see docs/homepage-content.html):
     voa-intro, voa-watch, voa-listen, voa-shop
     voa-section--cream (alternate surface), voa-section--divider (hairline on top)
   ========================================================================== */

.voa-section {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding:
		var(--voa-section-y)
		max(var(--voa-gutter), calc((100% - var(--voa-content-max)) / 2));
	background: var(--voa-paper);
}

.voa-section > :first-child,
.voa-section > .wp-block-group__inner-container > :first-child {
	margin-top: 0;
}

.voa-section > :last-child,
.voa-section > .wp-block-group__inner-container > :last-child {
	margin-bottom: 0;
}

/* Classic themes wrap Group block content in .wp-block-group__inner-container;
   headings inside sections take their spacing from the section rhythm. */
.voa-section :where(h2, h3) {
	margin-top: 0;
}

.voa-section .voa-eyebrow {
	margin-bottom: var(--voa-space-xs);
}

.voa-section--cream {
	background: var(--voa-cream);
}

.voa-section--divider {
	box-shadow: inset 0 1px 0 var(--voa-line);
}

.voa-section--cream + .voa-section--divider,
.voa-section--divider:first-child {
	box-shadow: none;
}

.voa-section__header,
.voa-section .voa-section__header {
	max-width: var(--voa-reading-max);
	margin-bottom: var(--voa-space-lg);
}

.voa-section__title,
.voa-section > h2,
.voa-section__header > h2 {
	margin: 0 0 var(--voa-space-sm);
	font-size: var(--voa-h2);
}

.voa-section__intro,
.voa-section .voa-lead {
	color: var(--voa-muted);
	font-size: 1.0625rem;
	max-width: 40rem;
}

.voa-section__intro p:last-child {
	margin-bottom: 0;
}

/* Intro / brand statement: reading measure, left aligned. */
.voa-intro > *,
.voa-intro > .wp-block-group__inner-container > * {
	max-width: var(--voa-reading-max);
}

.voa-intro p {
	font-size: 1.125rem;
	line-height: 1.7;
}

.voa-intro .voa-statement,
.voa-intro p.has-large-font-size {
	font-family: var(--voa-font-serif);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
	line-height: 1.3;
	color: var(--voa-ink);
}

.voa-intro .wp-block-image,
.voa-intro figure {
	max-width: none;
	margin: var(--voa-space-xl) 0 0;
}

/* Watch / Listen: 1–3 items side by side, stacked on small screens. */
.voa-watch .wp-block-columns,
.voa-listen .wp-block-columns {
	gap: var(--voa-space-lg) var(--voa-space-lg);
	margin-bottom: 0;
}

.voa-watch h3,
.voa-listen h3,
.voa-section .voa-media-title {
	margin: 0 0 var(--voa-space-sm);
	font-size: var(--voa-h3);
	line-height: 1.2;
}

.voa-watch .voa-eyebrow,
.voa-listen .voa-eyebrow {
	margin-bottom: var(--voa-space-xs);
}

.voa-watch > .voa-eyebrow,
.voa-watch > .wp-block-group__inner-container > .voa-eyebrow {
	margin-bottom: var(--voa-space-md);
}

.voa-watch .wp-block-embed,
.voa-watch figure {
	margin: 0;
}

.voa-watch .wp-block-embed__wrapper {
	background: var(--voa-ink);
}

.voa-listen p {
	color: var(--voa-muted);
}

.voa-listen .wp-block-audio,
.voa-listen audio {
	width: 100%;
	margin: var(--voa-space-sm) 0 0;
}

.voa-listen audio {
	accent-color: var(--voa-brass);
}

/* Shop: products follow the WooCommerce grid (woocommerce.css); 4 across here. */
.voa-shop .woocommerce,
.voa-shop .wp-block-shortcode {
	margin: 0;
}

.voa-shop .wp-block-buttons {
	margin-top: var(--voa-space-lg);
}


/* 5. Explore — Sidebar widgets as a full-width section
   ========================================================================== */

.voa-explore {
	background: var(--voa-cream);
}

.voa-explore .voa-section__inner {
	display: grid;
	gap: var(--voa-space-lg) var(--voa-space-xl);
}

@media (min-width: 55em) {
	.voa-explore .voa-section__inner {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		align-items: start;
	}

	.voa-explore .voa-section__header {
		position: sticky;
		top: calc(var(--voa-nav-h) + var(--voa-space-lg));
		margin: 0;
	}
}

.voa-explore__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: var(--voa-space-xl);
}

.voa-explore .widget {
	margin: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
}

.voa-explore .widget-title {
	margin-bottom: 0;
}

.voa-explore .widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

.voa-explore .widget li {
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--voa-line);
}

.voa-explore .widget li li {
	border: 0;
}

.voa-explore .widget li::before {
	display: none; /* parent's genericon bullets */
}

/* Top-level category links: serif, with an arrow that moves on hover. */
.voa-explore .widget_nav_menu .menu > li > a,
.voa-explore .product-categories > li > a,
.voa-explore .widget_categories > ul > li > a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--voa-space-sm);
	min-height: 2.75rem;
	padding: 0.85rem 0;
	color: var(--voa-ink);
	font-family: var(--voa-font-serif);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.25;
	text-decoration: none;
	background: none;
	transition: color var(--voa-transition-fast);
}

.voa-explore .widget_nav_menu .menu > li > a::after,
.voa-explore .product-categories > li > a::after,
.voa-explore .widget_categories > ul > li > a::after {
	content: "\2192";
	flex: 0 0 auto;
	font-family: var(--voa-font-sans);
	font-size: 0.9rem;
	color: var(--voa-brass);
	opacity: 0.6;
	transform: translateX(-2px);
	transition: transform var(--voa-transition), opacity var(--voa-transition), color var(--voa-transition);
}

.voa-explore .widget_nav_menu .menu > li > a:hover,
.voa-explore .widget_nav_menu .menu > li > a:focus-visible,
.voa-explore .product-categories > li > a:hover,
.voa-explore .widget_categories > ul > li > a:hover {
	color: var(--voa-forest);
}

.voa-explore .widget_nav_menu .menu > li > a:hover::after,
.voa-explore .widget_nav_menu .menu > li > a:focus-visible::after,
.voa-explore .product-categories > li > a:hover::after,
.voa-explore .widget_categories > ul > li > a:hover::after {
	opacity: 1;
	color: var(--voa-forest);
	transform: translateX(0);
}

/* Child categories: smaller sans, indented, hierarchy kept. */
.voa-explore .widget .sub-menu,
.voa-explore .widget .children {
	margin: -0.25rem 0 0.75rem;
	padding: 0 0 0 1rem;
	border-left: 1px solid var(--voa-line);
}

.voa-explore .widget .sub-menu a,
.voa-explore .widget .children a {
	display: inline-block;
	padding: 0.35rem 0;
	min-height: 2.75rem;
	line-height: 2rem;
	color: var(--voa-muted);
	font-size: 0.9375rem;
	text-decoration: none;
}

.voa-explore .widget .sub-menu a:hover,
.voa-explore .widget .children a:hover {
	color: var(--voa-forest);
}

/* A single list widget (live: Blog Categories) flows into two columns. */
@media (min-width: 42em) {
	.voa-explore__widgets > .widget:only-child .menu,
	.voa-explore__widgets > .widget:only-child .product-categories {
		columns: 2;
		column-gap: var(--voa-space-xl);
	}

	.voa-explore__widgets > .widget:only-child li {
		break-inside: avoid;
	}
}

/* Custom HTML / text widgets placed in Explore. */
.voa-explore .textwidget,
.voa-explore .custom-html-widget {
	color: var(--voa-charcoal);
}


/* 6. Journal — latest posts (parent .front-page-section markup)
   ========================================================================== */

.voa-journal.front-page-section {
	margin: 0;
	box-shadow: inset 0 1px 0 var(--voa-line);
}

.voa-explore + .voa-journal.front-page-section,
.voa-section--cream + .voa-journal.front-page-section {
	box-shadow: none;
}

.voa-journal .front-page-section-inner {
	width: auto;
	max-width: none;
	margin: 0;
}

/* Parent: thin uppercase title with a 2px top border. */
.voa-journal .front-page-section-title {
	margin: 0 0 var(--voa-space-xl);
	padding: 0;
	border: 0;
	font-family: var(--voa-font-serif);
	font-size: var(--voa-h2);
	font-weight: 500;
	text-transform: none;
}

.voa-journal .front-page-section-title a {
	color: var(--voa-ink);
	text-decoration: none;
}

.voa-journal .front-page-section-title a:hover {
	color: var(--voa-forest);
}

.voa-journal .archive-link {
	margin-top: var(--voa-space-sm);
}

.voa-journal .archive-link .button {
	background: transparent;
	border-color: var(--voa-brass);
	color: var(--voa-ink);
}

.voa-journal .archive-link .button:hover {
	background: var(--voa-ink);
	border-color: var(--voa-ink);
	color: var(--voa-paper);
}


/* 7. Session offer — Sidebar widgets (live: "Private Session" card)
   ========================================================================== */

.voa-offer {
	background: var(--voa-cream);
}

.voa-offer__widgets {
	display: grid;
	gap: var(--voa-space-xl);
}

.voa-offer .widget {
	margin: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
}

/* Split layout for the clean card markup (.voa-offer-card, see docs). */
@media (min-width: 48em) {
	.voa-offer .voa-offer-card {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		align-items: stretch;
	}

	/* The photo is shown in full (never cropped). */
	.voa-offer .voa-offer-card__media img {
		height: auto;
	}

	.voa-offer .voa-offer-card__body {
		align-self: center;
		padding: var(--voa-space-xl) var(--voa-space-xl);
	}

	.voa-offer .voa-offer-card__title {
		font-size: var(--voa-h2);
	}
}