/*
 * The concert card on /concerts/ — layout only.
 *
 * Colour, typography and the hover state are Sonaar's, because the card emits
 * Sonaar's class names (see inc/EventRow/ConcertRow.php). Theme Options writes
 * those as CSS rules against `.sr_it-event-title`, `.sr_it-event-info` and
 * friends, so a palette change in wp-admin reaches this card like any other
 * event list. Nothing here sets a colour.
 *
 * The arrangement is the concert page's: the poster beside the text, stacking
 * above it once there is no room for a column. Where the concert page floats,
 * this is a grid -- see the note on the row below.
 */

/* The rule between two cards is Sonaar's -- `.concerts-list .event` carries the
   border-bottom and the position:relative.

   Two columns rather than a floated poster. The concert page can float its
   poster because its header children are plain blocks; here they are not. The
   parent sets `display:inline-block` on every heading inside
   `div.sr_it-event-title`, and an inline-block is a block formatting context,
   so it will not wrap around a float -- when a long title's shrink-to-fit
   width does not fit beside the poster, the whole text column drops beneath
   it. A grid has no such interaction, and stacking for a narrow screen is one
   declaration. */
.cn-concert-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	max-width: var(--cn-concert-measure, 900px);
	padding: 26px 0 30px;
}

.cn-concert-row > * {
	box-sizing: border-box;
	min-width: 0;
}

/* -- poster ------------------------------------------------------------- */

/* Spans both text rows, so the ticket button sits under the text rather than
   under the poster.

   Padding, not margin, and not a grid gap. Elementor resets `figure` margin to
   zero at `.elementor .elementor-widget:not(…):not(…) figure` -- four classes
   and an element, which no sane selector of ours outranks -- so a margin here
   is simply discarded. Padding is untouched by that rule. Keeping the gutter
   on the poster rather than in a `column-gap` also means a concert with no
   poster loses the gutter with it, instead of leaving a hole where the column
   would have been. Width is the border-box total: 224px of image plus the
   28px gutter. */
.cn-concert-row__poster {
	grid-column: 2;
	grid-row: 1 / span 2;
	width: 252px;
	padding: 0 0 10px 28px;
}

.cn-concert-row__poster img {
	display: block;
	width: 100%;
	height: auto;
}

.cn-concert-row .sr_it-event-main {
	grid-column: 1;
	grid-row: 1;
}

.cn-concert-row .sr_it-event-buttons {
	grid-column: 1;
	grid-row: 2;
}

/* -- text --------------------------------------------------------------- */

/* The parent insets its text column by 12px and sizes it for its own row; the
   card sets its own measure, and the widget's Sub Title typography still
   reaches `.sr_it-event-info` inside. */
