/**
 * ITN Event Seat — shortcode styles (spec 7).
 *
 * Three of the six shortcodes print a single value inside somebody else's sentence, so
 * this file deliberately gives them no typography at all: `.itn-event-value` exists as a
 * selector for the theme to hook, and inherits everything. Styling it here would resize a
 * few words in the middle of a paragraph.
 *
 * What does need styling is the combined information box, the frame around an embedded
 * seat map, and the editor-only notice.
 *
 * Logical properties throughout (`margin-block`, `border-inline-start`, `padding-inline`):
 * the browser mirrors them on an RTL site, so there is no `-rtl.css` companion to keep in
 * sync. See Support\Assets::register_assets().
 */
/* ---------------------------------------------------------------------------
   Single values — a hook, nothing more.
   --------------------------------------------------------------------------- */

.itn-event-value {
	/* Intentionally empty of visual rules. Themes and page builders style this. */
	white-space: nowrap;
}

/* A venue is an address and may well be long; it is the one value that must wrap. */
.itn-event-value--venue {
	white-space: normal;
}

/* ---------------------------------------------------------------------------
   Combined information box.

   A tinted card that hugs its content rather than a full-width bordered block: a set of
   four short facts stretched across an 800px column reads as a form, and the same four
   facts in a card the width of their longest line read as a label on a ticket. The green
   is the plugin's own "available" colour, so the box matches the seat map it sits next to
   instead of introducing a second accent.
   --------------------------------------------------------------------------- */

