/**
 * ITN Event Seat — the customer's own tickets.
 *
 * Styles `templates/public/shortcode-my-tickets.php`: the grid printed by
 * `[itn_event_my_tickets]` and by the "My tickets" tab of the WooCommerce account page
 * ({@see \ITN\EventSeat\Frontend\AccountTickets}).
 *
 * The shape is the printed ticket of `event.css` — coloured stub, perforation, three
 * punched notches, then the counterfoil — and deliberately so: a customer who chose a
 * date from a session card should recognise what they bought. What differs is what the
 * colour *means*. On a session card it is availability; here it is the state of the
 * booking, so the palette is keyed to the reservation status and a date that has passed
 * fades the whole card rather than recolouring it.
 *
 * Logical properties throughout (`inset-inline-end`, `padding-inline`, `border-block`),
 * so the browser mirrors the stub and the notches on a Persian page and there is no
 * `-rtl.css` companion to keep in sync. See Support\Assets::definitions().
 */

/* ---------------------------------------------------------------------------
   Wrapper
   --------------------------------------------------------------------------- */

.itn-my-tickets {
	margin-block: var(--itn-gap);
}

.itn-my-tickets__title {
	font-size: 1.15em;
	margin-block: 0 var(--itn-gap);
}

/* The guest and "nothing booked yet" states. `.itn-notice` from public.css already
   carries the box; all this adds is room for the link that follows the sentence. */
.itn-my-tickets__empty {
	color: var(--itn-text);
}

.itn-my-tickets__login {
	font-weight: 600;
	margin-inline-start: 4px;
}

/* ---------------------------------------------------------------------------
   The grid

   `auto-fit` is the property's own default rather than a hard-coded keyword, which is
   what lets `columns="3"` override it with a plain number from one inline custom
   property — no per-count class to enumerate and nothing for the template to guess.
   `min(100%, …)` keeps a card from overflowing a container narrower than its own
   minimum, which on an account page inside a narrow theme column is the normal case.
   --------------------------------------------------------------------------- */