.cn-concert-row .sr_it-event-main {
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

.cn-concert-row .sr_it-event-title {
	margin-bottom: 0.3em;
}

/*
 * Sonaar's row puts the title text straight in the heading and wraps the whole
 * row in an <a> outside it; the card links the title itself, so the text sits
 * one level deeper, inside an anchor. The parent's inherit-reset
 * (`div.sr_it-event-title h1 … p`) lists headings, divs, spans and paragraphs
 * but not `a`, so everything the widget's Title Typography control sets has to
 * be handed down explicitly or it stops at the heading.
 */
.cn-concert-row .sr_it-event-title a {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.cn-concert-row .sr_it-event-info {
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.cn-concert-row .eventlist-artists {
	display: block;
	margin: 0 0 1.2em;
	font-size: 1.15em;
	line-height: 1.7;
}

/* The role, as on the concert page: present, but subordinate to the name. */
.cn-concert-row .cn-credits__role {
	opacity: 0.75;
}

/*
 * The date and the time wear Sonaar's two stamp classes so the widget's Day
 * and Month/Year controls reach them (see ConcertRow). Those controls write at
 * `.elementor-element-<id> .sr-it-date-day`, two classes deep, so the defaults
 * here are deliberately one class deep: they outrank the parent's 32px stamp
 * sizing, and anything set in Elementor outranks them.
 */
.cn-concert-row__when {
	margin: 0 0 0.6em;
}

/* Size only: the parent's stamp is 32px and the card's line is not, but weight,
   spacing and case are the Day control's to set, so nothing here competes. */
.cn-concert-row__date {
	margin: 0;
	padding-right: 0.45em;
	font-size: 1em;
	line-height: 1.6;
}

.cn-concert-row__time {
	font-size: 1em;
	line-height: 1.6;
}

.cn-concert-row .eventlist-venue {
	display: block;
	margin: 0;
	line-height: 1.6;
}

/*
 * "More Info" sits in the concert page's "View map" slot and reads as the
 * homepage hero's button does.
 *
 * That button's look is not global: the kit defines no button style and the
 * theme styles no `.elementor-button`, so the hero's appearance lives entirely
 * in per-widget CSS on element 5ef1918 of page 5427. A hand-emitted Elementor
 * button inherits none of it and falls back to the plugin's raw default -- a
 * #69727d slate pill with white text -- so the hero's treatment is restated
 * here: transparent, accent-coloured, uppercase and letter-spaced, with the
 * arrow after the label rather than before it.
 *
 * The size class the markup carries is inert once padding and font-size are
 * set here; it stays because Elementor's markup always has one.
 */
.cn-concert-row__info {
	margin-top: 1em;
}

.cn-concert-row__info .elementor-button {
	padding: 0;
	border-radius: 0;
	background-color: transparent;
	color: var(--cn-accent, rgb(140, 121, 86));
	fill: var(--cn-accent, rgb(140, 121, 86));
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
}

/* Icon first in the markup, last on the page -- the hero does the same, and it
   is what makes the button read "More Info ->" rather than "-> More Info". */
.cn-concert-row__info .elementor-button-content-wrapper {
	flex-direction: row-reverse;
}

.cn-concert-row__info .elementor-button-icon {
	margin-left: 0.6em;
}

/* The hero's hover grey; it is the kit's --e-global-color-75b62b8d, which has
   no cn- token of its own. */
.cn-concert-row__info .elementor-button:hover,
.cn-concert-row__info .elementor-button:focus {
	color: #a6a6a7;
	fill: #a6a6a7;
}

/* -- tickets ------------------------------------------------------------ */

/* What took .sr_it-event-buttons out of the flow was `sr_it-vertical-align`,
   which centred it in a fixed-height row; the card does not emit that class,
   so the button already sits where it falls. Its 12px left padding does still
   apply, and would hold the button a step in from the title and the text it
   belongs under. */
.cn-concert-row .sr_it-event-buttons {
	padding: 0;
	margin: 1.4em 0 0;
	align-self: start;
}

.cn-concert-row .sr_it-event-buttons .button {
	margin: 0;
	white-space: nowrap;
}

/* -- narrow ------------------------------------------------------------- */

/*
 * One column from tablet down. The poster is first in the markup, so auto
 * placement puts it above the title and flush left -- which is what it was
 * not doing while it floated: a float stays on its side however little room
 * is left beside it.
 *
 * This does not address the horizontal overflow /concerts/ shows at 390px:
 * that is older and wider than this card -- the Past Seasons poster tiles clip
 * at the same edge. See STATUS "mobile unverified".
 */
@media (max-width: 1024px) {
	.cn-concert-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.cn-concert-row__poster,
	.cn-concert-row .sr_it-event-main,
	.cn-concert-row .sr_it-event-buttons {
		grid-column: 1;
		grid-row: auto;
	}

	/* The padding-bottom carries over from above and is what holds the text
	   off the poster once they are stacked. */
	.cn-concert-row__poster {
		width: 60%;
		max-width: 240px;
		padding-left: 0;
	}
}