/**
 * Head Block - Frontend Styles
 *
 * @package groupBK
 * @version 2.3.0
 *
 * Redesigned to rounded card layout (nodeId 6473:3019)
 * - Rounded card: 32px border-radius, 16px outer padding
 * - Content vertically centered (no header offset)
 * - 40% black overlay
 * - 92px horizontal padding, 600px content max-width
 * - Secondary button: outline style (#DFE2DF)
 *
 * Uses design tokens from design-tokens.css
 */

/* ===========================================
 * Block Container - Rounded Card
 * =========================================== */
.wp-block-groupbk-head {
	position: relative;
	width: 100%;
	/* 16px outer padding creates card inset from parent container */
	padding: 16px;
	box-sizing: border-box;
	/* Teal background fills the padding frame around the rounded card */
	background-color: var(--color-brand-primary, #135A70);
}

/* Target class for Header IntersectionObserver */
.wp-block-groupbk-head.groupbk-head {
	/* Marker class - do not remove */
}

.groupbk-head__wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Rounded corners clip background image/video */
	border-radius: var(--radius-xl, 32px);
	overflow: hidden;
	/* Fixed height per Figma spec */
	height: 800px;
}

/* ===========================================
 * Background Media
 * =========================================== */
.groupbk-head__background {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.groupbk-head__bg-image,
.groupbk-head__bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.groupbk-head__overlay {
	position: absolute;
	inset: 0;
	/* Default 40% opacity per Figma v2.3.0 */
	background-color: rgba(0, 0, 0, 0.4);
}

/* ===========================================
 * Content - Vertically Centered
 * =========================================== */
.groupbk-head__content {
	position: absolute;
	z-index: 1;
	inset: 0;
	/* 92px horizontal padding per Figma */
	padding-left: 92px;
	padding-right: 92px;
	/* Vertical centering */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	/* 40px gap between text block and button row */
	gap: var(--space-40, 40px);
}

/* Content Alignment Variants */
.groupbk-head--align-left .groupbk-head__content {
	align-items: flex-start;
	text-align: left;
}

.groupbk-head--align-center .groupbk-head__content {
	align-items: center;
	text-align: center;
}

.groupbk-head--align-right .groupbk-head__content {
	align-items: flex-end;
	text-align: right;
}

/* ===========================================
 * Typography
 * =========================================== */
.groupbk-head__text {
	display: flex;
	flex-direction: column;
	/* 20px gap between heading and subtitle */
	gap: var(--space-20, 20px);
	/* 600px content column max-width per Figma */
	max-width: 600px;
	width: 100%;
}

.groupbk-head__heading {
	font-family: var(--font-family-primary, 'Saira', sans-serif);
	/* 48px per Figma H2 spec */
	font-size: 48px;
	font-weight: var(--font-weight-semibold, 600);
	/* Line height 1.1 per Figma */
	line-height: 1.1;
	/* #EFF1EF per Figma Brand/BK - Secondary 100 */
	color: #EFF1EF;
	margin: 0;
}

.groupbk-head__subheading {
	font-family: var(--font-family-primary, 'Saira', sans-serif);
	/* 20px per Figma subtitle spec */
	font-size: 20px;
	font-weight: var(--font-weight-regular, 400);
	line-height: 1.75;
	/* var(--color-brand-secondary-500) = #AFB7AE */
	color: var(--color-brand-secondary-500, #AFB7AE);
	margin: 0;
}

/* ===========================================
 * Buttons
 * =========================================== */
.groupbk-head__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12, 12px);
	/* Gap from text block handled by content flex gap (40px) */
}

.groupbk-head__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8, 8px);
	height: var(--btn-height-lg, 48px);
	padding: var(--space-8, 8px) var(--space-40, 40px);
	font-family: var(--font-family-primary, 'Saira', sans-serif);
	font-size: var(--font-size-button-lg, 16px);
	font-weight: var(--font-weight-semibold, 600);
	line-height: 1;
	text-decoration: none;
	border-radius: var(--radius-lg, 16px);
	transition: var(--transition-fast, 150ms ease);
	cursor: pointer;
}

/* Primary Button - teal */
.groupbk-head__btn--primary {
	background-color: var(--color-brand-primary, #135A70);
	color: #EFF1EF;
	border: none;
}

.groupbk-head__btn--primary:hover,
.groupbk-head__btn--primary:focus {
	background-color: var(--color-brand-primary-700, #0e4557);
}

.groupbk-head__btn--primary:active {
	background-color: var(--color-brand-primary-800, #093542);
}

/* Secondary Button - outline per Figma v2.3.0 */
.groupbk-head__btn--secondary {
	background-color: transparent;
	color: #DFE2DF;
	border: 1px solid #DFE2DF;
	padding: var(--space-8, 8px) var(--space-32, 32px);
	gap: var(--space-8, 8px);
}

.groupbk-head__btn--secondary:hover,
.groupbk-head__btn--secondary:focus {
	background-color: rgba(223, 226, 223, 0.1);
}

.groupbk-head__btn--secondary:active {
	background-color: rgba(223, 226, 223, 0.2);
}

/* Button Icons */
.groupbk-head__btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.groupbk-head__btn-icon svg {
	width: 14px;
	height: 14px;
}

/* ===========================================
 * Video Play Button
 * =========================================== */
.groupbk-head__play-btn {
	position: absolute;
	bottom: var(--space-20, 20px);
	right: var(--space-20, 20px);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: none;
	color: #EFF1EF;
	cursor: pointer;
	opacity: 0.8;
	transition: var(--transition-fast, 150ms ease);
}

.groupbk-head__play-btn:hover {
	opacity: 1;
	transform: scale(1.1);
}

.groupbk-head__play-btn svg {
	width: 40px;
	height: 40px;
}

/* ===========================================
 * Responsive Styles
 * =========================================== */

/* Mobile */
@media (max-width: 767px) {
	.wp-block-groupbk-head {
		padding: 8px;
	}

	.groupbk-head__wrapper {
		height: 600px;
	}

	.groupbk-head__content {
		padding-left: var(--space-24, 24px);
		padding-right: var(--space-24, 24px);
	}

	.groupbk-head__heading {
		font-size: 32px;
	}

	.groupbk-head__subheading {
		font-size: 16px;
	}
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
	.groupbk-head__wrapper {
		height: 700px;
	}

	.groupbk-head__content {
		padding-left: var(--space-48, 48px);
		padding-right: var(--space-48, 48px);
	}

	.groupbk-head__heading {
		font-size: 40px;
	}
}

/* Desktop (default styles apply at 92px) */

/* ===========================================
 * Accessibility
 * =========================================== */
@media (prefers-reduced-motion: reduce) {
	.groupbk-head__bg-video {
		display: none;
	}

	.groupbk-head--has-video .groupbk-head__background::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(135deg, var(--color-brand-primary-700, #0e4557), var(--color-brand-primary-900, #062530));
	}
}

/* Focus styles for buttons */
.groupbk-head__btn:focus-visible {
	outline: 2px solid #EFF1EF;
	outline-offset: 2px;
}

.groupbk-head__play-btn:focus-visible {
	outline: 2px solid #EFF1EF;
	outline-offset: 2px;
}