/*
 * "Решение для типа объекта" — reusable base template for the 9 planned
 * industry pages (page-solution-object.php). Only loaded via
 * is_page_template('page-solution-object.php') (inc/enqueue.php) — never
 * on /, /services/, /solutions/, /projects/, /contacts/.
 *
 * Deliberately self-contained: reuses global tokens (tokens.css/base.css,
 * always loaded) only, no dependency on assets/css/solutions.css (which
 * this template's pages never load).
 */

/* ---------------------------------------------------------------------
 * Hero photo crop — hotel Hero only. Scoped to
 * .internal-hero--object-hotel (page-solution-object.php's per-object-type
 * extra_class), never to the shared .internal-hero--solution-object rule,
 * so /solutions/ and /services/ are untouched. Reuses the existing dark
 * .internal-hero--media overlay as-is (internal-pages.css) — no new
 * filter/color/blur. Dedicated shot (see "Hotel Hero replaced" in
 * docs/STATE.md) — no transform: scale(), same pattern as the other
 * eight object pages.
 * ------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.internal-hero--object-hotel .internal-hero__media-image {
		object-position: 60% 55%;
	}
}

@media (max-width: 1024px) {
	.internal-hero--object-hotel .internal-hero__media-image {
		object-position: 55% 65%;
	}
}

/* ---------------------------------------------------------------------
 * Hero photo crop — restaurant Hero only. Scoped to
 * .internal-hero--object-restaurant, never to the shared
 * .internal-hero--solution-object rule, so /solutions/, /services/ and
 * the hotel Hero above are untouched. Dedicated wide shot (1672x941,
 * ~16:9) — keeps the central island + chandelier band in view across
 * breakpoints; no transform: scale().
 * ------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.internal-hero--object-restaurant .internal-hero__media-image {
		object-position: 50% 45%;
	}
}

@media (max-width: 1024px) {
	.internal-hero--object-restaurant .internal-hero__media-image {
		object-position: 55% 55%;
	}
}

/* ---------------------------------------------------------------------
 * Hero photo crop — medical Hero only. Scoped to
 * .internal-hero--object-medical, never to the shared
 * .internal-hero--solution-object rule, so /solutions/, /services/ and the
 * hotel/restaurant Hero rules above are untouched. Single dataset value
 * (inc/acf-fields-solution-object.php, 'medical' hero.image_position) —
 * no separate breakpoint value exists, so it applies unchanged at every
 * width; no transform: scale().
 * ------------------------------------------------------------------- */

.internal-hero--object-medical .internal-hero__media-image {
	object-position: 50% 40%;
}

/* ---------------------------------------------------------------------
 * Hero photo crop — private-house Hero only. Scoped to
 * .internal-hero--object-private-house, never to the shared
 * .internal-hero--solution-object rule, so /solutions/, /services/ and
 * the hotel/restaurant/medical Hero rules above are untouched. Single
 * dataset value (inc/acf-fields-solution-object.php, 'private-house'
 * hero.image_position) — no separate breakpoint value exists, so it
 * applies unchanged at every width; no transform: scale().
 * ------------------------------------------------------------------- */

.internal-hero--object-private-house .internal-hero__media-image {
	object-position: 65% 55%;
}

