/* =========================================================================
   netex · pages/location.css (company group) · /locations/{heraklion, volos-almyros}/
   hero (Ink, office photo cut at 47°) · sectors (index + viewer) · open files · visit (survey drawing)
   funding (dated rows) · plant visit · FAQ · CTA
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- s1 · hero --------------------------------------------------------------- */
.lo-hero { --hero-pad: var(--s-7); overflow: hidden; }
.lo-hero__grid { row-gap: var(--s-7); align-items: end; }
.lo-hero__h1 { max-width: none; }
.lo-hero__kicker { display: block; max-width: 34ch; font-size: var(--t-h1-sub); font-weight: 560; line-height: 1.18; letter-spacing: -.01em; color: var(--fg-2); }
.lo-hero__display { --flar: 50; --volm: 40; display: block; margin-top: var(--s-4); max-width: 14ch; font-size: var(--t-display); font-weight: var(--w-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); color: var(--fg); }
.lo-hero__sub { margin-top: var(--s-6); }
.lo-hero__copy .nx-actions { margin-top: var(--s-7); }
.lo-hero__fig { margin: 0; display: grid; gap: var(--s-3); }
.lo-hero__media { aspect-ratio: 16 / 10 !important; }
.lo-hero__media { clip-path: polygon(calc(var(--ch) * 1.2) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--ch) * 1.2 * var(--nx-tan))); }
.lo-hero__survey { padding-left: calc(var(--ch) * .2); }
@media (min-width: 1024px) {
	.lo-hero__grid { align-items: center; }
	.lo-hero__copy { grid-column: 1 / span 6; }
	.lo-hero__fig { grid-column: 7 / -1; margin-right: calc(-1 * var(--margin)); }
	/* 4:5 box; the left edge is a true 47° line over its top third: run = 33% of the height × cot 47
	   = 0.33 × 1.25 × 0.9325 = 38.5% of the width. */
	.lo-hero__media { aspect-ratio: 4 / 5 !important; max-height: calc(100svh - var(--header-h) - 120px); width: auto; }
	.lo-hero__media { clip-path: polygon(38.5% 0, 100% 0, 100% 100%, 0 100%, 0 33%); }
}

/* ---- sectors: index + viewer --------------------------------------------------- */
.lo-sectors { padding-top: calc(var(--sec-y) + var(--ch-v)); }
.lo-iv__list { margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
.lo-sec {
	position: relative;
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	column-gap: var(--s-4);
	row-gap: var(--s-2);
	padding: var(--s-5) 0;
	border-top: var(--bw) solid var(--rule);
}
.lo-sec__thumb { position: relative; display: block; grid-row: 1 / span 3; align-self: start; width: 72px; height: 72px; }
.lo-sec__thumb picture { display: block; }
.lo-sec__thumb img { width: 72px; height: 72px; object-fit: cover; }
/* The AI-image mark, shrunk to the thumbnail (the full label sits on the viewer from 1024 px). */
.lo-sec__ai { position: absolute; left: 3px; bottom: 3px; max-width: calc(100% - 6px); padding: 1px 3px; background: var(--ink-2); color: var(--paper); font: 600 .5rem/1.2 var(--f-mono); letter-spacing: 0; text-transform: uppercase; pointer-events: none; }
.lo-sec > :not(.lo-sec__thumb) { grid-column: 2; }
.lo-sec__title { font-size: var(--t-h3); font-weight: var(--w-h3); line-height: 1.1; }
.lo-sec__title a { display: inline-flex; align-items: baseline; gap: .3em; color: var(--fg); text-decoration: none; }
.lo-sec__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.lo-sec__arrow { width: .7em; height: .7em; transition: transform var(--dur-ui) var(--ease-mech); }
.lo-sec__line { max-width: 46ch; font-family: var(--f-serif); font-style: italic; font-size: var(--t-lead); line-height: 1.4; color: var(--fg); }
.lo-sec__move { max-width: 52ch; color: var(--fg-2); }
.lo-sec__stat { max-width: 56ch; padding-left: var(--s-3); border-left: var(--bw-2) solid var(--sig); font-size: var(--t-small); line-height: 1.5; color: var(--fg); }
.lo-sec__stat .co-src { display: block; margin-top: var(--s-1); }
@media (min-width: 1024px) {
	.lo-iv { align-items: start; }
	.lo-iv__list { grid-column: 1 / span 6; }
	.lo-iv__viewer { grid-column: 8 / -1; --iv-ar: 4 / 5; }
	.lo-sec { grid-template-columns: minmax(0, 1fr); padding: var(--s-6) var(--s-4) var(--s-6) 0; transition: background-color var(--dur-ui) var(--ease-mech), padding var(--dur-ui) var(--ease-mech); }
	.lo-sec > :not(.lo-sec__thumb) { grid-column: 1; }
	.lo-sec__thumb { display: none; }
}
@media (min-width: 1024px) and (hover: hover) {
	.lo-sec:hover { background: var(--bg-2); padding-left: var(--s-4); }
	.lo-sec:hover .lo-sec__arrow { transform: translate(calc(3 * var(--u-x)), calc(3 * var(--u-y))); }
}
.lo-iv__viewer .nx-media { height: 100%; }

/* ---- open files ------------------------------------------------------------------- */
.lo-files__label { margin-bottom: var(--s-5); }

/* ---- visit ------------------------------------------------------------------------- */
.lo-visit { padding-top: calc(var(--sec-y) + var(--ch-v)); }
.lo-visit__grid { row-gap: var(--s-7); align-items: center; }
.lo-visit__body { margin-top: var(--s-5); }
.lo-nap { display: grid; gap: 0; margin: var(--s-6) 0 0; border-top: var(--bw) solid var(--rule); max-width: 34rem; }
.lo-nap > div { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: var(--s-4); padding: var(--s-3) 0; border-bottom: var(--bw) solid var(--rule); }
.lo-nap dt { font: 500 var(--t-label)/1.5 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.lo-nap dd { margin: 0; font-weight: 500; }
.lo-nap b { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.lo-visit__promise { margin-top: var(--s-5); }
.lo-visit__map { --bg: var(--ink); }
@media (min-width: 1024px) {
	.lo-visit__copy { grid-column: 1 / span 5; }
	.lo-visit__map { grid-column: 7 / -1; }
}

/* ---- plant visit (Volos & Almyros) --------------------------------------------------- */
.lo-plant__grid { row-gap: var(--s-5); align-items: end; }
.lo-plant__copy { display: grid; gap: var(--s-4); justify-items: start; }
.lo-plant__copy p + p { margin-top: 0; }
@media (min-width: 1024px) {
	.lo-plant__title { grid-column: 1 / span 7; }
	.lo-plant__copy { grid-column: 8 / -1; }
}

/* ---- FAQ -------------------------------------------------------------------------------- */
.lo-faq__title { max-width: none; }
@media (min-width: 1024px) {
	.lo-faq__title { grid-column: 1 / span 3; padding-top: var(--s-5); }
	.lo-faq__list { grid-column: 4 / -1; }
}

/* Phones: the Molten action keeps a 44 px target but takes less of a 390 px screen, so the header
   CTA plus one primary action stay within the 5 % Molten quota (bible R2). */
@media (max-width: 479px) {
	.nx-main .nx-btn--primary { min-height: 44px; padding: .6em 16px; font-size: .875rem; }
}

} /* end @layer pages */