/**
 * Product Title — .espt-block-pd-title
 * vars: --size --weight --line-height --spacing --gap --eyebrow-size
 *       --sub-size --rule-width --radius --pad --clamp-lines
 *       --title-color --accent-color --sub-color --bg-color --border-color
 *       --anim-speed
 * Mobile-first: everything below is the ≤767px design; 768px / 1024px only
 * add breathing room.
 */

.espt-block-pd-title .espt-pdt {
	max-width: 100%;
	min-width: 0;
	position: relative;
	text-align: left;
}

.espt-block-pd-title .espt-pdt > * {
	margin: 0;
}

.espt-block-pd-title .espt-pdt > * + * {
	margin-top: var(--gap, 8px);
}

/* ------------------------------------------------------------- alignment */
.espt-block-pd-title.is-text-align-center .espt-pdt { text-align: center; }
.espt-block-pd-title.is-text-align-right .espt-pdt { text-align: right; }

/* --------------------------------------------------------------- eyebrow */
.espt-block-pd-title .espt-pdt-eyebrow {
	align-items: center;
	color: var(--accent-color, var(--bd-primary-dark));
	display: inline-flex;
	flex-wrap: wrap;
	font-size: var(--eyebrow-size, 12px);
	font-weight: 700;
	gap: 6px;
	letter-spacing: 0.08em;
	line-height: 1.35;
	max-width: 100%;
	min-width: 0;
	text-transform: uppercase;
	vertical-align: middle;
}

