/*
 * Shared internal-page foundation — archives, singles, generic Pages, 404.
 * Reuses homepage tokens/components (base.css: .container, .ark-btn).
 * Does not restyle homepage sections — services.css/projects.css/
 * typical-solutions.css are only enqueued on the front page, so the card
 * partials (service-card.php/project-card.php/solution-card.php) get their
 * only visual styling here when reused on archives/singles.
 */

/* ---------------------------------------------------------------------
 * Breadcrumbs
 * ------------------------------------------------------------------- */

.breadcrumbs {
	margin-bottom: 14px;
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: var(--ark-fs-meta);
	color: var(--ark-text-muted);
}

.breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.breadcrumbs__item:not(:first-child)::before {
	content: "/";
	color: var(--ark-text-muted);
}

.breadcrumbs__link {
	color: var(--ark-text-secondary);
	transition: color 150ms var(--ark-ease);
}

.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible {
	color: var(--ark-text-primary);
}

.breadcrumbs__current {
	color: var(--ark-text-muted);
}

/* ---------------------------------------------------------------------
 * Internal hero — compact, content-driven, no oversized fixed heights.
 * ------------------------------------------------------------------- */

.internal-hero {
	padding-top: clamp(28px, 3vw, 44px);
	padding-bottom: clamp(24px, 2.4vw, 36px);
	background: var(--ark-bg-950);
	border-bottom: 1px solid var(--ark-border-soft);
}

.internal-hero__eyebrow {
	margin: 0 0 10px;
	font-size: var(--ark-fs-meta);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ark-text-muted);
}

.internal-hero__title {
	font-size: var(--ark-fs-h2);
	max-width: 32ch;
	margin-bottom: 0.35em;
	overflow-wrap: anywhere;
}

.internal-hero__intro {
	max-width: 62ch;
	font-size: 1.05rem;
	margin-bottom: 0;
}

.internal-hero__meta {
	font-size: var(--ark-fs-meta);
	color: var(--ark-text-muted);
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * Structured lead + vertical list (Phase SERVICES.ARCHIVE.HERO-COPY-
 * STRUCTURE, /services/ archive only) — renders instead of $intro when
 * $args['list_items'] is passed. No other internal-hero caller uses it.
 * ------------------------------------------------------------------- */

.internal-hero__list-lead {
	font-weight: 600;
	color: var(--ark-text-secondary);
}

.internal-hero__list {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	max-width: 40ch;
}

.internal-hero__list-item {
	position: relative;
	padding-left: 22px;
	font-size: 1.02rem;
	line-height: 1.45;
	color: var(--ark-text-secondary);
}

.internal-hero__list-item + .internal-hero__list-item {
	margin-top: 9px;
}

.internal-hero__list-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 12px;
	height: 1px;
	background: rgb(166, 159, 147);
}

.internal-hero__cta {
	margin-top: 0;
}

.internal-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
}

/* Singles get a touch more breathing room than archives. */
.single-service .internal-hero,
.single-project .internal-hero,
.single-typical_solution .internal-hero,
.page .internal-hero {
	padding-bottom: clamp(32px, 3.2vw, 48px);
}

/* ---------------------------------------------------------------------
 * Internal hero — two-column split with a Hero lead form (Phase
 * SERVICES.ARCHIVE.HERO-FORM, /services/ archive only). Only applies when
 * internal-hero.php receives $args['form_html']; every other internal-hero
 * caller is unaffected.
 * ------------------------------------------------------------------- */

.internal-hero--split .internal-hero__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp(32px, 4vw, 64px);
}

.internal-hero--split .internal-hero__col-text {
	flex: 1 1 auto;
	min-width: 0;
}

.internal-hero--split .internal-hero__col-form {
	flex: 0 0 auto;
	width: min(440px, 100%);
	align-self: flex-start;
	/* Same-page anchor target (Phase SERVICES.ARCHIVE.FINAL-CTA-PRIMARY-LINK)
	   — keeps the sticky .site-header (76px) from covering the form top. */
	scroll-margin-top: 96px;
}

/* ---------------------------------------------------------------------
 * Archive Hero proof row — compact verified metrics that follow the copy
 * in normal document flow (Phase SERVICES.ARCHIVE.HERO-BALANCE-2). Same
 * restrained value/label/separator language as the Service single Hero's
 * own proof row (assets/css/single-service.css, .service-hero__proof) —
 * no cards, no background panels, no bottom-pinning.
 * ------------------------------------------------------------------- */

