/* ==========================================================================
   Page: Download App
   Figma: EN D1920 4363:63395 / AR D1920 4365:12919 — white banner px 192
   py 96; centered title 72/86 Bold (-2.5 EN) with teal app name, gap 16;
   sub 18/28 #4B5563 (40 below title); cards 80 below: max-w 1000, gap 40,
   each bg MintPay/25 #83E0DE, border MintPay/30 #58D1CF, r24, px24 py32;
   card head = 36/40 Bold + official badge; QR square ≤300.

   Also: floating "Get the App" QR card (canvas 4207:57162 "Download app
   button logic"): 161×173, bottom-inline-start 32px, bg IceCredit/dark
   #A8D9FF, border TrustBlue/15 #C1E3F7, r8, label 16/24 Bold; drawn on
   tablet/desktop viewports only (absent on the mobile frames).
   RTL: logical properties; badge imgs swap per language in the template.
   ========================================================================== */

.mada-download {
	background-color: var(--color-white);
	padding-block: var(--pad-section-top) var(--pad-section-bottom);              /* 96 */
}
.mada-download__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-17);                        /* 80 */
}
.mada-download__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-11);                        /* 40 */
	text-align: center;
}
.mada-download__title {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-5);                         /* 16 */
	font-weight: var(--fw-bold);
	font-size: var(--fs-banner);                    /* 72 */
	line-height: var(--lh-banner);                  /* 86 */
	letter-spacing: var(--ls-tight);
	color: var(--color-black);
}
.mada-download__accent { color: var(--color-primary); }
.mada-download__sub {
	margin: 0;
	font-size: var(--fs-lg);                     /* 18 */
	line-height: var(--lh-md);                   /* 28 */
	color: var(--color-neutral-700);
}

.mada-download__cards {
	display: flex;
	flex-direction: column;
	gap: var(--space-11);                        /* 40 */
	inline-size: 100%;
	max-inline-size: 1000px;
}
.mada-download__card {
	flex: 1 1 0;
	min-inline-size: 0;
	background-color: #83E0DE;                   /* MintPay/25 */
	border: var(--border-width-thin) solid #58D1CF; /* MintPay/30 */
	border-radius: var(--radius-3xl);            /* 24 */
	padding: var(--space-9) var(--space-7);      /* 32 / 24 */
	display: flex;
	flex-direction: column;
	gap: var(--space-11);                        /* 40 */
}
.mada-download__cardhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
}
/* 36/40 is authored literally, NOT via --fs-section. That token is the S8/S9
   *section title* ramp — 36/40 only below 640, then 48/58 at tablet and 60/72
   at desktop — so the card head silently grew to 60px everywhere ≥640 while
   this rule still claimed 36. At 60px "Google Play" measures 364 wide, which
   with the 16 gap and the 141 badge needs 521 inside a 430 card head: the
   badge was pushed past the card's rounded edge and clipped. The canvas
   (4363:61084) draws this label at a fixed 36/40 — the same reason the mobile
   line-height below is a literal 32. */
.mada-download__cardhead h2 {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: 36px;
	line-height: 40px;
	color: var(--color-black);
	white-space: nowrap;
}
/* Round-4: "the download icons are a bit messed up in size."
   The design sizes the badge pair by WIDTH, not height — all 28 badge frames
   in canvas 4363:61084 are 141 wide (e.g. AR desktop 4365:13895 App Store
   141x47 · 4365:13927 Google Play 141x47; AR mobile 4364:11619 141x47.13 ·
   4364:11597 141x41.78). Each official asset then keeps its own ratio
   (App Store 228x80 = 2.85 · Google Play 228x68 = 3.35) and the two still
   read as a matched pair. The old 34px block-size did the reverse: it
   equalised height, so App Store came out 97 wide and Google Play 114 —
   visibly mismatched, and both well under the drawn size. */
.mada-download__cardhead img {
	display: block;
	inline-size: 141px;
	block-size: auto;                            /* ratio follows the asset */
	max-inline-size: 100%;
}
/* The badge is a fixed-size mark: it must never absorb the row's leftover
   space, or its rendered size would depend on how long the neighbouring
   heading is ("Google Play" is 219 wide, "App Store" 181). */
.mada-download__cardhead a,
.mada-download__cardhead .mada-download__badge--unset { flex: 0 0 auto; }
.mada-download__qr {
	inline-size: 100%;
	max-inline-size: 300px;
	block-size: auto;
	aspect-ratio: 1;
	min-inline-size: 100px;
}

/* The chevron belongs to the mobile card only (see template-parts/download/
   chevron.php); the ≥640 layout keeps the QR card. */
.mada-download__chev { display: none; }

/* Subtitle swaps with the layout — see the note in template-download.php. */
.mada-download__sub--tap { display: none; }

