/* ==========================================================================
   Page: Blog index (+ newsletter band)
   Figma: Blog EN D1920 (4181:22602) — exact node values. Hero grey band w/
   search · featured image card (dark gradient, mint chip) · filter chips ·
   card grid (design's blue-gradient placeholder = no-thumbnail fallback) ·
   newsletter dark-green card.
   RTL: logical; card arrows mirrored.
   ========================================================================== */

.mada-blog-hero {
	background-color: var(--color-neutral-100);
	padding-block: var(--pad-banner-block) var(--pad-banner-block);
}
.mada-blog-hero__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	/* Round-3 (Blog S1) "revisit the spacing between elements across all screen
	   sizes". Measured on Desktop-Blog-1920 (4738:73883): the hero Container is
	   150 tall — Heading 2 is 86 and the search/description row starts at
	   y=102, so 16 (was 32). The featured card then starts at y=190, i.e. 40
	   below that row; one flex gap cannot be both, so the extra 24 is a margin
	   on the card below. */
	gap: var(--space-5);                            /* 16 */
}
.mada-blog-featured { margin-block-start: var(--space-7); }   /* 16 + 24 = 40 */
.mada-blog-hero__inner h1 {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-banner);                    /* 60 */
	line-height: var(--lh-banner);
	color: var(--color-black);
}
.mada-blog-hero__inner h1 span { color: var(--color-primary); }
.mada-blog-hero__row {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	justify-content: space-between;
}
.mada-blog-hero__row p { margin: 0; font-size: var(--fs-md); line-height: 24px; color: var(--color-neutral-600); max-inline-size: 70ch; }
.mada-blog-hero__search {
	display: flex;
	align-items: center;
	background-color: #FFFFFF;
	border: var(--border-width-thin) solid var(--color-neutral-200);
	border-radius: var(--radius-lg);
	padding-inline: var(--space-5);
	min-inline-size: 260px;
}
.mada-blog-hero__search input {
	flex: 1 1 auto;
	border: 0;
	background: none;
	padding-block: var(--space-4);
	font-family: inherit;
	font-size: var(--fs-sm);
	color: var(--color-text);
}
.mada-blog-hero__search input:focus { outline: none; }
.mada-blog-hero__search button { background: none; border: 0; color: var(--color-neutral-400); cursor: pointer; display: inline-flex; }

.mada-blog-featured {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--space-3);
	min-block-size: 420px;
	border-radius: var(--radius-2xl);
	overflow: hidden;
	background: linear-gradient(135deg, #BFE3EE, #DCF1F6);
	background-size: cover;
	background-position: center;
	padding: var(--space-11);
	color: var(--color-white);
	text-decoration: none;
}
.mada-blog-featured::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 20, 30, 0.75), rgba(0, 20, 30, 0.1) 60%);
}
.mada-blog-featured > * { position: relative; margin: 0; }
.mada-blog-featured__meta { display: flex; align-items: center; gap: var(--space-4); }
.mada-blog-featured__chip {
	background-color: var(--color-liquid-mint);
	color: var(--color-vault-navy);
	border-radius: var(--radius-full);
	padding: var(--space-1) var(--space-4);
	font-size: var(--fs-xs);
	line-height: 16px;
	font-weight: var(--fw-medium);
}
.mada-blog-featured__meta em { font-style: normal; font-size: var(--fs-xs); line-height: 16px; color: rgba(245,245,246,0.9); }
.mada-blog-featured strong { font-weight: var(--fw-bold); font-size: var(--fs-4xl); line-height: 40px; color: var(--color-white); }
.mada-blog-featured p { font-size: var(--fs-sm); line-height: 20px; color: rgba(245,245,246,0.85); max-inline-size: 70ch; }

/* Round-4 (Figma "Selection status" 4738:74178). BOTH state notes point at this
   card, not at the filter chips below — traced from the leader brackets:
     · 4738:74167 wraps the whole Featured Article (4738:73897)
       → "on pressed status the section shade should be different";
     · 4738:74170 lands on its Heading 2 + description (4738:73906 / 73908)
       → "text color should be different insted of the underline".
   The underline is real: the card is an <a>, and base.css underlines every
   a:hover — the base rule here only clears it at rest. So hover/focus now
   recolours the title (Liquid Mint, readable on the dark scrim) with no
   underline anywhere in the card, and :active deepens the scrim so the press
   reads as a shade change. Both are direction-agnostic. */
.mada-blog-featured strong,
.mada-blog-featured p { transition: color 0.18s ease; }
.mada-blog-featured::before { transition: background 0.18s ease; }
a.mada-blog-featured:hover,
a.mada-blog-featured:focus-visible { text-decoration: none; }
a.mada-blog-featured:hover strong,
a.mada-blog-featured:focus-visible strong { color: var(--color-liquid-mint); }
/* The subtitle recolours with the title, so the whole text block responds to
   the state — not just the heading. */
