/* ========== Meet with Apple Card ========== */

/* The upcoming-events card shared by the homepage, /events/, and /learn/ (all locales), rendered by
   /assets/scripts/meetWithAppleEvents.js. Event icon top left, then the title, the session type and
   location/language, and the countdown badge with the date along the bottom.

   Self-contained on purpose — it doesn't lean on the homepage's personalized.css or any page's
   own tile rules, so it looks the same on every page that links it. */

/* On the gallery container. Every shelf uses the homepage's narrower card; sc-gallery.css
   defaults to 478px. */
.mwa-shelf {
	--sc-gallery-card-width: 310px;
}

.mwa-card {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	height: 100%;
	padding: 1.25em;
	border-radius: 18px;
	background-color: #1d1d1f;
	color: #f5f5f7;
	text-decoration: none;
	overflow: hidden;
}

body[data-color-scheme="light"] .mwa-card {
	background-color: #fff;
	color: #1d1d1f;
}

.mwa-card:hover {
	text-decoration: none;
}

/* Splits the leftover height with .mwa-card__details, so the details sit mid-card and the footer
   stays pinned to the bottom. */
.mwa-card__top {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	flex: 1;
}

.mwa-card .mwa-card__title {
	margin: 0;
	font-size: 19px;
	line-height: 1.25;
	color: #fff;
}

body[data-color-scheme="light"] .mwa-card__title {
	color: #1d1d1f;
}

/* ========== Meet with Apple Card — Icon ========== */

/* Markup comes from renderEventIcon() in /assets/scripts/eventIcon.js: an <sf-symbol> (--symbol),
   or one of the custom SVGs with no symbol equivalent (--asset), masked so it takes the same
   colour. Icons match the title — white in dark mode, near-black in light mode. */

.mwa-card__icon {
	display: inline-block;
	flex-shrink: 0;
	width: var(--mwa-icon-size, 42px);
	height: var(--mwa-icon-size, 42px);
	background: #fff;
	-webkit-mask-image: var(--icon-url);
	mask-image: var(--icon-url);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* The symbol draws itself, so the fill and mask above have to be cleared. */
.mwa-card__icon--symbol {
	background: none;
	-webkit-mask-image: none;
	mask-image: none;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	line-height: 1;
	font-size: var(--mwa-icon-size, 42px);
}

body[data-color-scheme="light"] .mwa-card__icon {
	background: #1d1d1f;
}

body[data-color-scheme="light"] .mwa-card__icon--symbol {
	background: none;
	color: #1d1d1f;
}

/* ========== Meet with Apple Card — Details ========== */

/* Text rules are scoped under .mwa-card so they outrank the global `.theme-dark p` colour, which
   otherwise turns the grey lines white in dark mode. */

.mwa-card__details {
	flex: 1;
	padding-top: 1em;
}

.mwa-card .mwa-card__type,
.mwa-card .mwa-card__meta,
.mwa-card .mwa-card__date {
	margin: 0;
	font-size: 15px;
	line-height: 1.35;
}

.mwa-card .mwa-card__type {
	color: #f5f5f7;
}

body[data-color-scheme="light"] .mwa-card__type {
	color: #1d1d1f;
}

.mwa-card .mwa-card__meta {
	margin-top: 0.25em;
}

.mwa-card .mwa-card__meta,
.mwa-card .mwa-card__date {
	color: rgba(245, 245, 247, 0.55);
}

body[data-color-scheme="light"] .mwa-card__meta,
body[data-color-scheme="light"] .mwa-card__date {
	color: rgb(29 29 31 / 65%);
}

/* ========== Meet with Apple Card — Footer ========== */

/* The countdown badge is the global badge-neutral. Its values are restated here, scoped to the
   card, because pages restyle .badge on their own — the homepage's personalized.css sets every
   .badge to white-on-transparent, which made it invisible in light mode. */
.mwa-card .badge-neutral {
	--sk-badge-background: rgba(29, 29, 31, 0.07);
	--sk-badge-text-color: rgb(66, 66, 69);
}

body[data-color-scheme="dark"] .mwa-card .badge-neutral {
	--sk-badge-background: rgba(245, 245, 247, 0.14);
	--sk-badge-text-color: rgb(210, 210, 215);
}

.mwa-card__footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75em;
	margin-top: 1em;
}