/**
 * COSECURE Speaking Featured Section — Styles
 * Scoped under .spk- prefix. Covers both Featured Hero and Featured Cards.
 */

/* ============================================================
   ELEMENTOR WRAPPER NORMALIZATION
   ============================================================ */
.elementor-widget-cs_speaking_featured_hero .elementor-widget-container,
.elementor-widget-cs_speaking_featured_cards .elementor-widget-container {
	padding: 0;
	max-width: 100%;
}

.elementor-widget-cs_speaking_featured_hero,
.elementor-widget-cs_speaking_featured_cards {
	max-width: 100%;
}

/* ============================================================
   ROOT SECTION
   ============================================================ */
.spk-feat {
	--spk-bg: #f8f8f8;
	--spk-fg: #1a2326;
	--spk-muted: #6b7a7d;
	--spk-card: #ffffff;
	--spk-border: rgba(15, 30, 40, 0.10);
	--spk-primary: #0f7c7b;
	--spk-primary-deep: #1d5e5d;
	--spk-primary-glow: #4fb8b3;
	--spk-shadow: 0 10px 40px -12px rgba(15, 124, 123, 0.18), 0 2px 8px rgba(15, 30, 40, 0.06);
	--spk-overlay-opacity: 0.7;
	display: block;
	color: var(--spk-fg);
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	max-width: 100%;
	overflow-x: hidden;
}

.spk-feat,
.spk-feat *,
.spk-feat *::before,
.spk-feat *::after {
	box-sizing: border-box;
}

/* ============================================================
   HERO BLOCK
   ============================================================ */
.spk-hero-container {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 1.5rem;
	max-width: 100%;
}

@media (min-width: 768px) {
	.spk-hero-container {
		padding-inline: 2.5rem;
	}
}

.spk-hero-card {
	position: relative;
	overflow: hidden;
	border-radius: 2rem;
	box-shadow: var(--spk-shadow);
	max-width: 100%;
}

.spk-hero-img {
	display: block;
	width: 100%;
	height: 480px;
	object-fit: cover;
}

.spk-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, calc(var(--spk-overlay-opacity, 0.7) * 1)),
		rgba(0, 0, 0, calc(var(--spk-overlay-opacity, 0.7) * 0.3)) 50%,
		transparent
	);
	pointer-events: none;
}

.spk-hero-text {
	position: absolute;
	left: 1.5rem;
	right: 1.5rem;
	bottom: 1.5rem;
	color: #fff;
	max-width: calc(100% - 3rem);
}

@media (min-width: 768px) {
	.spk-hero-text {
		left: 2rem;
		right: 2rem;
		bottom: 2rem;
		max-width: calc(100% - 4rem);
	}
}

.spk-eyebrow {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	opacity: 0.8;
	font-weight: 500;
	color: #fff;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.spk-hero-title {
	margin: 0.5rem 0 0 !important;
	padding: 0 !important;
	font-family: 'League Spartan', system-ui, sans-serif;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-size: 1.5rem;
	line-height: 1.15;
	max-width: 48rem;
	color: #fff;
	word-wrap: break-word !important;
	overflow-wrap: anywhere !important;
	white-space: normal !important;
}

@media (min-width: 480px) {
	.spk-hero-title { font-size: 1.875rem; line-height: 1.1; }
}

@media (min-width: 768px) {
	.spk-hero-title { font-size: 2.5rem; }
}

@media (min-width: 1024px) {
	.spk-hero-title { font-size: 3rem; }
}

/* ============================================================
   CARDS BLOCK
   ============================================================ */
.spk-block-b {
	padding: 1.5rem 0;
}

@media (min-width: 768px) {
	.spk-block-b {
		padding: 3.5rem 0;
	}
}

.spk-cards-container {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 1.5rem;
	max-width: 100%;
}

@media (min-width: 768px) {
	.spk-cards-container {
		padding-inline: 2.5rem;
	}
}

.spk-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	max-width: 100%;
}

@media (min-width: 640px) {
	.spk-grid {
		gap: 1.25rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.spk-grid {
		gap: 1.5rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ============================================================
   CARD
   ============================================================ */
.spk-card {
	background: var(--spk-card);
	border: 1px solid var(--spk-border);
	border-radius: 1rem;
	padding: 1.5rem;
	height: 100%;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	display: block;
	text-decoration: none;
	color: inherit;
	max-width: 100%;
	min-width: 0;
}

@media (min-width: 640px) {
	.spk-card {
		padding: 2rem;
	}
}

a.spk-card {
	cursor: pointer;
}

.spk-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--spk-shadow);
}

/* Neutralize any theme accent hover on the card link itself */
a.spk-card:hover,
a.spk-card:focus,
a.spk-card:focus-visible,
a.spk-card:active {
	background: var(--spk-card) !important;
	color: inherit !important;
	text-decoration: none !important;
}

a.spk-card:focus-visible {
	outline: 2px solid rgba(15, 124, 123, 0.5) !important;
	outline-offset: 4px;
}

.spk-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 3rem;
	width: 3rem;
	border-radius: 0.85rem;
	color: #fff;
	background-image: linear-gradient(135deg, #1d5e5d 0%, #0f7c7b 55%, #4fb8b3 100%);
	flex: 0 0 3rem;
}

.spk-icon-wrap svg {
	width: 1.5rem;
	height: 1.5rem;
}

.spk-card-title {
	margin: 1.25rem 0 0 !important;
	padding: 0 !important;
	font-family: 'League Spartan', system-ui, sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #1a2326;
	line-height: 1.3;
	word-wrap: break-word !important;
	overflow-wrap: anywhere !important;
	white-space: normal !important;
}

@media (min-width: 640px) {
	.spk-card-title { font-size: 1.25rem; }
}

.spk-card-desc {
	margin: 0.5rem 0 0;
	padding: 0;
	font-size: 0.875rem;
	color: var(--spk-muted);
	line-height: 1.7;
	word-wrap: break-word !important;
	overflow-wrap: anywhere !important;
	white-space: normal !important;
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.spk-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
		transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.spk-reveal.in {
	opacity: 1;
	transform: none;
}

/* ============================================================
   ELEMENTOR EDITOR — FORCE VISIBILITY
   ============================================================ */
body.elementor-editor-active .spk-reveal,
body.elementor-editor-preview .spk-reveal,
.spk-feat--editor .spk-reveal {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.spk-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.spk-card {
		transition: none !important;
	}
}