/* ============================================================
   Amrita SeRVe — Universal page/post hero + article layout
   One consistent banner for every page & post (breadcrumb + H1),
   full-bleed, with a dark scrim so the transparent nav + title
   stay readable over ANY image.
   ============================================================ */

/* Remove the container's top padding on hero pages so the banner
   sits flush under the header (no negative-margin hacks). */
body.as-has-hero #primary,
body.as-has-hero .site-main > .ast-container,
body.as-has-hero .ast-separate-container .ast-article-single,
body.as-has-hero .ast-separate-container .site-main .ast-container {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
/* Astra's boxed "separate container" card border/shadow removed under hero */
body.as-has-hero .ast-separate-container .ast-article-single {
	box-shadow: none;
	background: transparent;
	padding-left: 0;
	padding-right: 0;
}

.as-page-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
	min-height: clamp(300px, 44vh, 460px);
	display: flex;
	align-items: flex-end;
	padding-top: calc(var(--as-header-h) + 28px);
	padding-bottom: clamp(1.8rem, 4vw, 3rem);
	background-size: cover;
	background-position: center 35%;
	background-color: var(--as-green-900); /* fallback for plain heroes */
	color: #fff;
	overflow: hidden;
}
/* Legibility scrim over the hero image */
.as-page-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 40, 25, 0.55) 0%, rgba(15, 40, 25, 0.4) 45%, rgba(15, 40, 25, 0.78) 100%);
}
.as-page-hero--plain {
	background-image: linear-gradient(135deg, var(--as-green-800), var(--as-green-900));
	min-height: clamp(240px, 32vh, 340px);
}
.as-page-hero--plain .as-page-hero__scrim { display: none; }

.as-page-hero__inner { position: relative; z-index: 2; }
.as-page-hero__title {
	color: #fff;
	font-size: var(--as-h1);
	margin: 0.4rem 0 0;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
	max-width: 20ch;
}