/* ---------------------------------------------------------------------
 * Hero photo crop — business center Hero only. Scoped to
 * .internal-hero--object-business-center, never to the shared
 * .internal-hero--solution-object rule, so /solutions/, /services/ and
 * the hotel/restaurant/medical/private-house Hero rules above are
 * untouched. Dedicated shot (1672x941, 16:9) — building on the right,
 * dark free area on the left for the H1/form; no transform: scale().
 * ------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.internal-hero--object-business-center .internal-hero__media-image {
		object-position: 68% 45%;
	}
}

@media (max-width: 1024px) {
	.internal-hero--object-business-center .internal-hero__media-image {
		object-position: 55% 45%;
	}
}

/* ---------------------------------------------------------------------
 * Hero photo crop — apartment Hero only. Scoped to
 * .internal-hero--object-apartment, never to the shared
 * .internal-hero--solution-object rule, so /solutions/, /services/ and
 * the hotel/restaurant/medical/private-house/business-center Hero rules
 * above are untouched. Dedicated shot (1672x941, 16:9) — living room
 * interior on the right, dark free area on the left for the H1/form;
 * no transform: scale().
 * ------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.internal-hero--object-apartment .internal-hero__media-image {
		object-position: 65% 50%;
	}
}

@media (max-width: 1024px) {
	.internal-hero--object-apartment .internal-hero__media-image {
		object-position: 55% 50%;
	}
}

/* ---------------------------------------------------------------------
 * Hero photo crop — education Hero only (object_type_key 'other', Школы
 * и детские сады, /solutions/education/). Scoped to
 * .internal-hero--object-other, never to the shared
 * .internal-hero--solution-object rule, so /solutions/, /services/ and
 * the hotel/restaurant/medical/private-house/business-center/apartment
 * Hero rules above are untouched. Dedicated shot (1672x941, 16:9) —
 * building entrance on the right, dark free area on the left for the
 * H1/form; no transform: scale().
 * ------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.internal-hero--object-other .internal-hero__media-image {
		object-position: 65% 50%;
	}
}

@media (max-width: 1024px) {
	.internal-hero--object-other .internal-hero__media-image {
		object-position: 55% 50%;
	}
}

/* ---------------------------------------------------------------------
 * Hero photo crop — production Hero only (object_type_key 'production',
 * Производственные помещения, /solutions/production/). Scoped to
 * .internal-hero--object-production, never to the shared
 * .internal-hero--solution-object rule, so /solutions/, /services/ and
 * the hotel/restaurant/medical/private-house/business-center/apartment/
 * education Hero rules above are untouched. Dedicated shot (1672x941,
 * 16:9) — equipment/main volume on the right, dark free area on the
 * left for the H1/form; no transform: scale().
 * ------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.internal-hero--object-production .internal-hero__media-image {
		object-position: 65% 50%;
	}
}

@media (max-width: 1024px) {
	.internal-hero--object-production .internal-hero__media-image {
		object-position: 55% 50%;
	}
}

/* ---------------------------------------------------------------------
 * Hero photo crop — warehouse Hero only (object_type_key 'warehouse',
 * Склады и логистические комплексы, /solutions/warehouse/). Scoped to
 * .internal-hero--object-warehouse, never to the shared
 * .internal-hero--solution-object rule, so /solutions/, /services/ and
 * the hotel/restaurant/medical/private-house/business-center/apartment/
 * education/production Hero rules above are untouched. Dedicated shot
 * (1672x941, 16:9) — racking/main volume on the right, dark free area
 * on the left for the H1/form; no transform: scale().
 * ------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.internal-hero--object-warehouse .internal-hero__media-image {
		object-position: 65% 50%;
	}
}

@media (max-width: 1024px) {
	.internal-hero--object-warehouse .internal-hero__media-image {
		object-position: 55% 50%;
	}
}

.solution-object-local-nav {
	/* Framed panel (style(solution-object): frame quick navigation panel)
	   replaces the previous full-bleed strip — the section itself carries
	   no background/border anymore, just the vertical breathing room around
	   the panel below. Height stays close to the original ~25%-lighter
	   strip since the panel's own padding-block is the same 12px. */
	padding-block: 20px;
}

.solution-object-local-nav__inner {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 22px;
	padding: 12px 24px;
}

/* style(solution-object): widen quick nav frame without stretching
   content — background/border/radius live on this pseudo-element instead
   of directly on .solution-object-local-nav__inner, so the frame can
   extend past the content's own edges (inset-inline) while every real
   child (caption, links) keeps its exact padding/gap/position. isolate
   + z-index: -1 keep it behind the text within this element's own
   stacking context; pointer-events: none keeps it non-interactive. */
.solution-object-local-nav__inner::before {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline: -20px;
	background: var(--ark-surface-700);
	border: 1px solid var(--ark-border-titanium);
	border-radius: 18px;
	pointer-events: none;
	z-index: -1;
}

@media (max-width: 1023px) {
	.solution-object-local-nav__inner::before {
		inset-inline: -14px;
	}
}

