/*
 * Block wrappers.
 *
 * Every section is built from core blocks so the Site Editor can open and edit
 * it, which is the right call — but core blocks arrive wrapped: `core/image`
 * and `core/video` bring a `<figure>`, `core/group` brings
 * `is-layout-flow` and the vertical rhythm that goes with it, and
 * `core/details` brings its own summary marker. This file reconciles those
 * wrappers with the layout the theme wants, in one place, so no section has to
 * fight them individually.
 */

/*
 * Core's flow layout puts `margin-block-start` on every child after the first.
 * That is correct for prose and wrong for a grid or a flex row, where the gap
 * property is already doing the job — so the containers that lay their children
 * out themselves opt out.
 */
.gamife-header__inner > *,
.gamife-header__nav > *,
.gamife-header__end > *,
.gamife-footer__inner > *,
.gamife-footer__nav > *,
.gamife-hero__inner > *,
.gamife-hero__actions > *,
.gamife-proof__grid > *,
.gamife-pricing__grid > *,
.gamife-privacy__list > *,
.gamife-cast__row > *,
.gamife-story__track > *,
.gamife-story__stage > *,
.gamife-story__beats > *,
.gamife-step > *,
.gamife-pricing__switch > *,
.gamife-closing__actions > * {
	margin-block-start: 0;
}

/*
 * Containers that space their own children.
 *
 * Core's flow layout gives `margin-block-start` to every child after the first.
 * All three of these lay their children out with `gap` or with absolute
 * positioning instead, so core's margins are redundant here — and not harmless:
 * on the annual plan a stray 28px pushed the "7-day free trial" badge down
 * through the "Annual" heading beneath it. Anything that changes the child order
 * of these containers gets that bug back the moment this rule goes.
 */
.gamife-plan > *,
.gamife-hero__phone > *,
.gamife-closing > * {
	margin-block-start: 0;
}

/* The phone's screen is a positioned frame; its one child fills it exactly. */
.gamife-phone__screen > figure {
	margin: 0;
	position: absolute;
	inset: 0;
}

.gamife-phone__screen video,
.gamife-phone__screen img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * The cast are images in a row, not figures in a column.
 *
 * `flex: 1 1 0` rather than a fixed size, because the row must never outgrow
 * its container. It used to be `flex: none` against an image floored at 60px,
 * which meant that below about 545px each mascot stopped responding to the
 * viewport entirely: five 60px images plus four gaps needed 338px inside a
 * 280px column at 320px, and `.gamife-cast { overflow: hidden }` cropped the
 * cat and the leopard off the ends rather than showing a scrollbar. Sharing the
 * row divides whatever space there is by five, so it fits at any width without
 * a media query. `max-width` is the artwork's natural size — the cap, not a
 * floor, so the desktop row is unchanged.
 */
.gamife-cast__member {
	margin: 0;
	display: block;
	flex: 1 1 0;
	min-width: 0;
	max-width: 116px;
}

/*
 * One box for all five, sized to the tallest of them (the rabbit, 180x288), with
 * the artwork contained inside and pinned to the bottom edge. Each mascot keeps
 * its own proportions and its own height, and the row reserves its full space
 * before a single file has decoded — which is what the width/height attributes
 * used to do, before they had to come off to keep the image blocks valid.
 */
.gamife-cast__member img {
	width: 100%;
	height: auto;
	aspect-ratio: 180 / 288;
	object-fit: contain;
	object-position: bottom;
	display: block;
}

/* ------------------------------------------------------------- buttons --- */

/*
 * `core/button` already takes its colours and radius from theme.json; what it
 * does not know is that this one is the page's primary action and should carry
 * the app's press spring.
 */
.wp-block-button__link {
	transition:
		transform var(--dur-press) var(--ease-press),
		background-color var(--dur-press) var(--ease-press);
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
}

.wp-block-button__link:active {
	transform: translateY(0) scale(0.98);
}

.gamife-cta-wrap {
	margin-block-start: 0;
}

/* ------------------------------------------------------------- details --- */

.gamife-faq .wp-block-details {
	border-bottom: 1px solid var(--outline);
	margin-block-start: 0;
}

.gamife-faq .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	padding-block: var(--space-m);
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-size: var(--text-l);
	font-weight: 600;
	color: var(--ink);
}

.gamife-faq .wp-block-details summary::-webkit-details-marker,
.gamife-faq .wp-block-details summary::marker {
	display: none;
	content: "";
}

.gamife-faq .wp-block-details summary::after {
	content: "+";
	flex: none;
	font-family: var(--font-body);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: var(--ink-faint);
	transition: transform var(--dur-settle) var(--ease-settle);
}

.gamife-faq .wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.gamife-faq .wp-block-details p {
	margin: 0 0 var(--space-m);
	max-width: var(--measure);
	color: var(--ink-muted);
}

/* --------------------------------------------------------------- legal --- */

/* core/table wraps in a figure that would otherwise add its own margins. */
.gamife-legal__body .wp-block-table {
	margin-block: var(--space-m);
	overflow-x: auto;
}

.gamife-legal__body .wp-block-separator {
	margin-block: var(--space-l);
	border: 0;
	border-top: 1px solid var(--outline);
	opacity: 1;
	width: 100%;
	max-width: none;
}

.gamife-legal__body .wp-block-list {
	padding-left: 1.25rem;
}