/**
 * Coaches Hero Widget — Picklemall Widgets
 *
 * Photo background → flat tint → vertical gradient overlay (transparent top,
 * solid --pm-ch-overlay bottom) → two-column content. All colours/geometry are
 * --pm-ch-* custom properties driven from the Elementor Style tab.
 */

/* ── Section ──────────────────────────────────────────────────────────────── */

.pm-ch {
	--pm-ch-overlay: var(--pm-color-primary-d80, #052E2C);
	--pm-ch-overlay-start: 0%;
	--pm-ch-overlay-end: 100%;
	--pm-ch-tint: 0.3;
	--pm-ch-image-pos: center center;
	--pm-ch-min-height: 560px;
	--pm-ch-max-width: 1280px;
	--pm-ch-gap: 96px;
	--pm-ch-valign: center;
	--pm-ch-title: var(--pm-color-white, #FFFFFF);
	--pm-ch-graffiti: var(--pm-color-orange, #E85D22);
	--pm-ch-eyebrow: var(--pm-color-action, #E1FF2B);
	--pm-ch-desc: rgba(255, 255, 255, 0.88);
	--pm-ch-outline: var(--pm-color-white, #FFFFFF);
	--pm-ch-outline-hover-text: var(--pm-color-primary-d80, #052E2C);

	position: relative;
	isolation: isolate;
	display: flex;
	align-items: var(--pm-ch-valign);
	width: 100%;
	min-height: var(--pm-ch-min-height);
	overflow: hidden;
	/* Shows through while the image loads, and below it if it's shorter */
	background-color: var(--pm-ch-overlay);
}

/* ── Background layers ────────────────────────────────────────────────────── */

.pm-ch__image {
	position: absolute;
	inset: 0;
	z-index: -3;
	width: 100%;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: var(--pm-ch-image-pos);
}

.pm-ch__tint,
.pm-ch__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.pm-ch__tint {
	z-index: -2;
	background-color: var(--pm-ch-overlay);
	opacity: var(--pm-ch-tint);
}

.pm-ch__overlay {
	z-index: -1;
	background: linear-gradient(to bottom,
			transparent var(--pm-ch-overlay-start),
			var(--pm-ch-overlay) var(--pm-ch-overlay-end));
}

.pm-ch__image--mobile {
	display: none;
}

/* ── Layout ───────────────────────────────────────────────────────────────── */

.pm-ch__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: flex-start;
	column-gap: var(--pm-ch-gap);
	row-gap: 28px;
	width: 100%;
	max-width: var(--pm-ch-max-width);
	margin: 0 auto;
	padding: clamp(3rem, 7vw, 6rem) var(--pm-gutter, clamp(1rem, 4vw, 2rem));
	box-sizing: border-box;
}

/* ── Title ────────────────────────────────────────────────────────────────── */

.pm-ch__title {
	font-family: var(--pm-font-header, 'A Love of Thunder', serif);
	font-size: var(--pm-ch-title-size, var(--pm-text-xxlarge, clamp(2.625rem, 1.529rem + 4.494vw, 5.125rem)));
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: left !important;
	color: var(--pm-ch-title);
	margin: 0;
	text-wrap: balance;
}

.pm-ch__title-graffiti {
	font-family: var(--pm-font-graffiti, 'TheGraffitiFont', cursive);
	font-size: 1.1em;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--pm-ch-graffiti);
}

/* ── Intro ────────────────────────────────────────────────────────────────── */

.pm-ch__intro-col {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	gap: var(--pm-space-5, 1.25rem);
	max-width: 520px;
}

.pm-ch__eyebrow {
	font-family: var(--pm-font-header, 'A Love of Thunder', serif);
	font-size: var(--pm-text-body-sm, 1rem);
	line-height: var(--pm-leading-snug, 1.2);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pm-ch-eyebrow);
	margin: 0;
}

.pm-ch__description {
	font-family: var(--pm-font-sans, 'Inter', system-ui, sans-serif);
	font-size: var(--pm-text-subtitle, 1.25rem);
	font-weight: var(--pm-weight-regular, 400);
	line-height: var(--pm-leading-body, 1.5);
	color: var(--pm-ch-desc);
	margin: 0;
}

/* ── Buttons (.custom-btn from button-widget.css) ─────────────────────────── */

.pm-ch__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: var(--pm-space-2, 0.5rem);
}

.pm-ch__actions--stacked {
	flex-direction: column;
}

.pm-ch__actions--stacked .pm-ch__btn {
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
}

.pm-ch__btn {
	padding-top: 16px;
	padding-bottom: 16px;
}

/* Outline variant — transparent with a light border, fills on hover */
.pm-ch__btn--outline {
	color: var(--pm-ch-outline);
	background: transparent;
	border-color: var(--pm-ch-outline);
}

.pm-ch__btn--outline .custom-btn__arrow {
	filter: brightness(0) invert(1);
}

.pm-ch__btn--outline:hover,
.pm-ch__btn--outline:focus-visible {
	color: var(--pm-ch-outline-hover-text);
	background: var(--pm-ch-outline);
	border-color: var(--pm-ch-outline);
}

.pm-ch__btn--outline:hover .custom-btn__arrow,
.pm-ch__btn--outline:focus-visible .custom-btn__arrow {
	filter: brightness(0);
}

/* ── Entrance (live site only — not replayed on every editor change) ──────── */

@keyframes pm-ch-rise {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

body:not(.elementor-editor-active) .pm-ch__title-col,
body:not(.elementor-editor-active) .pm-ch__intro-col {
	animation: pm-ch-rise 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

body:not(.elementor-editor-active) .pm-ch__intro-col {
	animation-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {

	body:not(.elementor-editor-active) .pm-ch__title-col,
	body:not(.elementor-editor-active) .pm-ch__intro-col {
		animation: none;
	}
}

/* ── Tablet ───────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.pm-ch {
		--pm-ch-gap: 48px;
	}
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.pm-ch__inner {
		grid-template-columns: minmax(0, 1fr);
		padding-top: clamp(5rem, 22vw, 8rem);
		padding-bottom: 3rem;
	}

	.pm-ch__title {
		text-align: left;
	}

	.pm-ch__intro-col {
		max-width: none;
	}

	.pm-ch__image--desktop {
		display: none;
	}

	.pm-ch__image--mobile {
		display: block;
	}
}