.espt-block-pd-title .espt-pdt-eyetx {
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-pd-title .espt-pdt-eyebrow a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.espt-block-pd-title .espt-pdt-eyebrow a:hover { opacity: 0.72; }

.espt-block-pd-title .espt-pdt-sep {
	margin: 0 4px;
	opacity: 0.5;
}

.espt-block-pd-title .espt-pdt-eyeic {
	font-size: 1.15em;
	opacity: 0.95;
}

.espt-block-pd-title.is-eyebrow-style-pill .espt-pdt-eyebrow {
	/* Flat tint first so the pill still reads where color-mix() is missing. */
	background: var(--bd-soft);
	background: color-mix(in srgb, var(--accent-color, var(--bd-primary)) 12%, transparent);
	border-radius: 999px;
	padding: 5px 12px;
}

.espt-block-pd-title.is-eyebrow-style-solid .espt-pdt-eyebrow {
	background: var(--accent-color, var(--bd-primary));
	border-radius: 999px;
	color: #fff;
	padding: 5px 12px;
}

.espt-block-pd-title.is-eyebrow-style-dash .espt-pdt-eyebrow::before {
	background: currentColor;
	border-radius: 999px;
	content: "";
	flex: 0 0 auto;
	height: 2px;
	width: 22px;
}

/* ----------------------------------------------------------------- title */
.espt-block-pd-title .espt-pdt-t {
	color: var(--title-color, var(--bd-ink));
	/* The tag can be span/p/div — force block so the eyebrow, the title and
	   the underline never share a line box. */
	display: block;
	font-size: var(--size, 24px);
	font-weight: var(--weight, 800);
	hyphens: auto;
	letter-spacing: var(--spacing, -0.5px);
	line-height: var(--line-height, 1.22);
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

.espt-block-pd-title .espt-pdt-in {
	display: inline;
}

.espt-block-pd-title .espt-pdt-link {
	color: inherit;
	min-width: 0;
	text-decoration: none;
	transition: color 0.18s ease;
}

.espt-block-pd-title .espt-pdt-link:hover {
	color: var(--accent-color, var(--bd-primary));
}

.espt-block-pd-title .espt-pdt-link:focus-visible {
	border-radius: 4px;
	outline: 2px solid var(--accent-color, var(--bd-primary));
	outline-offset: 3px;
}

.espt-block-pd-title.is-case-upper .espt-pdt-t { text-transform: uppercase; }
.espt-block-pd-title.is-case-lower .espt-pdt-t { text-transform: lowercase; }
.espt-block-pd-title.is-case-caps .espt-pdt-t { text-transform: capitalize; }

/* -------------------------------------------------------------- sub line */
.espt-block-pd-title .espt-pdt-sub {
	color: var(--sub-color, var(--bd-muted));
	font-size: var(--sub-size, 15px);
	font-weight: 500;
	line-height: 1.6;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-pd-title .espt-pdt-sub strong {
	color: var(--title-color, var(--bd-ink));
	font-weight: 800;
}

/* ------------------------------------------------- rule (underline only) */
.espt-block-pd-title .espt-pdt-rule { display: none; }

/* ================================================================ designs */

/* Accent underline. */
.espt-block-pd-title.is-template-underline .espt-pdt-rule {
	/* Solid first so the bar survives even if the gradient below is
	   unsupported (color-mix); the gradient is pure polish. */
	background-color: var(--accent-color, var(--bd-primary));
	background-image: linear-gradient(90deg, var(--accent-color, var(--bd-primary)), color-mix(in srgb, var(--accent-color, var(--bd-primary)) 25%, transparent));
	border-radius: 999px;
	display: inline-block;
	height: 4px;
	max-width: 100%;
	transition: width 0.35s ease;
	vertical-align: middle;
	width: var(--rule-width, 64px);
}

.espt-block-pd-title.is-template-underline .espt-pdt:hover .espt-pdt-rule {
	width: min(100%, calc(var(--rule-width, 64px) * 1.45));
}

/* Side accent bar. */
.espt-block-pd-title.is-template-bar .espt-pdt {
	border-left: 4px solid var(--accent-color, var(--bd-primary));
	padding-left: 14px;
}

.espt-block-pd-title.is-template-bar.is-text-align-right .espt-pdt {
	border-left: 0;
	border-right: 4px solid var(--accent-color, var(--bd-primary));
	padding-left: 0;
	padding-right: 14px;
}

.espt-block-pd-title.is-template-bar.is-text-align-center .espt-pdt {
	border-left: 0;
	border-top: 4px solid var(--accent-color, var(--bd-primary));
	padding-left: 0;
	padding-top: 14px;
}

/* Gradient text. */
.espt-block-pd-title.is-template-gradient .espt-pdt-in {
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(100deg, var(--title-color, var(--bd-ink)) 5%, var(--accent-color, var(--bd-primary)) 95%);
	color: transparent;
	display: inline-block;
	max-width: 100%;
	-webkit-text-fill-color: transparent;
}

/* Marker highlight behind the words. */
.espt-block-pd-title.is-template-highlight .espt-pdt-in {
	background-color: var(--bg-color, var(--bd-soft-line));
	border-radius: 6px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding: 0.08em 0.3em;
}

/* Boxed card. */
.espt-block-pd-title.is-template-boxed .espt-pdt {
	background: var(--bg-color, var(--bd-box-bg));
	border: 1px solid var(--border-color, var(--bd-box-line));
	border-radius: var(--radius, 14px);
	padding: var(--pad, 16px);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.espt-block-pd-title.is-template-boxed .espt-pdt:hover {
	transform: translateY(-2px);
}

/* Solid banner. */
.espt-block-pd-title.is-template-banner .espt-pdt {
	background: var(--bg-color, var(--bd-primary));
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.06));
	border-radius: var(--radius, 14px);
	overflow: hidden;
	padding: var(--pad, 16px);
}

.espt-block-pd-title.is-template-banner .espt-pdt-t { color: var(--title-color, #fff); }
.espt-block-pd-title.is-template-banner .espt-pdt-sub { color: var(--sub-color, rgba(255, 255, 255, 0.86)); }
.espt-block-pd-title.is-template-banner .espt-pdt-sub strong { color: var(--title-color, #fff); }
.espt-block-pd-title.is-template-banner .espt-pdt-eyebrow { color: var(--accent-color, rgba(255, 255, 255, 0.9)); }

.espt-block-pd-title.is-template-banner.is-eyebrow-style-pill .espt-pdt-eyebrow {
	background: rgba(255, 255, 255, 0.18);
}

.espt-block-pd-title.is-template-banner.is-eyebrow-style-solid .espt-pdt-eyebrow {
	background: rgba(255, 255, 255, 0.92);
	color: var(--bd-ink);
}

/* Lines on both sides. */
.espt-block-pd-title.is-template-lines .espt-pdt-t {
	align-items: center;
	display: flex;
	gap: 12px;
}

.espt-block-pd-title.is-template-lines .espt-pdt-t::before,
.espt-block-pd-title.is-template-lines .espt-pdt-t::after {
	background: linear-gradient(90deg, transparent, var(--accent-color, var(--bd-line)));
	content: "";
	flex: 1 1 0;
	height: 2px;
	/* Keep a sliver of rule on a 320px screen with a long title (the words
	   wrap instead — min-content of the text is one character). */
	min-width: 16px;
}

.espt-block-pd-title.is-template-lines .espt-pdt-t::after {
	background: linear-gradient(90deg, var(--accent-color, var(--bd-line)), transparent);
}

.espt-block-pd-title.is-template-lines .espt-pdt-in {
	flex: 0 1 auto;
	min-width: 0;
}

/* --------------------------------------------------------------- shadows */
.espt-block-pd-title.is-shadow-soft.is-template-boxed .espt-pdt,
.espt-block-pd-title.is-shadow-soft.is-template-banner .espt-pdt {
	box-shadow: 0 6px 24px -10px rgba(15, 23, 42, 0.22);
}

.espt-block-pd-title.is-shadow-strong.is-template-boxed .espt-pdt,
.espt-block-pd-title.is-shadow-strong.is-template-banner .espt-pdt {
	box-shadow: 0 18px 40px -16px rgba(15, 23, 42, 0.4);
}

.espt-block-pd-title.is-shadow-soft.is-template-boxed .espt-pdt:hover {
	box-shadow: 0 16px 34px -14px rgba(15, 23, 42, 0.3);
}

/* ----------------------------------------------------------- line clamp */
.espt-block-pd-title.is-clamp .espt-pdt-t {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--clamp-lines, 2);
	line-clamp: var(--clamp-lines, 2);
	overflow: hidden;
}

.espt-block-pd-title.is-clamp.is-template-lines .espt-pdt-t::before,
.espt-block-pd-title.is-clamp.is-template-lines .espt-pdt-t::after {
	display: none;
}

/* -------------------------------------------------- attention animations */
.espt-block-pd-title.is-anim-pulse .espt-pdt-t { animation: espt-pdt-pulse var(--anim-speed, 1.8s) ease-in-out infinite; }
.espt-block-pd-title.is-anim-bounce .espt-pdt-t { animation: espt-pdt-bounce var(--anim-speed, 1.8s) ease-in-out infinite; }
.espt-block-pd-title.is-anim-float .espt-pdt-t { animation: espt-pdt-float var(--anim-speed, 1.8s) ease-in-out infinite; }
.espt-block-pd-title.is-anim-heartbeat .espt-pdt-t { animation: espt-pdt-heartbeat var(--anim-speed, 1.8s) ease-in-out infinite; }
.espt-block-pd-title.is-anim-shake .espt-pdt-t { animation: espt-pdt-shake var(--anim-speed, 1.8s) ease-in-out infinite; }

.espt-block-pd-title.is-anim-glow .espt-pdt-in {
	animation: espt-pdt-glow var(--anim-speed, 1.8s) ease-in-out infinite;
	border-radius: 8px;
	display: inline-block;
}

.espt-block-pd-title.is-anim-pulse .espt-pdt-t,
.espt-block-pd-title.is-anim-bounce .espt-pdt-t,
.espt-block-pd-title.is-anim-float .espt-pdt-t,
.espt-block-pd-title.is-anim-heartbeat .espt-pdt-t,
.espt-block-pd-title.is-anim-shake .espt-pdt-t {
	transform-origin: center;
	will-change: transform;
}

@keyframes espt-pdt-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.04); }
}

@keyframes espt-pdt-bounce {
	0%, 100% { transform: translateY(0); }
	40% { transform: translateY(-7px); }
	60% { transform: translateY(-3px); }
}

@keyframes espt-pdt-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

@keyframes espt-pdt-heartbeat {
	0%, 40%, 100% { transform: scale(1); }
	10%, 30% { transform: scale(1.07); }
	20% { transform: scale(0.97); }
}

@keyframes espt-pdt-shake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-4px); }
	40%, 80% { transform: translateX(4px); }
}

