/* ============================================================
 * Kumra Video Guide — Frontend Styles
 *
 * Matches design mockup: navy + gold brand, gradient hero,
 * 16px-radius hub cards, 12px-radius video cards,
 * subcategory-grouped video display, navy CTA band.
 * ============================================================ */

/* --- Design Tokens --------------------------------------------------------- */
:root {
	/* Brand colours — matched to design system */
	--kvg-primary:        #326599;
	--kvg-primary-hover:  #1E4F8A;
	--kvg-secondary:      #5C8FCC;
	--kvg-accent:         #D4AF37;
	--kvg-accent-hover:   #c19d2e;
	--kvg-secondary-btn:  #78B4D4;

	--kvg-white:          #ffffff;
	--kvg-text:           #263B53;
	--kvg-text-muted:     #66768A;
	--kvg-surface-soft:   #F2F5F9;
	--kvg-surface-muted:  #F0F3F7;
	--kvg-border:         #DFE6EE;
	--kvg-rating:         #F3A21A;
	--kvg-review-link:    #ED5B9A;
	--kvg-thumb-bg:       #16283c;

	/* Radii */
	--kvg-radius-sm:      4px;
	--kvg-radius-hub:     16px;
	--kvg-radius-video:   12px;
	--kvg-radius-filter:  6px;
	--kvg-radius-round:   999px;

	/* Shadows — navy-tinted, soft */
	--kvg-shadow:         0 4px 18px rgba(42, 46, 52, 0.08);
	--kvg-shadow-hover:   0 14px 30px rgba(42, 46, 52, 0.15);

	/* Spacing */
	--kvg-gap-hub:        30px;
	--kvg-gap-video:      26px;
	--kvg-gap-filter:     10px;
	--kvg-gap-explore:    12px;

	/* Layout */
	--kvg-max-width:      1200px;
	--kvg-gutter:         32px;

	/* Typography */
	--kvg-font-heading:   'Montserrat', 'Nunito Sans', 'Avenir Next', 'Segoe UI', Arial, sans-serif;
	--kvg-font-body:      'Open Sans', 'Segoe UI', Arial, sans-serif;
	--kvg-transition:     180ms ease;

	/* Misc */
	--kvg-focus-outline:  2px solid #326599;
	--kvg-focus-offset:   2px;
}

/* --- Reset / Base ---------------------------------------------------------- */
#kumra-video-guide,
#kumra-video-guide *,
#kumra-video-guide *::before,
#kumra-video-guide *::after {
	box-sizing: border-box;
}

#kumra-video-guide {
	font-family: var(--kvg-font-body);
	color: var(--kvg-text);
	font-size: 16px;
	line-height: 1.6;
}

#kumra-video-guide h1,
#kumra-video-guide h2,
#kumra-video-guide h3,
#kumra-video-guide h4,
#kumra-video-guide .kvg-cta__button,
#kumra-video-guide .kvg-filter-btn,
#kumra-video-guide .kvg-hub-card__more,
#kumra-video-guide .kvg-hub-card__count,
#kumra-video-guide .kvg-hero__back {
	font-family: var(--kvg-font-heading);
}

#kumra-video-guide a {
	text-decoration: none;
	color: inherit;
}

/* --- Container ------------------------------------------------------------- */
.kvg-container {
	max-width: var(--kvg-max-width);
	margin: 0 auto;
	padding: 0 var(--kvg-gutter);
	box-sizing: border-box;
}

/* --- Shared Section Heading ------------------------------------------------ */
.kvg-sec-h2 {
	font-size: 29px;
	font-weight: 700;
	color: var(--kvg-primary);
	margin: 0 0 26px;
	line-height: 1.25;
}

/* =========================================================================
 * HERO
 * ========================================================================= */
.kvg-hero {
	background: var(--kvg-primary);
	color: #fff;
	text-align: center;
	padding: 64px 20px 56px;
}

/* Gradient variant — matches mockup double-gradient */
.kvg-hero--gradient {
	background:
		linear-gradient(rgba(74, 123, 181, 0.90), rgba(50, 101, 153, 0.90)),
		linear-gradient(135deg, #4a7bb5, #326599 55%, #5C8FCC);
	padding: 96px 24px 116px;
}

.kvg-hero__title {
	font-size: 44px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 20px;
}

.kvg-hero__subtitle {
	font-size: 20px;
	opacity: 0.96;
	max-width: 820px;
	margin: 0 auto;
	line-height: 1.65;
}

/* "← Back to the Treatment Guide" pill */
.kvg-hero__back {
	display: inline-block;
	margin-bottom: 22px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	opacity: 0.9;
	border: 1px solid rgba(255, 255, 255, 0.55);
	padding: 8px 18px;
	border-radius: 24px;
	cursor: pointer;
	transition: background var(--kvg-transition);
}

.kvg-hero__back:hover {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

/* =========================================================================
 * PAGE SECTIONS
 * ========================================================================= */
.kvg-hubs {
	padding: 72px 0 0;
}

.kvg-hubs:last-of-type {
	padding-bottom: 88px;
}

/* =========================================================================
 * HUB CARDS (Landing page + Explore More)
 * ========================================================================= */
.kvg-hub-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--kvg-gap-hub);
}

