/**
 * "Sleep Health in the News" — layout styles.
 *
 * Colours, radii and fonts read from theme tokens first and only fall back to a
 * literal if the token is missing, so the module inherits the AASM design system
 * rather than declaring its own.
 */

.aasm-news {
	--news-gap: 24px;
	--news-radius: 8px;

	/*
	 * Layout dimensions, measured off the approved mockup.
	 * Hero and rail are flush there, not gapped. To separate them instead, set
	 * --news-column-gap and delete the squared-corner rules further down.
	 */
	--news-height: 424px;
	--news-column-gap: 0px;
	--news-hero-fraction: 1.22fr;

	/*
	 * Deliberately literal rather than read from --ast-global-color-N.
	 * Astra's palette slots are not guaranteed to be text colours — on a custom
	 * palette, slot 3 or 4 can easily be an accent blue, which turns every
	 * heading and date in this module blue. Override these five variables to
	 * rebrand; do not reintroduce palette indices for text.
	 */
	--news-surface: #fff;
	--news-border: #e2e6ec;
	--news-text: #10233f;
	--news-muted: #5c6675;
	--news-accent: #14539b;

	--news-badge-bg: rgb( 20 83 155 / 10% );
}

/*
 * Underlines.
 *
 * text-decoration propagates to descendants and cannot be cancelled on a child,
 * so it has to be defeated on the anchor itself. Astra styles links as
 * `.entry-content a` (0,1,1), which outranks a plain class selector — hence the
 * [class] attribute selector, which raises this to (0,2,1) without !important.
 */
.aasm-news a[class] {
	text-decoration: none;
	text-decoration-line: none;
}

.aasm-news a[class]:hover,
.aasm-news a[class]:focus {
	text-decoration: none;
}

/* Titles are the only thing that should underline, and only on hover. */
.aasm-news a[class]:hover .aasm-news__hero-title,
.aasm-news a[class]:hover .aasm-news .aasm-news__rail-title {
	text-decoration: underline;
}

/* Header --------------------------------------------------------------- */

.aasm-news__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	margin-block-end: var( --news-gap );
}

.aasm-news__heading {
	margin: 0;
}

.aasm-news .aasm-news__more {
	color: var( --news-accent );
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.aasm-news__more:hover,
.aasm-news__more:focus-visible {
	text-decoration: underline;
}

/* Layout --------------------------------------------------------------- */

.aasm-news__layout {
	display: grid;
	gap: var( --news-gap );
	align-items: stretch;
	grid-template-columns: 1fr;
}

@media ( min-width: 62em ) {
	.aasm-news__layout {
		/* Hero is the wider column, matching the mockup's ~55/45 split. */
		gap: var( --news-column-gap );
		grid-template-columns: minmax( 0, var( --news-hero-fraction ) ) minmax( 0, 1fr );
	}

	/* Flush inner edges. Remove these two rules if you set a column gap. */
	.aasm-news__hero {
		border-start-end-radius: 0;
		border-end-end-radius: 0;
	}

	.aasm-news__rail {
		border-start-start-radius: 0;
		border-end-start-radius: 0;
	}
}

/* Hero ----------------------------------------------------------------- */

.aasm-news__hero {
	position: relative;
	display: flex;
	min-height: 280px;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	background: var( --news-text );
	border-radius: var( --news-radius );
	isolation: isolate;
}

.aasm-news__hero-image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Guarantees legible text over any photograph, light or dark. */
.aasm-news__hero::after {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
	background: linear-gradient( to top, rgb( 6 18 35 / 88% ) 0%, rgb( 6 18 35 / 55% ) 38%, rgb( 6 18 35 / 0% ) 70% );
}

.aasm-news__hero.is-imageless::after {
	background: none;
}

@media ( min-width: 62em ) {
	.aasm-news__hero {
		/*
		 * A floor, not a fixed height. The grid row takes the taller of the two
		 * columns, so if the rail needs more room everything grows together
		 * rather than the rail overflowing.
		 */
		min-height: var( --news-height );
	}
}

.aasm-news__hero-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-self: flex-end;
	padding: 28px;
}

.aasm-news .aasm-news__hero-title {
	margin: 0;
	color: #fff;
	font-size: clamp( 1.25rem, 2.2vw, 1.6rem );
	line-height: 1.25;
}

