/*
 * GPIPL success stories (Phase 9). Loaded only on the stories archive and story pages ("pages" layer).
 *
 * Visual role: a technical case file. Distinct from products (datasheet), solutions (dark
 * capability), industries (light application) and About (readout panel): a hero with a strong
 * left rule, a numbered narrative (challenge → delivered → results is a real sequence) beside a
 * project-facts panel, and text-first case cards.
 */
@layer pages {
	/* ============================================================ Hero */
	.story-hero { padding-block: var(--space-m) var(--space-2xl); border-bottom: var(--border); }
	.story-hero .breadcrumbs { margin-bottom: var(--space-xl); }
	.story-hero__title {
		font-size: var(--step-5);
		max-width: 22ch;
		padding-left: var(--space-m);
		border-left: 4px solid var(--color-accent);
	}
	.story-hero__lead { margin-top: var(--space-m); max-width: 60ch; padding-left: calc(var(--space-m) + 4px); font-size: var(--step-1); line-height: var(--lh-snug); color: var(--color-text-muted); }
	.story-hero__industry { padding-left: calc(var(--space-m) + 4px); margin-bottom: var(--space-2xs); }
	.story-hero__industry a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--color-text-muted); font-size: var(--step--1); font-weight: var(--wght-semibold); text-decoration: none; }
	.story-hero__industry a:hover { color: var(--color-link); text-decoration: underline; }
	.story-hero__actions { margin-top: var(--space-l); padding-left: calc(var(--space-m) + 4px); }

	.story-media { margin-block: var(--space-xl) 0; }
	.story-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-m); background: var(--color-surface); }

	/* ============================================================ Narrative + facts */
	.story-body__grid { display: grid; gap: var(--space-xl); }
	@media (min-width: 64em) {
		.story-body__grid.has-facts { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-3xl); align-items: start; }
	}
	.story-body__main { display: grid; gap: var(--space-2xl); }
	.story-part { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--space-s); scroll-margin-top: 6rem; }
	.story-part__index {
		grid-row: span 2;
		padding-top: 0.35rem;
		font-size: var(--step--1);
		font-stretch: var(--wdth-data);
		font-variant-numeric: tabular-nums;
		color: var(--color-accent-strong);
		border-top: 2px solid var(--color-accent);
	}
	.story-part__title { font-size: var(--step-3); padding-top: 0.1rem; }
	.story-part__body { margin-top: var(--space-s); max-width: var(--measure); }

	.story-facts {
		padding: var(--space-l);
		border-top: 3px solid var(--color-text);
		border-radius: 0 0 var(--radius-m) var(--radius-m);
		background: var(--color-surface);
	}
	@media (min-width: 64em) {
		.story-facts { position: sticky; top: 6rem; }
	}
	.story-facts__title { font-size: var(--step-1); margin-bottom: var(--space-s); }
	.story-facts__list { margin: 0; display: grid; gap: 0; }
	.story-facts__list > div { padding-block: var(--space-xs); border-top: var(--border); }
	.story-facts__list dt { font-size: var(--step--1); color: var(--color-text-muted); }
	.story-facts__list dd { margin: 0.15rem 0 0; font-weight: var(--wght-medium); }
	.story-facts__list dd a { display: inline-flex; align-items: center; min-height: var(--tap); }
	.story-facts__products { margin: 0; padding: 0; }

	/* ============================================================ Sections */
	.story-section__title { font-size: var(--step-3); margin-bottom: var(--space-l); }

	.story-gallery {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
		gap: var(--space-s);
		margin: 0;
		padding: 0;
	}
	.story-gallery__item { margin: 0; display: grid; gap: var(--space-2xs); }
	.story-gallery__link { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-m); background: var(--color-bg); }
	.story-gallery__link img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
	.story-gallery__link:hover img { transform: scale(1.03); }
	.story-gallery__link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
	.story-gallery__item figcaption { margin: 0; }

	.story-video { position: relative; aspect-ratio: 16 / 9; max-width: 56rem; overflow: hidden; border-radius: var(--radius-m); background: var(--palette-slate); }
	.story-video__facade { position: absolute; inset: 0; display: grid; place-items: center; color: var(--palette-paper); text-decoration: none; }
	.story-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
	.story-video__play { position: relative; display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--tap); padding: var(--space-xs) var(--space-m); border-radius: var(--radius-s); background: var(--palette-slate); font-weight: var(--wght-semibold); }
	.story-video__play-icon { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
	.story-video__facade:hover .story-video__play { text-decoration: underline; }
	.story-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

	.story-products { margin: 0; padding: 0; }

	/* ============================================================ Archive + cards */
	.story-filter__list { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0 0 var(--space-l); padding: 0; }
	.story-filter__link {
		display: inline-flex;
		align-items: center;
		min-height: var(--tap);
		padding: 0.35rem 0.9rem;
		border: 1px solid var(--color-line-strong);
		border-radius: var(--radius-s);
		color: var(--color-text);
		font-size: var(--step--1);
		font-weight: var(--wght-medium);
		text-decoration: none;
	}
	.story-filter__link:hover { border-color: var(--color-text); color: var(--color-text); }
	.story-filter__link[aria-current="page"] { background: var(--color-heading); border-color: var(--color-heading); color: var(--color-bg); }
	.story-archive__count { margin-bottom: var(--space-m); color: var(--color-text-muted); font-size: var(--step--1); }

	.story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--space-l); margin: 0; padding: 0; }
	.story-card {
		position: relative;
		display: grid;
		align-content: start;
		height: 100%;
		min-height: 3.5rem; /* the whole card is the link: >= 44px even with only a title */
		border-top: 3px solid var(--color-text);
		background: var(--color-bg);
	}
	.story-card__media { aspect-ratio: 16 / 9; overflow: hidden; }
	.story-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
	.story-card__body { display: grid; gap: var(--space-2xs); padding-top: var(--space-s); }
	.story-card__industry { font-size: var(--step--1); font-weight: var(--wght-semibold); color: var(--color-accent-strong); }
	.section--surface .story-card { background: transparent; }
	.story-card__title { font-size: var(--step-2); line-height: var(--lh-heading); }
	.story-card__title a { color: var(--color-heading); text-decoration: none; }
	.story-card__title a::after { content: ""; position: absolute; inset: 0; }
	.story-card__text { color: var(--color-text-muted); }
	.story-card__facts { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-l); margin: var(--space-2xs) 0 0; font-size: var(--step--1); }
	.story-card__facts dt { color: var(--color-text-muted); }
	.story-card__facts dd { margin: 0; font-weight: var(--wght-medium); font-stretch: var(--wdth-ui); }
	.story-card:hover .story-card__title a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
	.story-card:hover .story-card__media img { transform: scale(1.03); }
	.story-card:has(.story-card__title a:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
	.story-card__title a:focus-visible { outline: none; }

	.story-empty { padding: var(--space-xl); border: 1px dashed var(--color-line-strong); border-radius: var(--radius-m); max-width: 44rem; }
	.story-empty__title { font-size: var(--step-2); }
	.story-pagination { margin-top: var(--space-xl); }
	.story-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
	.story-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); padding: 0 0.75rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-s); color: var(--color-text); text-decoration: none; }
	.story-pagination .page-numbers.current { background: var(--color-heading); border-color: var(--color-heading); color: var(--color-bg); }
	.story-archive-cta { padding-bottom: var(--section-pad); }

	@media (forced-colors: active) {
		.story-hero__title, .story-card, .story-facts, .story-part__index { border-color: CanvasText; }
	}
	@media print {
		.story-hero__actions, .story-enquiry, .story-video, .story-filter, .story-archive-cta { display: none !important; }
		.story-facts { position: static; }
	}
}