/* ==========================================================================
   Section: Features ("Everything you need in one app")
   Figma: Home EN 4081:38017 (D1920) and its 15 breakpoint twins — exact node
   values (60/57 ExtraBold heading, 70px pill rows r40, mint 36px icon circles).
   One full-width column: the testimonial card that used to sit beside it is
   hidden in Figma everywhere and was removed (MADA-2856).
   RTL: logical throughout.
   ========================================================================== */

.mada-features {
	background-color: var(--color-bg);
	padding-block: var(--pad-section-top) var(--pad-section-bottom);              /* 112 */
}

.mada-features__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	gap: var(--space-15);
	align-items: stretch;
}

/* MADA-2856: the testimonial card is hidden in Figma at every breakpoint, so
   this column is the whole section — full width at all sizes, never a half.
   Every drawn frame agrees: the pill grid measures the FULL container
   (D1920 2x760, D1025 2x440.5, T1024 2x472, T640 2x280, M393 1x361). */
.mada-features__left {
	inline-size: 100%;
	min-inline-size: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-11);                        /* 40 */
	align-items: flex-start;
}

/* Muted variant of section header (grey-navy eyebrow) */
.mada-sechead--muted .mada-sechead__eyebrow { color: rgba(0, 45, 78, 0.6); }
.mada-sechead--muted .mada-sechead__line    { background-color: rgba(0, 45, 78, 0.4); }

.mada-features__title {
	margin: 0;
	font-weight: 800;                            /* ExtraBold */
	font-size: var(--fs-section);                             /* Figma: 60/57 */
	line-height: var(--lh-section);
	color: var(--color-vault-navy);
}
.mada-features__sub {
	margin: 0;
	font-size: var(--fs-xl);                     /* 18 */
	line-height: 28px;
	color: rgba(0, 45, 78, 0.65);
	max-inline-size: 512px;
}

.mada-features__pills {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-block-start: var(--space-4);         /* 12 */
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);                         /* 16 */
	inline-size: 100%;
}
.mada-features__pill {
	display: flex;
	align-items: center;
	gap: var(--space-4);                         /* 12 */
	block-size: 70px;
	padding-block: 17px;
	padding-inline: 21px;
	border: var(--border-width-thin) solid rgba(0, 45, 78, 0.1);
	border-radius: var(--radius-5xl);            /* 40 */
	font-weight: var(--fw-semibold);
	font-size: 16px;
	line-height: 24px;
	color: var(--color-vault-navy);
}
.mada-features__pill-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: 30px;
	background-color: var(--color-liquid-mint);  /* #56E3D6 */
}

/* MADA-2856 — the testimonial card and its rotated mint backdrop were removed
   here; the markup is gone from template-parts/home/features.php. Figma marks
   the card hidden at all 16 breakpoints, so there is no size at which it
   returns. Nothing else in the theme used .mada-testimonial*. */

/* ---- Mobile ---- */
@media (max-width: 639px) {
	.mada-features__title { font-size: var(--fs-section); line-height: var(--lh-section); }
}

/* ---- Tablet+ ---- */
@media (min-width: 640px) {
	.mada-features__pills { grid-template-columns: repeat(2, 1fr); }
}
/* The 1152px two-column row (text beside the testimonial) is gone with the
   card — MADA-2856. Figma draws one full-width column at every frame. */