/* =================================================================
   Feature Grid block component
   ================================================================= */

.entry-content .feature-grid__list, .feature-grid__list {
	display: grid;
	/* Default (unscoped) falls back to 2-col — only actually used by the
	   --default layout below; --list overrides this to a strict single
	   column immediately after, so it never depends on this fallback. */
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6);
	list-style: none;
	padding-inline-start: 0;
	margin: 0;
	padding: 0;
}

.gt-feature-grid-block--default.feature-grid-block--feature-2col .feature-grid__list {
	grid-template-columns: repeat(2, 1fr);
}
.gt-feature-grid-block--default.feature-grid-block--feature-3col .feature-grid__list {
	grid-template-columns: repeat(3, 1fr);
}

/* List layout is always a single column, at every viewport — "2col"/"3col"
   per-card Layout in list mode only controls the row-direction image+text
   arrangement *inside* a card (see .feature-card__layout--2col/--3col's
   flex-direction rule below), it was never meant to span grid columns
   against siblings. Without this override, a list-mode card with no
   per-card span landed in the unscoped 2-column grid above with no
   grid-column set, so the browser's auto-placement packed two cards
   side-by-side per row instead of the intended one-per-row — only the
   mobile breakpoint's blanket 1fr rule masked it below 767px. */
.gt-feature-grid-block--list .feature-grid__list {
	grid-template-columns: 1fr;
}

.entry-content .gt-feature-grid-block li {
	margin-block-start: 0;
}



/* =================================================================
   Card
   ================================================================= */

.gt-feature-grid-block .section__title {
	font-family: var(--font-sans);
	font-size: 32px;
	font-weight: 600;
	color: var(--color-text);
	margin: 0 0 var(--space-4) 0;
	line-height: 1.2;
}
.gt-feature-grid-block .section__description {
	font-size: var(--font-size-base);
	color: var(--color-muted);
	margin-bottom: var(--space-6) !important;
}

.gt-feature-grid-block .feature-card {
	
	display: flex;
	flex-direction: column;
}
.gt-feature-grid-block--default .feature-card,
.gt-feature-grid-block--feature-2col .feature-card,
.gt-feature-grid-block--feature-3col .feature-card {
	border-radius: var(--border-radius-lg);
	
}


/* Inner wrapper — div for static cards, <a> for linked cards */

.feature-card__inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.gt-feature-grid-block--default .feature-card__inner,
.gt-feature-grid-block--feature-2col .feature-card__inner,
.gt-feature-grid-block--feature-3col .feature-card__inner {
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	background: var(--color-surface);
}

.gt-feature-grid-block--list .feature-card__inner {
	border-radius: 0;
	border-top: 1px solid var(--color-border);
	padding: var(--space-6) 0;
	background: transparent;
	/* padding: 0; */
}
.gt-feature-grid-block--list .feature-card__body {
	padding-top: 0;
}

.feature-card__layout--2col .feature-card__inner,
.feature-card__layout--3col .feature-card__inner {
	flex-direction: row;
}

.feature-card__layout--2col {
	grid-column: span 2;
	min-height: 268px;
}

.feature-card__layout--3col {
	grid-column: span 3;
	min-height: 268px;
}
/* List layout: both image and screenshot containers locked to 4/3, same as grid cards */
.gt-feature-grid-block--list .feature-card__image,
.gt-feature-grid-block--list .feature-card__screenshots {
	aspect-ratio: 4 / 3;
	width: 100%;
	overflow: hidden;
}

.gt-feature-grid-block--list .feature-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

/* 2col row-direction in list: give image/screenshot a fixed slice at locked 4/3 */
.gt-feature-grid-block--list .feature-card__layout--2col .feature-card__image,
.gt-feature-grid-block--list .feature-card__layout--2col .feature-card__screenshots {
	flex: 0 0 45%;
	width: 45%;
	aspect-ratio: 4 / 3;
	align-self: flex-start;
}

.gt-feature-grid-block--list .feature-card__layout--2col {
	height: auto;
}

.feature-card--linked .feature-card__inner:hover {
	border-color: var(--color-muted); /* navy retired 2026-08-14 */
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
}