.solution-object-local-nav__caption {
	margin: 0;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--ark-text-secondary);
	white-space: nowrap;
}

.solution-object-local-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.solution-object-local-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* Vertical padding trimmed along with the strip's own padding-block
	   above — min-height keeps the 44px tap target regardless. */
	padding: 4px 1px 6px;
	min-height: 44px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--ark-text-primary);
	border-bottom: 1px solid rgba(150, 170, 185, 0.14);
	cursor: pointer;
	transition: border-color 200ms var(--ark-ease), color 200ms var(--ark-ease);
}

.solution-object-local-nav__arrow {
	flex: 0 0 auto;
	color: var(--ark-border-titanium);
	/* Glyph is "→" (U+2192, covered by Manrope) rotated to read as a
	   down-right arrow — Manrope has no diagonal-arrow glyphs, and the
	   literal "↘" character fell back to loading the full Inter variable
	   font (~349KB) just to render one decorative arrow. */
	transform: rotate(45deg);
	transition: transform 200ms var(--ark-ease);
}

.solution-object-local-nav__link:hover,
.solution-object-local-nav__link:focus-visible {
	border-color: var(--ark-border-titanium);
}

.solution-object-local-nav__link:hover .solution-object-local-nav__arrow,
.solution-object-local-nav__link:focus-visible .solution-object-local-nav__arrow {
	transform: rotate(45deg) translate(2px, 2px);
}

.solution-object-local-nav__link:focus-visible {
	outline: 2px solid var(--ark-border-titanium);
	outline-offset: 2px;
}

@media (max-width: 679px) {
	.solution-object-local-nav__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 12px 16px;
	}

	.solution-object-local-nav__inner::before {
		/* Safe on mobile: stays flush with the content/container edges
		   instead of extending further, per spec — the 32px
		   --ark-container-pad gutter is the only margin from the
		   viewport edge here. */
		inset-inline: 0;
		border-radius: 14px;
	}

	.solution-object-local-nav__list {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.solution-object-local-nav__link,
	.solution-object-local-nav__arrow {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
 * Key Tasks — «Ключевые задачи». First real content section after Hero.
 * Deliberately light: no card fill/shadow, just a thin top border per
 * item — 6 short items read as a quiet reference list, not a stack of
 * boxes. Titanium Bronze restricted to the number accent only.
 * ------------------------------------------------------------------- */

.solution-object-key-tasks {
	padding-top: var(--ark-space-section-lg);
	/* ~30% less than the section-default bottom — Key Tasks and Zones
	   read as one connected pair of lists, not two separate full-height
	   screens. The reduction is local to this transition only; every
	   other section keeps the shared --ark-space-section-lg rhythm. */
	padding-bottom: clamp(44px, 3.5vw + 22px, 78px);
	background: var(--ark-bg-900);
}

.solution-object-key-tasks__header {
	margin-bottom: clamp(28px, 3vw, 40px);
}

.solution-object-key-tasks__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);
}

.solution-object-key-tasks__title {
	font-size: var(--ark-fs-h2);
	margin: 0 0 12px;
	max-width: 36ch;
	color: var(--ark-text-primary);
}

.solution-object-key-tasks__intro {
	max-width: 62ch;
	color: var(--ark-text-secondary);
	margin: 0;
}

.solution-object-key-tasks__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px 24px;
}

.solution-object-key-tasks__item {
	padding-top: 18px;
	border-top: 1px solid var(--ark-border-soft);
}

.solution-object-key-tasks__item-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.solution-object-key-tasks__number {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ark-border-titanium);
}

.solution-object-key-tasks__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--ark-text-secondary);
	flex: 0 0 auto;
}

.solution-object-key-tasks__icon svg {
	width: 100%;
	height: 100%;
}

.solution-object-key-tasks__item-title {
	margin: 0 0 6px;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ark-text-primary);
}

.solution-object-key-tasks__item-text {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--ark-text-secondary);
}

