/* Event card component
 *
 * Two columns, not a stack: the builder's Event List block is a 25% image
 * beside a 75% text column, and stacking them made the poster 486px tall in a
 * 389px cell — the image swallowing the section it was meant to illustrate.
 *
 * Everything here is read from the block's own generated CSS
 * (`post-52437.css`): the 25/75 split, the 30px column gap, the 1119px
 * breakpoint it stacks at, the image at 90% of its column with a soft drop
 * shadow, and the type below.
 */

.saqi-event-card {
	display: grid;
	/*
	 * 1fr / 3fr, not 25% / 75%.
	 *
	 * Percentages resolve against the whole width, so `25% 75%` plus a gap is
	 * 100% *plus* the gap — the card overflowed its own width by exactly 25px,
	 * which put the body's keyline through the column gap and onto the next
	 * card. Fractions divide what is left after the gap, which is what a 25/75
	 * split with a gap actually means.
	 */
	grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	/* Matching the gap between book columns. The builder had 30 here and 25 on
	   the grids, which read as two different rhythms on one page. */
	gap: 25px;
	/* The image must not stretch to the text's height. */
	align-items: start;
}

/* The builder's own breakpoint, not the theme's: below this the two columns
   stack and each takes the full width. */
@media (max-width: 69.9375rem) {
	.saqi-event-card {
		grid-template-columns: minmax(0, 1fr);
	}
}

.saqi-event-card__image {
	display: block;
	width: 100%;
	box-shadow: 5px 20px 75px rgb(0 0 0 / 0.15);
}

/* Proportional, not cropped. The builder set no rule on this image beyond its
   width, which means height:auto — event photographs are whatever shape they
   were taken, and a forced 3:2 crop cuts heads off. */
.saqi-event-card__image img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Named, not implied: the body is the second column whether or not there is a
 * picture. `render.php` omits the image element entirely when an event has
 * none, and an implicitly-placed body then takes the *first* track — 102px of
 * gutter to set a title in, which is what half the events archive did. The
 * builder renders both columns always, so its titles line up across the grid
 * with or without a picture; this is that alignment without the empty element.
 */
.saqi-event-card__body {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/*
 * No picture, no reserved column. Keeping the body in the second track lined
 * the titles up with the pictured cards' — and left a quarter of the card
 * empty on the left, which read as the picture having failed to load. An event
 * without an image starts at the card's left edge like any other block of text
 * (Will, 2026-09-11); `render.php` sets the modifier.
 */
.saqi-event-card--no-image .saqi-event-card__body {
	grid-column: 1 / -1;
}

@media (max-width: 69.9375rem) {
	.saqi-event-card__body {
		/* One column here, so the second track does not exist. */
		grid-column: 1;
		gap: 5px;
	}
}

/* The date is mid grey and medium, read before the title — the book card's
   author name, in its colour as well as its weight (Will, 2026-09-16); in the
   light grey it had, it was quieter than anything else on either card. A
   keyline under it separates when from what, the same device the book card
   uses above its footer. */
.saqi-event-card__when {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding-block-end: var(--wp--preset--spacing--20);
	border-block-end: 1px solid var(--wp--preset--color--rule);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 1.4;
	color: var(--saqi-link);
}

/* The same size as a book title on a card (`product-card`), because on the
   home page the two grids sit one above the other and were reading as two
   different weights of thing. */
.saqi-event-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 400;
	line-height: 1.25;
	text-wrap: pretty;
}

/* The venue is light grey, not the running colour — measured on both of the
   builder's uses of this block, the home strip and the events page, where
   `.event-details__venue` is #999. It had been inheriting the near-black,
   which read as a second line of title. It sits the book card's title-to-byline
   gap under the title (Will, 2026-09-16), where it had been hard up against
   the title's last line. */
.saqi-event-card__place {
	margin: 0.25rem 0 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--light);
}

/* Link colour is semantic, not one blanket rule: a title is near-black and
   dims to mid grey, matching every other card on the site. No underlines;
   focus keeps its ring from base.css. */
.saqi-event-card a {
	text-decoration: none;
}

.saqi-event-card__title a {
	color: var(--wp--preset--color--foreground);
}

.saqi-event-card__title a:hover,
.saqi-event-card__title a:focus-visible {
	color: var(--wp--preset--color--muted);
}