/* ---- Breadcrumb (smaller, less prominent) ------------------------- */
.as-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.85);
}
.as-breadcrumb a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.as-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.as-breadcrumb span[aria-current] { color: #ffd9a8; }
.as-breadcrumb span[aria-hidden] { opacity: 0.55; }

/* ---- Content width system ----------------------------------------
   One shared container (as-container) that the hero, breadcrumb, title
   and content all align to. Long-form prose keeps a readable measure;
   card grids and wide/full blocks fill the full container width
   (overriding Astra's narrow block "content-size" cap). Real selectors
   beat Astra's zero-specificity :where() block rules.
   ------------------------------------------------------------------ */
/* Plain-container ARTICLE pages get a capped, centered reading container. */
body.as-has-hero.ast-plain-container .entry-content,
body.as-has-hero.ast-separate-container .entry-content {
	max-width: var(--as-container);
	margin-inline: auto;
	padding-inline: var(--as-gutter);
}
/* Page-builder pages (home, about) are FULL-WIDTH: their custom sections
   (.as-hero, .as-section) span the viewport and each uses an inner
   .as-container to center content. Never cap the wrapper here. */
body.ast-page-builder-template .entry-content {
	max-width: none;
	width: 100%;
	margin-inline: 0;
	padding-inline: 0;
}
/* Astra's page-builder template resets max-width to none on block content,
   which also strips the cap from our design-system container. Restore it so
   full-width sections (.as-hero/.as-section) keep a CENTERED inner container. */
body.ast-page-builder-template .entry-content .as-container {
	max-width: var(--as-container) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
body.ast-page-builder-template .entry-content .as-container--wide {
	max-width: var(--as-container-wide) !important;
}
/* One consistent, centred reading column for ALL long-form text, so
   headings, paragraphs and stray (Word-pasted) spans share the same
   measure and position. Fixes text starting at an arbitrary x with a
   big blank gap on one side. Grids/wide blocks keep full width (below). */
body.as-has-hero .entry-content > p,
body.as-has-hero .entry-content > h1,
body.as-has-hero .entry-content > h2,
body.as-has-hero .entry-content > h3,
body.as-has-hero .entry-content > h4,
body.as-has-hero .entry-content > h5,
body.as-has-hero .entry-content > h6,
body.as-has-hero .entry-content > ul:not([class*="wp-block"]),
body.as-has-hero .entry-content > ol:not([class*="wp-block"]),
body.as-has-hero .entry-content > blockquote,
body.as-has-hero .entry-content > span,
body.as-has-hero .entry-content > div:not([class]) {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}
body.as-has-hero .entry-content > span { display: block; }

/* Consistent vertical rhythm */
body.as-has-hero .entry-content p { line-height: 1.75; margin-bottom: 1.3em; }
body.as-has-hero .entry-content h2,
body.as-has-hero .entry-content h3,
body.as-has-hero .entry-content h4,
body.as-has-hero .entry-content h5,
body.as-has-hero .entry-content h6 { margin-top: 2rem; margin-bottom: 0.6rem; }

/* ---- Responsive media blocks (video embeds + images) --------------
   Videos become centred 16:9 blocks aligned to the reading column, with
   spacing above/below and no text wrapping beside them. Reusable for any
   iframe/embed on any long-form page. */
body.as-has-hero .entry-content iframe {
	display: block;
	float: none;
	width: 100%;
	max-width: 820px;
	aspect-ratio: 16 / 9;
	height: auto;
	margin: 2.2rem auto;
	border: 0;
	border-radius: var(--as-radius);
}
body.as-has-hero .entry-content .wp-block-embed,
body.as-has-hero .entry-content .wp-block-embed__wrapper { max-width: 820px; margin: 2.2rem auto; }
body.as-has-hero .entry-content .wp-block-embed__wrapper iframe { margin: 0 auto; }
/* Content images: contain, centre, space; never overflow */
body.as-has-hero .entry-content figure.wp-block-image { max-width: 900px; margin: 1.6rem auto; }
body.as-has-hero .entry-content img { max-width: 100%; height: auto; }
/* Neutralise accidental floats on media in long-form content */
body.as-has-hero .entry-content iframe[style*="float"],
body.as-has-hero .entry-content figure[style*="float"],
body.as-has-hero .entry-content [style*="float:left"],
body.as-has-hero .entry-content [style*="float:right"] { float: none !important; }

/* Card grids + wide blocks fill the content container width */
body.as-has-hero .entry-content .wp-block-latest-posts,
body.as-has-hero .entry-content .wp-block-latest-posts__list,
body.as-has-hero .entry-content .rttpg,
body.as-has-hero .entry-content .wp-block-post-template,
body.as-has-hero .entry-content .alignwide {
	max-width: 100%;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
/* Full-width blocks (hero covers, full-bleed sections) break out to the
   FULL VIEWPORT width — standard WP alignfull, works even inside a capped
   container. This is what makes the homepage hero span edge-to-edge so the
   header nav sits over the (dark) hero instead of white side-margins. */
body.as-has-hero .entry-content .alignfull,
body.as-has-hero .entry-content > .wp-block-cover.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Images inside articles: consistent rounding + no stray Astra shadow */
.ast-article-single .entry-content figure.wp-block-image img,
.entry-content img {
	border-radius: var(--as-radius);
}
.ast-article-single figure,
.ast-article-single img:not(figure img) { box-shadow: none !important; }

/* Hide an empty Astra entry header (title/meta disabled) so no gap */
body.as-has-hero .ast-single-entry-banner:empty,
body.as-has-hero header.entry-header:empty { display: none; }

/* ---- Responsive --------------------------------------------------- */
@media (max-width: 921px) {
	.as-page-hero { min-height: 300px; padding-top: calc(var(--as-header-h) + 12px); }
}
@media (max-width: 544px) {
	.as-page-hero { min-height: 240px; }
	.as-page-hero__title { max-width: none; }
}
/* Large cover/hero headings must wrap naturally on small screens
   (prevents oversized inline font-sizes breaking mid-word). */
@media (max-width: 600px) {
	.entry-content .wp-block-cover h1,
	.entry-content .wp-block-cover .wp-block-heading,
	.wp-block-cover h1.wp-block-heading {
		font-size: clamp(1.9rem, 8.5vw, 2.6rem) !important;
		overflow-wrap: break-word;
		word-break: normal;
		hyphens: none;
	}
}