.internal-hero__proof {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}

.internal-hero__proof-item {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding-right: 20px;
	margin-right: 20px;
	border-right: 1px solid var(--ark-border-soft);
}

.internal-hero__proof-item:last-child {
	padding-right: 0;
	margin-right: 0;
	border-right: none;
}

.internal-hero__proof-value {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ark-text-primary);
}

.internal-hero__proof-label {
	font-size: 0.8rem;
	color: var(--ark-text-muted);
}

.internal-hero--split .internal-hero__col-form .service-hero-form {
	margin-top: 0;
}

.internal-hero--split .internal-hero__col-form .service-hero-form__project-tz {
	width: 100%;
	margin-top: 8px;
}

/* ---------------------------------------------------------------------
 * Internal hero — full-bleed photographic background (Phase
 * SERVICES.ARCHIVE.HERO-MEDIA, /services/ archive only). Only applies when
 * internal-hero.php receives $args['bg_image']; every other caller keeps
 * the flat background untouched.
 * ------------------------------------------------------------------- */

.internal-hero--media {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.internal-hero--media .internal-hero__media,
.internal-hero--media .internal-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.internal-hero--media .internal-hero__media-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

/* <picture> wrapper (AVIF/WebP + PNG fallback) fills the same box the
   <img> alone used to — the img keeps every rule above unchanged since
   selectors here target it by class, not by a direct-child combinator. */
.internal-hero--media .internal-hero__media-picture {
	display: block;
	width: 100%;
	height: 100%;
}

.internal-hero--media .internal-hero__overlay {
	background:
		linear-gradient(180deg, rgba(5, 12, 18, 0.3) 0%, rgba(5, 12, 18, 0.08) 30%, rgba(5, 12, 18, 0.46) 100%),
		linear-gradient(90deg, rgba(5, 12, 18, 0.86) 0%, rgba(5, 12, 18, 0.78) 25%, rgba(5, 12, 18, 0.42) 55%, rgba(5, 12, 18, 0.2) 75%, rgba(5, 12, 18, 0.1) 100%);
}

.internal-hero--media .internal-hero__inner {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------------
 * Services archive Hero — composition fixes scoped to this one caller only
 * (Phase SERVICES.ARCHIVE.HERO-BALANCE-2). object-position alone couldn't
 * remove the source image's large dark left wall because, at this wide
 * Hero aspect ratio, object-fit:cover crops the image mostly on the
 * vertical axis — the wall survives regardless of horizontal focal point.
 * A real desktop zoom/crop (transform:scale + transform-origin) is needed
 * instead. Every other internal-hero caller (project/typical_solution
 * archives, singles, 404, generic Pages) is untouched by this block.
 * ------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.internal-hero--services-archive.internal-hero--media.internal-hero--split {
		/* Only as tall as the form + comfortable padding needs — the
		   previous clamp(500px, 34vw, 560px) carried leftover height from
		   the abandoned stretch/space-between composition. */
		min-height: clamp(440px, 30vw, 500px);
		display: flex;
		align-items: center;
	}

	/* .internal-hero__inner keeps the plain .container class (base.css) —
	   the same max-width/gutter tokens as the site header
	   (template-parts/header/site-header.php) and the Services card grid
	   below, so Hero content aligns to the same site grid. A previous
	   `width: 100%` override here cancelled .container's own gutter
	   calculation once this flex-centered header made the auto-margins
	   redundant (auto margins still center a flex item along the main
	   axis, so removing the override was sufficient — no new container
	   needed). */

	/* Crops away a meaningful part of the empty dark wall while keeping the
	   ventilation ducts/electrical cabinets in frame; wrapper already
	   clips overflow via .internal-hero--media { overflow: hidden }. */
	.internal-hero--services-archive .internal-hero__media-image {
		transform: scale(1.16);
		transform-origin: 70% 50%;
	}

	/* Text column stretches to the same height as the form column so the
	   proof row (below) has room to anchor near the form's bottom edge via
	   margin-top:auto — distinct from the earlier abandoned
	   justify-content:space-between attempt: here the proof row itself
	   consumes the available space, the title/copy block above it is
	   unaffected and keeps its normal top-of-column position. */
	.internal-hero--services-archive .internal-hero__row {
		align-items: stretch;
	}

	.internal-hero--services-archive .internal-hero__col-text {
		display: flex;
		flex-direction: column;
	}

	/* Phase SERVICES.ARCHIVE.HERO-PROOF-ALIGNMENT: proof row now anchors to
	   the lower-left, roughly level with the form's bottom edge, instead of
	   sitting right under the copy. Small margin-bottom keeps it just above
	   the form's own bottom edge rather than flush with it. */
	.internal-hero--services-archive .internal-hero__proof {
		margin-top: auto;
		margin-bottom: 6px;
	}

	/* Re-evaluated after the real crop: still strong enough for text
	   contrast at the far left, but noticeably lighter through the middle
	   now that actual equipment (not the empty wall) sits there. */
	.internal-hero--services-archive .internal-hero__overlay {
		background:
			linear-gradient(180deg, rgba(5, 12, 18, 0.26) 0%, rgba(5, 12, 18, 0.06) 30%, rgba(5, 12, 18, 0.4) 100%),
			linear-gradient(90deg, rgba(5, 12, 18, 0.8) 0%, rgba(5, 12, 18, 0.62) 25%, rgba(5, 12, 18, 0.32) 50%, rgba(5, 12, 18, 0.14) 75%, rgba(5, 12, 18, 0.06) 100%);
	}
}

/* Stacked layouts (<=1024px): text and form sit one above the other across
   the full width, so the desktop's left-weighted horizontal gradient no
   longer lines up with either block — switch to uniform top-to-bottom
   darkening that keeps both readable. The desktop zoom/crop is reset here
   too: it was chosen for the wide two-column aspect ratio and would just
   crop randomly once the Hero reflows to a narrower, taller stack. */
@media (max-width: 1024px) {
	.internal-hero--media .internal-hero__overlay {
		background: linear-gradient(180deg, rgba(5, 12, 18, 0.68) 0%, rgba(5, 12, 18, 0.58) 40%, rgba(5, 12, 18, 0.78) 100%);
	}

	.internal-hero--services-archive .internal-hero__media-image {
		transform: none;
		object-position: 60% 45%;
	}
}

/* ---------------------------------------------------------------------
 * /solutions/ Hero — reuses the same photo as the Services archive Hero
 * (assets/images/services/services-archive-hero.png) in the same --split
 * layout, so it has the same "empty dark wall survives object-fit:cover"
 * issue that class's own crop already solves — mirrored here under a
 * distinct selector so .internal-hero--services-archive itself is never
 * touched.
 * ------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.internal-hero--solutions .internal-hero__media-image {
		transform: scale(1.16);
		transform-origin: 70% 50%;
	}
}

@media (max-width: 1024px) {
	.internal-hero--solutions .internal-hero__media-image {
		transform: none;
		object-position: 60% 45%;
	}
}

/* ---------------------------------------------------------------------
 * Archive section wrapper
 * ------------------------------------------------------------------- */

.internal-archive {
	padding-top: clamp(32px, 3.2vw, 48px);
	padding-bottom: var(--ark-space-section-sm);
}

.internal-archive__empty {
	color: var(--ark-text-secondary);
	font-size: 1.05rem;
	padding-block: 40px;
	text-align: center;
}

.internal-archive__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch;
}

