/* The home hero's look (the block ub/home-hero is ub-site's; its ticker rules travel with it): texts left,
   art right (stacked on phones, art under the text), the art's stage, cards and badge, and the loops.
   Motion (Paul's exception for the home hero, BRIEF.md 10.16): the blob, the badge and the two cards as
   gentle loops, only inside prefers-reduced-motion: no-preference and html:not([data-ub-motion="off"]).
   Loaded with the block (functions.php); the decoration's markup and drawings: inc/home-hero.php. */

.wp-block-ub-home-hero {
	position: relative;
	overflow: clip; /* the cards' overhang and the glow never widen the page */
	padding-block: clamp(1.5rem, 0.5rem + 3vw, 3rem);
}
.ub-home-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: clamp(2.5rem, 4vw, 3.5rem);
	max-inline-size: var(--wp--style--global--wide-size, 1320px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 1.25rem) var(--wp--style--root--padding-right, 1.25rem);
}
@media (min-width: 960px) {
	.ub-home-hero__inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
}

/* ---- Texts ------------------------------------------------------------------------------------ */
.ub-home-hero__content > * { margin-block: 0; }
.ub-home-hero__content > * + * { margin-block-start: 1.5rem; }

.ub-home-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.875rem 0.375rem 0.5rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
	color: var(--wp--preset--color--ink);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
}
.ub-home-hero__pill::before {
	content: "";
	flex: none;
	inline-size: 1.75rem;
	block-size: 1.5rem;
	background: url(../img/g-mark.webp) center / contain no-repeat;
}

.wp-block-ub-home-hero h1 {
	margin-block-start: 1.25rem;
	font-size: clamp(2.375rem, 1.1rem + 3.9vw, 4.25rem);
	line-height: 1.06;
	letter-spacing: -0.035em;
}
/* The green words, underlined by a soft accent band (on the ticker's phrases when there is one) */
.wp-block-ub-home-hero h1 mark,
.ub-home-hero__phrase { padding-inline: 0.04em; }
.wp-block-ub-home-hero h1 mark:not(:has(.ub-home-hero__ticker)),
.ub-home-hero__phrase {
	background-image: linear-gradient(transparent 66%, rgb(114 197 63 / 0.28) 66%, rgb(114 197 63 / 0.28) 90%, transparent 90%);
}
.wp-block-ub-home-hero h1 mark:has(.ub-home-hero__ticker) { padding: 0; }

.ub-home-hero__lead {
	max-inline-size: 34rem;
	color: var(--wp--preset--color--muted);
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.6;
}

.wp-block-ub-home-hero .wp-block-buttons { gap: 0.75rem; }
.wp-block-ub-home-hero .wp-block-button__link { min-block-size: 3.25rem; padding: 0.75rem 1.5rem; gap: 0.5rem; box-shadow: 0 10px 24px -14px rgb(23 112 48 / 0.7); }
.wp-block-ub-home-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link::after {
	content: "";
	inline-size: 1.125rem;
	block-size: 1.125rem;
	background-color: currentColor;
	-webkit-mask: var(--ub-i-arrow-right, var(--ub-i-none)) center / contain no-repeat;
	mask: var(--ub-i-arrow-right, var(--ub-i-none)) center / contain no-repeat;
}
.wp-block-ub-home-hero .wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	white-space: nowrap;
}
.wp-block-ub-home-hero .wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }
.ub-home-hero__phone .wp-block-button__link::before {
	content: "";
	inline-size: 1.25rem;
	block-size: 1.25rem;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: var(--ub-i-phone, var(--ub-i-none)) center / contain no-repeat;
	mask: var(--ub-i-phone, var(--ub-i-none)) center / contain no-repeat;
}

.ub-home-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	font-weight: 500;
}
.ub-home-hero__facts li { display: flex; align-items: center; gap: 0.5rem; }
.ub-home-hero__facts li::before {
	content: "";
	flex: none;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: var(--ub-i-check, var(--ub-i-none)) center / contain no-repeat;
	mask: var(--ub-i-check, var(--ub-i-none)) center / contain no-repeat;
}


/* ---- The art ----------------------------------------------------------------------------------
   The art is the stage (600 × 560: the blob and the vehicle photo) with room above and below it for the
   cards: the product card sits above the roof (top right), the delivery card under the rear wheel
   (bottom left: the chat bubble takes the screen's bottom right), the badge at the stage's top left,
   so nothing covers the vehicle (Paul's choice of the KH06 Verde cut-out,
   BRIEF.md 10.16). */
.ub-home-hero__art {
	position: relative;
	isolation: isolate;
	inline-size: min(100%, 37rem);
	margin-inline: auto;
	padding-block: 2.75rem 1.75rem;
}
.ub-home-hero__stage { position: relative; aspect-ratio: 600 / 560; }
.ub-home-hero__stage::before { /* a soft green glow under the blob */
	content: "";
	position: absolute;
	inset: 6% 2% -4%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(114 197 63 / 0.3), rgb(114 197 63 / 0) 100%);
}
.ub-home-hero__blob {
	position: absolute;
	inset: 0;
	background: var(--ub-hero-blob, url(../hero/blob.svg)) center / 100% 100% no-repeat;
	-webkit-mask: var(--ub-hero-blob-mask, url(../hero/blob-mask.svg)) center / 100% 100% no-repeat;
	mask: var(--ub-hero-blob-mask, url(../hero/blob-mask.svg)) center / 100% 100% no-repeat;
}
.ub-home-hero__blob::after { /* fine contour lines, white, inside the blob only */
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	opacity: 0.2;
	-webkit-mask: var(--ub-hero-contours, url(../hero/contours.svg)) center / 100% 100% no-repeat;
	mask: var(--ub-hero-contours, url(../hero/contours.svg)) center / 100% 100% no-repeat;
}
/* The vehicle, larger than the blob: it overlaps the blob's left and lower edges (image-generator's
   placement was left -5 %, top 13 %, width 96 %). A media library image gets the same box. */