a.mada-blog-featured:hover p,
a.mada-blog-featured:focus-visible p { color: var(--color-liquid-mint); }
a.mada-blog-featured:active::before {
	background: linear-gradient(to top, rgba(0, 20, 30, 0.92), rgba(0, 20, 30, 0.45) 60%);
}

/* ---- List ---- */
.mada-blog-list { background-color: var(--color-white); padding-block: var(--pad-section-top) var(--pad-section-bottom); }
.mada-blog-list__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	/* Filter row is 54 tall and the card section starts at y=118 → 64. */
	gap: var(--space-15);                           /* 64 (was 40) */
}
.mada-blog-filters { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.mada-blog-filters__chip {
	background-color: var(--color-neutral-100);
	color: var(--color-neutral-700);
	border-radius: var(--radius-lg);
	padding: var(--space-3) var(--space-6);
	font-size: var(--fs-sm);
	line-height: 20px;
	font-weight: var(--fw-medium);
	text-decoration: none;
}
.mada-blog-filters__chip.is-active {
	background-color: #04211C;                   /* Figma active chip */
	color: var(--color-white);
}
/* Chip states. NB: round-3 attributed these to the two 4738:74178 state notes,
   but those brackets point at the featured card (see above) — these are kept
   because a chip still needs hover/pressed feedback, and they follow the same
   rule: recolour on hover, deepen the shade on press, never underline. */
.mada-blog-filters__chip:hover,
.mada-blog-filters__chip:focus-visible {
	background-color: var(--color-neutral-150);
	color: var(--color-secondary);               /* #006EAD */
	text-decoration: none;
}
.mada-blog-filters__chip:active {
	background-color: var(--color-neutral-200);
	color: #00588A;                              /* TrustBlue/60 — the S39 accent */
}
.mada-blog-filters__chip.is-active:hover,
.mada-blog-filters__chip.is-active:focus-visible {
	background-color: #04211C;
	color: var(--color-white);
}

.mada-blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	/* Cards are 496 wide at x 0 / 520 / 1040 and rows at y 0 / 372 (348 tall)
	   → 24 both ways (was 20). */
	gap: var(--space-7);                            /* 24 */
}
.mada-blog-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-2xl);
	overflow: hidden;
	background-color: #FFFFFF;
	border: var(--border-width-thin) solid var(--color-neutral-150);
	/* S39: "please increase the card shadow to make it more prominent." */
	box-shadow: var(--shadow-lg);
	text-decoration: none;
	color: var(--color-text);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
/* No underline on hover (S39); lift instead, matching the other card families. */
a.mada-blog-card:hover,
a.mada-blog-card:focus-visible {
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 16px 32px -8px rgba(7, 17, 36, 0.22);
}
/* S39: "please change the arrow color to #00588A." */
.mada-blog-card .mada-icon--directional,
.mada-blog-card__arrow { color: #00588A; }
.mada-blog-card__img {
	display: block;
	block-size: 200px;
	background: linear-gradient(135deg, #BFE3EE, #DCF1F6); /* design placeholder */
	background-size: cover;
	background-position: center;
}
.mada-blog-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-6);
	/* Round-4 (4738:74173): "please update the card text background color."
	   The text area was pure #FFFFFF; Neutral/50 separates it from the white
	   page and from the image above (client-chosen value, 9 Aug 2026). */
	background-color: var(--color-neutral-50);
}
.mada-blog-card__type { font-style: normal; font-size: var(--fs-sm); line-height: 20px; color: var(--color-secondary); font-weight: var(--fw-medium); }
.mada-blog-card__body strong { font-weight: var(--fw-bold); font-size: var(--fs-xl); line-height: 28px; color: var(--color-black); }
.mada-blog-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block-start: var(--space-4);
	font-size: var(--fs-xs);
	line-height: 16px;
	color: var(--color-neutral-500);
}
.mada-blog-empty { margin: 0; color: var(--color-neutral-600); }