/* ---------------------------------------------------------------------
 * Services archive grid — card visuals live in assets/css/service-cards.css
 * (shared with the homepage Services panel via
 * template-parts/shared/service-card.php). Only archive-specific grid
 * layout stays here.
 * ------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
 * Projects archive — Hero editorial split (Phase PROJECTS.ARCHIVE-1,
 * refined PROJECTS.ARCHIVE-4). Only applies when internal-hero.php
 * receives extra_class="internal-hero--projects" (archive-project.php
 * only, and only when the featured project has a verified photo — see
 * archive-project.php's $ark_hero_bg_image). Desktop only (>=1025px):
 * .internal-hero--media's own markup (.internal-hero__media/__overlay/
 * __inner) is reused as-is, no new elements — the photo is simply pulled
 * in from the left via left:43% instead of the generic inset:0, leaving
 * the header's own base background (var(--ark-bg-950), the same token
 * the overlay's opaque stop below matches exactly) as the dark graphite
 * left surface. .internal-hero__title/__intro get a narrower max-width
 * than their generic 32ch/62ch (sized for the old full-width Hero, so at
 * this viewport they were wide enough to reach into the image column) —
 * .internal-hero__inner itself is left alone, since it's the same
 * .container as every other Hero, and a max-width there would just
 * re-center a narrower box instead of left-anchoring the text (confirmed
 * by testing it first — .container's margin-inline:auto keeps centering
 * whatever width results, pushing the right edge back toward the image).
 * Below 1025px none of this applies — mobile/
 * tablet keeps the existing, already-approved full-bleed
 * .internal-hero--media background exactly as before (no mobile-specific
 * rules needed here at all).
 * ------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.internal-hero--projects.internal-hero--media {
		min-height: clamp(480px, 34vw, 520px);
		display: flex;
		align-items: center;
	}

	.internal-hero--projects .internal-hero__media {
		left: 43%;
		right: 0;
	}

	/* Same source photo as the featured Hotel card below, deliberately
	   cropped differently so the top of the page doesn't repeat the same
	   composition twice: a closer, cinematic fragment (facade dominant,
	   tower a right-edge accent, road/foreground pushed out of frame),
	   vs. the featured card's full establishing shot. transform:scale on
	   the <img> itself (clipped by .internal-hero--media's own
	   overflow:hidden) is the same technique already used by
	   .internal-hero--services-archive above — reused, not new. */
	.internal-hero--projects .internal-hero__media-image {
		object-position: 38% 38%;
		transform: scale(1.2);
		transform-origin: 45% 35%;
	}

	/* Soft blend instead of a hard UI border: opaque exactly at the base
	   background color from 0–40% (matches the empty left surface, which
	   has no photo under it anyway), fading to fully transparent by 62%
	   so the photo itself reads clearly on the right. Same directional
	   language as .internal-hero--services-archive's own horizontal
	   gradient above — reused idea, not a new decorative effect. */
	.internal-hero--projects .internal-hero__overlay {
		background:
			linear-gradient(90deg, var(--ark-bg-950) 0%, var(--ark-bg-950) 40%, rgba(8, 15, 21, 0) 62%, rgba(8, 15, 21, 0) 100%),
			linear-gradient(180deg, rgba(5, 12, 18, 0.22) 0%, rgba(5, 12, 18, 0.04) 30%, rgba(5, 12, 18, 0.32) 100%);
	}

	.internal-hero--projects .internal-hero__title {
		max-width: 40%;
	}

	.internal-hero--projects .internal-hero__intro {
		max-width: 40%;
	}

}

