/* Event pages (inc/events/events.php, user 2026-10-23): the event box in the post sidebar, the
   recording player and the stage's button at the end of the article.
   The box is the sidebar family's look (On This Page, OS Key Facts): light brand surface with
   faint teal / violet glows, a techniqk hairline on top. Facts are rows with line icons in brand
   rings; buttons are the theme's (with the arrow, natural width), the disabled one Figma's
   disabled state (grey fill, grey label and arrow). Loaded in <head> on event pages only. */

/* Placement: the post body's sidebar column on desktop, sticking below the header; above the
   article below 1100px (os-post.css "Body: placement" — that hides a sidebar without an index,
   so the event box shows itself, and the article keeps its column beside it). */
.os-post-body__grid > .os-post-body__toc.os-event-aside { display: block; }
@media (min-width: 1101px) {
	.os-post-body__grid:has(> .os-post-body__toc.os-event-aside) > .os-post-body__main { grid-column: 1; }
	.os-event-aside > .os-event-card {
		position: sticky;
		top: calc(var(--os-header-offset) + 24px);
	}
}

/* Banner: events have no author (and usually no tags), so the byline row would hold only the
   share icon, alone at the left under the title. Share moves up to the date line instead, on
   the right, where it sits on blog posts (user, 2026-10-23: "Do you think share position is
   correct?"). The byline wrapper steps aside (display: contents); tags, if any, stay with share. */
.single-os_event .os-post-hero__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 24px;
}
.single-os_event .os-post-hero__head > .os-post-meta { grid-column: 1; grid-row: 1; }
.single-os_event .os-post-hero__head > .os-post-hero__title { grid-column: 1 / -1; }
.single-os_event .os-post-hero__head > .os-post-hero__byline { display: contents; }
.single-os_event .os-post-hero__actions { grid-column: 2; grid-row: 1; justify-self: end; }
/* Big screens: beside the title, centred on it (user, 2026-10-23: "it should be aligned to
   title on big screens"); below 1101px it stays on the date line. */
@media (min-width: 1101px) {
	.single-os_event .os-post-hero__head > .os-post-hero__title { grid-column: 1; grid-row: 2; }
	.single-os_event .os-post-hero__actions { grid-row: 2; align-self: center; }
}

/* Share lives in the event box on events that have one (user, 2026-10-23): the banner's share
   icon and the article's share row step aside (the tags row stays). */
.single-os_event:has(.os-event-aside) .os-post-hero__share,
.os-post-body__grid:has(> .os-event-aside) .os-post-body__main > .os-post-share:not(.os-event-card__share) { display: none; }

/* ---------- The box ---------- */
.os-event-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* a long button label can't widen the box */
	gap: 20px;
	overflow: hidden;
	padding: 28px 24px 24px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--lg);
	background:
		radial-gradient(70% 140% at 100% 0%, rgb(20 199 180 / 0.08) 0, rgb(20 199 180 / 0) 60%),
		radial-gradient(60% 120% at 0% 100%, rgb(108 92 231 / 0.07) 0, rgb(108 92 231 / 0) 60%),
		var(--wp--custom--color--on-brand);
}
.os-event-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--wp--preset--gradient--techniqk);
}
.os-event-card > * { margin: 0; }

.os-event-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
}
.os-event-card__head > * { margin: 0; }
.os-event-card__label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 1.15px;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
}
/* OS Badge (styles/blocks/paragraph-badge.json): WordPress prints a block style's CSS only for
   blocks on the page, and this badge is PHP output, so its values are repeated here. */
.os-event-card__badge {
	padding: 6px 12px;
	border-radius: 100px;
	background-color: rgb(20 199 180 / 0.1);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: normal;
	color: var(--wp--preset--color--teal);
	white-space: nowrap;
}
/* After the event: the badge in grey ("Past event"). The recording stage has no badge. */
.os-event-card--soon .os-event-card__badge,
.os-event-card--completed .os-event-card__badge {
	background-color: rgb(123 128 138 / 0.12);
	color: var(--wp--preset--color--gray);
}