/* ---- Newsletter ---- */
.mada-newsletter { background-color: var(--color-white); padding-block: var(--pad-section-last-top) var(--pad-section-last-bottom); }
.mada-newsletter__inner { max-inline-size: var(--container-max); margin-inline: auto; padding-inline: var(--grid-margin); }
.mada-newsletter__card {
	background: linear-gradient(150deg, #04211C, #002423 70%);
	border-radius: var(--radius-2xl);
	padding: var(--space-17);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	/* Round-3 (Blog S3) "revisit the spacing between elements". Measured on the
	   same 1920 frame (Frame 2085661840, card padding 80): icon bottom 99 →
	   heading y=119 = 20; heading bottom 177 → text y=197 = 20; text block ends
	   257 → form y=297 = 40; form ends 353 → fine print y=393 = 40.
	   The 20 is the flex gap; the two 40s add another 20 on top. */
	gap: var(--space-6);                            /* 20 (was 12) */
}
.mada-newsletter__card > small { margin-block-start: var(--space-6); }   /* 20 + 20 = 40 */
.mada-newsletter__card h2 { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-section); line-height: var(--lh-section); color: var(--color-white); }
.mada-newsletter__card p { margin: 0; font-size: var(--fs-md); line-height: 24px; color: rgba(245,245,246,0.8); max-inline-size: 70ch; }
.mada-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* Figma 4185:11502 — 12 between the field and the button, 8 between the
	   field and its message below it. */
	gap: var(--space-3) var(--space-4);             /* 8 row / 12 column */
	padding-block-start: var(--space-6);            /* 20 + the card's 20 = 40 */
	inline-size: 100%;
	max-inline-size: 520px;
}
/* Figma 4185:11503 ".Input backplate": a WHITE field on the dark card — not the
   translucent dark one this shipped with — r6, 12px padding, 16/24 text, and a
   Neutral/400 placeholder. Confirmed against BOTH drawn states (error
   4185:11491 and success 4185:12038), so white is the field's normal look. */
.mada-newsletter__form input {
	flex: 1 1 240px;
	border: var(--border-width-thin) solid transparent;
	background-color: var(--color-white);           /* #F8FAFC */
	border-radius: var(--radius-base);              /* 6 */
	padding: var(--space-4);                        /* 12 */
	font-family: inherit;
	font-size: var(--fs-md);                        /* 16 */
	line-height: 24px;
	color: var(--color-black);
}
.mada-newsletter__form input::placeholder { color: var(--color-neutral-400); } /* #9BA0AB */
/* Error field state (Figma newsletter "Error" state — red field outline). */
.mada-newsletter__form.is-error input { border-color: var(--color-error); }
/* Visually-hidden honeypot — kept in the layout flow for bots, off-screen for people. */
.mada-newsletter__hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Result banners: success replaces the form, error sits under it.
   Selectors are qualified with .mada-newsletter__card because the card's own
   `p` rule above (`.mada-newsletter__card p`, 0-1-1) outranked a bare
   `.mada-newsletter__result` (0-1-0) and was winning BOTH the size and the
   colour — the error line rendered 16/24 in the body grey instead of the
   design's 14/20 red. Figma 4193:30493 draws it at font/size/sm 14 / 20. */
.mada-newsletter__card p.mada-newsletter__result {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	font-size: var(--fs-sm);                     /* 14 */
	line-height: 20px;
	max-inline-size: none;
	/* Full-width row inside the form, left-aligned under the field (Figma puts
	   it in the input's own column, not centred under the band). */
	flex: 0 0 100%;
	justify-content: flex-start;
	text-align: start;
}
/* The explicit display above (0-2-1) beats the UA's [hidden]{display:none}
   (0-1-0), so the error line stayed visible even while the attribute was set —
   same trap already handled in b2b.css and catalog.css. */
.mada-newsletter__card p.mada-newsletter__result[hidden] { display: none; }
/* OverdueRed/50, the literal Figma token (4185:11503). This previously used a
   lightened #FFB3C0 for contrast on the near-black card; Mada reviewed the
   design and asked for the drawn "degree of red", so the token stands. */
.mada-newsletter__card p.mada-newsletter__result--error { color: var(--color-error); } /* #F30032 */
/* Figma success pill (4193:28832): ClearedGreen rounded-full, white check + bold label. */
.mada-newsletter__pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-full);
	background-color: var(--color-success);      /* #00D878 ClearedGreen */
	color: var(--color-white);
	font-weight: var(--fw-bold);
	font-size: var(--fs-md);
	line-height: 24px;
}
.mada-newsletter__pill-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 20px;
	block-size: 20px;
	border-radius: var(--radius-full);
	background-color: rgba(255, 255, 255, 0.25);
	color: var(--color-white);
	flex: 0 0 auto;
}
.mada-newsletter__card small { font-size: var(--fs-xs); line-height: 16px; color: rgba(245,245,246,0.55); }