/* =================================================================
   Image — flush to top, fixed aspect ratio
   ================================================================= */

/* Fixed aspect ratio on both image and screenshot containers so they are
   always the same height and interchangeable in the same grid row. */
.feature-card__image {
	position: relative;
	flex: none;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

/* "Allow magnification" — a small enlarge control over the image's own
   corner, opening the full-size image in assets/js/feature-image-lightbox.js's
   shared modal (see inc/blocks.php's omorphos_register_feature_image_lightbox()).
   Hidden by default, revealed on hover/focus so it doesn't compete with the
   image itself at rest — matches the existing hover-zoom treatment linked
   cards already get on their own image. */
.feature-card__magnify-trigger {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(28,25,23,0.55);
	color: #fff;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 150ms ease, transform 150ms ease, background 150ms ease;
	z-index: 1;
}

.feature-card__image--magnify:hover .feature-card__magnify-trigger,
.screenshot-slot--magnify:hover .feature-card__magnify-trigger,
.feature-card__magnify-trigger:focus-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Screenshot slots are already position:absolute (their own stacked-photo
   positioning), which is what the trigger's own position:absolute anchors
   against — no extra positioning context needed here, just a slightly
   smaller/closer-in placement to suit the smaller slot size. */
.screenshot-slot .feature-card__magnify-trigger {
	top: var(--space-2);
	right: var(--space-2);
	width: 30px;
	height: 30px;
	font-size: 0.95rem;
}

.feature-card__magnify-trigger .expand-icon {
	display: block;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.screenshot-slot .feature-card__magnify-trigger .expand-icon {
	width: 14px;
	height: 14px;
}

.feature-card__magnify-trigger:hover {
	background: rgba(28,25,23,0.8);
}

.feature-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	transition: transform 300ms ease;
}

/* 2col / 3col spanning: inner is row-direction, so image and screenshot
   container fill the card height rather than using a fixed aspect ratio. */
.feature-card__layout--2col .feature-card__image,
.feature-card__layout--3col .feature-card__image,
.feature-card__layout--2col .feature-card__screenshots,
.feature-card__layout--3col .feature-card__screenshots {
	flex: 1;
	width: auto;
	min-width: 0;
	aspect-ratio: auto;
	min-height: 0;
	align-self: stretch;
}

.feature-card__layout--2col .feature-card__image img,
.feature-card__layout--3col .feature-card__image img {
	object-position: top left;
}

.feature-card--linked .feature-card__inner:hover .feature-card__image img {
	transform: scale(1.03);
}

/* =================================================================
   Body
   ================================================================= */

.feature-card__body {
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--space-3);
}


.entry-content .feature-card__body h3 {
	margin: 0;
}

.feature-card__title {
	font-family: var(--font-sans);
	font-size: 14px !important;
	font-weight: normal;
	color: var(--color-text);
	margin: 0;
	line-height: 1.3;
	
}

.feature-card__subtitle {
	font-size: 22px;
	color: var(--color-text);
	font-family: var(--font-sans);
	font-weight: 600;
	margin: 0;
	line-height: 1.4;
}
.feature-card__cta {
	font-size: var(--font-size-lg);
	font-weight: 500;
	color: var(--color-accent);
	margin-top: auto;
	text-decoration: none;
	transition: color var(--transition);
}

.feature-card__description {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	line-height: 1.7;
	margin: 0;
	flex: 1;
}

/* =================================================================
   CTA arrow — linked cards only
   ================================================================= */

.feature-card__cta {
	display: block;
	font-size: 20px;
	font-weight: 500;
	color: var(--color-accent);
	transition: transform var(--transition);
	background-color: #000;
	color: hsl(0, 0%, 100%);
	height: 32px;
	width: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}


.feature-card__title-wrapper {
	display: flex;
	flex-direction: row;
	gap: 0.5rem;

}
.feature-card__layout--2col .feature-card__title-wrapper {
	flex-direction: column;
}
.feature-card__title-wrapper .feature-card__subtitle {
	flex-grow: 1;
}
.feature-card__title-wrapper .feature-card__cta-wrapper {
	flex-shrink: 1;
	/* align-self: flex-end; */
	justify-self: flex-end;
}