.kvg-hub-card {
	background: var(--kvg-white);
	border-radius: var(--kvg-radius-hub);
	overflow: hidden;
	border: 1px solid #eef1f5;
	box-shadow: var(--kvg-shadow);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}

.kvg-hub-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--kvg-shadow-hover);
}

.kvg-hub-card__link {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Thumbnail area */
.kvg-hub-card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--kvg-thumb-bg);
	overflow: hidden;
}

.kvg-hub-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.9s ease;
}

.kvg-hub-card__img.active {
	opacity: 1;
}

.kvg-hub-card__placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #1a2d40 0%, #16283c 100%);
}

/* Play button overlay */
.kvg-hub-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.kvg-hub-card__play span {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: rgba(42, 46, 52, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease;
}

.kvg-hub-card__play svg {
	margin-left: 3px; /* optical centering for play triangle */
}

.kvg-hub-card:hover .kvg-hub-card__play span {
	background: var(--kvg-accent);
}

/* Card body */
.kvg-hub-card__body {
	padding: 24px 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.kvg-hub-card__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--kvg-text);
	line-height: 1.3;
	margin: 0;
}

.kvg-hub-card__desc {
	font-size: 15.5px;
	color: var(--kvg-text-muted);
	line-height: 1.6;
	margin: 0;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Metadata row */
.kvg-hub-card__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 6px;
}

.kvg-hub-card__count {
	font-size: 13px;
	font-weight: 600;
	color: var(--kvg-text-muted);
}

.kvg-hub-card__more {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--kvg-primary);
	transition: color 0.25s ease;
}

.kvg-hub-card:hover .kvg-hub-card__more {
	color: var(--kvg-accent);
}

/* =========================================================================
 * CTA BAND (Navy)
 * ========================================================================= */
.kvg-cta {
	text-align: center;
	padding: 56px 20px 64px;
	background: var(--kvg-white);
}

.kvg-cta--navy {
	background: var(--kvg-primary);
	color: #fff;
	padding: 64px 24px;
	margin-top: 88px;
}

.kvg-cta__title {
	font-size: 30px;
	font-weight: 700;
	margin: 0 0 12px;
}

.kvg-cta--navy .kvg-cta__title {
	color: #fff;
}

.kvg-cta__text {
	font-size: 17px;
	max-width: 540px;
	margin: 0 auto 26px;
	line-height: 1.5;
}

.kvg-cta--navy .kvg-cta__text {
	opacity: 0.92;
}

.kvg-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 14px 36px;
	border-radius: var(--kvg-radius-sm);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	transition: background var(--kvg-transition),
	            border-color var(--kvg-transition),
	            transform var(--kvg-transition);
	background: var(--kvg-primary);
	color: #fff;
	border: 1px solid var(--kvg-primary);
}

.kvg-cta__button:hover {
	background: var(--kvg-primary-hover);
	border-color: var(--kvg-primary-hover);
}

/* Gold CTA variant inside navy band */
.kvg-cta--navy .kvg-cta__button {
	background: var(--kvg-accent);
	color: #fff;
	border: 1px solid var(--kvg-accent);
}

.kvg-cta--navy .kvg-cta__button:hover {
	background: var(--kvg-accent-hover);
	border-color: var(--kvg-accent-hover);
	transform: translateY(-1px);
}

/* =========================================================================
 * FILTER BAR (Hub page)
 * ========================================================================= */
.kvg-filters {
	margin: 56px 0 8px;
}

.kvg-filter-bar {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--kvg-gap-filter);
}

#kumra-video-guide .kvg-filter-btn {
	font-size: 16px;
	font-weight: 500;
	background: var(--kvg-white);
	color: var(--kvg-text);
	border: 1px solid var(--kvg-border);
	border-radius: var(--kvg-radius-filter);
	padding: 11px 22px;
	cursor: pointer;
	transition: background 0.25s ease,
	            color 0.25s ease,
	            border-color 0.25s ease;
}

#kumra-video-guide .kvg-filter-btn:hover {
	border-color: var(--kvg-primary);
	color: var(--kvg-primary);
}

#kumra-video-guide .kvg-filter-btn.active {
	background: var(--kvg-primary);
	border-color: var(--kvg-primary);
	color: #fff;
}

/* =========================================================================
 * VIDEO GROUPS (Hub page — grouped by subcategory)
 * ========================================================================= */
.kvg-video-groups {
	margin-top: 32px;
}

.kvg-video-group + .kvg-video-group {
	margin-top: 48px;
}

.kvg-video-group[hidden] {

/* Hide empty groups when "All" is active — JS shows them when filtered */
.kvg-video-group--empty {
	display: none;
}
	display: none;
}

.kvg-video-group__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--kvg-primary);
	margin: 0 0 22px;
	line-height: 1.25;
}

/* =========================================================================
 * VIDEO CARDS (Hub page)
 * ========================================================================= */
