/**
 * How To Widget — Picklemall Widgets
 */

/* ── Outer wrapper ────────────────────────────────────────────────────────── */

.pm-hwt {
	width: 100%;
	overflow: hidden;
}

.pm-hwt-inner {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	/* align-items: center; */
	padding: clamp(3rem, 6vw, 6rem) 0 0 clamp(2rem, 5vw, 5rem);
	gap: clamp(2rem, 4vw, 4rem);
}

/* ── Context column ───────────────────────────────────────────────────────── */

.pm-hwt-context {
	flex: 0 0 38%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 2rem;
	padding-top: 2rem;
}

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

.pm-hwt-title {
	font-family: var(--pm-font-header, 'A Love of Thunder', serif);
	font-size: 48px;
	color: var(--pm-color-dark, #1a3030);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.1;
	margin: 0;
	margin-bottom: 2em;
	/* Tuck the descender under the subtitle a bit */
}

.pm-hwt-title-graffiti {
	font-family: var(--pm-font-graffiti, 'Permanent Marker', cursive);
	color: var(--pm-color-orange, #E85D22);
	text-transform: none;
	display: inline;
}

/* ── Slides (grid-stacked for fade-up transition) ─────────────────────────── */

.pm-hwt-slides-wrap {
	display: grid;
}

.pm-hwt-slide {
	grid-column: 1;
	grid-row: 1;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	pointer-events: none;
}

.pm-hwt-slide.is-active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Faster exit so the incoming slide feels responsive */
.pm-hwt-slide.is-exit {
	opacity: 0;
	transform: translateY(-12px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ── Subtitle ─────────────────────────────────────────────────────────────── */

.pm-hwt-subtitle {
	font-family: var(--pm-font-header, 'A Love of Thunder', serif);
	font-size: 28px;
	color: var(--pm-color-dark, #1a3030);
	margin: 0 0 1rem;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-align: center;
}

/* ── Ordered list ─────────────────────────────────────────────────────────── */

.pm-hwt-list {
	font-family: var(--pm-font-body, 'Inter', sans-serif);
	list-style: decimal;
	padding-left: 1.25em;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.pm-hwt-list li {
	font-family: var(--pm-font-body, 'Inter', sans-serif);
	font-size: 18px;
	font-weight: 400;
	color: var(--pm-color-dark, #1a3030);
	line-height: 1.5;
}

/* ── Navigation ───────────────────────────────────────────────────────────── */

.pm-hwt-nav {
	display: flex;
	gap: 1rem;
	align-items: center;
}

.pm-hwt-btn {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}

.pm-hwt-btn:hover {
	opacity: 0.75;
}

.pm-hwt-arrow {
	width: 80px;
	height: auto;
	display: block;
	user-select: none;
	pointer-events: none;
}

/* Next arrow flips the left-pointing SVG to point right */
.pm-hwt-arrow--next {
	transform: rotate(180deg);
}

/* ── Image column ─────────────────────────────────────────────────────────── */

.pm-hwt-media {
	flex: 1 1 0;
	min-width: 0;
	align-self: flex-start;
}

.pm-hwt-images-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
	display: grid;
	/* mask-image URL applied inline via PHP; layout props stay here */
	-webkit-mask-size: cover;
	mask-size: cover;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* All slots stack in the same grid cell — container height = natural image height */
.pm-hwt-image-slot {
	grid-column: 1;
	grid-row: 1;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.pm-hwt-img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
/*
 * Order: title → subtitle+list → image → arrows
 *
 * display:contents on .pm-hwt-context removes its wrapper box so title,
 * slides-wrap, and nav become direct flex items of .pm-hwt-inner — they can
 * then be ordered alongside .pm-hwt-media without any DOM changes.
 */

@media (max-width: 768px) {

	.pm-hwt-inner {
		flex-direction: column;
		padding: 3rem 0;
		gap: 0;
	}

	/* Dissolve the context wrapper — children participate in inner's flex */
	.pm-hwt-context {
		display: contents;
	}

	/* 1 — title stays first (default order: 0) */
	.pm-hwt-title {
		order: 1;
		font-size: clamp(2rem, 8vw, 3rem);
		margin-bottom: 0;
		padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2rem) 0;
		text-align: center;
		margin-bottom: 2rem;
	}

	/* 2 — image comes before subtitle + list */
	.pm-hwt-media {
		order: 2;
		width: 100%;
		display: block;
	}

	/* 3 — subtitle + list sit below the image */
	.pm-hwt-slides-wrap {
		order: 3;
		padding: 1rem clamp(1.25rem, 4vw, 2rem);
	}

	/* Remove the organic-edge mask — it was designed for the desktop side-by-side
	   layout; a clean rectangle reads better on full-width mobile. */
	.pm-hwt-images-wrap {
		-webkit-mask-image: none !important;
		mask-image: none !important;
		display: block;
		position: relative;
		min-height: 400px;
	}

	/* Restore absolute stacking for the fixed-height mobile crop */
	.pm-hwt-image-slot {
		position: absolute;
		inset: 0;
	}

	.pm-hwt-img {
		object-fit: cover;
		height: 100% !important;
	}

	/* 4 — arrows sit below the image */
	.pm-hwt-nav {
		order: 4;
		padding: 1.25rem clamp(1.25rem, 4vw, 2rem) clamp(2rem, 5vw, 3rem);
		margin: 1rem auto 0;
	}

	.pm-hwt-subtitle {
		font-size: clamp(1.25rem, 5vw, 1.75rem);
	}

	.pm-hwt-list li {
		font-size: clamp(0.95rem, 3.5vw, 1.125rem);
	}
}