@media (max-width: 1099px) and (min-width: 680px) {
	.solution-object-key-tasks__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 679px) {
	.solution-object-key-tasks__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
 * Functional Zones — «Функциональные зоны». Desktop tablist + tablet/
 * mobile native <select> (both in the DOM, CSS toggles which is visible;
 * assets/js/solution-object-zones.js keeps them synced). One panel visible
 * at a time. Quiet surface, thin borders — no shadows/glow, no hover-lift.
 * ------------------------------------------------------------------- */

.solution-object-zones {
	/* Matches Key Tasks' reduced bottom padding above — together they cut
	   the visual gap between the two sections by roughly a third without
	   touching the section's own bottom rhythm before Engineering Systems. */
	padding-top: clamp(44px, 3.5vw + 22px, 78px);
	padding-bottom: var(--ark-space-section-lg);
	background: var(--ark-bg-800);
}

.solution-object-zones__header {
	margin-bottom: clamp(28px, 3vw, 40px);
}

.solution-object-zones__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);
}

.solution-object-zones__title {
	/* No ch-based max-width (was 36ch) — that forced an awkward wrap
	   isolating a single trailing word ("режим") even with plenty of
	   room in the container. Natural reflow against the section's own
	   .container width instead — single line at wide desktop, balanced
	   wraps as the viewport narrows, same as tablet/mobile already did. */
	font-size: var(--ark-fs-h2);
	margin: 0 0 12px;
	color: var(--ark-text-primary);
}

.solution-object-zones__intro {
	max-width: 62ch;
	color: var(--ark-text-secondary);
	margin: 0;
}

.solution-object-zones__control {
	margin-bottom: 24px;
}

.solution-object-zones__tablist {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	border-bottom: 1px solid var(--ark-border-soft);
}

.solution-object-zones__tab {
	padding: 10px 16px;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	font-family: var(--ark-font-sans);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--ark-text-secondary);
	cursor: pointer;
	transition: color 200ms var(--ark-ease), border-color 200ms var(--ark-ease);
}

.solution-object-zones__tab:hover {
	color: var(--ark-text-primary);
}

.solution-object-zones__tab.is-active {
	color: var(--ark-text-primary);
	border-bottom-color: var(--ark-border-titanium);
}

.solution-object-zones__tab:focus-visible {
	outline: 2px solid var(--ark-border-titanium);
	outline-offset: 2px;
}

.solution-object-zones__select-wrap {
	display: none;
}

.solution-object-zones__select {
	width: 100%;
	padding: 12px 14px;
	background: var(--ark-surface-650);
	border: 1px solid var(--ark-border-soft);
	border-radius: 8px;
	color: var(--ark-text-primary);
	font-family: var(--ark-font-sans);
	font-size: 0.95rem;
}

.solution-object-zones__select:focus-visible {
	outline: 2px solid var(--ark-border-titanium);
	outline-offset: 2px;
}

.solution-object-zones__panels {
	position: relative;
}

.solution-object-zones__panel {
	display: grid;
	gap: 24px;
	padding: 24px;
	background: var(--ark-surface-650);
	border: 1px solid var(--ark-border-soft);
	border-radius: 10px;
}

/* The class rule above's own `display: grid` otherwise overrides the UA
   stylesheet's default `[hidden] { display: none }` (same specificity,
   author origin wins) — every non-active panel stayed laid out as a grid
   despite its `hidden` attribute. Scoped to this component only, not a
   global [hidden] override. */
.solution-object-zones__panel[hidden] {
	display: none;
}

.solution-object-zones__panel--with-media {
	grid-template-columns: 34fr 43fr 23fr;
}

.solution-object-zones__panel--no-media {
	grid-template-columns: 65fr 35fr;
}

.solution-object-zones__panel-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 8px;
	background: var(--ark-surface-700);
}

.solution-object-zones__panel-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--zone-image-position, 50% 50%);
}

/* <picture> wrapper (theme-fallback WebP+PNG zones) — img keeps
   object-fit/object-position above unchanged, selector targets it by
   class regardless of wrapper. Same pattern as the category cards/Hero. */
.solution-object-zones__panel-picture {
	display: block;
	width: 100%;
	height: 100%;
}

.solution-object-zones__panel-title {
	margin: 0 0 14px;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ark-text-primary);
}

