/*
 * happymonday/feature-hero — media panel + scalloped copy cloud.
 *
 * Verbatim port of the .hm-home-hero prototype (variant-b home.css) scoped to
 * .hm-feature-hero, plus attribute-driven variants (media side, mobile order,
 * resize-to-cloud vs fixed ratio, scallop toggle). Shared .hm-container /
 * .hm-section / .hm-band--* / .hm-stamp / .hm-accent / .hm-btn live in the theme
 * style.css — not duplicated. Tokens only — no hardcoded hex.
 */

.hm-feature-hero {
	overflow: visible;
	padding-block: var(--hm-sp-3); /* sits tight, like the home hero under the nav */
}

.hm-feature-hero__inner {
	display: grid;
	grid-template-columns: 0.92fr 1.08fr; /* copy column at least as wide as the media */
	gap: var(--hm-sp-3);
	align-items: stretch; /* copy cloud matches the media height so scallops line up */
}

/* Media side swap (desktop): default media left; --media-right flips columns. */
.hm-feature-hero--media-right .hm-feature-hero__inner {
	grid-template-columns: 1.08fr 0.92fr;
}
.hm-feature-hero--media-right .hm-feature-hero__media {
	order: 2;
}
.hm-feature-hero--media-right .hm-feature-hero__copy {
	order: 1;
}

/* Media box. Resize-to-cloud (default): the box stretches to the copy cloud's
   height (grid stretch); the video/img fills it absolutely and is cropped with
   object-fit:cover — so the MEDIA resizes to the cloud, not the cloud to the
   media. Still images keep natural ratio only in fixed-ratio mode. */
.hm-feature-hero__media {
	position: relative;
	min-height: 0;
}
.hm-feature-hero__media .hm-feature-hero__clip {
	display: block;
	border-radius: var(--hm-radius-lg);
	box-shadow: 0 24px 50px -24px var(--hm-shadow);
	background: var(--hm-bg-2-soft); /* placeholder tint while media loads */
}

/* Resize-to-cloud: media fills the stretched box absolutely (contributes no
   intrinsic height → the cloud drives the row height). */
.hm-feature-hero--resize .hm-feature-hero__media .hm-feature-hero__clip {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Fixed-ratio: author picks an aspect ratio; media no longer tracks the cloud. */
.hm-feature-hero--fixed .hm-feature-hero__media .hm-feature-hero__clip {
	width: 100%;
	height: auto;
	aspect-ratio: var(--hm-fh-ratio, 4 / 5);
	object-fit: cover;
}
.hm-feature-hero--fixed img.hm-feature-hero__clip {
	object-fit: contain; /* images keep their natural ratio inside the reserved box */
}

/* Corner stamp on the media (pink fill, black border/text).
   Scoped under __media so position:absolute beats the shared `.hm-stamp` base
   (position:relative, equal specificity) regardless of stylesheet load order —
   otherwise the stamp drops into normal flow and lands top-LEFT, not top-right. */
.hm-feature-hero__media .hm-feature-hero__stamp {
	position: absolute;
	top: -1.4rem;
	right: -1rem;
	z-index: 6;
	background: var(--hm-cta-1);
	color: var(--hm-ink);
	border: 2px solid var(--hm-ink);
	font-size: var(--hm-fs-sm);
}

/* Copy cloud — scalloped cream panel (mask carved into ::before). */
.hm-feature-hero__copy {
	--sc: 14px;
	position: relative;
	z-index: 0;
	padding: clamp(1.75rem, 3vw, 2.75rem);
}
.hm-feature-hero__copy::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--hm-bg-1);
	-webkit-mask:
		radial-gradient(circle var(--sc) at 50% 100%, black 98%, transparent 100%) top / calc(var(--sc) * 2) var(--sc) space no-repeat,
		radial-gradient(circle var(--sc) at 50% 0%, black 98%, transparent 100%) bottom / calc(var(--sc) * 2) var(--sc) space no-repeat,
		linear-gradient(black 0 0) center / 100% calc(100% - var(--sc) * 2) no-repeat;
	mask:
		radial-gradient(circle var(--sc) at 50% 100%, black 98%, transparent 100%) top / calc(var(--sc) * 2) var(--sc) space no-repeat,
		radial-gradient(circle var(--sc) at 50% 0%, black 98%, transparent 100%) bottom / calc(var(--sc) * 2) var(--sc) space no-repeat,
		linear-gradient(black 0 0) center / 100% calc(100% - var(--sc) * 2) no-repeat;
}
/* Scallop off: plain rounded panel, no mask. */
.hm-feature-hero--noscallop .hm-feature-hero__copy::before {
	-webkit-mask: none;
	mask: none;
	border-radius: var(--hm-radius-lg);
}

/* Flower "&" sticker at the cloud's lower-left corner. */
.hm-feature-hero__flower {
	position: absolute;
	width: 88px;
	height: 88px;
	left: -2.1rem;
	bottom: -2rem;
	top: auto;
	transform: rotate(-10deg);
	z-index: 5;
}
.hm-feature-hero__flower svg {
	width: 100%;
	height: 100%;
	display: block;
	filter: drop-shadow(0 6px 10px var(--hm-shadow));
}
.hm-feature-hero__flower svg circle {
	fill: var(--hm-accent-1);
}
.hm-feature-hero__amp {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--hm-font-head);
	font-style: italic;
	font-weight: var(--hm-head-weight);
	font-size: 2rem;
	color: var(--hm-bg-1);
}

