/**
 * The 2026 event card (issue #34).
 *
 * A plain registered stylesheet rather than a block's `style`, because the card
 * has a consumer that is not a block: the related-sessions list on the event
 * detail template (#37). `block.json` references the `dhw-event-card` handle by
 * name, so the block and the template load the same one file — see
 * `includes/event-card.php`.
 *
 * Square, borderless, no shadow, per the design system's Card. The theme's own
 * `.dhw-card` (components/_cards.scss) is the 2025 card and is deliberately not
 * reused: that one has a format kicker above the heading, an excerpt and a
 * border, and this one is a colour edge, a soft image and a white panel. A
 * shared class would be a modifier overriding most of its base.
 */

.dhw-event-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--wp--custom--spacing--lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

/**
 * Three across once there is room. `auto-fit` above handles the small end, but
 * both consumers show exactly three cards, and letting it settle at four on a
 * wide screen would break a row the design treats as a set.
 */
@media (min-width: 64em) {
	.dhw-event-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.dhw-event-card {
	display: flex;
}

/**
 * The card is the positioning context for the stretched link, so the whole card
 * is the click target. `isolation` keeps that overlay from escaping the grid
 * cell and covering its neighbour.
 */
.dhw-event-card__inner {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: var(--wp--preset--color--light);
}

/* BarEdge: three hard-edged bars, weighted 6:1:1 by the inline flex value. */
.dhw-event-card__edge {
	display: flex;
	gap: 0;
	width: 100%;
	height: 10px;
	flex: none;
}

.dhw-event-card__edge > span {
	flex: 1;
}

/**
 * Event imagery is photographic and arbitrarily shaped, so it crops to the
 * design's 4:3 rather than letterboxing. (The theme cards `contain` instead —
 * those are illustrations of a fixed subject, where cropping cuts the subject.)
 */
.dhw-event-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.dhw-event-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--custom--spacing--2-xs);
	padding: var(--wp--custom--spacing--md);
}

.dhw-event-card__meta {
	margin: 0;
	font-family: var(--wp--preset--font-family--system-font);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--foreground-muted);
}

/**
 * Sentence case in the database, uppercase on screen — the project's authoring
 * rule, so editors type a title and the CSS shouts it.
 */
.dhw-event-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	line-height: var(--wp--custom--typography--line-height--flat);
	letter-spacing: var(--wp--custom--typography--letter-spacing--heading);
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}

.dhw-event-card__link {
	color: inherit;
	text-decoration: none;
}

/**
 * The whole-card hit area.
 *
 * The link is on the title only, stretched with a pseudo-element, rather than
 * wrapping the card in one `<a>` as the design system's Card does. Wrapping
 * would make the accessible name the run-on of meta line, title and host, and
 * would put the image inside the link for no gain. This way the name is exactly
 * the session title and there is one interactive element per card — the same
 * call the theme cards (#33) made.
 */
.dhw-event-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.dhw-event-card__inner:hover .dhw-event-card__link {
	text-decoration: underline;
}

/**
 * The focus ring belongs on the card, not the title text: the stretched
 * pseudo-element is what the pointer hits, so a ring around the words alone
 * would mark a smaller target than the real one.
 */
.dhw-event-card__inner:has(.dhw-event-card__link:focus-visible) {
	outline: var(--outline-width, 3px) solid var(--wp--preset--color--focus);
	outline-offset: var(--wp--custom--spacing--3-xs);
}

.dhw-event-card__link:focus-visible {
	outline: none;
}

.dhw-event-card__host {
	margin: 0;
	/* Pushed to the foot so hosts line up across cards of unequal title length.
	   Needs the body to own the leftover height — hence `flex: 1` above. */
	margin-block-start: auto;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--secondary);
}