/* ===========================================================================
   Webinars and events page, design canvas "Kurs og opplæring" (2026-10-07)
   ===========================================================================
   Loaded only on pages whose content uses the `cq-evt-` sections (see
   inc/page-kurs.php), so nothing here reaches other pages. Values follow
   the canvas and the Certain QMS Web Design System it was built with:
   eyebrow, H1 and lead; upcoming activities on the grey ground; past
   activities as cards with a date tile; a peach newsletter box; two link
   cards for more training.

   Spacing comes from flex/grid `gap`, so block margins inside these sections
   are reset, as on the contact and consulting pages. */

.cq-main {
	--cq-evt-gutter: var(--wp--style--root--padding-left, clamp(24px, 5.56vw, 80px));
	--cq-evt-section: clamp(64px, 8vw, 112px);
	--cq-evt-muted: #3f4947;
	--cq-evt-peach: #fff3eb;
}

.wp-block-post-content > .cq-evt-s {
	margin-block: 0 !important;
}

.cq-main .cq-evt-s :where(h1, h2, h3, h4, p, ul, li, .wp-block-buttons, .wp-block-group) {
	margin: 0 !important;
}

.cq-main .cq-evt-s {
	font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.cq-main .cq-evt-wrap {
	box-sizing: border-box;
	margin-inline: auto !important;
	/* 1200px of content, like the header and footer (contentSize). */
	max-width: calc(1200px + 2 * var(--cq-evt-gutter));
	padding-inline: var(--cq-evt-gutter);
}

/* --- Shared type ------------------------------------------------------------ */

.cq-main .cq-evt-eyebrow {
	color: var(--cq-navy);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.cq-main .cq-evt-title {
	color: var(--cq-ink);
	font-size: clamp(34px, 4.4vw, 56px);
	font-weight: 500;
	letter-spacing: -0.022em;
	line-height: 1.08;
}

.cq-main .cq-evt-lead {
	color: #232323;
	font-size: 20px;
	line-height: 1.6;
	max-width: 60ch;
}

.cq-main .cq-evt-h2 {
	color: var(--cq-ink);
	font-size: clamp(28px, 3.2vw, 40px);
	font-weight: 500;
	letter-spacing: -0.016em;
	line-height: 1.15;
}

.cq-main .cq-evt-h3 {
	color: var(--cq-ink);
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.cq-main .cq-evt-text {
	font-size: 17px;
	line-height: 1.65;
	max-width: 60ch;
}

/* --- Hero ------------------------------------------------------------------- */

.cq-main .cq-evt-hero {
	background-color: #ffffff;
}

.cq-main .cq-evt-head {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-block: var(--cq-crumb-top) clamp(56px, 6vw, 80px);
}

/* Breadcrumb first: shared distances from style.css (--cq-crumb-*). The
   column's own gap is subtracted so the crumb-to-eyebrow space matches. */
.cq-main .cq-evt-head > .cq-breadcrumb {
	margin-bottom: calc(var(--cq-crumb-gap) - 12px) !important;
}

.cq-main .cq-evt-head .cq-evt-lead {
	margin-top: 8px !important;
}

/* --- Upcoming --------------------------------------------------------------- */

.cq-main .cq-evt-upcoming {
	background-color: #f5f5f5;
	border-top: 1px solid var(--cq-border);
	padding-block: var(--cq-evt-section);
}

.cq-main .cq-evt-stack {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.cq-main .cq-evt-empty {
	align-items: center;
	display: flex;
	gap: 20px;
}

.cq-main .cq-evt-empty__icon {
	align-items: center;
	background-color: #ffffff;
	border-radius: var(--cq-radius-sm);
	color: var(--cq-blue);
	display: flex;
	flex-shrink: 0;
	height: 48px;
	justify-content: center;
	width: 48px;
}

/* Lucide-style hourglass, 24px, 1.5px stroke, as in the canvas. */
.cq-main .cq-evt-empty__icon::before {
	background-color: currentColor;
	content: "";
	height: 24px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12'/%3E%3Cpath d='M6 22h12'/%3E%3Cpath d='M7 2v4.5a5 5 0 0 0 2 4L12 12l3-1.5a5 5 0 0 0 2-4V2'/%3E%3Cpath d='M7 22v-4.5a5 5 0 0 1 2-4L12 12l3 1.5a5 5 0 0 1 2 4V22'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12'/%3E%3Cpath d='M6 22h12'/%3E%3Cpath d='M7 2v4.5a5 5 0 0 0 2 4L12 12l3-1.5a5 5 0 0 0 2-4V2'/%3E%3Cpath d='M7 22v-4.5a5 5 0 0 1 2-4L12 12l3 1.5a5 5 0 0 1 2 4V22'/%3E%3C/svg%3E") center / contain no-repeat;
	width: 24px;
}

.cq-main .cq-evt-empty__text {
	font-size: 20px;
	line-height: 1.6;
}

/* --- Past activities -------------------------------------------------------- */

.cq-main .cq-evt-past {
	background-color: #ffffff;
	border-top: 1px solid var(--cq-border);
	padding-top: var(--cq-evt-section);
}

.cq-main .cq-evt-past__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.cq-main .cq-evt-past__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cq-main .cq-evt-past__head .cq-evt-h3 {
	margin-top: 8px !important;
}

.cq-main .cq-evt-intro {
	color: var(--cq-evt-muted);
	font-size: 20px;
	line-height: 1.6;
	max-width: 68ch;
}

.cq-main .cq-evt-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	list-style: none;
	padding: 0;
}

.cq-main .cq-evt-card {
	align-items: flex-start;
	background-color: #ffffff;
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-radius-lg);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 3vw, 40px);
	padding: clamp(24px, 2.4vw, 32px);
}

.cq-main .cq-evt-date {
	align-items: center;
	background-color: #f5f5f5;
	border-radius: var(--cq-radius-md);
	color: var(--cq-ink);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 2px;
	padding: 14px 0 12px;
	width: 96px;
}

.cq-main .cq-evt-date__wd {
	color: var(--cq-evt-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cq-main .cq-evt-date__day {
	font-size: 40px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.cq-main .cq-evt-date__month {
	color: var(--cq-evt-muted);
	font-size: 14px;
	font-weight: 500;
}

.cq-main .cq-evt-card__body {
	display: flex;
	flex: 1 1 360px;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.cq-main .cq-evt-card__when {
	color: var(--cq-evt-muted);
	font-size: 14px;
	font-weight: 500;
}

.cq-main .cq-evt-card__title {
	color: var(--cq-ink);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.3;
}

.cq-main .cq-evt-card__sub {
	color: var(--cq-evt-muted);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
}

.cq-main .cq-evt-card__text {
	font-size: 17px;
	line-height: 1.65;
	margin-top: 4px !important;
	max-width: 68ch;
}

/* --- Newsletter ------------------------------------------------------------- */

.cq-main .cq-evt-news {
	background-color: #ffffff;
	padding-top: clamp(48px, 6vw, 72px);
}

.cq-main .cq-evt-news__box {
	align-items: center;
	background-color: var(--cq-evt-peach);
	border: 1px solid var(--cq-border);
	border-radius: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	justify-content: space-between;
	padding: clamp(28px, 4vw, 48px);
}

.cq-main .cq-evt-news__copy {
	display: flex;
	flex: 1 1 420px;
	flex-direction: column;
	gap: 12px;
}

/* --- More training ---------------------------------------------------------- */

/* The divider sits on the section, so it runs edge to edge like the
   others on the page (Oda, 2026-10-07). */
.cq-main .cq-evt-more {
	background-color: #ffffff;
	border-top: 1px solid var(--cq-border);
	margin-top: var(--cq-evt-section) !important;
	padding-block: var(--cq-evt-section);
}

.cq-main .cq-evt-more__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.cq-main .cq-evt-more__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

.cq-main .cq-evt-tile {
	align-items: flex-start;
	background-color: #ffffff;
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-radius-lg);
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px;
}

.cq-main .cq-evt-tile__title {
	color: var(--cq-ink);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.3;
}

.cq-main .cq-evt-tile .wp-block-buttons {
	margin-top: 12px !important;
}

@media (max-width: 599.98px) {
	.cq-main .cq-evt-tile {
		padding: 24px;
	}

	.cq-main .cq-evt-date {
		width: 80px;
	}
}