.itn-my-tickets__grid {
	--itn-tickets-columns: auto-fit;

	display: grid;
	gap: calc(var(--itn-gap) * 1.5);
	grid-template-columns: repeat(var(--itn-tickets-columns), minmax(min(100%, 19rem), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------------------
   One ticket

   Every colour is a local custom property set once per status below, so the stub, the
   border, the status word and the notches can never drift apart: restyle `is-pending`
   in one place and the whole card follows.
   --------------------------------------------------------------------------- */

.itn-my-tickets__ticket {
	/* Grey is the fallback and not a status: a card whose status class is missing still
	   reads as a neutral record instead of borrowing the theme's link colour. */
	--itn-card-accent: var(--itn-seat-disabled);
	--itn-card-ink: var(--itn-text-muted);
	--itn-card-tint: #f3f4f6;
	--itn-card-edge: var(--itn-border);
	--itn-card-face: #fff;

	background: var(--itn-card-face);
	border: 1px solid var(--itn-card-edge);
	border-radius: 12px;
	display: flex;
	margin: 0;
	/* Lets the card's radius round the stub, which has square corners of its own. The
	   notches sit well inside the edges, so nothing else is clipped. */
	overflow: hidden;
}

/* Paid for. The green is the plugin's own "available" colour, so a shop that recoloured
   its seat map gets tickets that agree with it. */
.itn-my-tickets__ticket.is-confirmed {
	--itn-card-accent: var(--itn-seat-available);
	--itn-card-ink: #1e7a45;
	--itn-card-tint: #e8f7ee;
	--itn-card-edge: #b7e3c8;
}

/* The seat is held but not sold. Amber, the same colour the seat map uses for a seat
   somebody else is in the middle of taking — in both cases: yours for now. */
.itn-my-tickets__ticket.is-pending {
	--itn-card-accent: var(--itn-seat-locked);
	--itn-card-ink: #8a5b00;
	--itn-card-tint: #fff8e5;
	--itn-card-edge: #f3d9a3;
}

.itn-my-tickets__ticket.is-cancelled {
	--itn-card-accent: var(--itn-seat-reserved);
	--itn-card-ink: #a32b1f;
	--itn-card-tint: #fdecea;
	--itn-card-edge: #f2b8b1;
}

/* A date that has gone by. Not a status and not an error — the ticket was perfectly
   valid — so the card keeps its colour and loses its brightness. Anything a customer
   still needs from it (the seat, the price, the order) stays legible. */
.itn-my-tickets__ticket.is-past {
	filter: saturate(0.45);
	opacity: 0.78;
}

/* ---------------------------------------------------------------------------
   The stub
   --------------------------------------------------------------------------- */

.itn-my-tickets__stub {
	align-items: center;
	background: var(--itn-card-accent);
	color: #fff;
	display: flex;
	flex: 0 0 6.75rem;
	flex-direction: column;
	gap: 2px;
	justify-content: center;
	padding: 14px 10px;
	position: relative;
	text-align: center;
}

/* The tear line, inset at both ends so it reads as a perforation inside one card
   rather than a border between two boxes. */
.itn-my-tickets__stub::before {
	border-inline-start: 2px dashed rgba(255, 255, 255, 0.5);
	content: "";
	inset-block: 8px;
	inset-inline-end: 0;
	position: absolute;
}

/* Three punched notches, evenly spaced. One repeating gradient rather than three
   elements: `repeat-y` over a third of the height tiles exactly three circles at any
   card height, so a card that grows a longer event name keeps them spaced. They are the
   colour of the card face and centred on the tear line, so each reads as a bite taken
   out of the coloured stub. */
.itn-my-tickets__stub::after {
	background-image: radial-gradient(circle at 50% 50%, var(--itn-card-face) 4.5px, transparent 5px);
	background-repeat: repeat-y;
	background-size: 12px 33.34%;
	block-size: 100%;
	content: "";
	inline-size: 12px;
	inset-block-start: 0;
	inset-inline-end: -6px;
	position: absolute;
}

.itn-my-tickets__weekday {
	font-size: 0.8125rem;
	opacity: 0.92;
}

.itn-my-tickets__date {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
}

.itn-my-tickets__time {
	font-size: 0.8125rem;
	/* Times line up under each other down a column of cards. */
	font-variant-numeric: tabular-nums;
	opacity: 0.92;
}

/* The showing's name, on the stub of a ticket whose date is not set yet. Smaller than
   the date it stands in for, because it is a longer string in a narrow column. */
.itn-my-tickets__fallback {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
}

/* ---------------------------------------------------------------------------
   The counterfoil
   --------------------------------------------------------------------------- */

.itn-my-tickets__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	justify-content: center;
	/* Without this a long event name stretches the card past its grid track. */
	min-inline-size: 0;
	padding: 12px 14px;
}

.itn-my-tickets__event {
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
	/* Two lines of title, then an ellipsis: a card is a fixed shape in a grid of them,
	   and a five-line name would push the facts of one card out of line with its
	   neighbours. The full name is one click away on the event page. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.itn-my-tickets__event a {
	color: inherit;
	text-decoration: none;
}

.itn-my-tickets__event a:hover,
.itn-my-tickets__event a:focus {
	text-decoration: underline;
}

/* The four facts of the ticket: seat and price on one line, showing and date on the
   next. Two columns and not four, because the values are short but the labels are not,
   and four columns on a card this wide breaks every one of them onto two lines. */
.itn-my-tickets__facts {
	display: grid;
	gap: 6px var(--itn-gap);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
}

/* A `<div>` inside a `<dl>` — valid HTML, and the only way to keep a label with its
   value while the pairs themselves are grid items. */
.itn-my-tickets__fact {
	min-inline-size: 0;
}

.itn-my-tickets__key {
	color: var(--itn-text-muted);
	font-size: 0.8125rem;
	/* Lighter than the value it introduces: the fact is what the customer came for, the
	   word naming it is scaffolding. */
	font-weight: 500;
	line-height: 1.5;
	margin: 0;
}

.itn-my-tickets__value {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	margin: 0;
	/* The seat and the price are numbers a customer reads out loud to somebody on a
	   door; letting them wrap mid-value would be the one place that matters. */
	overflow-wrap: break-word;
}

/* The seat number is the one fact on the card that identifies the ticket, so it is the
   one that carries the card's colour into the text. `--itn-card-ink` exists separately
   from `--itn-card-accent` for exactly this: the green that works as a filled stub is
   too light to read as a word. */
.itn-my-tickets__fact--seat .itn-my-tickets__value {
	color: var(--itn-card-ink);
	font-size: 1.0625rem;
	font-weight: 700;
}

.itn-my-tickets__fact--price .itn-my-tickets__value {
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   The footer
   --------------------------------------------------------------------------- */

.itn-my-tickets__footer {
	align-items: center;
	border-block-start: 1px solid var(--itn-card-edge);
	display: flex;
	flex-wrap: wrap;
	gap: 4px var(--itn-gap);
	justify-content: space-between;
	margin: 0;
	padding-block-start: 8px;
}

/* A badge and not a coloured word: this is the line a customer scans for on a page of
   cards, and a filled shape is found faster than a shade of text. */
.itn-my-tickets__status {
	background: var(--itn-card-tint);
	border-radius: 999px;
	color: var(--itn-card-ink);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	padding: 5px 10px;
}

.itn-my-tickets__order {
	color: var(--itn-text-muted);
	font-size: 0.8125rem;
	text-decoration: none;
}

.itn-my-tickets__order:hover,
.itn-my-tickets__order:focus {
	color: var(--itn-focus);
	text-decoration: underline;
}

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

@media (max-width: 600px) {
	/* A fixed column count is a desktop instruction. On a phone there is room for one
	   card whatever the author asked for, and honouring `columns="3"` here would print
	   three cards too narrow to read their own labels. */
	.itn-my-tickets__grid {
		--itn-tickets-columns: 1;
	}

	/* The stub narrows before the counterfoil does: the date it carries is three short
	   lines, while the facts beside it need room to keep their labels on one. */
	.itn-my-tickets__stub {
		flex-basis: 5.5rem;
		padding: 12px 8px;
	}

	.itn-my-tickets__date {
		font-size: 1rem;
	}
}

@media (max-width: 380px) {
	/* Below this the two fact columns leave the labels no room at all, so the four
	   facts stack into one column. */
	.itn-my-tickets__facts {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

   A ticket is a thing people print. Browsers drop background colours when printing, so
   the stub's fill and the status badge are gone whatever this file says; what is left
   has to work in ink.
   --------------------------------------------------------------------------- */

@media print {
	.itn-my-tickets__grid {
		/* One ticket per row, whatever the screen was showing: a printed page is not a
		   dashboard, and a card broken across a page break is a wasted sheet. */
		--itn-tickets-columns: 1;

		gap: 6mm;
	}

	.itn-my-tickets__ticket {
		border-color: #000;
		border-radius: 0;
		/* Keeps a ticket whole when the page runs out. */
		break-inside: avoid;
		filter: none;
		opacity: 1;
	}

	.itn-my-tickets__stub {
		/* The fill will not print, so the tear line becomes a real border and the white
		   text becomes black — otherwise the date disappears into the paper. */
		border-inline-end: 1px dashed #000;
		color: #000;
	}

	.itn-my-tickets__stub::before,
	.itn-my-tickets__stub::after {
		/* Both were drawn in the colour of the card face; on paper they would be either
		   invisible or three grey blobs. */
		display: none;
	}

	.itn-my-tickets__weekday,
	.itn-my-tickets__time {
		opacity: 1;
	}

	.itn-my-tickets__event {
		/* The clamp existed to keep a grid aligned; on paper there is no grid to align. */
		display: block;
		overflow: visible;
	}

	.itn-my-tickets__key,
	.itn-my-tickets__value,
	.itn-my-tickets__fact--seat .itn-my-tickets__value,
	.itn-my-tickets__order {
		/* Mid-greens and mid-greys photocopy to the same tone as the ink around them. */
		color: #000;
	}

	.itn-my-tickets__status {
		border: 1px solid #000;
		color: #000;
	}

	.itn-my-tickets__login {
		display: none;
	}
}