.feature-card--linked .feature-card__inner:hover {
	text-decoration: none;
}

.section__description {
	font-size: var(--font-size-base);
	color: var(--color-muted);
	margin-bottom: var(--space-2);
}

/* =================================================================
   Screenshot card variant
   Card style: 'screenshot'
   Background: --screenshot-bg (inline CSS var set by render.php)
   Screenshots: 3:2 aspect-ratio slots, overflow hidden (no cropping)
   Production target: 1200 × 800 px per screenshot
   ================================================================= */

.feature-card__screenshots {
	position: relative;
	background: var( --screenshot-bg, #1e293b );
	flex: none;
	width: 100%;
	min-width: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.feature-card__screenshots {
	--screenshot-offset-x: 30px;
	--screenshot-offset-y: 30px;
}

/* Physical stack — no explicit height, natural image size determines it.
   Container overflow:hidden crops the bottom. Front card (nth-child 1) furthest
   offset so back cards' left and top edges peek out. */

.screenshot-slot {
	position: absolute;
	width: 66%;
	overflow: hidden;
	border-radius: var( --border-radius );
	box-shadow: 0 4px 20px rgba( 0, 0, 0, 0.1 );
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.screenshot-slot:nth-child(1) { left: var(--screenshot-offset-x); top: calc(var(--screenshot-offset-y)*2); z-index: 1; }
.screenshot-slot:nth-child(2) { left: 35%; top: var(--screenshot-offset-y); z-index: 2; }
.screenshot-slot:nth-child(3) { left: calc(var(--screenshot-offset-x)*2);  top: calc(var(--screenshot-offset-y)*3);  z-index: 3; }
.screenshot-slot:nth-child(4) { left: 30%;    top: calc(var(--screenshot-offset-y)*5);    z-index: 4; }

.feature-card--screenshots-1 .screenshot-slot:nth-child(1) {
	width: calc(100% - var(--screenshot-offset-x)*2);
	left: var(--screenshot-offset-x);
	top: var(--screenshot-offset-y);
}

.screenshot-slot--square {
	border-radius: 0;
}

.screenshot-slot:hover {
	/* z-index: 10 !important; */
	/* box-shadow: 0 8px 28px rgba( 0, 0, 0, 0.55 ); */
}

.screenshot-slot img {
	width: 100%;
	height: auto;
	display: block;
}

/* =================================================================
   Responsive
   ================================================================= */


@media ( max-width: 767px ) {
	.feature-grid__list,
	.gt-feature-grid-block--default.feature-grid-block--feature-2col .feature-grid__list,
	.gt-feature-grid-block--default.feature-grid-block--feature-3col .feature-grid__list {
		grid-template-columns: 1fr;
	}

	.feature-card__layout--2col,
	.feature-card__layout--3col {
		grid-column: span 1;
		min-height: 0;
	}

	.feature-card__layout--2col .feature-card__inner,
	.feature-card__layout--3col .feature-card__inner {
		flex-direction: column;
	}

	.feature-card__layout--2col .feature-card__image,
	.feature-card__layout--3col .feature-card__image,
	.feature-card__layout--2col .feature-card__screenshots,
	.feature-card__layout--3col .feature-card__screenshots {
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		align-self: auto;
	}

	/* The --list variant's row-layout rule (45% width, higher specificity via
	   an extra class) otherwise survives the column stack below and squeezes
	   the image/screenshot — match its specificity to actually override it. */
	.gt-feature-grid-block--list .feature-card__layout--2col .feature-card__image,
	.gt-feature-grid-block--list .feature-card__layout--3col .feature-card__image,
	.gt-feature-grid-block--list .feature-card__layout--2col .feature-card__screenshots,
	.gt-feature-grid-block--list .feature-card__layout--3col .feature-card__screenshots {
		flex: none;
		width: 100%;
		aspect-ratio: 4 / 3;
		align-self: auto;
	}

	.feature-card--screenshot {
		min-height: 0;
	}
}

/* =================================================================
   'stack' layout (planner-307) — large cards, copy left, a main screenshot
   with an optional inset screenshot overlapping it, right. A plain list of
   cards everywhere; on wide screens with scroll-driven animation (and motion
   allowed) they start as a pile and the front card peels away on scroll.
   Light only, like the rest of the public site.
   ================================================================= */

/* Wider than the 720px text column (the cards are designed for about 1000px): up to 1040px, centred on the column,
   16px from the window edges below that. The section heading above stays in the column. */
.gt-feature-grid-block--stack .feature-stack {
	width: min(1040px, calc(100vw - 32px));
	margin-inline-start: calc(50% - min(520px, calc(50vw - 16px)));
}
/* page.php's page-header layout (a hero, then .page-content): the 720px column sits at the LEFT of the 1200px
   container, under the header's own left edge, so the stack starts there too and grows to the right, inside the
   container's 20px padding (60px covers that plus a classic scrollbar, which 100vw includes). */
.page-content .gt-feature-grid-block--stack .feature-stack {
	width: max(100%, min(1040px, calc(100vw - 60px)));
	margin-inline-start: 0;
}

.feature-stack__stage {
	list-style: none;
	margin: 0;
	padding: 0;
}
.entry-content .feature-stack__stage > li { margin-block: 0; }

.feature-stack__card {
	display: grid;
	grid-template-columns: 5fr 7fr;
	min-height: 430px;
	margin: 0 0 var(--space-6);
	background: var(--color-stone-50);
	border: 1px solid var(--color-border);
	border-radius: 18px;
	box-shadow: 0 14px 34px rgba(28, 25, 23, 0.10);
	overflow: hidden;
}
.feature-stack__card--teal  { background: var(--color-teal-tint); }
.feature-stack__card--ochre { background: var(--color-ochre-tint); }
.feature-stack__card--no-image { grid-template-columns: 1fr; }

.feature-stack__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 14px;
	padding: 36px 8px 36px 36px;
}
.feature-stack__tag {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 5px 8px;
	border-radius: 4px;
	background: var(--color-teal-tint);
	color: var(--color-teal-ink);
}
.feature-stack__card--teal .feature-stack__tag { background: var(--color-surface); }
.feature-stack__card--ochre .feature-stack__tag { background: var(--color-surface); color: var(--color-ochre-ink); }
.feature-stack__title {
	margin: 0;
	font-size: 34px;
	line-height: 1.1;
	color: var(--color-text);
	text-wrap: balance;
}
.feature-stack__text {
	margin: 0;
	font-size: 18px;
	line-height: 1.55;
	max-width: 34ch;
	color: var(--color-text-strong);
}
.feature-stack__link {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	padding: 14px 18px;
	border-radius: 8px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	text-decoration: none;
}
.feature-stack__link:hover { border-color: var(--color-text); }
.feature-stack__link:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

/* The main screenshot sits on the card's bottom edge in a window exactly its own shape (3:2), so there is never
   empty space in it and nothing is cut off: the visual column is a size container, the window is the largest 3:2
   that fits it (min(width, 1.5 x height)), anchored bottom-left. Only its top corners are ever seen. */
.feature-stack__visual {
	position: relative;
	container-type: size;
	margin: 36px 36px 0 12px;
	min-height: 300px;
}
.feature-stack__main,
.feature-stack__inset {
	--frame-w: min(100cqw, 150cqh);
}
.feature-stack__main {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: var(--frame-w);
	aspect-ratio: 3 / 2;
	border: 1px solid var(--color-border);
	border-bottom: 0;
	border-radius: 12px 12px 0 0;
	background: var(--color-surface);
	overflow: hidden;
}
/* Doubled class: `.entry-content img { height: auto }` (style.css, loaded later) would otherwise win. */
.feature-stack .feature-stack__main img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top left;
}
.feature-stack .feature-stack__inset img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top left;
}
.feature-stack__inset {
	position: absolute;
	left: -12px;
	bottom: 28px;
	width: calc(var(--frame-w) * 0.46);
	aspect-ratio: 4 / 3;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	background: var(--color-surface);
	box-shadow: 0 10px 26px rgba(28, 25, 23, 0.18);
	overflow: hidden;
}

