/**
 * Webinars
 *
 * The index at /webinars/ and the single live event page. Bootstrap, Font
 * Awesome, and base.css come first from partials/head.php - this is only the
 * page layer on top.
 *
 * The chrome this page shares with the rest of the learn area - the subnav
 * strip, the section heads and dots, and the .learn-thumb cards the two
 * recorded rows are built from - lives in learn.css, which loads alongside
 * this. What's left here is what only the webinars pages have: the event card,
 * the page head, and the single event page.
 *
 * .event-card is used by both templates, which is the point of it: an event
 * looks the same on the index as it does on its own page.
 *
 * @copyright   2026, ON1
 */

/*==============================================================================
 * INDEX
 =============================================================================*/

/* !- Page head */
#webinars-head {
	padding-bottom: 2.5rem;
	padding-top: 3rem;
}

#webinars-head h1 {
	margin-bottom: 0.75rem;
}

#webinars-head .webinars-intro {
	color: var(--text-400);
	font-size: var(--text-sm);
}

/* !- Next live event */
#webinars-next {
	padding-bottom: 3rem;
	padding-top: 1rem;
}

.webinars-label {
	color: var(--text-500);
	font-size: var(--text-micro);
	font-weight: 600;
	letter-spacing: 0.16em;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
}

/*
 * The empty state, for when nothing is scheduled. Plain copy in the page - it
 * isn't an error, and the recorded rows below it are the real answer.
 */
.webinars-empty-title {
	font-size: var(--text-2xl);
	margin-bottom: 0.75rem;
}

.webinars-empty {
	color: var(--text-400);
	font-size: var(--text-sm);
	line-height: 1.7;
	max-width: 44rem;
}

/*==============================================================================
 * EVENT CARD
 *
 * Shared by the index and the single event page. A CSS grid rather than a
 * Bootstrap row because the two halves have to be equal height with the image
 * filling its side edge to edge - a row of columns would leave the image at its
 * natural height against a taller copy column.
 =============================================================================*/
.event-card {
	background: var(--bg-850);
	border-radius: var(--border-radius);
	display: grid;
	overflow: hidden;
}

@media (min-width: 768px) {
	.event-card {
		grid-template-columns: 1fr 1fr;
	}
}

.event-thumb {
	aspect-ratio: 16 / 9;
	background: var(--bg-800);
	display: block;
	position: relative;
}

@media (min-width: 768px) {
	/*
	 * Off the aspect ratio once the card is side by side: the image stretches
	 * to whatever the copy column comes out at, and object-fit crops it.
	 */
	.event-thumb {
		aspect-ratio: auto;
		height: 100%;
		min-height: 22rem;
	}
}

.event-thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.event-flag {
	background: var(--red-500);
	border-radius: var(--border-radius);
	color: var(--white);
	font-size: var(--text-tiny);
	font-weight: 700;
	left: 1rem;
	letter-spacing: 0.08em;
	line-height: 1;
	padding: 0.375rem 0.625rem;
	position: absolute;
	text-transform: uppercase;
	top: 1rem;
}

.event-plus-flag {
	background: var(--orange-500);
	border-radius: var(--border-radius);
	color: var(--white);
	font-size: var(--text-tiny);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	padding: 0.375rem 0.625rem;
	position: absolute;
	right: 1rem;
	top: 1rem;
}

.event-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2rem 1.5rem;
}

@media (min-width: 768px) {
	.event-copy {
		padding: 3rem 2.5rem;
	}
}

.event-date {
	color: var(--gold-500);
	font-size: var(--text-tiny);
	font-weight: 700;
	letter-spacing: 0.16em;
	margin-bottom: 0.875rem;
	text-transform: uppercase;
}

[data-theme="light"] .event-date {
	color: var(--gold-800);
}

.event-title {
	font-size: var(--text-2xl);
	line-height: 1.25;
	margin-bottom: 1rem;
}

.event-title a {
	color: var(--text-50);
	text-decoration: none;
}

.event-title a:hover {
	color: var(--link);
}

.event-blurb {
	color: var(--text-300);
	font-size: var(--text-sm);
	line-height: 1.7;
}

.event-blurb p:last-child {
	margin-bottom: 0;
}

.event-host {
	color: var(--text-400);
	font-size: var(--text-sm);
	margin-bottom: 0;
}

.event-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	margin-top: 1.75rem;
}

/* The house button size, off #blog-cta .btn */
.event-actions .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