.hm-feature-hero__title {
	font-family: var(--hm-font-head);
	font-size: var(--hm-fs-3xl);
	font-weight: var(--hm-head-weight);
	color: var(--hm-ink);
	margin: 0 0 var(--hm-sp-2);
	line-height: 1.05;
	letter-spacing: -0.01em;
	font-variation-settings: "opsz" 40, "SOFT" 40;
}
.hm-feature-hero__sub {
	color: var(--hm-text-muted);
	margin-bottom: var(--hm-sp-3);
	max-width: 46ch;
}

/* Rating kicker chip. */
.hm-feature-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--hm-font-body);
	font-size: var(--hm-fs-sm);
	font-weight: var(--hm-head-weight);
	color: var(--hm-ink);
	background: var(--hm-cta-2);
	border: 2px solid var(--hm-ink);
	border-radius: var(--hm-radius-pill);
	padding: 0.45em 1.1em;
	margin: 0 0 var(--hm-sp-2);
}
.hm-feature-hero__stars {
	color: var(--hm-accent-1);
	letter-spacing: 0.08em;
	font-size: 0.95em;
}

/* Decorative sparkles. */
.hm-feature-hero__deco {
	position: absolute;
	color: var(--hm-cta-1);
	pointer-events: none;
	line-height: 1;
}
.hm-feature-hero__deco--1 {
	top: -1.6rem;
	right: 6%;
	font-size: 3.4rem;
	transform: rotate(6deg);
	animation: hmTwinkle1 2.6s ease-in-out infinite;
}
.hm-feature-hero__deco--2 {
	top: 3.4rem;
	right: -0.4rem;
	font-size: 1.6rem;
	color: var(--hm-accent-1);
	transform: rotate(-10deg);
	animation: hmTwinkle2 2.1s ease-in-out 0.5s infinite;
}
@keyframes hmTwinkle1 {
	0%, 100% { opacity: 0.4; transform: rotate(6deg) scale(0.82); }
	50% { opacity: 1; transform: rotate(6deg) scale(1.18); }
}
@keyframes hmTwinkle2 {
	0%, 100% { opacity: 0.35; transform: rotate(-10deg) scale(0.8); }
	50% { opacity: 1; transform: rotate(-10deg) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
	.hm-feature-hero__deco { animation: none; }
}

/* CTA row: button + handwritten note. */
.hm-feature-hero__ctarow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--hm-sp-2);
	flex-wrap: wrap;
}
.hm-feature-hero__note {
	font-family: var(--hm-font-hand);
	font-size: var(--hm-fs-lg);
	color: var(--hm-accent-1);
	transform: rotate(-4deg);
	white-space: nowrap;
}

/* ---- mobile: columns stack, media at natural ratio (no square crop) ------ */
@media (max-width: 900px) {
	.hm-feature-hero__inner {
		grid-template-columns: 1fr;
	}
	/* media-first (default): media above copy */
	.hm-feature-hero--mob-mediafirst .hm-feature-hero__media { order: -1; }
	.hm-feature-hero--mob-copyfirst .hm-feature-hero__media { order: 1; }
	.hm-feature-hero--media-right .hm-feature-hero__media,
	.hm-feature-hero--media-right .hm-feature-hero__copy { order: initial; }
	.hm-feature-hero--media-right.hm-feature-hero--mob-mediafirst .hm-feature-hero__media { order: -1; }
	.hm-feature-hero--media-right.hm-feature-hero--mob-copyfirst .hm-feature-hero__media { order: 1; }

	/* single column: show media at its natural ratio rather than cropping it */
	.hm-feature-hero--resize .hm-feature-hero__media .hm-feature-hero__clip {
		position: static;
		height: auto;
		object-fit: fill;
	}
	/* fixed-ratio: honour a distinct MOBILE aspect ratio when set, else inherit
	   the desktop ratio (--hm-fh-ratio-m falls back to --hm-fh-ratio). */
	.hm-feature-hero--fixed .hm-feature-hero__media .hm-feature-hero__clip {
		aspect-ratio: var(--hm-fh-ratio-m, var(--hm-fh-ratio, 4 / 5));
	}
	.hm-feature-hero__flower { display: none; } /* declutter narrow layout */
	.hm-feature-hero__ctarow { flex-direction: column; }
	.hm-feature-hero__stamp { top: -1rem; right: -0.5rem; }
}

/* ---- editor-only helpers ------------------------------------------------- */
.hm-feature-hero--edit .hm-feature-hero__media-ph {
	display: grid;
	place-items: center;
	min-height: 240px;
	border-radius: var(--hm-radius-lg);
	background: var(--hm-bg-2-soft);
	color: var(--hm-text-muted);
	font-size: var(--hm-fs-sm);
}