.solution-object-zones__panel-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.solution-object-zones__panel-list li {
	position: relative;
	padding-left: 16px;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--ark-text-secondary);
}

.solution-object-zones__panel-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 8px;
	height: 1px;
	background: rgb(166, 159, 147);
}

.solution-object-zones__panel-result {
	/* Stretches to the active panel's row height (the grid default —
	   was pinned to align-self:start, leaving it short at the top with
	   empty space below). flex-column keeps overline/title/list at the
	   top and pushes the CTA to the bottom via margin-top:auto on the
	   link, without growing taller than the row itself (never taller
	   than the photo, which still sets the row height via its own
	   aspect-ratio — unchanged here).
	   Background is a dedicated local shade — one step lighter than the
	   panel's own --ark-surface-650 — plus a thin Titanium Bronze accent
	   line, so the result reads as the page's payoff moment rather than
	   a technical caption blending into the panel. */
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 18px 18px 16px;
	background: #162936;
	border-left: 2px solid var(--ark-border-titanium);
	border-radius: 8px;
}

.solution-object-zones__result-overline {
	margin: 0 0 8px;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ark-border-titanium);
}

.solution-object-zones__result-title {
	margin: 0 0 10px;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ark-text-primary);
}

.solution-object-zones__result-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.solution-object-zones__result-list li {
	position: relative;
	padding-left: 16px;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--ark-text-secondary);
}

.solution-object-zones__result-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 8px;
	height: 1px;
	background: var(--ark-border-titanium);
}

.solution-object-zones__result-text {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--ark-text-secondary);
}

.solution-object-zones__result-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* Pinned to the bottom of the now flex-column, full-height result
	   card (see .solution-object-zones__panel-result) — stacks below the
	   list/text regardless of its length, never overlapping it. */
	margin-top: auto;
	padding-top: 12px;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--ark-text-primary);
	text-decoration: underline;
	text-decoration-color: var(--ark-border-titanium);
	text-underline-offset: 3px;
}

.solution-object-zones__result-link span {
	color: var(--ark-border-titanium);
}

@media (max-width: 1099px) {
	.solution-object-zones__tablist {
		display: none;
	}

	.solution-object-zones__select-wrap {
		display: block;
	}

	/* Result card becomes its own full-width row (tablet) or stacks below
	   solutions (mobile) below — stretched height only makes sense next
	   to the photo at desktop. */
	.solution-object-zones__panel-result {
		height: auto;
	}
}

@media (max-width: 1099px) and (min-width: 680px) {
	.solution-object-zones__panel--with-media {
		grid-template-columns: 1fr 1fr;
	}

	.solution-object-zones__panel--with-media .solution-object-zones__panel-result {
		grid-column: 1 / -1;
	}

	.solution-object-zones__panel--no-media {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 679px) {
	.solution-object-zones__panel--with-media,
	.solution-object-zones__panel--no-media {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.solution-object-zones__tab {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
 * Engineering Systems grid — «Объединяем ключевые инженерные системы».
 * Third content section. Same quiet, no-fill language as Key Tasks — thin
 * border per item, no shadows/glow, no hover-lift, no fixed height.
 * ------------------------------------------------------------------- */

.solution-object-systems-grid {
	padding-block: var(--ark-space-section-lg);
	background: var(--ark-bg-900);
}

.solution-object-systems-grid__header {
	margin-bottom: clamp(28px, 3vw, 40px);
}

.solution-object-systems-grid__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);
}

.solution-object-systems-grid__title {
	font-size: var(--ark-fs-h2);
	margin: 0 0 12px;
	max-width: 36ch;
	color: var(--ark-text-primary);
}

.solution-object-systems-grid__intro {
	max-width: 62ch;
	color: var(--ark-text-secondary);
	margin: 0;
}

.solution-object-systems-grid__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.solution-object-systems-grid__item {
	padding: 20px;
	background: var(--ark-surface-650);
	border: 1px solid var(--ark-border-soft);
	border-radius: 8px;
}

.solution-object-systems-grid__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-bottom: 14px;
	color: var(--ark-border-titanium);
}

.solution-object-systems-grid__icon svg {
	width: 100%;
	height: 100%;
}

.solution-object-systems-grid__item-title {
	margin: 0 0 12px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ark-text-primary);
}