/*==============================================================================
 * RECORDED ROWS
 *
 * .learn-row, .section-head, the section dots, and the cards themselves are all
 * learn.css. The subheading under each head is the one thing those rows don't
 * already have - /learn/ puts its section titles straight on top of the grid,
 * so the head's own 1.25rem gap comes off here to make room for it.
 =============================================================================*/
#webinars-recorded .section-head,
#webinars-recorded-plus .section-head {
	margin-bottom: 0.5rem;
}

#webinars-recorded .section-sub,
#webinars-recorded-plus .section-sub {
	color: var(--text-500);
	font-size: var(--text-sm);
	margin-bottom: 1.75rem;
}

/*
 * A step up from learn.css's --text-xs. These rows are three across where
 * /learn/ runs five, so the cards are half again as wide and the titles have
 * the room. Scoped to this page rather than changed in learn.css for that
 * reason - the size follows the column count.
 */
#webinars-recorded .learn-card-title,
#webinars-recorded-plus .learn-card-title {
	font-size: var(--text-base);
}

/*==============================================================================
 * NEWSLETTER
 *
 * The markup is commented out in archive-webinars.php until there's a handler
 * behind the form. When it goes live it's the page's lifted band, per the
 * mockup - the two dark rows either side of it stay on the base tone, so
 * there's still only one step up from dark on the page.
 =============================================================================*/
#webinars-newsletter {
	background: var(--bg-850);
	border-top: 1px solid var(--bg-800);
	padding-bottom: 5rem;
	padding-top: 5rem;
}

#webinars-newsletter h2 {
	font-size: var(--text-3xl);
	margin-bottom: 0.75rem;
}

#webinars-newsletter p {
	color: var(--text-300);
	font-size: var(--text-base);
	line-height: 1.65;
	margin-bottom: 2rem;
}

#webinars-newsletter .newsletter-form {
	display: flex;
	gap: 0.625rem;
	margin-bottom: 0.75rem;
}

#webinars-newsletter .newsletter-form input {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-100);
	flex: 1;
	font-size: var(--text-sm);
	padding: 0.875rem 1.125rem;
}

#webinars-newsletter .newsletter-form input::placeholder {
	color: var(--text-500);
}

#webinars-newsletter .newsletter-form input:focus {
	border-color: var(--blue-500);
	outline: none;
}

#webinars-newsletter .newsletter-note {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin-bottom: 0;
}

/*==============================================================================
 * SINGLE EVENT
 =============================================================================*/

/* !- Breadcrumb */
#webinar-breadcrumb {
	padding-top: 1.25rem;
}

#webinar-breadcrumb .breadcrumb-list {
	color: var(--text-500);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--text-mini);
	gap: 0.5rem;
	margin-bottom: 0;
}

#webinar-breadcrumb .breadcrumb-list li:not(:last-child)::after {
	color: var(--bg-500);
	content: '\203a';
	margin-left: 0.5rem;
}

#webinar-breadcrumb .breadcrumb-list a {
	color: var(--text-500);
	text-decoration: none;
}

#webinar-breadcrumb .breadcrumb-list a:hover {
	color: var(--text-100);
}

#webinar-breadcrumb .breadcrumb-list li[aria-current] {
	color: var(--text-300);
}

/* !- Head */
#webinar-head {
	padding-bottom: 1rem;
	padding-top: 1.5rem;
}

/* The card carries the h1 here, so it takes the page's heading size */
#webinar-head .event-title {
	font-size: var(--text-4xl);
	font-weight: 900;
}

#webinar-head .event-host + .event-actions {
	margin-top: 1.5rem;
}

.event-edit-link {
	font-size: var(--text-mini);
	margin-top: 1.25rem;
}

/* !- Body */
#webinar-body {
	padding-bottom: 4rem;
	padding-top: 2rem;
}

.event-desc {
	margin-bottom: 1.5rem;
}

.event-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0;
	margin-top: 2rem;
}

.event-tag-pill {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	color: var(--text-300);
	display: inline-block;
	font-size: var(--text-mini);
	padding: 0.3125rem 0.75rem;
}

/*==============================================================================
 * SMALL SCREENS
 =============================================================================*/
@media (max-width: 767.98px) {
	#webinars-head {
		padding-top: 2rem;
	}

	.event-title {
		font-size: var(--text-xl);
	}

	#webinar-head .event-title {
		font-size: var(--text-3xl);
	}

	/*
	 * These titles are long enough to wrap on a phone, which leaves the view-all
	 * link squeezed against a two-line heading. /learn/'s own rows keep the two
	 * side by side because "Recent Videos" never wraps.
	 */
	#webinars-recorded .section-head,
	#webinars-recorded-plus .section-head {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.5rem;
	}
}