/* =========================================================================
   netex · pages/geo-company.css · GEO blocks of the cluster "geo-company": Home, Web & Apps (+ websites,
   e-shops, care), Proof (+ the Black Box cases), Studio, Offices (+ Heraklion, Volos & Almyros), Insights.
   - .gc-glance  the answer-first «Με μια ματιά» / "At a glance" sheet (netex_geo_company_glance() in
                 inc/data/geo-company.php). Same anatomy and look as the sectors/scenarios sheet (geo-sx.css):
                 a --bg-2 plate with a hairline edge and the 47° chamfer, a mono head row, the search question
                 as the heading, the answer in Literata, definitions, the entity line and the related pages.
   - .gc-faq     the FAQ sections the GEO pass added (Home, Studio, Offices, Proof).
   Role tokens only, so everything reads on Paper and on Ink.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- the sheet ------------------------------------------------------------------- */
.gc-glance {
	position: relative;
	z-index: 1;
	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). */
.gc-glance::before, .gc-glance::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.gc-glance::before { inset: 0; background: var(--rule); clip-path: var(--clip-sheet); }
.gc-glance::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%); }

.gc-glance__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);
}
.gc-glance__body { display: grid; gap: var(--s-4); }
.gc-glance__q {
	margin: 0;
	max-width: 26ch;
	font: var(--w-h3) var(--t-h4)/1.2 var(--f-sans);
	letter-spacing: 0;
	color: var(--fg);
	text-wrap: balance;
}
.gc-glance__main { display: grid; gap: var(--s-3); min-width: 0; }
.gc-glance__a { margin: 0; max-width: var(--measure); font: 400 1.0625rem/1.55 var(--f-serif); color: var(--fg); }
.gc-glance__a dfn, .gc-glance__def dfn { font-style: normal; font-weight: var(--w-strong); }
.gc-glance__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);
}
.gc-glance__by { margin: 0; max-width: var(--measure); font: 400 var(--t-micro)/1.5 var(--f-mono); letter-spacing: .02em; color: var(--fg-2); }
.gc-glance__links { padding-top: var(--s-3); border-top: var(--bw) solid var(--rule); }
.gc-glance__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); }
.gc-glance__links ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; list-style: none; }
.gc-glance__links a {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	min-height: 24px;
	font: 500 var(--t-small)/1.35 var(--f-sans);
	color: var(--link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}
.gc-glance__arrow { width: 1em; height: 1em; flex: none; }
@media (hover: hover) { .gc-glance__links a:hover { text-decoration-thickness: 2px; } }

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

/* ---- placement ----------------------------------------------------------------- */
/* Heroes and headers: a full-width row under the hero's columns. */
.gc-glance--row { grid-column: 1 / -1; margin-top: var(--s-8); }
/* Inside a hero grid (Studio, Offices, the two office pages) the grid's row gap already spaces it. */
.nx-grid > .gc-glance--row { margin-top: 0; }
.wa-hero .gc-glance--row, .wsub-hero .gc-glance--row { margin-top: var(--s-7); }
/* The Insights index: between the header and the section chips. */
.ix .gc-glance--row { margin: 0 0 var(--s-7); }
/* Black Box cases: the sheet closes the hero, left of the stencilled file id (bottom right, as wide as
   2.3× its font size, single-nx_work.css), and never wider than the file frame. Phones hide the stencil. */
.bbc-hero .gc-glance--case { max-width: min(62rem, calc(100% - 2.3 * clamp(5rem, 2rem + 16vw, 17rem))); margin-top: var(--s-8); }
@media (max-width: 767px) { .bbc-hero .gc-glance--case { max-width: none; } }

/* ---- FAQ sections added by the GEO pass ------------------------------------------- */
.gc-faq__grid { row-gap: var(--s-6); align-items: start; }
.gc-faq__head .nx-eyebrow { margin-bottom: var(--s-3); }
.gc-faq__title { margin: 0; max-width: 18ch; font-size: var(--t-h2); }
.gc-faq__glance { margin-top: var(--s-6); }
@media (min-width: 1024px) {
	.gc-faq__head { grid-column: 1 / span 4; }
	.gc-faq__list { grid-column: 5 / -1; }
	/* With the glance sheet beside the questions (Home): a wider head column. */
	.gc-faq__grid--glance .gc-faq__head { grid-column: 1 / span 5; }
	.gc-faq__grid--glance .gc-faq__list { grid-column: 7 / -1; padding-top: var(--s-2); }
}

}