.solution-object-systems-grid__item-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.solution-object-systems-grid__item-list li {
	position: relative;
	padding-left: 14px;
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--ark-text-secondary);
}

.solution-object-systems-grid__item-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 7px;
	height: 1px;
	background: rgb(166, 159, 147);
}

.solution-object-systems-grid__footer-note {
	margin: clamp(20px, 2.2vw, 28px) 0 0;
	max-width: 72ch;
	font-size: 0.88rem;
	color: var(--ark-text-secondary);
}

.solution-object-service-links {
	margin-top: clamp(16px, 1.8vw, 22px);
}

.solution-object-service-links__text {
	margin: 0;
	max-width: 72ch;
	font-size: 0.88rem;
	color: var(--ark-text-secondary);
}

.solution-object-service-links__link {
	color: var(--ark-border-titanium);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.solution-object-service-links__link:hover,
.solution-object-service-links__link:focus-visible {
	text-decoration-thickness: 2px;
}

@media (max-width: 1099px) and (min-width: 680px) {
	.solution-object-systems-grid__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 679px) {
	.solution-object-systems-grid__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
 * Complexities + Stages — «Сложности, которые решаем» / «Подключаемся на
 * любой стадии». Fourth content section. No outer card shell — two plain
 * columns of thin-divider rows, not 8 separate cards. Numbers/icons are
 * the only Titanium Bronze accent.
 * ------------------------------------------------------------------- */

.solution-object-complexities-stages {
	padding-block: var(--ark-space-section-lg);
	background: var(--ark-bg-800);
}

.solution-object-complexities-stages__header {
	margin-bottom: clamp(28px, 3vw, 40px);
}

.solution-object-complexities-stages__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);
}

.solution-object-complexities-stages__title {
	font-size: var(--ark-fs-h2);
	margin: 0 0 12px;
	max-width: 40ch;
	color: var(--ark-text-primary);
}

.solution-object-complexities-stages__intro {
	max-width: 62ch;
	color: var(--ark-text-secondary);
	margin: 0;
}

.solution-object-complexities-stages__columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 48px;
}

.solution-object-complexities-stages__column-title {
	margin: 0 0 8px;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--ark-text-primary);
}

.solution-object-complexities-stages__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.solution-object-complexities-stages__row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding-block: 16px;
	border-top: 1px solid var(--ark-border-soft);
}

.solution-object-complexities-stages__number {
	flex: 0 0 auto;
	min-width: 26px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ark-border-titanium);
}

.solution-object-complexities-stages__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var(--ark-border-titanium);
}

.solution-object-complexities-stages__icon svg {
	width: 100%;
	height: 100%;
}

.solution-object-complexities-stages__row-body {
	min-width: 0;
}

.solution-object-complexities-stages__row-title {
	margin: 0 0 4px;
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ark-text-primary);
}

.solution-object-complexities-stages__row-text {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--ark-text-secondary);
}

@media (max-width: 1099px) {
	.solution-object-complexities-stages__columns {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ---------------------------------------------------------------------
 * Budget + Results — «Что формирует бюджет инженерных систем» / «После
 * анализа вы получите». Fifth content section. Left: strict single-open
 * accordion (assets/js/solution-object-budget.js, independent of
 * assets/js/faq.js) — thin dividers, no card shell. Right: one slightly
 * more contrasty panel, calm checklist, note below a thin divider.
 * ------------------------------------------------------------------- */

.solution-object-budget-results {
	padding-block: var(--ark-space-section-lg);
	background: var(--ark-bg-900);
}

.solution-object-budget-results__header {
	margin-bottom: clamp(28px, 3vw, 40px);
}

.solution-object-budget-results__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);
}

.solution-object-budget-results__title {
	font-size: var(--ark-fs-h2);
	margin: 0 0 12px;
	max-width: 40ch;
	color: var(--ark-text-primary);
}

.solution-object-budget-results__intro {
	max-width: 62ch;
	color: var(--ark-text-secondary);
	margin: 0;
}