/* ---------------------------------------------------------------------
 * Projects archive — 1 featured + 2 secondary editorial composition
 * (Phase PROJECTS.ARCHIVE-1, refined PROJECTS.ARCHIVE-3). Replaces the
 * previous flat 3-equal-card grid; the only shared source of these 3
 * projects is still inc/helpers.php's verified-project rules
 * (archive-project.php's own query mirrors ark_get_home_projects()'s
 * meta_query).
 *
 * Caption fix: project-card.php renders title/meta inside
 * .project-card__body here (via $args['caption_in_body']) instead of the
 * absolutely-positioned overlay on the photo that assets/css/projects.css
 * styles (position/z-index) — that file is only enqueued on the front
 * page and /solutions/, never on this archive, which is why the title was
 * invisible before. Homepage/solutions callers never pass
 * caption_in_body, so their overlay caption and assets/css/projects.css
 * are untouched.
 *
 * PROJECTS.ARCHIVE-3 (visual refine): featured moves closer to
 * /solutions/'s project-spotlight language (assets/css/solution-object.css
 * .solution-object-project-spotlight — 58/42 split, var(--ark-radius-md),
 * content vertically centered in one continuous panel). Secondary moves
 * closer to /services/'s case-study language
 * (assets/css/single-service.css .service-projects__card — full-bleed
 * photo, near-zero radius, no separate solid body fill, gradient-anchored
 * caption) — achieved entirely with project-card.php's existing markup:
 * .project-card__media is stretched to fill the whole card via
 * position:absolute, a ::after pseudo-element on it reproduces
 * .service-projects__card-overlay's exact gradient (no new DOM node), and
 * .project-card__body (already holding index/title/systems/CTA via the
 * existing caption_in_body=true call) is repositioned to sit on top of it
 * at the bottom, background-less — no shared component changes.
 * ------------------------------------------------------------------- */

.projects-archive {
	scroll-margin-top: 96px;
}

/* Compact editorial section heading above the listing — same overline +
   H2 pattern every other section on the site defines locally (e.g.
   .projects__overline/.projects__title in projects.css, not enqueued
   here), just scoped to this archive. */
