/* Structure only.
 *
 * Colour, type, border, shadow and decorative treatment were stripped when
 * this became the blank starter. The design comes from the build's own
 * Figma / Claude Design work, not from here.
 *
 * Spacing and sizing are exposed as --fw-<selector>-<property> tokens that
 * default to 0, so the starter asserts nothing and the design layer sets
 * them. Everything left is layout mechanics the block needs to function.
 */

.fw-page-hero {
	position: relative;
	overflow: hidden;
	/* Side gutter lives on the container so the inner stays a clean box. */
	padding: var(--fw-page-hero-padding, 0);
}

.fw-page-hero__inner {
	position: relative;
	box-sizing: border-box;
	/* 1440px design container; horizontal gutter is on .fw-page-hero. */
	max-width: var(--fw-page-hero-inner-max-width, 0);
	margin: var(--fw-page-hero-inner-margin, 0);
	padding: var(--fw-page-hero-inner-padding, 0);
	/* Text-only by default; taller when an image is present (see --has-image). */
	min-height: var(--fw-page-hero-inner-min-height, 0);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Taller band only when there's an image to show. */
.fw-page-hero--has-image .fw-page-hero__inner {
	min-height: var(--fw-page-hero-inner-min-height, 0);
}

.fw-page-hero__content {
	position: relative;
	z-index: 1;
	text-align: left;
	/* Keep the text clear of the 500px media box on the right so long, wrapping
	   titles never run underneath it. Falls back to full width on mobile (media
	   drops below). */
	max-width: var(--fw-page-hero-content-max-width, 0);
}

.fw-page-hero__content h1 {
	margin: var(--fw-page-hero-content-margin, 0);
}

.fw-page-hero__content p {
	margin: 0;
	opacity: 0.95;
}

/* ---- 500px-wide image panel, always the full height of the band ---- */
.fw-page-hero__media {
	position: absolute;
	/* Always span the full band height. */
	top: 0;
	bottom: 0;
	/* Bleed the image to the far right edge of the viewport (past the centred
	   1440px container) while the text stays inside the container. Cancels the
	   container's 20px gutter plus the large-screen centring space;
	   overflow:hidden on the band clips any scrollbar overshoot. */
	right: calc( -20px - max( 0px, ( 100vw - 1440px ) / 2 ) );
	width: var(--fw-page-hero-media-width, 0);
	overflow: hidden;
}

.fw-page-hero__media::before {
	content: '';
	position: absolute;
	inset: 0;
	/* Soft blend into the band on the left edge only; the right ~half of the
	   image stays clear. No right-edge re-darken. */
}

/* ---- Term mode (archive layouts): taller band, full-height image, crumbs --- */
.fw-page-hero--term .fw-page-hero__inner {
	padding: var(--fw-page-hero-inner-padding, 0);
}
.fw-page-hero--term .fw-page-hero__content h1 {
	margin-bottom: var(--fw-page-hero-content-margin-bottom, 0);
}

/* Breadcrumb trail inside the dark band. */
.fw-page-hero .fw-breadcrumbs--hero {
	margin: var(--fw-breadcrumbs-hero-margin, 0);
}

.fw-page-hero--placeholder .fw-page-hero__content p {
	opacity: .8;
}

/* ---- Post mode (single blog post): title + date ------------------------ */
.fw-page-hero--post .fw-page-hero__content h1 {
	margin-bottom: var(--fw-page-hero-content-margin-bottom, 0);
}
.fw-page-hero__meta {
	margin: 0;
	opacity: 0.85;
}

@media (max-width: 900px) {
	/* Shorter band below 900. */
	.fw-page-hero__inner {
	min-height: var(--fw-page-hero-inner-min-height, 0);
	padding: var(--fw-page-hero-inner-padding, 0);
}
	.fw-page-hero--has-image .fw-page-hero__inner {
	min-height: var(--fw-page-hero-inner-min-height, 0);
}
	.fw-page-hero--term .fw-page-hero__inner {
	padding: var(--fw-page-hero-inner-padding, 0);
}

	.fw-page-hero__content h1 {
	margin-bottom: var(--fw-page-hero-content-margin-bottom, 0);
}
/* Keep the image RIGHT-aligned with the title overlaid — do NOT stack it
	   full-width above the title. The image stays a full-height panel on the
	   right; the text can use the full width and overlaps its faded left edge. */
	.fw-page-hero__content {
	max-width: 100%;
}
	.fw-page-hero__media {
	width: var(--fw-page-hero-media-width, 0);
}
}

/* Even tighter from 600: a touch more image room, stronger fade still. */
@media (max-width: 600px) {

.fw-page-hero__media {
	width: var(--fw-page-hero-media-width, 0);
}
}