/*
 * Make Room — Events listing styles.
 *
 * Loaded with `global-styles` as a dependency so it lands after the Site
 * Editor's custom CSS and can override it on specificity alone. The base
 * .coming-up-* rules still live in the Site Editor (wp_global_styles #5) —
 * this file only carries the pieces tied to the shortcode's own markup.
 */

/* -- Pill buttons -------------------------------------------------------- *
 * One outlined-pill treatment shared by the homepage hero's "More Info" and
 * the Other Events "View All Conferences" button, so the two can't drift.
 *
 * The border and text use currentColor, so the same rule works on the dark
 * hero (inherits white) and on the light Other Events section (inherits the
 * body's near-black) with no per-context colour. Only the hover fill has to
 * know which background it is on.
 */
.coming-up-homepage .home-event-button,
.mr-conferences-button .wp-block-button__link {
	/* !important only to beat `display: inline !important` in the older
	   .home-event-button rule in the Site Editor CSS. */
	display: inline-flex !important;
	align-items: center;
	gap: 0.5em;

	float: none;
	width: auto;
	padding: 11px 22px;

	background: transparent;
	border: 2px solid currentColor;
	border-radius: 999px;

	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;

	transition: background-color 0.2s ease, color 0.2s ease;
}

.coming-up-homepage .home-event-button {
	margin-top: 16px;
}

/* Matches the chevron convention already used by .coming-up-header and the
   FAQ rows — FontAwesome glyph f105, resolved through the v4 shim. */
.coming-up-homepage .home-event-button::after,
.mr-conferences-button .wp-block-button__link::after {
	content: "\f105";
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
}

/* On the dark hero: fill white, text goes dark. */
.coming-up-homepage .home-event-button:hover,
.coming-up-homepage .home-event-button:focus-visible {
	background: #fff;
	color: #111;
}

/* On the light section: the inverse. */
.mr-conferences-button .wp-block-button__link:hover,
.mr-conferences-button .wp-block-button__link:focus-visible {
	background: #191919;
	color: #fff;
}

/* -- Subpage listing rows ------------------------------------------------ *
 * Icons were dropped from the markup. The Site Editor CSS positions the row's
 * chevron with `margin-top: 38px` on the ::after, which was tuned to the height
 * of the icon that is no longer there — so the row is laid out with flex and
 * the chevron aligned properly rather than by a magic offset.
 */
.coming-up-header li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.coming-up-header li a::after {
	float: none;
	margin-top: 0;
	transform: none;
	flex: 0 0 auto;
}

.coming-up-header .coming-up-details {
	display: block;
	margin-left: 0;
}

/* -- Featured cards ------------------------------------------------------ *
 * The Site Editor CSS reserves a flat 400px for .coming-up-featured-details,
 * which left a tall empty box whenever a card had no artwork. Height is now
 * driven by content, with the image given a fixed band instead.
 */
.coming-up-featured-details {
	height: auto;
}

/*
 * Fixed band + `contain`, not `cover`. The artwork is a transparent PNG masked
 * into the MAKE ROOM logo shape, so `cover` sliced the notches off; but a
 * natural-height image made every card a different height and knocked the text
 * baselines out of line as soon as there was more than one event. A fixed band
 * with `contain` keeps cards aligned and never crops.
 */
.coming-up-featured-details .mr-event-thumb {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: contain;
	object-position: center;
	margin-bottom: 14px;
}

/* Reserve two lines so a wrapping title doesn't push the rest of the card
   down relative to its neighbours. */
.coming-up-featured h3 {
	min-height: 2.4em;
}

/* Cards in a row should match height even when one has no image. */
.coming-up-featured li {
	justify-content: flex-start;
}

/* The Site Editor CSS sets `overflow-x: scroll`, which paints an empty
   scrollbar track under the row even when a single card fits. */
.coming-up-featured {
	overflow-x: auto;
}