.projects-archive__heading {
	margin-bottom: 28px;
}

.projects-archive__heading-eyebrow {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--ark-text-secondary);
	margin: 0 0 10px;
}

.projects-archive__heading-title {
	font-size: var(--ark-fs-h2);
	font-weight: 600;
	line-height: 1.15;
	color: var(--ark-text-primary);
	margin: 0;
}

.projects-archive__featured {
	margin-bottom: 24px;
}

/* Featured — /solutions/ project-spotlight language: one continuous
   rounded panel (var(--ark-radius-md), the same token that spotlight
   uses), not the previous var(--ark-radius-lg)/forced min-height that
   read as an oversized, half-empty UI card. */
.projects-archive__featured .project-card {
	display: flex;
	flex-direction: column;
	background: var(--ark-surface-700);
	border: 1px solid var(--ark-border-soft);
	border-radius: var(--ark-radius-md);
	overflow: hidden;
	transition: border-color 200ms var(--ark-ease);
}

.projects-archive__featured .project-card:hover {
	border-color: var(--ark-border-medium);
}

.projects-archive__featured .project-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--ark-bg-850);
}

.projects-archive__featured .project-card__media-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
}

.projects-archive__featured .project-card__body {
	display: flex;
	flex-direction: column;
	padding: 28px 32px;
}

.projects-archive__secondary {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

/* Secondary — /services/ case-study language (.service-projects__card):
   the photo is the whole card surface (no separate solid body fill,
   near-zero radius), sized with the exact same height formula as
   .service-projects__card-media so this reuses that recipe rather than
   approximating it. .project-card__media fills the card via
   position:absolute (no aspect-ratio); a ::after reproduces
   .service-projects__card-overlay's exact gradient as a pseudo-element
   (no new markup); .project-card__body (already rendering index/title/
   systems/CTA via caption_in_body=true) is pinned to the bottom over it,
   painting above the media by normal DOM order (body follows media in
   project-card.php's markup) — z-index is set explicitly anyway so that
   ordering is never load-bearing here, unlike the original caption bug. */
.projects-archive__secondary .project-card {
	position: relative;
	height: clamp(320px, 28vw, 440px);
	border: 1px solid var(--ark-border-soft);
	border-radius: 2px;
	overflow: hidden;
	background: transparent;
	transition: border-color 200ms var(--ark-ease);
}

.projects-archive__secondary .project-card:hover {
	border-color: var(--ark-border-medium);
}

.projects-archive__secondary .project-card__media {
	position: absolute;
	inset: 0;
	background-color: var(--ark-bg-850);
}

.projects-archive__secondary .project-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to top, rgba(4, 9, 14, 0.94) 0%, rgba(5, 10, 16, 0.72) 40%, rgba(6, 12, 18, 0.22) 70%, rgba(6, 12, 18, 0.06) 100%);
}

.projects-archive__secondary .project-card__media-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.projects-archive__secondary .project-card__body {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: 20px 22px 22px;
}

/* Index label + caption-in-body typography — shared by featured/secondary. */

.projects-archive .project-card__index {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--ark-border-titanium);
	margin: 0 0 10px;
}

.projects-archive .project-card__title {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--ark-text-primary);
	margin: 0 0 6px;
}

.projects-archive__featured .project-card__title {
	font-size: 1.9rem;
}

.projects-archive .project-card__systems {
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--ark-text-secondary);
	margin: 10px 0 18px;
}

.projects-archive .project-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--ark-text-primary);
}

.projects-archive__featured .project-card__cta {
	margin-top: auto;
}

.projects-archive .project-card__cta-arrow {
	color: var(--ark-border-titanium);
	transition: transform 200ms var(--ark-ease);
}

.projects-archive .project-card:hover .project-card__cta-arrow {
	transform: translateX(4px);
}

/* Desktop (>=1025px, matching this file's other archive breakpoints):
   featured as a horizontal editorial split, image ~62% / content ~38%,
   matching /solutions/'s spotlight ratio. min-height is a responsive
   clamp (not a fixed px) so Hotel stays the section's clear visual anchor
   at every desktop width — at 1440 it resolves near the top of the
   range, comfortably taller than each individual secondary card's own
   clamp(320px, 28vw, 440px); at 1280 it settles on the 420px floor,
   still taller than secondary there too. .project-card__body's content is
   top-grouped (index/title/systems in natural flow) with the CTA pinned
   to the bottom via margin-top:auto on .project-card__cta below — not
   centered, so the panel's own whitespace reads as an intentional
   editorial gap above the CTA, not a leftover empty box. */
