/* ==========================================================================
   Webinar Series block
   The featured ad is made of regular blocks and uses the site's own block
   styles. These rules cover the series list, the calendar menu, and the
   headshot style. Override the --ews-* tokens per site.
   ========================================================================== */

.ews {
	--ews-accent: var(--wp--preset--color--primary, #0b5d8f);
	--ews-accent-ink: var(--wp--preset--color--base, #fff);
	--ews-ink: var(--wp--preset--color--contrast, #13212c);
	--ews-muted: color-mix(in srgb, currentColor 62%, transparent);
	--ews-line: color-mix(in srgb, currentColor 14%, transparent);
	--ews-headshot-border: #00b6a5;
	--ews-radius: 14px;

	container: ews / inline-size;
	scroll-margin-top: var(--ews-scroll-offset, 7rem); /* clears a sticky header when opened from a calendar link */
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
}

.ews [hidden] {
	display: none !important;
}

.ews .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ews__qa-note {
	margin: 0;
	padding: 0.5rem 0.875rem;
	border-radius: 6px;
	background: #fff4cc;
	color: #5c4700;
	font-size: 0.8125rem;
}

.ews__editor-note {
	margin: 0 0 0.75rem;
	padding: 0.5rem 0.75rem;
	border-left: 3px solid var(--ews-accent);
	background: color-mix(in srgb, var(--ews-accent) 6%, transparent);
	font-size: 0.8125rem;
	line-height: 1.45;
}

/* ---- Layout: ad, then series list --------------------------------------- */

.ews__layout {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
}

.ews__ad,
.ews__series-list {
	min-width: 0;
}

/* ---- Ad ------------------------------------------------------------------ */

.ews__ad > .ews__panel > :first-child {
	margin-top: 0;
}

.ews__ad > .ews__panel > :last-child {
	margin-bottom: 0;
}

/* Headshot (Image block with class "ews-headshot") */
.ews .ews-headshot {
	max-width: 250px;
	margin-inline: auto;
}

.ews .ews-headshot img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid var(--ews-headshot-border);
	background: #fff;
}

/* Status line (Paragraph with class "ews-status") */
.ews .ews-status {
	margin-block: 0.25rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.8;
}

/* ---- Calendar menu (Google / .ics) -------------------------------------- */

.ews__cal {
	position: relative;
	display: inline-block;
}

.ews__cal > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
	list-style: none;
}

.ews__cal > summary::-webkit-details-marker {
	display: none;
}

.ews__cal > summary::after {
	content: "";
	width: 0.45em;
	height: 0.45em;
	margin-left: 0.1em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.15s;
}

.ews__cal[open] > summary::after {
	transform: translateY(0.1em) rotate(225deg);
}

.ews__cal-menu {
	position: absolute;
	z-index: 10;
	left: 0;
	top: calc(100% + 0.5rem);
	display: grid;
	min-width: 15rem;
	padding: 0.375rem;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 30px rgb(10 20 30 / 0.18), 0 0 0 1px rgb(10 20 30 / 0.06);
	text-align: left;
}

/* Cover blocks clip overflow, so the ad's menu opens upward. */
.ews__cal--ad .ews__cal-menu {
	top: auto;
	bottom: calc(100% + 0.5rem);
}

@container ews-list (min-width: 600px) {
	.ews__cal--list .ews__cal-menu {
		left: auto;
		right: 0;
	}
}

.ews__cal-link {
	padding: 0.7rem 0.85rem;
	border-radius: 6px;
	color: var(--ews-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.ews__cal-link:hover,
.ews__cal-link:focus-visible {
	background: color-mix(in srgb, var(--ews-accent) 10%, transparent);
	color: var(--ews-accent);
	outline: none;
}

/* ---- Series list -------------------------------------------------------
   Sized by its own column (container "ews-list"): compact stacked rows in
   the side column, a single-line row layout when it gets the full width.   */

.ews__series-list {
	container: ews-list / inline-size;
	font-size: 0.875rem;
	line-height: 1.4;
}

.ews__list-heading {
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
	line-height: 1.25;
}

.ews__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ews-line);
}

.ews__item {
	display: grid;
	grid-template-columns: 1.75rem 1fr;
	grid-template-areas:
		"num date"
		"num body"
		"num action";
	gap: 0.3rem 0.625rem;
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--ews-line);
}

@container ews-list (min-width: 600px) {
	.ews__item {
		grid-template-columns: 2.25rem 8rem 1fr auto;
		grid-template-areas: "num date body action";
		align-items: center;
		gap: 1rem;
		padding-block: 1.125rem;
	}
}

.ews__num {
	grid-area: num;
	color: var(--ews-accent);
	font-size: 0.9375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}

.ews__item[data-ews-state="upcoming"] .ews__num {
	color: var(--ews-muted);
}

.ews__date {
	grid-area: date;
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.4rem;
	color: var(--ews-muted);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}

@container ews-list (min-width: 600px) {
	.ews__date {
		flex-direction: column;
		font-size: 0.8125rem;
	}
}

.ews__date-day {
	font-weight: 600;
	color: var(--ews-ink);
}

.ews__item-body {
	grid-area: body;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
}

.ews__avatar {
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--ews-headshot-border);
	background: #fff;
}

@container ews-list (min-width: 600px) {
	.ews__avatar {
		width: 2.75rem;
		height: 2.75rem;
	}
}

.ews__item-text {
	min-width: 0;
}

.ews__item-title.ews__item-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem 0.5rem;
	margin: 0;
	margin-bottom: 0 !important;
	font-size: 0.9375rem;
	line-height: 1.3;
}

@container ews-list (min-width: 600px) {
	.ews__item-title {
		font-size: 1rem;
	}
}

.ews__item-speaker {
	margin: 0.15rem 0 0;
	color: var(--ews-muted);
	font-size: 0.8125rem;
}

.ews__badge {
	display: none;
	padding: 0.15rem 0.4rem;
	border-radius: 4px;
	background: color-mix(in srgb, var(--ews-accent) 12%, transparent);
	color: var(--ews-accent);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ews__item.is-featured .ews__badge {
	display: inline-block;
}

.ews__item-action {
	grid-area: action;
	margin-top: 0.25rem;
}

@container ews-list (min-width: 600px) {
	.ews__item-action {
		margin-top: 0;
		justify-self: end;
	}
}

/* List buttons: core Buttons copied from the ad's CTA, sized down. */
.ews__item-buttons {
	margin: 0;
	gap: 0.5rem;
}

.ews__series-list .wp-block-button__link {
	padding: 0.5em 1.05em;
	font-size: 0.8125rem;
	line-height: 1.2;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.ews__cal > summary::after {
		transition: none;
	}
}