/* The archive's own head rules are gone as of 1 September 2026: the template now
   uses the shared `.pagehead--film` band and `.pagehead-sub`, so this file no
   longer styles the title. One page head, styled once, for all twelve pages and
   the hub. */
/**
 * News hub.
 *
 * Every value here is a token from assets/css/tokens.css. Arslan, 31 August 2026:
 * "follows boson theme". CLAUDE.md forbids inline styles and taste-based values, so
 * nothing in this file invents a colour, a size or a radius - if something is
 * missing it goes to design-verifier rather than being made up here.
 *
 * ONE DELIBERATE TOKEN CHOICE WORTH KNOWING. The filter control uses
 * --bsn-color-border-control, not --bsn-color-border. The latter is 1.25:1 against
 * white and fails WCAG 1.4.11 for a control boundary; the former is 3.44:1 and is
 * in tokens.css for exactly this reason. Using the wrong one is an axe violation
 * that looks like a design preference.
 *
 * @package boson-group
 */

.bsn-news {
	margin-inline: auto;
	max-width: var( --bsn-content-max-width );
	padding-block: var( --bsn-space-8 );
	padding-inline: var( --bsn-margin-mobile );
}

@media ( min-width: 768px ) {

	.bsn-news {
		padding-inline: var( --bsn-gutter-desktop );
	}
}

/* Filter -------------------------------------------------------------------- */

.bsn-news-filter {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: var( --bsn-space-3 );
	margin-block-end: var( --bsn-space-6 );
}

.bsn-news-filter__label {
	display: block;
	font-size: var( --bsn-font-size-label );
	letter-spacing: var( --bsn-tracking-label );
	line-height: var( --bsn-line-height-label );
	margin-block-end: var( --bsn-space-1 );
	text-transform: uppercase;
	width: 100%;
}

.bsn-news-filter__select {
	background: var( --bsn-color-surface );
	border: var( --bsn-border-width ) solid var( --bsn-color-border-control );
	border-radius: var( --bsn-radius-control );
	color: var( --bsn-color-text );
	font-family: var( --bsn-font-family-base );
	font-size: var( --bsn-font-size-body );
	min-height: var( --bsn-control-min-height );
	padding-inline: var( --bsn-space-3 );
}

.bsn-news-filter__submit {
	background: var( --bsn-color-text );
	border: var( --bsn-border-width ) solid var( --bsn-color-text );
	border-radius: var( --bsn-radius-control );
	color: var( --bsn-color-white );
	cursor: pointer;
	font-family: var( --bsn-font-family-base );
	font-size: var( --bsn-font-size-body );
	min-height: var( --bsn-target-min );
	padding-inline: var( --bsn-space-5 );
	transition: background var( --bsn-motion-micro ) var( --bsn-easing-out );
}

.bsn-news-filter__submit:hover {
	background: var( --bsn-color-slate );
	border-color: var( --bsn-color-slate );
}

.bsn-news-filter__select:focus-visible,
.bsn-news-filter__submit:focus-visible {
	outline: var( --bsn-focus-ring-width ) solid var( --bsn-color-focus-ring );
	outline-offset: var( --bsn-focus-ring-offset );
}

/* Grid ---------------------------------------------------------------------- */

.bsn-news-grid {
	display: grid;
	gap: var( --bsn-space-5 );
	grid-template-columns: 1fr;
}

@media ( min-width: 600px ) {

	.bsn-news-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 1080px ) {

	.bsn-news-grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

/* Card ---------------------------------------------------------------------- */

.bsn-news-card {
	background: var( --bsn-color-surface );
	border: var( --bsn-border-width ) solid var( --bsn-color-border );
	border-radius: var( --bsn-radius-card );
	display: flex;
	flex-direction: column;
	gap: var( --bsn-space-3 );
	padding: var( --bsn-space-6 );
	transition: box-shadow var( --bsn-motion-micro ) var( --bsn-easing-out );
}

.bsn-news-card:hover {
	box-shadow: var( --bsn-shadow-1 );
}

/*
 * The source badge. Not decoration - it is the attribution that makes carrying
 * somebody else's headline honest, so it is never hidden at any width and never
 * shrinks below the label size.
 */
.bsn-news-card__source {
	align-self: flex-start;
	background: var( --bsn-color-surface-accent );
	border-radius: var( --bsn-radius-control );
	color: var( --bsn-color-text );
	font-size: var( --bsn-font-size-label );
	letter-spacing: var( --bsn-tracking-label );
	line-height: var( --bsn-line-height-label );
	margin: 0;
	padding: var( --bsn-space-1 ) var( --bsn-space-3 );
	text-transform: uppercase;
}

.bsn-news-card__title {
	font-size: var( --bsn-font-size-h3 );
	line-height: var( --bsn-line-height-h3 );
	margin: 0;
}

.bsn-news-card__title a {
	color: var( --bsn-color-text );
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.bsn-news-card__title a:hover {
	color: var( --bsn-color-link );
}

.bsn-news-card__title a:focus-visible {
	outline: var( --bsn-focus-ring-width ) solid var( --bsn-color-focus-ring );
	outline-offset: var( --bsn-focus-ring-offset );
}

.bsn-news-card__meta,
.bsn-news-card__excerpt {
	color: var( --bsn-color-text-secondary );
	font-size: var( --bsn-font-size-small );
	line-height: var( --bsn-line-height-small );
	margin: 0;
}

.bsn-news-card__excerpt {
	margin-block-start: auto;
}

/* Video --------------------------------------------------------------------- */

/*
 * No iframe and no third-party poster frame. See bsn_news_video_figure(): fetching
 * the thumbnail from i.ytimg.com would send every visitor's IP to Google on a page
 * about confidentiality, which is the same argument that made this theme self-host
 * Roboto. A human-set featured image renders; otherwise this placeholder does, and
 * the card links out like any other bulletin.
 */
.bsn-news-card__media {
	aspect-ratio: 16 / 9;
	background: var( --bsn-color-surface-light );
	border-radius: var( --bsn-radius-control );
	margin: 0;
	overflow: hidden;
	position: relative;
}

.bsn-news-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.bsn-news-card__play {
	background: var( --bsn-color-text );
	border-radius: 50%;
	display: block;
	height: 48px;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	position: absolute;
	transform: translate( -50%, -50% );
	width: 48px;
}

.bsn-news-card__play::after {
	border-block: 9px solid transparent;
	border-inline-start: 15px solid var( --bsn-color-white );
	content: "";
	inset-block-start: 50%;
	inset-inline-start: 54%;
	position: absolute;
	transform: translate( -50%, -50% );
}

/* Empty state --------------------------------------------------------------- */

.bsn-news__empty {
	color: var( --bsn-color-text-secondary );
	font-size: var( --bsn-font-size-body );
	margin-block: var( --bsn-space-7 );
}

@media ( prefers-reduced-motion: reduce ) {

	.bsn-news-card,
	.bsn-news-filter__submit {
		transition: none;
	}
}