/* Facts: Date, Time, Where. */
.os-event-card__facts { display: grid; margin: 0; }
.os-event-card__fact {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	align-content: center;
	column-gap: 14px;
	padding: 14px 0;
	border-top: 1px solid rgb(0 80 158 / 0.1);
}
.os-event-card__fact::before,
.os-event-card__fact::after {
	content: "";
	grid-row: 1 / 3;
	grid-column: 1;
	align-self: center;
	justify-self: center;
}
.os-event-card__fact::before {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 1px rgb(0 80 158 / 0.16);
}
.os-event-card__fact::after {
	width: 20px;
	height: 20px;
	background-color: var(--wp--preset--color--brand);
	-webkit-mask: var(--os-event-icon) center / contain no-repeat;
	mask: var(--os-event-icon) center / contain no-repeat;
}
.os-event-card__fact--date { --os-event-icon: url("../images/ui/calendar.svg"); }
.os-event-card__fact--time { --os-event-icon: url("../images/ui/clock.svg"); }
.os-event-card__fact--online { --os-event-icon: url("../images/ui/monitor-play.svg"); }
.os-event-card__fact--onsite,
.os-event-card__fact--hybrid { --os-event-icon: url("../images/ui/map-pin.svg"); }
.os-event-card__fact dt,
.os-event-card__fact dd { grid-column: 2; margin: 0; }
.os-event-card__fact dt {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	color: var(--wp--custom--color--tertiary);
}
.os-event-card__fact dd {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
}

/* Share row at the foot of the box: the post's share row (os-post.css) without its outer
   lines, a hairline above like the facts, 24px icons so label, icons and Copy link share a line. */
.os-event-card > .os-event-card__share {
	gap: 8px 16px;
	padding: 16px 0 0;
	border-top: 1px solid rgb(0 80 158 / 0.1);
	border-bottom: 0;
}
.os-event-card__share .wp-block-social-links.os-post-share__links { gap: 8px; font-size: 24px; }
.os-event-card__share .os-post-share__links .wp-social-link svg { width: 24px; height: 24px; }
.os-event-card__share .os-post-share__copy { padding-left: 16px; }

/* ---------- Buttons: in the box, and closing the article ---------- */
.os-event-card__actions,
.os-event-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.os-post-body__main > .os-event-cta { margin-top: 48px; }
/* Labels are typed per event ("Video will be uploaded soon…", "Express Interest"): they wrap
   on narrow phones instead of running out of the box (theme buttons are nowrap). */
.os-event-card__actions .wp-block-button__link,
.os-event-cta .wp-block-button__link { max-width: 100%; white-space: normal; text-align: left; }
.os-event-card .is-disabled .wp-block-button__link,
.os-event-cta .is-disabled .wp-block-button__link,
.os-event-card .is-disabled .wp-block-button__link:hover,
.os-event-cta .is-disabled .wp-block-button__link:hover {
	background-color: var(--wp--custom--color--track);
	color: var(--wp--preset--color--gray);
	box-shadow: none;
	cursor: default;
}
.is-disabled .wp-block-button__link:hover::after { animation: none; }

/* ---------- The recording: a native video, or a YouTube poster that loads the player ---------- */
.os-event-video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--md);
	background: var(--wp--preset--color--ink-deep);
}
.os-event-video video,
.os-event-video iframe,
.os-event-video img {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}
.os-event-video__play { position: absolute; inset: 0; display: block; }
.os-event-video__play img { transition: transform var(--os-slow) var(--os-ease); }
.os-event-video__icon {
	position: absolute;
	inset: 0;
	width: 56px;
	height: 56px;
	margin: auto;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	box-shadow: 0 8px 24px rgb(0 31 84 / 0.28);
	transition: transform var(--os-base) var(--os-ease), background-color var(--os-fast) var(--os-ease);
}
.os-event-video__icon::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	transform: translateX(2px);
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent var(--wp--preset--color--brand);
	transition: border-color var(--os-fast) var(--os-ease);
}
.os-event-video__play:hover img { transform: scale(1.04); }
.os-event-video__play:hover .os-event-video__icon,
.os-event-video__play:focus-visible .os-event-video__icon { transform: scale(1.08); background-color: var(--wp--preset--color--brand); }
.os-event-video__play:hover .os-event-video__icon::before,
.os-event-video__play:focus-visible .os-event-video__icon::before { border-left-color: var(--wp--preset--color--white); }
.os-event-video__play:focus-visible { outline: 2px solid var(--wp--preset--color--white); outline-offset: -6px; }

/* ---------- Tablets: the box above the article, facts side by side; the recording beside them ---------- */
@media (min-width: 641px) and (max-width: 1100px) {
	.os-event-card { padding: 28px 28px 24px; }
	.os-event-card__facts { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 24px; }
	.os-event-card--recording { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
	.os-event-card--recording > .os-event-video { grid-row: 1 / span 2; }
	.os-event-card--recording .os-event-card__facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.os-event-card { gap: 16px; padding: 24px 20px 20px; }
	.os-post-body__main > .os-event-cta { margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.os-event-video__play:hover img,
	.os-event-video__play:hover .os-event-video__icon,
	.os-event-video__play:focus-visible .os-event-video__icon { transform: none; }
}