/* ═══════════════════════════════════════════════════════════════════════════
   CE FEATURE LIST — liquid glass bubble cards, 3-column grid
   Used for "We help you" style sections
   ═══════════════════════════════════════════════════════════════════════════ */

.ce-feature-list {
	background: #f9f9f9;
	padding: 5rem 0;
}

@media (max-width: 767px) {
	.ce-feature-list {
		padding: 3rem 0;
	}
}

.ce-feature-list__heading {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: #646464;
	text-align: center;
	margin: 0 0 3rem;
	line-height: 1.25;
}

.ce-feature-list__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

/* Safari GPU fix: any section containing glass cards must declare backdrop-filter
   on itself when it also has overflow:hidden, otherwise child backdrop-filters vanish on scroll */
*:has(> .ce-feature-list__grid),
*:has(> .site-container > .ce-feature-list__grid),
*:has(> .site-container > div > .ce-feature-list__grid) {
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
}

/* ── Single item: liquid glass bubble card ── */
.ce-feature-list__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.75rem 1.5rem;
	min-height: 13rem;
	border-radius: 1.5rem;
	backdrop-filter: blur(20px) saturate(1.3);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 20px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* ── Paragraphs line up across a row — automatic ─────────────────────────────
   A card's header is as tall as its title, so where one title wraps and its
   neighbour's does not, the two paragraphs start at different heights and the
   pair reads as misaligned rather than as two cards. Subgrid hands every card
   in a row the same header height, so the paragraphs always agree.

   STRUCTURAL, NOT OPT-IN. This began as a modifier class added per grid, which
   meant each section stayed broken until somebody noticed it and tagged it —
   and they were noticed one page at a time, over and over. The selector below
   asks about card SHAPE instead, so a section is covered the day it is built.

   :has(> .ce-feature-list__desc:nth-child(2):last-child) means precisely: this
   card has exactly two children and the second is the paragraph. That is the
   only shape subgrid's "span 2" is correct for. Swept across the site, 118 of
   146 cards match it. The 28 that do not are excluded on purpose:

     header + desc + link-wrap   18 cards   three children — span 2 would put
                                            the link in the next card's track,
                                            and their links already align via
                                            margin-top: auto further down
     header + cta-link            4 cards   no paragraph to align
     title only                   6 cards   nothing to align against

   No media query, because the mechanism IS the condition: it does nothing
   where the titles already match, and corrects the widths where they do not.
   Those widths are not guessable and differ per section — 561–900 on one page,
   700–800 plus 860–900 on another, every width but 1024 on a third — and they
   move whenever the copy is edited. A breakpoint would encode today's wrapping.

   Deliberately sets no gap, padding or min-height: it inherits the item's own
   gap above (which applies to grid exactly as it did to flex) so a section
   that has tuned its spacing keeps it. align-content: start matters where a
   section forces a min-height — without it the two rows would share out the
   slack instead of sitting at the top.

   The child combinator on the left keeps this to real grid items, since
   subgrid only means anything inside a grid container. */
.ce-feature-list__grid > .ce-feature-list__item:has(> .ce-feature-list__desc:nth-child(2):last-child) {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	align-content: start;
	justify-items: start;
}

.ce-feature-list__item:hover {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 8px 28px rgba(0, 0, 0, 0.08);
}

/* ── Brand colour glass tints — cycling across 4 colours ── */
.ce-feature-list__item:nth-child(4n+1) {
	background: rgba(249, 157, 49, 0.13);
	border: 1px solid rgba(249, 157, 49, 0.3);
}
.ce-feature-list__item:nth-child(4n+2) {
	background: rgba(175, 77, 118, 0.11);
	border: 1px solid rgba(175, 77, 118, 0.25);
}
.ce-feature-list__item:nth-child(4n+3) {
	background: rgba(83, 141, 169, 0.13);
	border: 1px solid rgba(83, 141, 169, 0.28);
}
.ce-feature-list__item:nth-child(4n+4) {
	background: rgba(113, 148, 126, 0.13);
	border: 1px solid rgba(113, 148, 126, 0.28);
}

/* ── Icon — bare, large, colour-matched to card accent ── */
.ce-feature-list__badge {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	font-size: 2.25rem;
	background: none;
	width: auto;
	height: auto;
	border-radius: 0;
}

/* Inline brand-logo SVG standing in for a Font Awesome icon — recoloured
   via currentColor so it inherits whichever colour the badge itself uses. */
.ce-feature-list__badge svg {
	width: 2.25rem;
	height: 2.25rem;
}

.ce-feature-list__badge svg path {
	fill: currentColor;
}