@media (min-width: 1025px) {
	.projects-archive__featured .project-card {
		flex-direction: row;
		align-items: stretch;
		min-height: clamp(420px, 32vw, 460px);
	}

	.projects-archive__featured .project-card__media {
		flex: 0 0 62%;
		aspect-ratio: auto;
	}

	.projects-archive__featured .project-card__body {
		flex: 1 1 38%;
		justify-content: flex-start;
	}
}

/* Tablet/mobile (<=1024px): featured stacks — image on top, content below,
   natural height, no forced split. Secondary collapses to one column;
   its fixed clamp() height (set above, not viewport-gated) still applies
   so the photo-led card keeps a real presence at every width. */
@media (max-width: 1024px) {
	.projects-archive__secondary {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.projects-archive .project-card,
	.projects-archive .project-card__cta-arrow {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
 * Solutions archive cards — one consistent media ratio + card rhythm.
 * ------------------------------------------------------------------- */

.internal-archive__grid--solutions .solution-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ark-surface-700);
	border: 1px solid var(--ark-border-soft);
	border-radius: var(--ark-radius-lg);
	overflow: hidden;
	transition: transform 200ms var(--ark-ease), border-color 200ms var(--ark-ease);
}

.internal-archive__grid--solutions .solution-card:hover {
	transform: translateY(-3px);
	border-color: var(--ark-border-medium);
}

.internal-archive__grid--solutions .solution-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	flex-grow: 0;
	overflow: hidden;
	background-color: var(--ark-bg-850);
}

.internal-archive__grid--solutions .solution-card__media-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--solution-image-position, 50% 50%);
}

.internal-archive__grid--solutions .solution-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 20px 22px 22px;
}

.internal-archive__grid--solutions .solution-card__systems {
	flex-grow: 1;
}

.internal-archive__grid--solutions .solution-card__cta {
	margin-top: auto;
}

/* Shared neutral technical fallback (Projects + Solutions), same box. */
.projects-archive .project-card__media[data-has-image="false"],
.internal-archive__grid--solutions .solution-card__media[data-has-image="false"] {
	background-image:
		linear-gradient(155deg, var(--ark-bg-850) 0%, var(--ark-bg-950) 60%, #0F1D27 100%),
		repeating-linear-gradient(0deg, rgba(166, 176, 186, 0.06) 0 1px, transparent 1px 32px),
		repeating-linear-gradient(90deg, rgba(166, 176, 186, 0.06) 0 1px, transparent 1px 32px);
}

/* ---------------------------------------------------------------------
 * Generic content / single body
 * ------------------------------------------------------------------- */

.internal-content {
	padding-top: var(--ark-space-section-sm);
	padding-bottom: var(--ark-space-section-md);
}

.internal-content__body {
	max-width: 72ch;
	color: var(--ark-text-secondary);
	font-size: 1.05rem;
	line-height: 1.7;
}

.internal-content__body h2,
.internal-content__body h3 {
	margin-top: 1.2em;
}

.internal-content__body h2 {
	font-size: 1.4rem;
}

.internal-content__body h3 {
	font-size: 1.15rem;
}

.internal-content__body strong {
	color: var(--ark-text-primary);
}

.internal-content__body ul,
.internal-content__body ol {
	margin: 0 0 1em;
	padding-left: 1.4em;
	color: var(--ark-text-secondary);
}

.internal-content__body ul {
	list-style: disc;
}

.internal-content__body ol {
	list-style: decimal;
}

.internal-content__body li {
	margin-bottom: 0.4em;
}

.internal-content__body a {
	color: var(--ark-text-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--ark-border-titanium);
}

.internal-content__body a:hover {
	text-decoration-color: currentColor;
}

.internal-content__body table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 0 0 1.4em;
	font-size: 0.95rem;
}

.internal-content__body th,
.internal-content__body td {
	border: 1px solid var(--ark-border-soft);
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
}

.internal-content__body th {
	color: var(--ark-text-primary);
	font-weight: 600;
}

.internal-content__body,
.internal-content__body td,
.internal-content__body th {
	overflow-wrap: anywhere;
}

