/**
 * ITN Event Seat — event information box on the product page.
 *
 * Styles the read-only box printed by `templates/public/event-meta.php` (spec 4.1).
 * It sits inside whatever the theme calls a product summary, so every rule is scoped
 * to `.itn-event-meta` and nothing is set on typography the theme owns.
 *
 * Logical properties throughout, so one file serves Persian and English.
 *
 * @package ITN\EventSeat
 */

.itn-event-meta {
	border: 1px solid var(--itn-border);
	border-radius: var(--itn-radius);
	margin-block: var(--itn-gap) calc(var(--itn-gap) * 2);
	padding: calc(var(--itn-gap) * 1.5);
}

/*
|--------------------------------------------------------------------------
| Fact list
|--------------------------------------------------------------------------
*/

.itn-event-meta__list {
	display: grid;
	gap: 6px;
	margin: 0;
}

/* Label and value on one line while there is room for both, stacked when there
   is not. `minmax(0, …)` is what stops a long venue name from widening the row
   past its container. */
.itn-event-meta__row {
	display: grid;
	gap: 2px 12px;
	grid-template-columns: minmax(0, 9em) minmax(0, 1fr);
	margin: 0;
}

.itn-event-meta__label {
	color: var(--itn-text-muted);
	font-weight: 400;
	margin: 0;
}

.itn-event-meta__value {
	font-weight: 600;
	margin: 0;
}

.itn-event-meta__row--price .itn-event-meta__value {
	font-size: 1.1em;
}

/*
|--------------------------------------------------------------------------
| Session table
|--------------------------------------------------------------------------
|
| Only printed for an event with more than one session, where each date needs
| its own seat count.
*/

.itn-event-meta__sessions {
	border-collapse: collapse;
	inline-size: 100%;
	margin-block: var(--itn-gap) 0;
}

.itn-event-meta__sessions-caption {
	color: var(--itn-text-muted);
	font-size: 13px;
	padding-block-end: 4px;
	text-align: start;
}

.itn-event-meta__sessions th,
.itn-event-meta__sessions td {
	border-block-end: 1px solid var(--itn-border);
	font-weight: 400;
	padding: 6px 8px;
	text-align: start;
}

.itn-event-meta__sessions thead th {
	color: var(--itn-text-muted);
	font-size: 12px;
	text-transform: uppercase;
}

.itn-event-meta__sessions tbody th {
	font-weight: 600;
}

.itn-event-meta__sessions tr:last-child th,
.itn-event-meta__sessions tr:last-child td {
	border-block-end: 0;
}

/* A sold-out session stays listed — that it is gone is information — but it stops
   competing for attention with the ones still on sale. */
.itn-event-meta__session.is-sold-out {
	color: var(--itn-text-muted);
}

.itn-event-meta__session.is-sold-out td:last-child {
	color: var(--itn-seat-reserved);
}

/*
|--------------------------------------------------------------------------
| Description and closing hint
|--------------------------------------------------------------------------
*/

.itn-event-meta__description {
	border-block-start: 1px solid var(--itn-border);
	margin-block-start: var(--itn-gap);
	padding-block-start: var(--itn-gap);
}

.itn-event-meta__description p:last-child {
	margin-block-end: 0;
}

/* The one sentence that explains why there is no seat map on this page. */
.itn-event-meta__hint {
	color: var(--itn-text-muted);
	font-size: 13px;
	margin-block: var(--itn-gap) 0;
}

/*
|--------------------------------------------------------------------------
| Responsive (spec 10)
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {
	/* Below this width the two-column row leaves the value too narrow to read,
	   so label and value stack. */
	.itn-event-meta__row {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The session table drops its date column into the row header instead of
	   scrolling: three columns of Persian dates do not fit a phone. */
	.itn-event-meta__sessions thead {
		display: none;
	}

	.itn-event-meta__sessions tr {
		border-block-end: 1px solid var(--itn-border);
		display: grid;
		gap: 2px;
		padding-block: 8px;
	}

	.itn-event-meta__sessions th,
	.itn-event-meta__sessions td {
		border: 0;
		padding: 0;
	}

	.itn-event-meta__sessions tr:last-child {
		border-block-end: 0;
	}
}