@keyframes espt-pdt-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
	50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent-color, var(--bd-primary)) 18%, transparent); }
}

/* ------------------------------------------------- word-by-word reveal */
.espt-block-pd-title.is-reveal-words .espt-pdt-w {
	animation: espt-pdt-word 0.55s cubic-bezier(0.22, 0.75, 0.3, 1) both;
	animation-delay: calc(var(--i, 0) * 70ms);
	display: inline-block;
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* assets/js/blocks/pd-title.js holds the stagger until the title scrolls
   into view (and only ever when it is still below the fold — without JS the
   words simply animate on load, never stuck invisible). */
.espt-block-pd-title.is-reveal-words .espt-pdt.is-hold .espt-pdt-w {
	animation-play-state: paused;
}

@keyframes espt-pdt-word {
	from { opacity: 0; transform: translateY(0.45em); }
	to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------- editor helper */
.espt-block-pd-title .espt-block-note {
	background: #f8fafc;
	border: 1px dashed var(--bd-line);
	border-radius: 10px;
	color: var(--bd-muted);
	font-size: 12.5px;
	line-height: 1.5;
	padding: 8px 12px;
	text-align: left;
}

/* ---------------------------------------------------------- breakpoints */
@media (min-width: 768px) {
	.espt-block-pd-title.is-template-bar .espt-pdt { padding-left: 18px; }
	.espt-block-pd-title.is-template-bar.is-text-align-right .espt-pdt { padding-left: 0; padding-right: 18px; }
	.espt-block-pd-title.is-template-lines .espt-pdt-t { gap: 18px; }
}

@media (min-width: 1024px) {
	.espt-block-pd-title.is-template-bar .espt-pdt { border-left-width: 5px; padding-left: 20px; }
	.espt-block-pd-title.is-template-bar.is-text-align-right .espt-pdt { border-left-width: 0; border-right-width: 5px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-pd-title[class][class] .espt-pdt,
	.espt-block-pd-title[class][class] .espt-pdt-t,
	.espt-block-pd-title[class][class] .espt-pdt-in,
	.espt-block-pd-title[class][class] .espt-pdt-w,
	.espt-block-pd-title[class][class] .espt-pdt-rule {
		animation: none;
		opacity: 1;
		transform: none;
		transition: none;
	}
}