/*
 * The diary.
 *
 * Every value here comes from the theme's tokens. Nothing in this file decides
 * what the site's colours or spacing are — it decides what shape an event is,
 * and borrows the rest. Swap the theme and this follows it.
 */

.ac-event {
	align-items: flex-start;
	border-bottom: var( --wp--custom--border--width, 1px ) solid var( --wp--preset--color--border );
	display: flex;
	gap: var( --wp--preset--spacing--30 );
	padding-block: var( --wp--preset--spacing--30 );
}

.ac-event:last-child {
	border-bottom: 0;
}

.ac-event__body {
	min-width: 0;
}

.ac-event__body > * {
	margin-block: 0;
}

.ac-event__body > * + * {
	margin-block-start: 0.25rem;
}

.ac-event__body > p:not( .has-small-font-size ) + p {
	margin-block-start: 0.5rem;
}

/*
 * The date, as a block you can find with your eye rather than read.
 *
 * A list of village events is scanned for "is there anything on Saturday",
 * not read top to bottom, and a wall of identical sentences makes that hard.
 * The chip is `aria-hidden` because the same date is announced properly by the
 * <time> element in the body — a screen reader should hear the date once, in
 * full, not twice with one of them chopped into three fragments.
 */
.ac-event__when {
	align-items: center;
	background: var( --wp--preset--color--surface );
	border: var( --wp--custom--border--width, 1px ) solid var( --wp--preset--color--border );
	border-radius: var( --wp--custom--radius--md );
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	justify-content: center;
	line-height: 1.1;
	min-width: 3.75rem;
	padding: var( --wp--preset--spacing--20 ) var( --wp--preset--spacing--10 );
	text-align: center;

	/*
	 * It is a link now, so the theme's link styling has to be turned off: an
	 * underlined, primary-coloured date block would read as a word, not a date.
	 * The colours of the parts inside it are set below and still apply.
	 */
	color: inherit;
	text-decoration: none;
}

/*
 * The hover cue.
 *
 * Only the border moves. The date block already sits on `surface`, so darkening
 * the fill would fight the tint rather than add to it, and a link that changes
 * colour on hover would undo the point of the rule above.
 */
.ac-event__when:hover {
	border-color: var( --wp--preset--color--border-strong );
}

.ac-event__dow,
.ac-event__mon {
	color: var( --wp--preset--color--muted );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: var( --wp--custom--tracking--caps, 0.08em );
	text-transform: uppercase;
}

.ac-event__day {
	color: var( --wp--preset--color--primary-dark );
	font-family: var( --wp--preset--font-family--serif );
	font-size: var( --wp--preset--font-size--x-large );
	font-weight: 600;
}

/*
 * A cancelled event keeps its chip but loses its confidence. The word
 * "Cancelled." in the body is what carries the meaning — this is only support,
 * which is why the text is never struck through and the colour never removed.
 */
.ac-event--cancelled .ac-event__when {
	border-style: dashed;
}

.ac-event__title {
	text-wrap: balance;
}

/*
 * A regular group has no single date, so there is no chip to line up against —
 * unless it has a photograph, which then takes that place.
 */
.ac-event--regular {
	display: block;
}

.ac-event--regular:has( .ac-event__image ) {
	display: flex;
}

/*
 * The photograph.
 *
 * Fixed width so a column of them lines up: ragged left edges down a list read
 * as a mistake, and the eye uses that edge to find the next entry. Square, for
 * the same reason — the library holds portraits, landscapes and one 980x980,
 * and letting each keep its own shape makes the list look broken rather than
 * varied.
 */
.ac-event__image {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
	width: 6rem;
}

.ac-event__image img {
	aspect-ratio: 1;
	border-radius: var( --wp--custom--radius--md, 6px );
	height: auto;
	object-fit: cover;
	transition: opacity 120ms ease;
	width: 100%;
}

/*
 * The hover cue on a picture.
 *
 * A slight lift rather than a border or a filter: the pictures are small and
 * already rounded, and anything drawn around them competes with the rounding.
 * Skipped for anyone who has asked for less movement.
 */
.ac-event__image:hover img {
	opacity: 0.88;
}

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

	.ac-event__image img {
		transition: none;
	}
}

/* The body takes what is left, and may shrink below its content's width. */
.ac-event--regular .ac-event__body {
	flex: 1 1 auto;
	min-width: 0;
}

@media ( max-width: 480px ) {

	.ac-event {
		gap: var( --wp--preset--spacing--20 );
	}

	.ac-event__when {
		min-width: 3.25rem;
	}

	/*
	 * Smaller rather than stacked. A full-width photograph above each of five
	 * groups turns a scannable list into five screens of scrolling, and the
	 * picture is there to help somebody recognise the thing, not to be looked
	 * at on its own.
	 */
	.ac-event__image {
		width: 4.5rem;
	}
}

/*
 * The ticket wallet.
 *
 * A list somebody opens standing up, often in a doorway, to find one thing: the
 * ticket for tonight. So the reference is the loudest thing on each row after the
 * name of the event — it is what the door actually needs, and it is what somebody
 * reads out over the telephone when nothing else works.
 */
.ac-wallet__list {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ac-wallet__ticket {
	border: 1px solid currentColor;
	border-radius: 4px;
	padding: 1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.ac-wallet__what {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.25;
}

.ac-wallet__when,
.ac-wallet__reference,
.ac-wallet__state,
.ac-wallet__open {
	margin: 0;
}

.ac-wallet__reference code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
}

.ac-wallet__open {
	margin-top: 0.4rem;
}

/*
 * Been and gone. Dimmed rather than hidden — a ticket is a receipt as much as an
 * admission, and "was I at that, and did I pay for two" is a question that comes
 * back months later.
 */
.ac-wallet__list--past .ac-wallet__ticket {
	opacity: 0.72;
}

.ac-wallet__state {
	font-weight: 600;
}

/*
 * On the event page, above the form that would otherwise sell them a second one.
 * The rule down the side is the site's own vocabulary for "this is about you".
 */
.ac-wallet__yours {
	border-left: 4px solid currentColor;
	padding: 0.5rem 0 0.5rem 1rem;
	margin: 0 0 1.5rem;
}

.ac-wallet__have {
	margin: 0 0 0.25rem;
}

/*
 * Forced colours repaints the tint away, so the edge has to be a real border in a
 * system colour rather than a decorative one.
 */
@media ( forced-colors: active ) {

	.ac-wallet__ticket,
	.ac-wallet__yours {
		border-color: CanvasText;
	}
}