.itn-event-info {
	/*
	 * Scoped to the component rather than added to public.css's `:root`. The tokens up
	 * there are the ones Support\Assets::inline_style() rewrites out of the settings;
	 * these are not settings, they are this one box's palette, and declaring them here is
	 * what lets a theme restyle the card with a couple of overrides on this selector.
	 *
	 * The dot borrows --itn-seat-available, so a shop that has recoloured its free seats
	 * gets a card that agrees with its own map.
	 */
	--itn-info-surface: #f6fefa;
	--itn-info-surface-end: #ffffff;
	--itn-info-line: #cbebda;
	--itn-info-ink: #14532d;
	--itn-info-accent: #16a05c;
	--itn-info-meta: #7f9891;
	--itn-info-dot: var(--itn-seat-available, #27ae60);

	/* `fit-content` and not a width: a block box sized to its content sits at the inline
	   start on its own, which is the right edge on a Persian page and the left on an
	   English one, with no `margin-inline` and no RTL companion rule. */
	width: fit-content;
	max-width: 100%;
	margin-block: var(--itn-gap);
	padding: 12px 16px;
	border: 1px solid var(--itn-info-line);
	/* Softer than --itn-radius (6px), which is sized for controls; this is a card. */
	border-radius: 12px;
	/* Vertical, so it does not need mirroring the way a horizontal one would. */
	background: linear-gradient(180deg, var(--itn-info-surface), var(--itn-info-surface-end));
	box-shadow:
		0 1px 2px rgba(15, 82, 55, 0.04),
		0 2px 10px rgba(15, 82, 55, 0.05);
}

.itn-event-info__list {
	margin: 0;
	padding: 0;
	display: grid;
	/* One column of labels sized to its content, values taking the rest. `minmax(0, 1fr)`
	   is what stops a long venue name widening the card past its container. Collapses to a
	   single column on narrow screens further down. */
	grid-template-columns: auto minmax(0, 1fr);
	gap: 3px var(--itn-gap);
	align-items: baseline;
}

/* The row is a `<div>` inside a `<dl>` — valid HTML, and the only way to keep a label and
   its several values together. `display: contents` hands its children straight to the
   grid above so the columns line up across every row. */
.itn-event-info__row {
	display: contents;
}

.itn-event-info__label {
	margin: 0;
	color: var(--itn-info-meta);
	font-size: 0.92em;
	/* Lighter than the value it introduces: the fact is what the visitor came for, the
	   word naming it is scaffolding. */
	font-weight: 500;
}

.itn-event-info__label::after {
	content: ":";
}

/* One dot on the card, on its first line, the way a bullet marks the thing being
   described. Attached to the label rather than the row because a row is `display:
   contents` and has no box of its own to hang a marker on. */
.itn-event-info__row:first-child .itn-event-info__label::before {
	content: "";
	display: inline-block;
	inline-size: 8px;
	block-size: 8px;
	margin-inline-end: 7px;
	border-radius: 50%;
	background: var(--itn-info-dot);
	/* A length, not `middle`: it lifts the dot off the baseline to sit optically centred
	   on the lowercase height, which `middle` overshoots on a 15px line. */
	vertical-align: 0.1em;
}

.itn-event-info__value {
	margin: 0;
	/* A second value in the same row starts on its own line in the value column, which is
	   what makes "date and time" readable for a two-showing event. */
	grid-column-start: 2;
	color: var(--itn-info-ink);
	font-weight: 600;
}

/* The first row is the card's headline — whichever section the author put first. */
.itn-event-info__row:first-child .itn-event-info__value {
	font-size: 1.05em;
	font-weight: 700;
}

/* The one row that is a live number rather than a fixed fact, so it carries the accent. */
.itn-event-info__row--seats .itn-event-info__value {
	color: var(--itn-info-accent);
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Embedded seat map.
   --------------------------------------------------------------------------- */

.itn-shortcode-map {
	margin-block: var(--itn-gap);
}

.itn-shortcode-map__caption {
	display: flex;
	flex-wrap: wrap;
	gap: 4px var(--itn-gap);
	align-items: baseline;
	margin: 0 0 var(--itn-gap);
}

.itn-shortcode-map__caption-label {
	font-weight: 600;
}

.itn-shortcode-map__caption-schedule {
	color: var(--itn-text-muted);
	font-size: 0.9em;
}

.itn-shortcode-map__summary {
	margin: var(--itn-gap) 0 0;
	color: var(--itn-text-muted);
	font-size: 0.9em;
}

/* ---------------------------------------------------------------------------
   Editor-only notice.

   Visitors never see this — Shortcodes\ShortcodeNotice returns an empty string for
   anybody who cannot edit posts — so it is styled to be noticed by the one person it is
   addressed to, without the alarm of a site-wide error.
   --------------------------------------------------------------------------- */

.itn-shortcode-notice {
	display: inline-block;
	border: 1px dashed var(--itn-seat-locked, #f39c12);
	border-radius: var(--itn-radius, 6px);
	padding: 2px 8px;
	background: #fff8e5;
	color: #8a5b00;
	font-size: 0.85em;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Narrow screens.
   --------------------------------------------------------------------------- */

@media (max-width: 480px) {
	.itn-event-info__list {
		/* Labels above values: two columns leave too little room for either once an
		   address is involved. */
		grid-template-columns: 1fr;
		gap: 1px var(--itn-gap);
	}

	.itn-event-info__value {
		grid-column-start: 1;
	}

	/* Stacked rows need air between the pairs that the two-column layout got from
	   sharing a baseline. */
	.itn-event-info__row + .itn-event-info__row .itn-event-info__label {
		margin-block-start: 8px;
	}
}

/* ---------------------------------------------------------------------------
   Print.
   --------------------------------------------------------------------------- */

@media print {
	.itn-shortcode-notice {
		/* An editor printing a page they are working on does not want the diagnostics. */
		display: none;
	}

	.itn-event-info {
		/* Browsers drop backgrounds when printing, so the tint and the shadow are gone
		   whatever this file says; what is left has to work in ink. Full width because a
		   card that hugged its content was hugging a shadow that will not be there. */
		width: auto;
		border-color: #000;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	.itn-event-info__label,
	.itn-event-info__value,
	.itn-event-info__row--seats .itn-event-info__value {
		/* Mid-greens photocopy to the same grey as the ink around them. */
		color: #000;
	}

	.itn-event-info__row:first-child .itn-event-info__label::before {
		display: none;
	}
}