/*
 * Shared design system for the Talks and Blog templates.
 * Tokens pulled from the live Elementor kit (purple/navy/orange brand colors)
 * so these native templates match the rest of the site.
 */

:root {
	--cb-purple: #6254e7;
	--cb-purple-light: #9289f1;
	--cb-orange: #ff7426;
	--cb-orange-light: #f0ac0e;
	--cb-navy: #3b3663;
	--cb-text: #696687;
	--cb-bg: #ffffff;
	--cb-border: #e8e6f5;
	--cb-radius: 12px;
	--cb-font: 'Rubik', sans-serif;
}

.cb-wrap {
	font-family: var(--cb-font);
	color: var(--cb-text);
	padding: 48px 0 64px;
}

/* Filter nav (talk categories / blog categories) */
.cb-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 40px;
}

.cb-filter__link {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid var(--cb-border);
	color: var(--cb-navy);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.cb-filter__link:hover {
	border-color: var(--cb-purple);
	color: var(--cb-purple);
}

.cb-filter__link.is-active {
	background-color: var(--cb-purple);
	border-color: var(--cb-purple);
	color: #fff;
}

/* Section headings ("Upcoming Talks" / "Past Talks") */
.cb-section {
	margin-bottom: 56px;
}

.cb-section__title {
	font-family: var(--cb-font);
	font-size: 28px;
	font-weight: 700;
	color: var(--cb-navy);
	margin: 0 0 24px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--cb-border);
}

.cb-empty {
	color: var(--cb-text);
	font-size: 16px;
	padding: 24px 0;
}

/* Card grid */
.cb-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 32px;
}

.cb-card {
	background: var(--cb-bg);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius);
	overflow: hidden;
	transition: box-shadow .25s ease, transform .25s ease;
	display: flex;
	flex-direction: column;
}

.cb-card:hover {
	box-shadow: 0 16px 32px rgba(59, 54, 99, .14);
	transform: translateY(-3px);
}

.cb-card__thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(135deg, var(--cb-purple-light), var(--cb-orange-light));
}

.cb-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.cb-card:hover .cb-card__thumb img {
	transform: scale(1.05);
}

.cb-card__body {
	padding: 20px 24px 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.cb-card__categories {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.cb-pill {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--cb-orange);
	background: rgba(255, 116, 38, .1);
	border-radius: 999px;
	padding: 4px 10px;
	text-decoration: none;
}

.cb-pill:hover {
	background: var(--cb-orange);
	color: #fff;
}

.cb-card__title {
	font-family: var(--cb-font);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}

.cb-card__title a {
	color: var(--cb-navy);
	text-decoration: none;
}

.cb-card__title a:hover {
	color: var(--cb-purple);
}

.cb-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font-size: 13px;
	color: var(--cb-text);
}

.cb-card__meta span::before {
	content: '';
}

.cb-card__excerpt {
	font-size: 15px;
	line-height: 1.6;
	color: var(--cb-text);
	margin: 0;
}

.cb-card__readmore {
	margin-top: auto;
	align-self: flex-start;
	font-size: 14px;
	font-weight: 600;
	color: var(--cb-purple);
	text-decoration: none;
}

.cb-card__readmore:hover {
	color: var(--cb-orange);
}

/* Pagination (uses the theme's existing .pagerblock markup from gt3_get_theme_pagination) */
.cb-wrap .pagerblock {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 48px 0 0;
	padding: 0;
}

.cb-wrap .pagerblock li a,
.cb-wrap .pagerblock li.current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border-radius: 8px;
	border: 1px solid var(--cb-border);
	color: var(--cb-navy);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}

.cb-wrap .pagerblock li a:hover {
	border-color: var(--cb-purple);
	color: var(--cb-purple);
}

.cb-wrap .pagerblock li a.current {
	background: var(--cb-purple);
	border-color: var(--cb-purple);
	color: #fff;
}

/* Single talk / single post detail layout */
.cb-single {
	max-width: 820px;
	margin: 0 auto;
}

.cb-single__categories {
	display: flex;
	gap: 6px;
	margin-bottom: 14px;
}

.cb-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 14px;
	color: var(--cb-text);
	margin-bottom: 24px;
}

.cb-single__featured img {
	width: 100%;
	border-radius: var(--cb-radius);
	margin-bottom: 32px;
}

.cb-single__content {
	font-size: 17px;
	line-height: 1.75;
	color: var(--cb-text);
	margin-bottom: 40px;
}

.cb-single__content h2,
.cb-single__content h3 {
	color: var(--cb-navy);
}

.cb-single__subtitle {
	font-family: var(--cb-font);
	font-size: 22px;
	font-weight: 700;
	color: var(--cb-navy);
	margin: 0 0 16px;
}

.cb-single__block {
	margin-bottom: 40px;
}

.cb-single__video-embed {
	position: relative;
	padding-top: 56.25%;
	border-radius: var(--cb-radius);
	overflow: hidden;
	background: #000;
}

.cb-single__video-embed iframe,
.cb-single__video-embed embed,
.cb-single__video-embed object {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.cb-single__video-embed a {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.cb-single__slides-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 8px;
	background: var(--cb-purple);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	margin: 0 10px 10px 0;
}

.cb-single__slides-link:hover {
	background: var(--cb-orange);
}

.cb-single__gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 12px;
}

