/**
 * Per-page overrides — /solutions/ (EN). AR twin: page-solutions-ar.css.
 *
 * Hero layout per the approved design (Solutions.png):
 *   ┌────────────────────────────┬──────────────────────────────────────┐
 *   │ SOLUTIONS (eyebrow)        │ [🧑] [🛡] [📊] [🔒]                   │
 *   │ Solutions for Every …      │ Personalized  AI-Enh  Meas  Ent.G.  │
 *   │ Nabed empowers …           │ 4 chromeless value-props in one row │
 *   └────────────────────────────┴──────────────────────────────────────┘
 *
 * Header sits on the inline-start of the block's flex container (default
 * `headerLayout: side`), vertically centred; the 4 value cards fill the
 * inline-end. Icons are rounded-square soft-tinted tiles with a per-item
 * colored glyph (blue → green → purple → orange), scoped via nth-child
 * to match the seeded item order. Cards are chromeless — no background,
 * border, or shadow — per the design; the block's `cardStyle: plain`
 * handles that on the base rule so nothing needs adding here, only
 * removing the earlier white-card modernisation that QA flagged as
 * "too much empty space" (QA row 12).
 *
 * Loads after the theme bundle (priority 20) so equal-specificity
 * overrides win deterministically.
 */

/* Per-position icon tinting — colour follows nth-child, which matches
 * the seeded item order (Personalized / AI-Enhanced / Measurable /
 * Enterprise-Grade). Circle → rounded-square + soft-tinted per position. */

.seamlessmd-card-grid__card .seamlessmd-card-grid__icon {
	inline-size: 56px;
	block-size: 56px;
	border-radius: 14px;
	font-size: 1.35rem;
	background: #eff4ff;
	color: #2563eb;
}

.seamlessmd-card-grid__card:nth-child(2) .seamlessmd-card-grid__icon {
	background: #e9faf4;
	color: #10b981;
}

.seamlessmd-card-grid__card:nth-child(3) .seamlessmd-card-grid__icon {
	background: #f3efff;
	color: #8b5cf6;
}

.seamlessmd-card-grid__card:nth-child(4) .seamlessmd-card-grid__icon {
	background: #fef5e7;
	color: #f59e0b;
}

/* Icon tile stacks ABOVE the title, not beside it. Base feature card is
 * `display: flex` (row); this switches to a vertical stack so each card
 * reads icon → title → description top-to-bottom. */
.seamlessmd-card-grid--variant-feature .seamlessmd-card-grid__card {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.9rem;
	text-align: start;
}

/* Header on the inline-start of the flex container: start-aligned copy,
 * blue eyebrow, vertically centred beside the taller card row. `flex:
 * 0 1 380px` caps the header column at ~380px so the four-card strip
 * gets the remaining width; the block's default container gap (5rem)
 * spaces them apart. `margin-inline: 0` neutralises the block's own
 * `margin-inline: auto` on the header (that rule targets the stacked/
 * centred layout — here the header is a flex item, not a centred block). */
.seamlessmd-card-grid--variant-feature .seamlessmd-card-grid__header {
	align-self: center;
	flex: 0 0 460px;
	min-inline-size: 0;
	margin-inline: 0;
	margin-bottom: 0;
	text-align: start;
}

/* The block's `.__inner .__header > *` rule margin-inline: auto's every
 * child (that rule is calibrated for the centred/stacked header). Here
 * the header is a start-aligned flex item, so children should also flush
 * to the start rather than centring inside their own line box. */
.seamlessmd-card-grid--variant-feature .seamlessmd-card-grid__header > * {
	margin-inline: 0;
}

.seamlessmd-card-grid--variant-feature .seamlessmd-card-grid__eyebrow {
	color: #2563eb;
}

/* Grid takes the remaining flex space. 4-column layout comes from the
 * block's base rule (`repeat(var(--cols), 1fr)` with `--cols: 4` set by
 * render.php on the section's inline style). Below the desktop breakpoint
 * the responsive rules further down drop to 2 columns / 1 column. */
.seamlessmd-card-grid--variant-feature .seamlessmd-card-grid__grid {
	flex: 1 1 auto;
	min-inline-size: 0;
	gap: 1.25rem;
	align-content: center;
}

/* Title/description sizing tuned for the four-across strip — the base
 * theme sizes are calibrated for wider single-column cards. */
.seamlessmd-card-grid--variant-feature .seamlessmd-card-grid__title {
	font-size: 1.05rem;
	color: var(--seamlessmd-dark-navy);
	margin: 0 0 0.35rem;
}

.seamlessmd-card-grid--variant-feature .seamlessmd-card-grid__description {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--seamlessmd-text-muted);
	margin: 0;
}

/* ---------- Responsive ----------
 * The reference is desktop-only. Fallbacks derived to keep the design
 * safe at narrower widths without cramping either the header column or
 * the value cards:
 *   ≥1200 px  → header 460 on start, 4 cards on end (approved layout)
 *   992–1199  → same side layout, but the 4-card strip drops to 2 cols
 *               so each card keeps a readable inline size.
 *   ≤991 px   → container stacks (block's `.__container` becomes block-
 *               flow), header takes full width above a 2-col card grid.
 *   ≤767 px   → block's own fallback: 1-col card grid (still stacked).
 * The block's own ≤991 rule already sets 2-col; my ≤1199 rule (higher
 * specificity) covers the 992–1199 gap the block leaves uncorrected. */

@media (max-width: 1199px) {
	.seamlessmd-card-grid--variant-feature .seamlessmd-card-grid__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Below the desktop side-layout breakpoint the cards fall back to a
	 * 2-col (and eventually 1-col) grid; the design reference is
	 * desktop-only, so at those widths restore the white-card treatment
	 * they had before the chromeless desktop rework — it reads better in
	 * a stacked/2-up column than raw copy on the section surface would.
	 * Chromeless applies only at ≥1200 (the reference layout). */
	.seamlessmd-card-grid--variant-feature .seamlessmd-card-grid__card {
		background: #fff;
		border: 1px solid #e6ebf5;
		border-radius: 16px;
		padding: 1.5rem 1.4rem;
		box-shadow: 0 1px 2px rgba(15, 30, 70, 0.04);
		transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
	}

	.seamlessmd-card-grid--variant-feature .seamlessmd-card-grid__card:hover {
		transform: translateY(-4px);
		box-shadow: 0 14px 30px rgba(15, 30, 70, 0.1);
		border-color: #c7d7f8;
	}
}

@media (max-width: 991px) {
	.seamlessmd-card-grid .seamlessmd-container {
		display: block;
	}

	.seamlessmd-card-grid--variant-feature .seamlessmd-card-grid__header {
		flex: none;
		max-inline-size: 720px;
		margin-block-end: 2rem;
	}
}

@media (max-width: 767px) {
	.seamlessmd-card-grid--variant-feature .seamlessmd-card-grid__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}