/* Legal document — revision-date meta line + /company-details/ requisites
   list. Scoped narrowly (legal-document__*) so nothing here affects the
   generic page.php content this stylesheet also serves. */
.legal-document__meta {
	margin: 0 0 1.6em;
	padding-bottom: 1.2em;
	border-bottom: 1px solid var(--ark-border-soft);
	color: var(--ark-text-secondary);
	font-size: 0.9rem;
}

.legal-document__details {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(160px, 220px) 1fr;
	gap: 10px 20px;
}

.legal-document__details dt {
	margin: 0;
	color: var(--ark-text-secondary);
	font-weight: 500;
}

.legal-document__details dd {
	margin: 0;
	color: var(--ark-text-primary);
}

@media (max-width: 480px) {
	.legal-document__details {
		grid-template-columns: 1fr;
		gap: 4px 0;
	}

	.legal-document__details dd {
		margin-bottom: 0.6em;
	}
}

.internal-single-media {
	margin-top: var(--ark-space-section-sm);
	margin-bottom: 24px;
	aspect-ratio: 16 / 9;
	border-radius: var(--ark-radius-lg);
	overflow: hidden;
}

.internal-single-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--ark-radius-lg);
}

.internal-single-systems {
	color: var(--ark-text-muted);
	font-size: var(--ark-fs-meta);
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * Compact conversion CTA
 * ------------------------------------------------------------------- */

.internal-cta {
	padding-block: var(--ark-space-section-sm);
	background: var(--ark-surface-700);
	border-top: 1px solid var(--ark-border-soft);
}

.internal-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.internal-cta__title {
	font-size: var(--ark-fs-h3);
	margin-bottom: 0.3em;
}

.internal-cta__text {
	max-width: 52ch;
	margin-bottom: 0;
}

.internal-cta__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------------
 * 404 — deliberate, large, still restrained (architectural, not cartoon).
 * ------------------------------------------------------------------- */

.error-404-hero {
	padding-block: clamp(64px, 12vh, 140px);
	background: var(--ark-bg-950);
	text-align: center;
}

.error-404-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 640px;
}

.error-404-hero__eyebrow {
	margin: 0 0 8px;
	font-size: var(--ark-fs-meta);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ark-text-muted);
}

.error-404-hero__code {
	font-family: var(--ark-font-display);
	font-size: clamp(6rem, 5rem + 8vw, 14rem);
	font-weight: 600;
	line-height: 0.9;
	margin: 0 0 8px;
	background: linear-gradient(180deg, var(--ark-text-primary) 0%, var(--ark-text-muted) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.error-404-hero__title {
	font-size: var(--ark-fs-h2);
	margin-bottom: 0.4em;
}

.error-404-hero__text {
	max-width: 48ch;
	font-size: 1.05rem;
	margin-bottom: 28px;
}

.error-404-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.error-404-hero__secondary {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--ark-text-secondary);
	border-bottom: 1px solid transparent;
	transition: color 150ms var(--ark-ease), border-color 150ms var(--ark-ease);
}

.error-404-hero__secondary:hover,
.error-404-hero__secondary:focus-visible {
	color: var(--ark-text-primary);
	border-color: var(--ark-border-titanium);
}

/* ---------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.internal-archive__grid,
	.internal-archive__grid--projects {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Tablet container width leaves too little room for both the copy and a
	   440px form side-by-side — stack rather than force narrow columns. */
	.internal-hero--split .internal-hero__row {
		flex-direction: column;
	}

	.internal-hero--split .internal-hero__col-form {
		width: 100%;
	}
}

@media (max-width: 768px) {
	.internal-archive__grid,
	.internal-archive__grid--projects,
	.internal-archive__grid--solutions {
		grid-template-columns: 1fr;
	}

	.internal-cta__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.internal-hero--split .internal-hero__col-form {
		max-width: 540px;
		margin: 0 auto;
	}
}

@media (max-width: 480px) {
	/* Compact 2+1 wrap instead of 3 cramped columns at phone widths. */
	.internal-hero__proof {
		row-gap: 10px;
	}

	.internal-hero__proof-item {
		padding-right: 14px;
		margin-right: 14px;
	}

	.internal-hero__proof-value {
		font-size: 0.92rem;
	}

	.internal-hero__proof-label {
		font-size: 0.74rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.internal-archive__grid--projects .project-card,
	.internal-archive__grid--solutions .solution-card {
		transition: none;
	}
}