/* ==========================================================================
   MOBILE ≤639 — round-3 feedback: "revisit the spacing between the elements"
   and "revisit the card structure on mobile screens. It should be different
   from the tablet and desktop layouts, as shown in the Figma design."
   Measured off the 639 frame, Text block 4363:66331 (content 607 wide):
     head        title block 124 → subtitle y=148        gap 24
     inner       text block 172  → cards y=212           gap 40
     cards       GP card h118, AS card y=150             gap 32
     card        padding 16 inline · 16 top / 24 bottom
                 label English/Heading/Small 24/32 Bold
                 label → badge gap 12   (badge y=44, label h=32)
                 chevron 24x24 at the trailing edge, top-aligned
     No QR on mobile — that is the structural difference being asked for.
   ========================================================================== */
@media (max-width: 639px) {
	.mada-download__title { font-size: var(--fs-banner); line-height: var(--lh-banner); }
	.mada-download__inner { gap: var(--space-11); }      /* 80 → 40 */
	.mada-download__head  { gap: var(--space-7); }       /* 40 → 24 */
	.mada-download__cards { gap: var(--space-9); }       /* 40 → 32 */

	/* Card becomes a row: [ label over badge ] … [ chevron ]. */
	.mada-download__card {
		position: relative;                              /* for the stretched link */
		flex-direction: row;
		align-items: flex-start;
		gap: var(--space-2);                             /* 4 */
		padding-block: var(--space-5) var(--space-7);    /* 16 / 24 */
		padding-inline: var(--space-5);                  /* 16 */
	}
	.mada-download__cardhead {
		flex: 1 1 auto;
		min-inline-size: 0;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: var(--space-4);                             /* 12 */
	}
	/* Heading/Small is 24/32 in the DS DESKTOP scale, and the mobile frame
	   uses it verbatim — the mobile --fs-3xl/--lh-lg pair would give 24/28,
	   so the line-height is authored literally to stay true to the frame. */
	.mada-download__cardhead h2 {
		font-size: var(--fs-3xl);                        /* 24 on mobile */
		line-height: 32px;
		white-space: normal;
	}
	.mada-download__chev {
		display: inline-flex;
		flex: 0 0 auto;
		inline-size: 24px;
		block-size: 24px;
		color: var(--color-black);
	}
	/* Directional glyph: it points at the inline-end, so mirror it in RTL. */
	[dir="rtl"] .mada-download__chev svg { transform: scaleX(-1); }

	.mada-download__qr { display: none; }
	.mada-download__sub--qr  { display: none; }
	.mada-download__sub--tap { display: block; }

	/* The chevron implies the whole card is tappable. Stretch the badge's
	   EXISTING link over the card rather than adding a second one — no
	   nested anchors, and cards with no store URL yet stay inert. */
	.mada-download__cardhead a::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
	}
}
@media (min-width: 1000px) {
	.mada-download__cards { flex-direction: row; }
}

/* --- Floating "Get the App" QR card (4282:1435) --- */
/* Client feedback p8: suppressed while the footer (which has its own QR card)
   is in view — toggled by an IntersectionObserver in navigation.js. */
.mada-qr-float.is-suppressed { opacity: 0; visibility: hidden; }
.mada-qr-float {
	transition: opacity 0.25s ease, visibility 0.25s ease;
	position: fixed;
	inset-block-end: var(--space-9);             /* 32 */
	/* The AR frames (4207:57162) pin it bottom-LEFT — inline-end in RTL. */
	inset-inline-end: var(--space-9);
	z-index: 40;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);                         /* 4 */
	inline-size: 161px;
	padding: var(--space-3) var(--space-5);      /* 8 / 16 */
	background-color: var(--color-ice-credit-dark);
	border: var(--border-width-thin) solid #C1E3F7; /* TrustBlue/15 */
	border-radius: var(--radius-lg);             /* 8 */
	box-shadow: 0 8px 10px -6px rgba(0, 0, 0, 0.08), 0 20px 25px -5px rgba(0, 0, 0, 0.08);
	color: var(--color-black);
	font-weight: var(--fw-bold);
	font-size: var(--fs-md);
	line-height: 24px;
	text-decoration: none;
}
.mada-qr-float img {
	inline-size: 129px;
	block-size: 129px;
	display: block;
}
@media (min-width: 640px) {
	.mada-qr-float { display: flex; }            /* absent on mobile frames */
}

/* Unset store URL: the badge renders as a non-interactive mark rather than a
   dead '#' anchor (same pattern as the footer socials). */
.mada-download__badge--unset { display: inline-block; cursor: default; }
.mada-download__cardhead a,
.mada-download__cardhead a:hover,
.mada-download__cardhead a:focus-visible { text-decoration: none; }