.aasm-news .aasm-news__hero-excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.aasm-news .aasm-news__hero-excerpt,
.aasm-news .aasm-news__hero-date {
	margin: 0;
	color: rgb( 255 255 255 / 82% );
	font-size: 0.875rem;
	line-height: 1.5;
}

.aasm-news__hero-date {
	font-size: 0.8125rem;
}

/* Rail ----------------------------------------------------------------- */

/*
 * List reset, at raised specificity.
 *
 * The rail is a <ul> and the hero is an <a>. Astra styles lists as
 * `.entry-content ul` / `.entry-content li` (0,1,1), which outranks a single
 * class (0,1,0) — so the plain resets below were losing and the rail inherited
 * a top margin and 40px of inline padding the hero did not have. That is what
 * knocks the two columns out of alignment. Doubling the class raises this to
 * (0,2,0) and wins without !important.
 */
.aasm-news .aasm-news__rail,
.aasm-news .aasm-news__rail-item {
	margin: 0;
	padding: 0;
	list-style: none;
	text-indent: 0;
}

.aasm-news .aasm-news__rail-item::before,
.aasm-news .aasm-news__rail-item::marker {
	content: none;
}

/* Both columns fill the grid row so their top and bottom edges line up. */
.aasm-news .aasm-news__hero,
.aasm-news .aasm-news__rail {
	align-self: stretch;
	height: 100%;
}

/* Header spacing should not inherit a theme heading margin either. */
.aasm-news .aasm-news__heading {
	margin: 0;
	padding: 0;
}


.aasm-news__rail {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var( --news-surface );
	border: 1px solid var( --news-border );
	border-radius: var( --news-radius );
}

.aasm-news__rail-item + .aasm-news__rail-item {
	border-top: 1px solid var( --news-border );
}

@media ( min-width: 62em ) {
	.aasm-news__rail {
		height: 100%;
	}

	/*
	 * Rows grow to share the rail's height but never shrink below their own
	 * content. `1 1 0` forced every row to exactly a third of the hero height
	 * and the text spilled over the divider into the row below. The clamps
	 * further down are what actually keep rows predictable; this only
	 * distributes whatever slack is left.
	 */
	.aasm-news__rail-item {
		display: flex;
		flex: 1 0 auto;
		overflow: hidden;
	}
}

.aasm-news__rail-link {
	display: flex;
	gap: 16px;
	width: 100%;
	height: 100%;
	align-items: flex-start;
	padding: 20px 24px;
	color: inherit;
	text-decoration: none;
}

.aasm-news__thumb {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 4px;
}

.aasm-news__thumb--empty {
	background: var( --news-border );
}

.aasm-news__rail-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.aasm-news__rail-title {
	display: -webkit-box;
	overflow: hidden;
	color: var( --news-text );
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.aasm-news__rail-link:hover .aasm-news__rail-title {
	color: var( --news-accent );
}

.aasm-news .aasm-news__rail-excerpt {
	display: -webkit-box;
	overflow: hidden;
	color: var( --news-muted );
	font-size: 0.8125rem;
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.aasm-news .aasm-news__rail-date {
	color: var( --news-muted );
	font-size: 0.75rem;
}

/* Badge ---------------------------------------------------------------- */

.aasm-news .aasm-news__badge {
	align-self: flex-start;
	padding: 3px 9px;
	color: var( --news-accent );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: var( --news-badge-bg, rgb( 20 83 155 / 10% ) );
	border-radius: 4px;
}

.aasm-news__badge--on-image {
	color: #fff;
	background: rgb( 255 255 255 / 22% );
}

/* Focus and motion ------------------------------------------------------ */

.aasm-news__hero:focus-visible,
.aasm-news__rail-link:focus-visible,
.aasm-news__more:focus-visible {
	outline: 2px solid var( --news-accent );
	outline-offset: 2px;
}

.aasm-news__notice {
	padding: 16px 20px;
	color: var( --news-muted, #5c6675 );
	border: 1px dashed var( --news-border, #e2e6ec );
	border-radius: var( --news-radius, 8px );
}

@media ( prefers-reduced-motion: reduce ) {
	.aasm-news * {
		transition: none !important;
	}
}