.ub-home-hero__photo {
	position: absolute;
	inset-block-start: 10%;
	inset-inline-start: -7%;
	inline-size: 108%;
	max-inline-size: none;
	block-size: auto;
	aspect-ratio: 1000 / 767;
	object-fit: contain;
}

/* Floating cards */
.ub-home-hero__card {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0.75rem 1rem 0.75rem 0.75rem;
	border: 1px solid rgb(44 45 51 / 0.06);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 24px 48px -24px rgb(12 60 30 / 0.45), 0 2px 8px rgb(44 45 51 / 0.06);
	color: var(--wp--preset--color--ink);
	font-size: 0.875rem;
	line-height: 1.3;
}
.ub-home-hero__card--product { inset-block-start: 0; inset-inline-end: -3%; inline-size: min(19rem, 62%); }
.ub-home-hero__thumb {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 4.5rem;
	block-size: 3.5rem;
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	overflow: hidden;
}
.ub-home-hero__thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ub-home-hero__card-text { display: grid; gap: 0.25rem; min-inline-size: 0; }
.ub-home-hero__card-link {
	display: -webkit-box;
	overflow: hidden;
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}
.ub-home-hero__card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* the whole card is the link */
.ub-home-hero__card--product:hover .ub-home-hero__card-link { color: var(--wp--preset--color--primary); }
.ub-home-hero__card-price { color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--heading); font-size: 1rem; font-weight: 700; }
.ub-home-hero__card-price .woocommerce-price-suffix,
.ub-home-hero__card-price .ub-price-from { font-size: 0.75rem; }

.ub-home-hero__card--delivery { inset-block-end: 0; inset-inline-start: 1%; max-inline-size: 15rem; font-weight: 600; }
.ub-home-hero__card-icon {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: 50%;
	background: rgb(114 197 63 / 0.18);
	color: var(--wp--preset--color--primary);
}
.ub-home-hero__card-icon svg { inline-size: 1.375rem; block-size: 1.375rem; }

/* The round badge: a white disc, svg-designer's text ring (assets/hero/badge.svg, inlined) turning
   around the logo's G mark; at the stage's top left, clear of the vehicle */
.ub-home-hero__badge {
	position: absolute;
	inset-block-start: 2.75rem;
	inset-inline-start: -1%;
	display: grid;
	place-items: center;
	inline-size: clamp(6rem, 21%, 8rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	box-shadow: 0 24px 48px -24px rgb(12 60 30 / 0.5), 0 2px 8px rgb(44 45 51 / 0.08);
	color: var(--wp--preset--color--ink);
}
.ub-home-hero__badge > * { grid-area: 1 / 1; }
.ub-home-hero__badge-ring { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.ub-home-hero__badge-mark { inline-size: 34%; block-size: auto; }


@media (max-width: 959px) {
	.ub-home-hero__art { inline-size: min(100%, 32rem); }
	.ub-home-hero__card--product { inset-inline-end: 0; }
	.ub-home-hero__card--delivery { inset-inline-start: 0; }
	.ub-home-hero__badge { inset-inline-start: 0; }
}
@media (max-width: 599px) {
	.ub-home-hero__content > * + * { margin-block-start: 1.25rem; }
	.wp-block-ub-home-hero .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.ub-home-hero__card { gap: 0.5rem; padding: 0.5rem 0.75rem 0.5rem 0.5rem; border-radius: 12px; font-size: 0.8125rem; }
	.ub-home-hero__art { padding-block: 3.75rem 2.5rem; }
	.ub-home-hero__card--product { inline-size: 74%; }
	.ub-home-hero__thumb { inline-size: 3.5rem; block-size: 2.75rem; }
	.ub-home-hero__card-price { font-size: 0.9375rem; }
	.ub-home-hero__card--delivery { max-inline-size: 12rem; }
	.ub-home-hero__card-icon { inline-size: 2rem; block-size: 2rem; }
	.ub-home-hero__card-icon svg { inline-size: 1.125rem; block-size: 1.125rem; }
	.ub-home-hero__badge { inset-block-start: 3.75rem; inline-size: 5rem; }
}

@keyframes ub-home-blob {
	0%, 100% { transform: rotate(0deg) scale(1, 1); }
	33% { transform: rotate(3deg) scale(1.035, 0.975); }
	66% { transform: rotate(-2deg) scale(0.975, 1.03); }
}
@keyframes ub-home-spin { to { transform: rotate(1turn); } }
@keyframes ub-home-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}


/* ---- Motion: the loops, only when allowed --------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	html:not([data-ub-motion="off"]) .ub-home-hero__blob { animation: ub-home-blob 14s ease-in-out infinite; }
	html:not([data-ub-motion="off"]) .ub-home-hero__badge-ring { animation: ub-home-spin 24s linear infinite; }
	html:not([data-ub-motion="off"]) .ub-home-hero__card--product { animation: ub-home-float 6s ease-in-out infinite; }
	html:not([data-ub-motion="off"]) .ub-home-hero__card--delivery { animation: ub-home-float 7s ease-in-out -3.5s infinite; }
}