.solution-object-budget-results__columns {
	display: grid;
	grid-template-columns: 60fr 40fr;
	gap: 40px;
	/* stretch (grid's own default) so the right panel's row-item box
	   matches the taller accordion column's height — align-items:start
	   was the actual cause of the mismatch, capping the panel to its own
	   content height regardless of how tall the accordion got. */
	align-items: stretch;
}

.solution-object-budget-results__factors {
	border-bottom: 1px solid var(--ark-border-soft);
}

.solution-object-budget-results__factor {
	border-top: 1px solid var(--ark-border-soft);
}

.solution-object-budget-results__factor-heading {
	margin: 0;
}

.solution-object-budget-results__factor-trigger {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding-block: 18px;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: var(--ark-text-primary);
}

.solution-object-budget-results__factor-trigger:focus-visible {
	outline: 2px solid var(--ark-border-titanium);
	outline-offset: 4px;
}

.solution-object-budget-results__factor-number {
	flex: 0 0 auto;
	min-width: 26px;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--ark-text-muted);
	transition: color 200ms var(--ark-ease);
}

.solution-object-budget-results__factor[data-budget-open] .solution-object-budget-results__factor-number {
	color: var(--ark-border-titanium);
}

.solution-object-budget-results__factor-title {
	flex: 1 1 auto;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}

.solution-object-budget-results__factor-arrow {
	position: relative;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

.solution-object-budget-results__factor-arrow::before,
.solution-object-budget-results__factor-arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--ark-text-secondary);
	transform: translate(-50%, -50%);
	transition: transform 200ms var(--ark-ease), background 200ms var(--ark-ease);
}

.solution-object-budget-results__factor-arrow::before {
	width: 12px;
	height: 1px;
}

.solution-object-budget-results__factor-arrow::after {
	width: 1px;
	height: 12px;
}

.solution-object-budget-results__factor-trigger:hover .solution-object-budget-results__factor-arrow::before,
.solution-object-budget-results__factor-trigger:hover .solution-object-budget-results__factor-arrow::after,
.solution-object-budget-results__factor-trigger:focus-visible .solution-object-budget-results__factor-arrow::before,
.solution-object-budget-results__factor-trigger:focus-visible .solution-object-budget-results__factor-arrow::after {
	background: var(--ark-border-titanium);
}

.solution-object-budget-results__factor[data-budget-open] .solution-object-budget-results__factor-arrow::after {
	transform: translate(-50%, -50%) rotate(90deg) scale(0);
}

.solution-object-budget-results__factor[data-budget-open] .solution-object-budget-results__factor-arrow::before {
	background: var(--ark-border-titanium);
}

.solution-object-budget-results__factor-answer {
	padding-bottom: 20px;
}

.solution-object-budget-results__factor-answer[hidden] {
	display: none;
}

.solution-object-budget-results__factor-answer p {
	margin: 0;
	max-width: 62ch;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--ark-text-secondary);
}

.solution-object-budget-results__panel {
	/* Fills the grid row's stretched height (see .solution-object-
	   budget-results__columns above) — flex-column keeps the title and
	   checklist together at the top and pins the note to the bottom via
	   margin-top:auto, so the panel's own bottom edge tracks the taller
	   accordion column instead of floating short. */
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 28px;
	background: var(--ark-surface-650);
	border: 1px solid var(--ark-border-soft);
	border-radius: 10px;
}

.solution-object-budget-results__panel-title {
	margin: 0 0 16px;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ark-text-primary);
}

.solution-object-budget-results__checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.solution-object-budget-results__checklist li {
	position: relative;
	padding-left: 26px;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--ark-text-secondary);
}

.solution-object-budget-results__checklist li::before {
	content: "";
	position: absolute;
	left: 1px;
	top: 0.3em;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--ark-border-titanium);
	border-bottom: 2px solid var(--ark-border-titanium);
	transform: rotate(-45deg);
}

.solution-object-budget-results__note {
	/* Pinned to the panel's bottom edge (see .solution-object-budget-
	   results__panel's flex-column above) regardless of checklist
	   length — never stretches the gaps between list items instead. */
	margin-top: auto;
	padding-top: 16px;
	margin-bottom: 0;
	border-top: 1px solid var(--ark-border-soft);
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--ark-text-secondary);
}

