/* LfC Learner Voices — configurable X+Y quote card grid.
 *
 * Desktop: 2-column grid (left/right) with configurable ratio.
 * Mobile (<=768px): columns flattened via `display:contents`; cards
 * re-order via `order: var(--voice-mobile-order)` so the mobile stack
 * follows the original `items[]` order (intercalated 1,2,3,4,5).
 */

.wp-block-lfc-learner-voices {
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 24px;
}

.wp-block-lfc-learner-voices__heading {
	margin: 0 0 40px;
	font-family: var(--lfc-font-heading, 'Poppins', system-ui, sans-serif);
	font-weight: 700;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-align: center;
	color: var(--lfc-navy, #2C3540);
}

.wp-block-lfc-learner-voices__grid {
	display: grid;
	gap: 20px;
}

/* ── Direction modifiers ─────────────────────────────────────────────
 * `vertical` (default) keeps the two columns side by side; each column
 * stacks its cards vertically. `horizontal` flips each column into a
 * flex row so cards align horizontally inside the column (less common,
 * but useful for short single-line quotes).
 */
.wp-block-lfc-learner-voices.is-direction-horizontal .wp-block-lfc-learner-voices__column {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;
}

.wp-block-lfc-learner-voices.is-direction-horizontal .wp-block-lfc-learner-voices__column > .wp-block-lfc-learner-voices__card {
	flex: 1 1 240px;
}

.wp-block-lfc-learner-voices__column {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* ── Column-width ratio modifiers ────────────────────────────────────
 * Class names use the literal `1fr-1.5fr` form (matching the enum) so
 * the editor preview and front-end stay byte-identical.
 */
.wp-block-lfc-learner-voices.is-ratio-1fr-1fr   .wp-block-lfc-learner-voices__grid { grid-template-columns: 1fr 1fr;    }
.wp-block-lfc-learner-voices.is-ratio-1fr-1\.5fr .wp-block-lfc-learner-voices__grid { grid-template-columns: 1fr 1.5fr;  }
.wp-block-lfc-learner-voices.is-ratio-1fr-2fr   .wp-block-lfc-learner-voices__grid { grid-template-columns: 1fr 2fr;    }
.wp-block-lfc-learner-voices.is-ratio-1\.5fr-1fr .wp-block-lfc-learner-voices__grid { grid-template-columns: 1.5fr 1fr;  }
.wp-block-lfc-learner-voices.is-ratio-2fr-1fr   .wp-block-lfc-learner-voices__grid { grid-template-columns: 2fr 1fr;    }

/* ── Single-column overrides ─────────────────────────────────────────
 * When all items are in one column, render.php skips the empty column
 * <div>. Force the grid to a single full-width track so the surviving
 * column expands to fill the row (otherwise grid-template-columns from
 * the ratio modifier would leave an empty second track).
 */
.wp-block-lfc-learner-voices.is-single-column-left  .wp-block-lfc-learner-voices__grid,
.wp-block-lfc-learner-voices.is-single-column-right .wp-block-lfc-learner-voices__grid {
	grid-template-columns: 1fr;
}

/* ── Card base ───────────────────────────────────────────────────────
 * `position:relative` anchors the absolutely-positioned quote mark.
 * `box-shadow` is intentionally subtle — these sit on a tinted section
 * bg and a heavy shadow would compete with the stat-cards above.
 */
.wp-block-lfc-learner-voices__card {
	position: relative;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.06 );
	box-sizing: border-box;
}

/* ── Padding modifiers ───────────────────────────────────────────────
 * Padding-top is bumped so the quote mark (absolutely positioned in
 * the corner) doesn't overlap the text. The roomier the option, the
 * more breathing room the mark gets.
 */
.wp-block-lfc-learner-voices.is-padding-compact     .wp-block-lfc-learner-voices__card { padding: 28px 16px 16px; }
.wp-block-lfc-learner-voices.is-padding-comfortable .wp-block-lfc-learner-voices__card { padding: 44px 32px 32px; }
.wp-block-lfc-learner-voices.is-padding-roomy       .wp-block-lfc-learner-voices__card { padding: 56px 48px 48px; }

/* ── Min-height modifiers ────────────────────────────────────────────
 * Forces every card in the grid to a uniform vertical rhythm so the
 * short LEFT quotes and longer RIGHT quotes line up visually.
 * `auto` lets each card size to its content (the friendliest default).
 */
.wp-block-lfc-learner-voices.is-min-height-auto  .wp-block-lfc-learner-voices__card { min-height: auto;  }
.wp-block-lfc-learner-voices.is-min-height-120px .wp-block-lfc-learner-voices__card { min-height: 120px; }
.wp-block-lfc-learner-voices.is-min-height-160px .wp-block-lfc-learner-voices__card { min-height: 160px; }
.wp-block-lfc-learner-voices.is-min-height-200px .wp-block-lfc-learner-voices__card { min-height: 200px; }

/* ── Quote mark (decorative; aria-hidden in markup) ─────────────────── */
.wp-block-lfc-learner-voices__quote-mark {
	position: absolute;
	top: 8px;
	left: 16px;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 3rem;
	line-height: 1;
	font-weight: 700;
	user-select: none;
}

/* ── Quote text ──────────────────────────────────────────────────────
 * `font-style: normal` is intentional — the opening quote mark already
 * signals "this is a quote", italics on top would feel doubled up.
 * `margin: 0` resets the user-agent blockquote margin.
 */
.wp-block-lfc-learner-voices__quote {
	margin: 0;
	font-family: var(--lfc-font-body, 'Inter', system-ui, sans-serif);
	font-size: 1.0625rem;
	font-style: normal;
	line-height: 1.6;
	font-weight: 400;
}

/* ── Mobile stack (≤768px) ───────────────────────────────────────────
 * `display: contents` on the column makes the column DOM node
 * transparent for layout, so its child cards become direct children
 * of the grid. The grid itself flips to `flex column`, and each card
 * orders by `--voice-mobile-order` — preserving the original
 * authoring order across the LEFT/RIGHT partition.
 *
 * R3.2 mobile gutter alignment — drop the block's outer padding-inline
 * from 24px to 16px so it matches the dominant design-system mobile
 * gutter used by .lfc-employer-grid and .lfc-sector-grid
 * (`padding: 40px 16px !important`). Inside .lfc-premier-inn-case-study
 * (wrapper padding 38px) this reduces the compound lateral inset from
 * (38 + 24 = 62px) to (38 + 16 = 54px), giving voice cards more visual
 * surface so they sit closer to the programme-cards reference above.
 * Desktop kept at 24px — zero regression above 768px.
 */
@media (max-width: 768px) {
	.wp-block-lfc-learner-voices {
		padding-left: 16px;
		padding-right: 16px;
	}
	.wp-block-lfc-learner-voices__grid {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.wp-block-lfc-learner-voices__column {
		display: contents;
	}

	.wp-block-lfc-learner-voices__card {
		width: 100%;
		order: var(--voice-mobile-order, 0);
	}

	/* Horizontal direction collapses to the same vertical stack on
	 * mobile — there's no width budget for side-by-side cards under
	 * 768px. */
	.wp-block-lfc-learner-voices.is-direction-horizontal .wp-block-lfc-learner-voices__column {
		display: contents;
	}
}