/**
 * Shared section styles: App Mobile.
 *
 * Cream section, bold black headline + short feature list with store badges
 * beside it on the left, single phone mockup with a yellow backdrop on the
 * right — sized larger than the section and pulled up so it pokes above the
 * section's own top edge. Copies the Smart Fit App promo reference almost 1:1;
 * only the copy is Qivox's own.
 *
 * Lived in pages/home/style.css until the Franquicias page needed the exact
 * same block ("Sección App Propia"). Moved here — verbatim, no visual change —
 * so both pages render one stylesheet instead of two copies that can drift
 * apart.
 *
 * Markup: template-parts/section-app-mobile.php
 * Enqueued by: qivox_enqueue_section_style( 'app-mobile' ) from the page's thin
 * entry point, before the page stylesheet so page CSS can still override.
 *
 * Sizing here is deliberately pinned to measurements taken straight off
 * smartfit.com.ar's own section (not the shared fluid type scale): title 32px,
 * lead 15px, ~425px text column, ~30px section padding. The first version of
 * this section used the fluid --qx-fs-h1/--qx-fs-lead tokens and full-height
 * 9:19.5 phone frames, which ran much bigger than the reference and made the
 * section far taller than intended — that's the bug that pass fixed. Title
 * weight was later brought down from --qx-fw-black to --qx-fw-bold on request
 * (900 read too heavy).
 *
 * The phone mockup is a single flattened image (previously hand-built markup),
 * see template-parts/section-app-mobile.php for details. Its sizing still sits
 * under --qx-app-mobile-* local tokens because it's a one-off illustrative
 * component, same reasoning as the Hero's --qx-hero-* locals: exact
 * image/backdrop geometry has no home in the shared spacing scale.
 *
 * Note: this section sets its own padding-block on purpose (the shared fluid
 * rhythm runs it tall). The host page's rhythm rule is written at zero
 * specificity — `:where(.qx-home) > :where(section)` — precisely so this plain
 * single-class rule keeps winning no matter which stylesheet loads first.
 */

.qx-app-mobile {
	--qx-app-mobile-phone-w: 250px;

	/* White, not the cream tint the Smart Fit reference uses: changed on request
	   (commit d1a18a3) before this block was shared. Keep it white on both
	   pages — the yellow that gives the section its accent is the backdrop card
	   behind the phone. */
	background: var(--qx-bg);
	color: var(--qx-text);
	/* Reference section pads ~30px top/bottom, not the shared fluid
	   --qx-section-y rhythm (56–120px) — that rhythm is what made this
	   section run tall. var(--qx-space-6) = 32px, the closest token. */
	padding-block: var(--qx-space-6);
}

/* Drop the shared .qx-container side gutter (up to 48px) for this
   section specifically, per request — scoped to this section so other
   pages/sections keep it. Desktop only: below 1024px the grid is a single
   stacked column with no width cap of its own, so removing the gutter
   there would run the text edge-to-edge with no breathing room. */
@media (min-width: 1024px) {
	.qx-app-mobile > .qx-container {
		padding-inline: 0;
	}
}

.qx-app-mobile__grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: var(--qx-space-7);
}

/* Capped at 960px and centered on desktop — same convention Experiencia's
   grid uses (see .qx-experiencia__grid) — instead of stretching flush to
   the full 1280px .qx-container edges. Every section narrows its own
   content within that shared container; matching Experiencia's own cap
   is what actually lines up this section's text with Experiencia's card
   above it, not flushing to the raw container edge (that was the bug in
   the previous pass: it matched the container, not the neighboring
   section, and the two didn't coincide on wide viewports).

   The first track is also sized to the content's own max-width (28rem),
   not a fraction — an fr track wider than the 27rem content would leave a
   dead gap of empty space between the text and the phone column. */
@media (min-width: 1024px) {
	.qx-app-mobile__grid {
		max-width: 960px;
		margin-inline: auto;
		grid-template-columns: minmax(0, 28rem) 1fr;
		gap: var(--qx-space-6);
	}
}

.qx-app-mobile__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--qx-space-4);
}

.qx-app-mobile__title {
	margin: 0;
	max-width: 27rem;
	/* Fixed, not fluid: the reference renders this at a flat 32px on every
	   viewport (mobile included), not a scale that grows with the screen. */
	font-size: 2rem;
	font-weight: var(--qx-fw-bold);
	line-height: 1.2;
	letter-spacing: var(--qx-ls-heading);
	color: var(--qx-text);
}

.qx-app-mobile__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--qx-space-6);
	max-width: 27rem;
}

.qx-app-mobile__features {
	display: flex;
	flex-direction: column;
	gap: var(--qx-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.qx-app-mobile__feature {
	display: flex;
	flex-direction: column;
}

.qx-app-mobile__feature-title {
	font-size: var(--qx-fs-body);
	font-weight: var(--qx-fw-bold);
	color: var(--qx-text);
}

.qx-app-mobile__feature-text {
	font-size: var(--qx-fs-small);
	line-height: var(--qx-lh-snug);
	color: var(--qx-text-muted);
}

.qx-app-mobile__stores {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	gap: var(--qx-space-2);
}

.qx-app-mobile__store {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	transition: transform var(--qx-dur-fast) var(--qx-ease);
}

.qx-app-mobile__store:hover,
.qx-app-mobile__store:focus-visible {
	transform: translateY(-1px);
}

.qx-app-mobile__store-badge {
	display: block;
	height: 44px;
	width: auto;
}

/* --------------------------------------------------------------------------
   Phone mockup — a single flattened image (a generated preview of the real app
   screen, not hand-built markup) with a yellow card peeking out from behind it,
   popping up above the section's own top edge into whatever sits above it.
   Sized off the --qx-app-mobile-phone-w local token so the backdrop always
   scales with the image instead of drifting per viewport.
   -------------------------------------------------------------------------- */

.qx-app-mobile__devices {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: 0 var(--qx-space-4);
}

.qx-app-mobile__backdrop {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--qx-app-mobile-phone-w) * 2.1);
	height: calc(var(--qx-app-mobile-phone-w) * 1.45);
	background: var(--qx-yellow);
	border-radius: var(--qx-radius-lg);
	transform: translate(-50%, -44%);
}

.qx-app-mobile__phone-image {
	position: relative;
	z-index: 1;
	width: min(90%, calc(var(--qx-app-mobile-phone-w) * 1.35));
	height: auto;
	flex: 0 0 auto;
}

/* Only pop the image above the section on the two-column layout: in the
   stacked mobile layout the devices column sits directly under the text
   content, so pulling it up would overlap the copy above it instead of
   the previous section. */
@media (min-width: 1024px) {
	.qx-app-mobile__phone-image {
		margin-top: -64px;
	}
}