/* =========================================================================
   netex · pages/geo-sx.css · the answer-first «Με μια ματιά» / "At a glance" sheet on /sectors/,
   the 8 sector pages and the 15 Strategy Lab scenarios (markup: netex_geo_sx_glance() in
   inc/data/geo-sx-helpers.php). Role tokens only, so the sheet reads on Paper and Ink alike:
   a --bg-2 sheet with a hairline edge and the 47° chamfer, a mono head row, the question as H2,
   then the answer, the coined-term definitions, the entity line and the related pages.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

.sxg {
	position: relative;
	isolation: isolate;
	container-type: inline-size;
	padding: var(--s-5) var(--s-5) calc(var(--s-5) + var(--ch-sheet) * .5);
	color: var(--fg);
}
/* The edge follows the chamfer: a --rule plate under a --bg-2 plate inset by 1px (as .nx-sheet). */
.sxg::before, .sxg::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.sxg::before { inset: 0; background: var(--rule); clip-path: var(--clip-sheet); }
.sxg::after { inset: 1px; background: var(--bg-2); clip-path: polygon(0 0, 100% 0, 100% calc(100% - (var(--ch-sheet) - .6px) * var(--nx-tan)), calc(100% - var(--ch-sheet) + .6px) 100%, 0 100%); }

.sxg__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s-1) var(--s-4);
	margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-5);
	padding: var(--s-3) var(--s-5);
	border-bottom: var(--bw) solid var(--rule);
	font: 500 var(--t-micro)/1.4 var(--f-mono);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--fg-2);
}
.sxg__body { display: grid; gap: var(--s-4); }
.sxg__q {
	margin: 0;
	max-width: 26ch;
	font: var(--w-h3) var(--t-h4)/1.2 var(--f-sans);
	color: var(--fg);
	text-wrap: balance;
}
.sxg__main { display: grid; gap: var(--s-3); min-width: 0; }
.sxg__a { margin: 0; max-width: var(--measure); font: 400 1.0625rem/1.55 var(--f-serif); color: var(--fg); }
.sxg__def {
	margin: 0;
	max-width: var(--measure);
	padding-top: var(--s-3);
	border-top: var(--bw) solid var(--rule);
	font-size: var(--t-small);
	line-height: 1.5;
	color: var(--fg);
}
.sxg__def dfn { font-style: normal; font-weight: var(--w-strong); }
.sxg__by { margin: 0; max-width: var(--measure); font: 400 var(--t-micro)/1.5 var(--f-mono); letter-spacing: .02em; color: var(--fg-2); }
.sxg__links { padding-top: var(--s-3); border-top: var(--bw) solid var(--rule); }
.sxg__rel { margin: 0 0 var(--s-2); font: 500 var(--t-micro)/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.sxg__links ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; list-style: none; }
.sxg__links li { display: flex; align-items: center; min-height: 24px; }
.sxg__links a {
	font: 500 var(--t-small)/1.35 var(--f-sans);
	color: var(--link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}
/* Inline arrow after the last word (a flex row would push it to the far edge once the label wraps). */
.sxg__tail { white-space: nowrap; }
/* Numeric ranges and price tiers ("+5–15%", "€€–€€€") never break at the en dash (glance and FAQ answers). */
.sxg-nw { white-space: nowrap; }
.sxg__arrow { display: inline-block; width: 1em; height: 1em; margin-inline-start: .35em; vertical-align: -.15em; }
@media (hover: hover) { .sxg__links a:hover { text-decoration-thickness: 2px; } }

/* Wide sheets (sector hero, sectors index): the question on the left, the answer on the right. */
@container (min-width: 760px) {
	.sxg__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-7); align-items: start; }
	.sxg__q { font-size: var(--t-h3); line-height: 1.12; }
}

/* ---- placement -------------------------------------------------------------- */
/* Sector pages: a full-width row under the hero's data row. */
.sx-hero__glance { position: relative; z-index: 2; margin-top: var(--s-8); }
/* Sectors index: a full-width row under the hero's two columns. */
.sxi-hero__glance { grid-column: 1 / -1; }
/* Scenario pages: under the demo, in the stage column. */
.sx-hero__stage > .sxg { margin-top: var(--s-6); }
.sx-hero__body > .sxg { margin-top: var(--s-6); }

/* Sectors index: the questions block (same layout as the sector pages' s8, whose rules live in sector.css). */
.sxi-faq .sx-faq__title { margin-bottom: var(--s-6); }
@media (min-width: 1024px) {
	.sxi-faq .sx-faq__head { grid-column: 1 / span 4; }
	.sxi-faq .sx-faq__list { grid-column: 5 / -1; }
}

/* FAQ headings name the topic ("Questions about AI in food and beverage manufacturing"), so in the
   four-column head they scale with the column, not the viewport: no word is split between 1024 and 1440 px. */
@media (min-width: 1024px) {
	.sx-faq__head { container-type: inline-size; }
	.sx-faq__head .sx-faq__title { font-size: min(var(--t-h2), 14cqi); }
}

}