/* ---- Responsive ---- */
@media (max-width: 639px) {
	.mada-blog-hero__inner h1 { font-size: var(--fs-banner); line-height: var(--lh-banner); }
	.mada-newsletter__card { padding: var(--space-9); }
}
@media (min-width: 640px) {
	.mada-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
	/* Side by side: the search Input is 384 wide at x=0 and the description
	   container starts at x=424 → 40. */
	.mada-blog-hero__row { flex-direction: row; align-items: center; gap: var(--space-11); }
	.mada-blog-grid { grid-template-columns: repeat(3, 1fr); }
	.mada-blog-grid .mada-blog-card:first-child { grid-column: 1 / 3; flex-direction: row; }
	.mada-blog-grid .mada-blog-card:first-child .mada-blog-card__img { flex: 1 1 50%; block-size: auto; }
	.mada-blog-grid .mada-blog-card:first-child .mada-blog-card__body { flex: 1 1 50%; justify-content: center; }
}

/* ==========================================================================
   Single article — Figma "Blog - Ready" 4185:8880 (EN) / 4184:6219 (AR).
   Breadcrumb → title → date · read-time + share → cover → body. No comments,
   author box or sidebar (not in the design). RTL: logical properties.
   ========================================================================== */
.mada-article {
	background-color: var(--color-white);         /* Core/White #F8FAFC */
	padding-block: var(--pad-section-last-top) var(--pad-section-last-bottom); /* 80 / 112 */
}
.mada-article__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	gap: var(--space-11);                         /* 40 */
}

/* Breadcrumb (Figma 4185:11440) */
.mada-article__crumbs {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	flex-wrap: wrap;
}
.mada-article__crumbs a {
	padding: var(--space-3);                      /* 8 */
	font-weight: var(--fw-medium);
	font-size: var(--fs-md);
	line-height: 24px;
	color: var(--color-neutral-800);
	text-decoration: none;
	border-radius: var(--radius-lg);
}
.mada-article__crumbs a.is-current { font-weight: var(--fw-bold); color: #002423; /* MintPay/90 */ }
.mada-article__crumb-sep { color: var(--color-neutral-400); flex: 0 0 auto; }

/* Head: title + meta */
.mada-article__head { display: flex; flex-direction: column; gap: var(--space-11); }
.mada-article__title {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-6xl);                     /* Display XSmall = 5xl(48) desktop */
	line-height: 58px;                            /* Figma 3xl line height */
	letter-spacing: var(--ls-tight);             /* -2.5 */
	color: var(--color-black);
}
.mada-article__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	flex-wrap: wrap;
}
.mada-article__info {
	margin: 0;
	display: inline-flex;
	gap: var(--space-3);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-md);
	line-height: 24px;
	color: var(--color-neutral-700);
}
.mada-article__share { display: inline-flex; gap: var(--space-4); }
.mada-article__share-link { display: inline-flex; }
.mada-article__share-link img { inline-size: 28px; block-size: 28px; display: block; }
.mada-article__share-link:hover { opacity: 0.7; }

/* Cover image (Figma 4185:9198 — full-width, rounded) */
.mada-article__cover { margin: 0; }
.mada-article__cover img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--radius-lg);             /* 8 */
}

/* Article body — the editor's content. Headings become "Section title",
   paragraphs the body copy, images the framed style (Figma 4185:9200/9207). */
.mada-article__body {
	display: flex;
	flex-direction: column;
	color: var(--color-neutral-600);
	font-size: var(--fs-md);
	line-height: 24px;
}
.mada-article__body > * { margin-block: 0; }
.mada-article__body h2 {
	font-weight: var(--fw-bold);
	font-size: var(--fs-4xl);                     /* Heading Large = 36 desktop */
	line-height: 40px;
	color: var(--color-black);
	margin-block: var(--space-11) var(--space-4); /* 40 above / 12 below */
}
.mada-article__body h3 {
	font-weight: var(--fw-regular);
	font-size: var(--fs-lg);                      /* Paragraph Large = 18 */
	line-height: 28px;
	color: var(--color-neutral-700);
	margin-block: 0 var(--space-4);
}
.mada-article__body p { margin-block: 0 var(--space-5); }
.mada-article__body ul,
.mada-article__body ol { margin-block: 0 var(--space-5); padding-inline-start: var(--space-7); }
.mada-article__body li { margin-block-end: var(--space-2); }
.mada-article__body a { color: var(--color-secondary); }
.mada-article__body img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--radius-lg);
	margin-block: var(--space-11);
}
.mada-article__body figure { margin: var(--space-11) 0; }
.mada-article__body figure img { margin-block: 0; }
.mada-article__body figcaption {
	margin-block-start: var(--space-5);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-sm);
	line-height: 20px;
	color: var(--color-neutral-400);
}

@media (max-width: 639px) {
	.mada-article__title { font-size: var(--fs-4xl); line-height: 1.15; }
	.mada-article__body h2 { font-size: var(--fs-3xl); }
}