.ce-feature-list__item:nth-child(4n+1) .ce-feature-list__badge { color: var(--ci-color-engage); }
.ce-feature-list__item:nth-child(4n+2) .ce-feature-list__badge { color: var(--ci-color-develop); }
.ce-feature-list__item:nth-child(4n+3) .ce-feature-list__badge { color: var(--ci-color-innovate); }
.ce-feature-list__item:nth-child(4n+4) .ce-feature-list__badge { color: #71947e; }

.ce-feature-list__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.ce-feature-list__title {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-heading);
	font-weight: 700;
	color: var(--ci-color-navy);
	margin: 0 0 0.3rem;
	line-height: 1.35;
}

.ce-feature-list__desc {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-body);
	line-height: 1.65;
	color: var(--ci-color-text-muted);
	margin: 0;
}

/* ── On-green variant — white glass cards for coloured backgrounds ── */
.ce-feature-list__grid--on-green .ce-feature-list__item:nth-child(n) {
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.26);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 4px 20px rgba(0, 0, 0, 0.07);
	min-height: 13rem;
}

.ce-feature-list__grid--on-green .ce-feature-list__item:nth-child(n):hover {
	background: rgba(255, 255, 255, 0.21);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 28px rgba(0, 0, 0, 0.1);
}

.ce-feature-list__grid--on-green .ce-feature-list__badge {
	color: rgba(255, 255, 255, 0.95);
	background: none;
	box-shadow: none;
}

.ce-feature-list__grid--on-green .ce-feature-list__title {
	color: #ffffff;
}

.ce-feature-list__grid--on-green .ce-feature-list__desc {
	color: rgba(255, 255, 255, 0.82);
}

/* ── Stacked variant — one full-width card per row ──
   For sections whose descriptions vary a lot in length. In a 3-up grid the
   longest card sets the height of the row and the shorter ones carry the dead
   space; stacking lets each card be its own height. Icon and title sit above
   the body text, the same order as the 3-up card — only the width changes.
   min-height is released because the 13rem floor exists to even up a row of
   cards, and there is no row to even up here. */
/* Both class names on purpose, for specificity rather than for meaning. The
   responsive block at the end of this file drops .ce-feature-list__grid to two
   columns below 900px, and that rule is equal specificity but LATER in source
   order — so a single-class .ce-feature-list__grid--stacked lost to it and the
   stacked variant silently became a two-up grid. One long card beside a short
   one left a column of dead space, with an odd third card stranded on its own
   row: the exact layout stacking exists to avoid.

   The window was 561–900px only. Phones were never affected, because the
   max-width: 560px rule below sets 1fr and is later still — it beat the 900px
   rule the same way the 900px rule beat this one. So the variant worked above
   900 and below 561, and failed in the tablet band between them, which is why
   it went unnoticed.

   0,2,0 beats 0,1,0 at any source position, so this now holds at every width
   without touching the phone layout, which was already correct. */
.ce-feature-list__grid.ce-feature-list__grid--stacked {
	grid-template-columns: 1fr;
}

.ce-feature-list__grid--stacked .ce-feature-list__item {
	min-height: 0;
	gap: 0.75rem;
	padding: 1.75rem 2rem;
}

/* Icon beside the title rather than above it — at full width the stacked
   arrangement leaves the icon marooned on its own line. Matches the header
   treatment on the problem-cards grid. */
.ce-feature-list__grid--stacked .ce-feature-list__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ce-feature-list__grid--stacked .ce-feature-list__title {
	margin: 0;
}

/* ── 4-column variant — for short highlight strips ── */
.ce-feature-list__grid--4col {
	grid-template-columns: repeat(4, 1fr);
}

/* ── Linked card + stretched-link overlay (shared across all feature-list pages) ── */
.ce-feature-list__item--linked {
	position: relative;
}

.ce-stretched-link::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 1.5rem;
	z-index: 1;
}

/* ── Blueprint text link (shared across all feature-list card pages) ── */
.ce-cc-card-link {
	display: inline-block;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 600;
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	margin-top: auto;
	transition: color 0.2s ease;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
	.ce-feature-list__grid--4col {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.ce-feature-list__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ── Three cards never go two-up ─────────────────────────────────────────────
   Two columns divides evenly into four and six, which is what nearly every
   grid here holds. Three it does not: the rule above puts two cards on the top
   row and leaves the third alone beside a card-sized hole, which reads as a
   layout that has broken rather than one that has wrapped.

   Stacking is the better of the two honest options at this width. Keeping
   three columns down here would make each card about 250px, and these cards
   carry a paragraph, not a label.

   Written as a shape test — :nth-child(3):last-child means "the third card is
   also the last", i.e. exactly three — so it holds for any three-card section
   somebody adds later, rather than naming the one page that has one today.
   Only the range between the two breakpoints needs it: above 900 three cards
   fill three columns exactly, and below 561 everything is single column. */
@media (min-width: 561px) and (max-width: 900px) {
	.ce-feature-list__grid:has(> .ce-feature-list__item:nth-child(3):last-child) {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.ce-feature-list__grid {
		grid-template-columns: 1fr;
	}
}