.kvg-video-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--kvg-gap-video);
}

.kvg-video-card {
	background: var(--kvg-white);
	border-radius: var(--kvg-radius-video);
	overflow: hidden;
	border: 1px solid #eef1f5;
	box-shadow: var(--kvg-shadow);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
	display: flex;
	flex-direction: column;
}

.kvg-video-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--kvg-shadow-hover);
}

.kvg-video-card:focus-visible {
	outline: var(--kvg-focus-outline);
	outline-offset: var(--kvg-focus-offset);
}

/* Thumbnail area */
.kvg-video-card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}

.kvg-video-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kvg-video-card__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #1a2d40 0%, #16283c 100%);
}

/* Play button overlay */
.kvg-video-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.kvg-video-card__play span {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(42, 46, 52, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease;
}

.kvg-video-card__play svg {
	margin-left: 3px;
}

.kvg-video-card:hover .kvg-video-card__play span {
	background: var(--kvg-accent);
}

/* Cross-embedded badge */
.kvg-video-card__badge {
	position: absolute;
	top: 8px;
	right: 8px;
	background: rgba(42, 46, 52, 0.65);
	color: #fff;
	font-size: 11px;
	padding: 3px 8px;
	border-radius: 10px;
	font-weight: 600;
	z-index: 2;
}

/* Card body */
.kvg-video-card__body {
	padding: 18px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.kvg-video-card__title {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
}

.kvg-video-card__desc {
	font-size: 14px;
	color: var(--kvg-text-muted);
	line-height: 1.55;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Cross-embedded modifier */
.kvg-video-card--cross .kvg-video-card__thumb::after {
	content: '';
	/* badge already handles the visual indicator */
}

/* =========================================================================
 * EXPLORE MORE (Hub page — hub-card grid reused)
 * ========================================================================= */
.kvg-explore {
	padding: 72px 0 0;
}

.kvg-explore:last-of-type {
	padding-bottom: 88px;
}

.kvg-explore__title {
	/* Uses .kvg-sec-h2 already in template */
}

/* =========================================================================
 * EMPTY STATE
 * ========================================================================= */
.kvg-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 56px 20px;
	color: #8a919c;
}

/* Compact empty state inside a video group (subcategory with no videos) */
.kvg-video-group .kvg-empty {
	grid-column: auto;
	padding: 24px 0 8px;
	text-align: left;
	font-size: 14px;
}

/* =========================================================================
 * RESPONSIVE BREAKPOINTS
 * ========================================================================= */

/* --- Hero ---------------------------------------------------------- */
@media (max-width: 900px) {
	.kvg-hero--gradient {
		padding: 64px 24px 80px;
	}

	.kvg-hero__title {
		font-size: 40px;
	}
}

@media (max-width: 600px) {
	.kvg-hero--gradient {
		padding: 64px 24px 80px;
	}

	.kvg-hero__title {
		font-size: 31px;
	}

	.kvg-hero__subtitle {
		font-size: 17px;
	}

	.kvg-hero {
		padding: 40px 16px 36px;
	}
}

/* --- Hub Grid ------------------------------------------------------- */
@media (max-width: 1000px) {
	.kvg-hub-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.kvg-hub-grid {
		grid-template-columns: 1fr;
	}
}

/* --- Video Grid ----------------------------------------------------- */
@media (max-width: 950px) {
	.kvg-video-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.kvg-video-grid {
		grid-template-columns: 1fr;
	}
}

/* --- General Mobile Adjustments ------------------------------------- */
@media (max-width: 768px) {
	:root {
		--kvg-gutter: 20px;
	}

	.kvg-hubs,
	.kvg-explore {
		padding-top: 48px;
	}

	.kvg-cta--navy {
		padding: 48px 20px;
		margin-top: 56px;
	}

	.kvg-cta__title {
		font-size: 26px;
	}

	.kvg-sec-h2 {
		font-size: 26px;
	}

	.kvg-hub-card__body {
		padding: 18px 20px;
	}

	.kvg-hub-card__title {
		font-size: 20px;
	}

	.kvg-video-card__body {
		padding: 14px 16px 18px;
	}

	.kvg-video-card__title {
		font-size: 16px;
	}

	#kumra-video-guide .kvg-filter-btn {
		font-size: 14px;
		padding: 8px 16px;
	}
}

@media (max-width: 600px) {
	.kvg-hero__title {
		font-size: 31px;
	}

	.kvg-hero__subtitle {
		font-size: 17px;
	}

	.kvg-hubs {
		padding-top: 40px;
	}

	.kvg-cta--navy {
		padding: 40px 16px;
		margin-top: 40px;
	}

	.kvg-cta__title {
		font-size: 24px;
	}

	.kvg-filter-bar {
		gap: 6px;
	}

	#kumra-video-guide .kvg-filter-btn {
		font-size: 13px;
		padding: 7px 14px;
	}

	.kvg-sec-h2 {
		font-size: 24px;
	}
}

/* =========================================================================
 * ACCESSIBILITY
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}