@media (max-width: 820px) {
	.feature-stack__card { grid-template-columns: 1fr; min-height: 0; }
	.feature-stack__copy { padding: 28px 24px 8px; }
	.feature-stack__title { font-size: 28px; }
	.feature-stack__visual { margin: 16px 16px 0; height: 240px; min-height: 0; }
	.feature-stack__inset { left: 12px; bottom: 20px; }
}

/* The pile. The wrapper reserves the scroll distance (one step per card) so nothing after it is ever covered;
   the list sticks centred in the window below the header while the cards peel off in turn. --i is each card's
   index, --stack-n the count. The card height comes from the window (svh, so a phone's address bar doesn't
   change it): the whole pile fits below the header with 16px to spare, capped at 460px on wide screens. Phones
   get the pile too, in the one-column card layout. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.feature-stack--pile {
			--peek: 16px;
			--step: 70svh;
			--ch-max: 460px;
			--ch-min: 340px;
			--header: var(--site-header-height, 71px);
			--ch: clamp(var(--ch-min), calc(100svh - var(--header) - 32px - (var(--stack-n) - 1) * var(--peek)), var(--ch-max));
			--stage-h: calc(var(--ch) + (var(--stack-n) - 1) * var(--peek));
			/* Centred in the window below the sticky header; on a window too short for that, 16px under the header. */
			--stick: max(
				calc(var(--header) + 16px),
				calc(var(--header) + (100svh - var(--header) - var(--stage-h)) / 2)
			);
			position: relative;
			view-timeline: --feature-stack block;
			height: calc(var(--stage-h) + (var(--stack-n) - 1) * var(--step) + 60px);
		}
		.feature-stack--pile .feature-stack__stage {
			position: sticky;
			top: var(--stick);
			height: var(--stage-h);
		}
		.feature-stack--pile .feature-stack__card {
			position: absolute;
			left: 0;
			right: 0;
			top: calc(var(--i) * var(--peek));
			height: var(--ch);
			min-height: 0;
			margin: 0;
			z-index: calc(var(--stack-n) - var(--i));
			transform-origin: 50% 100%;
			animation: feature-stack-peel linear both;
			animation-timeline: --feature-stack;
			animation-range:
				cover calc(100svh - var(--stick) + var(--i) * var(--step))
				cover calc(100svh - var(--stick) + (var(--i) + 1) * var(--step));
		}
		.feature-stack--pile .feature-stack__card:last-child { animation: none; }

		@media (max-width: 820px) {
			/* Copy on top at its own height, the screenshot takes whatever the card has left. */
			.feature-stack--pile {
				--peek: 10px;
				--step: 60svh;
				--ch-max: 600px;
				--ch-min: 420px;
			}
			.feature-stack--pile .feature-stack__card { grid-template-rows: auto minmax(0, 1fr); }
			.feature-stack--pile .feature-stack__copy { padding: 22px 20px 4px; gap: 10px; }
			.feature-stack--pile .feature-stack__title { font-size: 24px; }
			.feature-stack--pile .feature-stack__text { font-size: 16px; line-height: 1.5; }
			.feature-stack--pile .feature-stack__link { padding: 12px 16px; }
			.feature-stack--pile .feature-stack__visual { height: auto; min-height: 120px; margin: 12px 16px 0; }
		}
	}
}
@keyframes feature-stack-peel {
	from { transform: translateY(0) rotate(0); }
	to   { transform: translateY(-135%) rotate(-1.5deg); }
}

/* =================================================================
   'stats' layout — a strip of short facts in one bordered row (the
   mockup's "proof strip"). Title = value, description = label.
   ================================================================= */
.feature-stats,
.entry-content .feature-stats { /* .entry-content ul's own padding/margin would otherwise win */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg, 8px);
	overflow: hidden;
}
.entry-content .feature-stats > li { margin: 0; }
.feature-stats__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 16px;
	/* A hairline on every item's left and top; the strip's own border hides the ones on its outer edges. */
	box-shadow: -1px 0 0 var(--color-border), 0 -1px 0 var(--color-border);
}
.feature-stats__value {
	font-family: var(--font-serif, Georgia, serif);
	font-size: 22px;
	font-weight: 500; /* Lora is loaded at 300-500 */
	line-height: 1.2;
	color: var(--color-text);
}
.feature-stats__label {
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.4;
	color: var(--color-muted);
}