.cb-single__gallery-item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.cb-single__insights-content {
	font-size: 16px;
	line-height: 1.75;
	color: var(--cb-text);
}

@media (max-width: 768px) {
	.cb-section__title {
		font-size: 22px;
	}

	.cb-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Blog single post (single.php) — the PHP logic there already works
 * (title, meta, categories, tags, comments, related posts, sidebar); this
 * just restyles its existing native class names to match the Talks design
 * system. Scoped under .cb-wrap, which single.php's container now carries.
 */

.cb-wrap .single_blogpost_title_content h1 {
	font-family: var(--cb-font);
	font-size: 32px;
	font-weight: 700;
	color: var(--cb-navy);
	margin: 0 0 16px;
}

.cb-wrap .listing_meta,
.cb-wrap .listing_meta_wrap .listing_meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-size: 14px;
	color: var(--cb-text);
	margin-bottom: 24px;
}

.cb-wrap .post_category a,
.cb-wrap .post-type-archive-talks .cb-pill {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--cb-orange);
	background: rgba(255, 116, 38, .1);
	border-radius: 999px;
	padding: 4px 10px;
	text-decoration: none;
	margin-right: 4px;
}

.cb-wrap .post_author a,
.cb-wrap .post_comments a {
	color: var(--cb-purple);
	text-decoration: none;
}

.cb-wrap .blog_post_media img {
	width: 100%;
	border-radius: var(--cb-radius);
	margin-bottom: 32px;
}

.cb-wrap .blog_content {
	font-family: var(--cb-font);
	font-size: 17px;
	line-height: 1.75;
	color: var(--cb-text);
}

.cb-wrap .blog_content h2,
.cb-wrap .blog_content h3 {
	color: var(--cb-navy);
}

.cb-wrap .single_post_tags .tagcloud a {
	display: inline-block;
	font-size: 12px;
	color: var(--cb-navy);
	background: var(--cb-border);
	border-radius: 999px;
	padding: 4px 12px;
	margin: 0 6px 6px 0;
	text-decoration: none;
}

.cb-wrap .single_post_tags .tagcloud a:hover {
	background: var(--cb-purple);
	color: #fff;
}

.cb-wrap .gt3_author_box {
	margin-top: 40px;
	padding: 24px;
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius);
}

.cb-wrap .gt3_author_box__name {
	color: var(--cb-navy);
	font-family: var(--cb-font);
}

.cb-wrap .gt3_module_title h2,
.cb-wrap .gt3_related_wrap .gt3_module_title h2 {
	font-family: var(--cb-font);
	font-size: 24px;
	font-weight: 700;
	color: var(--cb-navy);
	margin-bottom: 24px;
}

.cb-wrap .gt3_module_related_posts .blogpost_title a,
.cb-wrap .blogpost_title a {
	color: var(--cb-navy);
	text-decoration: none;
	font-weight: 700;
}

.cb-wrap .blogpost_title a:hover,
.cb-wrap .gt3_module_related_posts .blogpost_title a:hover {
	color: var(--cb-purple);
}

.cb-wrap .gt3_module_button_list a {
	color: var(--cb-purple);
	font-weight: 600;
	text-decoration: none;
}

/*
 * Global page-title block (rendered by gt3_get_page_title() in header.php,
 * outside .cb-wrap) — restyled only on Blog/Talks contexts via body classes,
 * so it doesn't affect the rest of the site.
 */

body.single-post .gt3-page-title,
body.single-talks .gt3-page-title,
body.post-type-archive-talks .gt3-page-title,
body.tax-talk_category .gt3-page-title,
body.page-template-page-blog .gt3-page-title {
	font-family: var(--cb-font);
}

body.single-post .gt3-page-title .page_title h1,
body.single-talks .gt3-page-title .page_title h1,
body.post-type-archive-talks .gt3-page-title .page_title h1,
body.tax-talk_category .gt3-page-title .page_title h1,
body.page-blog .gt3-page-title .page_title h1 {
	font-weight: 700;
}

/*
 * Deliberately no color overrides here: this banner's background is
 * admin-configurable per page/post (gt3_get_page_title() sets background
 * and text color together as an inline style pair), so a hardcoded color
 * here would fight it and can produce low-contrast text (confirmed live —
 * navy-on-purple was nearly unreadable). Leave color to the theme.
 */

/* Blog list: shrink the oversized title banner (still shown, just smaller). */
body.page-blog .gt3-page-title {
	height: 100px !important;
}

body.page-blog .gt3-page-title .page_title h1 {
	font-size: 22px;
}

/* Talks archive/category: remove the banner entirely — categories + cards only. */
body.post-type-archive-talks .gt3-page-title,
body.tax-talk_category .gt3-page-title {
	display: none;
}

/* Talks cards: smaller title, since the archive lost its big banner too. */
body.post-type-archive-talks .cb-card__title,
body.tax-talk_category .cb-card__title {
	font-size: 16px;
}

/* Blog list cards: smaller title too. */
body.page-blog .cb-card__title {
	font-size: 17px;
}