/* ==========================================================================
   Section: CTA band ("Ready to shop smarter?")
   Figma: Home EN 4081:33872 — exact node values (navy r24 p80 card, blurred
   glow circles, glass store rows r40, mint merchant row).
   RTL: logical; arrows mirrored.
   ========================================================================== */

.mada-cta {
	background-color: var(--color-bg);
	padding-block: var(--pad-section-last-top) var(--pad-section-last-bottom);        /* 80 / 100 */
}

.mada-cta__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
}

.mada-cta__card {
	position: relative;
	background-color: var(--color-vault-navy);
	border-radius: var(--radius-3xl);            /* 24 */
	padding: var(--space-17);                    /* 80 */
	overflow: hidden;
}

.mada-cta__glow {
	position: absolute;
	border-radius: var(--radius-full);
	pointer-events: none;
}
.mada-cta__glow--mint {
	inline-size: 384px;
	block-size: 384px;
	inset-inline-end: -60px;
	inset-block-end: -120px;
	background-color: rgba(86, 227, 214, 0.2);
	filter: blur(96px);
}
.mada-cta__glow--teal {
	inline-size: 448px;
	block-size: 448px;
	inset-inline-start: 6px;
	inset-block-start: -186px;
	background-color: rgba(0, 178, 175, 0.4);
	filter: blur(152px);
}

.mada-cta__row {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-17);                        /* 80 — Figma stacked frames (640/1024/1025/1200) */
	align-items: flex-start;
	justify-content: space-between;
}

.mada-cta__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);                         /* 20 */
	/* No width cap here: in the STACKED band (<=1200) the text spans the card
	   (Figma 1025/1200 frames — the title sits on one line at 1200). The 539
	   column cap belongs to the side-by-side band only (see >=1201 below). */
}
/* MADA-2850 — restored (see the note in template-parts/home/cta.php).
   Figma 4081:37654: font/family/english (Poppins) SemiBold, font-size/18,
   line-height/28, color/primary/teal #00B2AF. The line box is a fixed 28px,
   so the card height is exact regardless of which --fs- step resolves here. */
.mada-cta__eyebrow {
	margin: 0;
	font-weight: var(--fw-semibold);
	font-size: var(--fs-xl);                     /* 18 */
	line-height: 28px;
	color: var(--color-primary);                 /* #00B2AF */
}
.mada-cta__title {
	margin: 0;
	font-weight: 800;
	font-size: var(--fs-section);                             /* Figma: 72/83 */
	line-height: var(--lh-section);
	color: #F5F5F6;
}
.mada-cta__sub {
	margin: 0;
	padding-block-start: var(--space-2);
	font-size: var(--fs-xl);
	line-height: 28px;
	color: rgba(245, 245, 246, 0.7);
}

.mada-cta__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);                         /* 12 */
	inline-size: 100%;
	/* Client feedback p11 (stacked band 1025–1200): the rows FILL the card,
	   capped at 740 — exact per the 1025 (fills at 737) and 1200 (caps at
	   740) frames in BOTH languages. */
	max-inline-size: 740px;
}
/* Client feedback p19: below 1025 the rows fill the card's full width. */
@media (max-width: 1024px) {
	.mada-cta__links { max-inline-size: none; }
}
/* AR subtitle is capped at 576 in EVERY AR frame (stacked and row). */
[dir="rtl"] .mada-cta__sub { max-inline-size: 576px; }

.mada-cta__store {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	background-color: rgba(245, 245, 246, 0.05);
	border: var(--border-width-thin) solid rgba(245, 245, 246, 0.15);
	border-radius: var(--radius-5xl);            /* 40 */
	padding-block: 17px;
	padding-inline: 21px;
	text-decoration: none;
	color: #F5F5F6;
	transition: background-color 0.18s ease;
}
.mada-cta__store:hover,
.mada-cta__store:focus-visible {
	background-color: rgba(245, 245, 246, 0.12);
	text-decoration: none;
}

.mada-cta__store-main {
	display: flex;
	align-items: center;
	gap: var(--space-4);                         /* 12 */
}
.mada-cta__store-text { display: flex; flex-direction: column; }
.mada-cta__store-pre {
	font-family: var(--font-ar);                 /* Kufi per Figma */
	font-size: 10px;
	line-height: 15px;
	letter-spacing: var(--ls-wide);              /* 0.5 */
	text-transform: uppercase;
	opacity: 0.6;
}
.mada-cta__store-name {
	font-family: var(--font-ar);                 /* Kufi Bold per Figma */
	font-weight: var(--fw-bold);
	font-size: var(--fs-sm);                     /* 14 */
	line-height: 20px;
}
.mada-cta__store-name--en { font-family: inherit; } /* merchant row is Poppins Bold */

.mada-cta__store--merchant {
	background-color: var(--color-liquid-mint);  /* #56E3D6 */
	border: 0;
	color: var(--color-vault-navy);
	padding-block: var(--space-5);               /* 16 */
	padding-inline: var(--space-6);              /* 20 */
	font-weight: var(--fw-bold);
}
.mada-cta__store--merchant:hover,
.mada-cta__store--merchant:focus-visible {
	background-color: var(--color-liquid-mint-dark);
}

@media (max-width: 639px) {
	.mada-cta__card { padding: var(--space-9); }
	.mada-cta__title { font-size: var(--fs-section); line-height: var(--lh-section); }
}

/* ---- Side-by-side band — Figma: stacked through the 1200 frame; the AR 1201
   and EN/AR 1439/1440+ frames draw the row. Both columns are PINNED so long
   copy in either language can never squeeze the store pills (the AR breakage
   behind client feedback p11/p15). ---- */
@media (min-width: 1025px) {
	.mada-cta__row { flex-direction: row; align-items: center; gap: 0; }
	/* MADA-2850 "banner height differs from the design". The Figma text column
	   (4081:37652, and its 1440 twin 4081:33877) opens with an empty 15px
	   Container before the eyebrow, then the usual 20 gap — so the stack is
	   15 + 20 + 28 + 20 + 144 + 20 + 32 = 279, and the card is 279 + 2x80 = 439.
	   Reproduced as a 35px lead rather than an empty spacer element, which keeps
	   the markup semantic; the box measures the same 279 either way, and the row
	   is center-aligned so the lead cannot shift the pills. Desktop band only —
	   the 15px lead is confirmed in the 1440 and 1720 frames; the tablet and
	   mobile frames have not been checked, so they keep the plain 20px rhythm. */
	.mada-cta__text { max-inline-size: 539px; padding-block-start: 35px; }  /* EN column — every EN row frame */
	[dir="rtl"] .mada-cta__text { max-inline-size: none; flex: 1 1 auto; min-inline-size: 0; }
	.mada-cta__links { inline-size: 373px; flex: 0 0 auto; }
}
/* Desktop M and up: the AR pills widen to 430 (Figma AR 1440/1720/1920);
   EN stays at 373 (Figma EN 1440/1719/1920). */
@media (min-width: 1152px) {
	[dir="rtl"] .mada-cta__links { inline-size: 430px; }
}