@media (max-width: 1099px) {
	.solution-object-budget-results__columns {
		grid-template-columns: 1fr;
		gap: 32px;
		align-items: start;
	}

	.solution-object-budget-results__panel {
		height: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.solution-object-budget-results__factor-number,
	.solution-object-budget-results__factor-arrow::before,
	.solution-object-budget-results__factor-arrow::after {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
 * Project Spotlight — «Опыт ARK». Sixth content section. A single, much
 * larger editorial block — not the small project-card grid used on
 * /solutions/ and /projects/. No overlay/darkening on the photo, no
 * hover-transform on the whole section, exactly one CTA.
 * ------------------------------------------------------------------- */

.solution-object-project-spotlight {
	padding-block: var(--ark-space-section-lg);
	background: var(--ark-bg-800);
}

.solution-object-project-spotlight__inner {
	display: grid;
	grid-template-columns: 58fr 42fr;
	background: var(--ark-surface-650);
	border: 1px solid var(--ark-border-soft);
	border-radius: 10px;
	overflow: hidden;
}

.solution-object-project-spotlight__inner--no-media {
	grid-template-columns: 1fr;
}

.solution-object-project-spotlight__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--ark-surface-700);
}

.solution-object-project-spotlight__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.solution-object-project-spotlight__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 40px;
}

.solution-object-project-spotlight__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);
}

.solution-object-project-spotlight__title {
	margin: 0 0 14px;
	font-size: var(--ark-fs-h2);
	max-width: 30ch;
	color: var(--ark-text-primary);
}

.solution-object-project-spotlight__description {
	margin: 0 0 24px;
	max-width: 56ch;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ark-text-secondary);
}

.solution-object-project-spotlight__cta {
	align-self: flex-start;
}

@media (max-width: 1099px) {
	.solution-object-project-spotlight__inner {
		grid-template-columns: 1fr;
	}

	.solution-object-project-spotlight__media {
		aspect-ratio: 16 / 9;
	}

	.solution-object-project-spotlight__content {
		padding: 28px;
	}
}

@media (max-width: 679px) {
	.solution-object-project-spotlight__cta {
		align-self: stretch;
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}

/* ---------------------------------------------------------------------
 * Space before the Calculator section — reused shared component
 * (template-parts/solutions/calculator.php, assets/css/solutions-
 * calculator.css) also loaded on /solutions/, so the reduction is
 * scoped to this page's body class only, never touching the shared
 * .solutions-calculator rule itself. «Опыт ARK» ("крупный проект") above
 * keeps its own full --ark-space-section-lg bottom padding untouched —
 * only the calculator's top padding is trimmed, roughly a third less.
 * ------------------------------------------------------------------- */

body.page-template-page-solution-object .solutions-calculator {
	padding-top: clamp(44px, 3.5vw + 22px, 78px);
}

/* ---------------------------------------------------------------------
 * FAQ composition fix — reused shared component (template-parts/home/
 * faq.php, assets/css/faq.css) also loaded on the homepage, so every
 * change here is scoped to this page's body class only. Two issues on
 * the hotel FAQ's single-line title: the shared .faq__title's 420px
 * max-width (tuned for the homepage's short two-line title) forced an
 * awkward wrap that left a single trailing word on its own line, and
 * the 0.85fr/1fr column split left a wider empty gap between the intro
 * and the accordion than the 34–38% / 62–66% target here.
 * ------------------------------------------------------------------- */

body.page-template-page-solution-object .faq__inner {
	grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
	column-gap: clamp(40px, 4vw, 80px);
}

body.page-template-page-solution-object .faq__title {
	max-width: none;
	/* Balances the wrap across all available lines instead of leaving a
	   single short trailing word (e.g. "гостиницы") stranded alone —
	   the shared .faq__title has no wrap control of its own since the
	   homepage title is pre-split into fixed lines, not wrapped. */
	text-wrap: balance;
}

@media (max-width: 1024px) {
	body.page-template-page-solution-object .faq__inner {
		grid-template-columns: 1fr;
	}
}