/* ------------------------------------------------------------------ EXPERIENCE-002: «مسار الهواء» on the inner pages */
/*
 * The same language as the home page without its signature: no drawn line or rail here (the header's
 * reading line is the one thread). What carries over: the cut corner, the fine ruled lines, the ruler
 * under page heads, one dark closing into the footer. Each page type keeps its own composition.
 * Motion: the short hover sweep and the small reveal only (CSS scroll timeline; everything is visible
 * without it, and focus completes a block at once). States (empty, error, success) share one panel.
 */
:root { --cut: 56px; --sweep: linear-gradient(var(--accent), var(--accent)) right top / 0 2px no-repeat; }
@media (min-width: 768px) { :root { --cut: 88px; } }

/* A ruler under a page head: fine ticks, decoration only. */
.works-a-head, .catalog-a-head, .project-a-head { background: var(--surface); }
.works-a-head, .catalog-a-head, .project-a-head, .request-a .page-head, .intro-a { position: relative; }
.works-a-head::after, .catalog-a-head::after, .project-a-head::after, .intro-a::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 6px; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(26, 19, 110, .22) 0 1px, transparent 1px 48px); }
.works-a-head, .catalog-a-head { padding-block-end: 40px; margin-block-end: 40px; }
.project-a-head { padding-block-end: 40px; margin-block-end: 40px; }
.project-a-head h1, .works-a-head h1, .catalog-a-head h1, .request-a .page-head h1 { text-wrap: balance; }

/* Service intros. The projects page, the first path, is navy; the homes page stays light and calm. */
.intro-a-figure { padding: 0; overflow: hidden; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.intro-a-figure::before { content: none; }
.intro-a-panel { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.intro-a h1 { text-wrap: balance; }

/* Rows and cards: a thin line sweeps along the top on hover or focus (a response, not decoration). */
.row-item, .need-grid-a li, .device-card, .project-card.is-text { background-image: var(--sweep); }
.need-grid-a li { background-color: var(--white); }
.project-card.is-text { background-color: var(--surface); }
.row-item, .need-grid-a li, .device-card, .project-card.is-text { transition: background-size var(--t-med) var(--ease-out), border-color var(--t-fast) linear; }
.row-item:hover, .need-grid-a li:hover, .device-card:hover, .device-card:focus-within, .project-card.is-text:hover, .project-card.is-text:focus-within { background-size: 100% 2px; }

/* One dark closing, on every page that has one: the band runs into the footer. */
.project-a-ask { background: var(--primary); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); padding-inline-start: calc(32px + var(--cut) / 2); } /* The cut corner is on the reading side: the heading stays clear of it. */
.project-brief .project-a-ask { margin-top: 32px; }

/* Project and device details: sticky parts clear the header. */
@media (min-width: 960px) { .project-facts-a { top: calc(var(--header-h) + 24px); } }
.project-cover { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.gallery a { transition: opacity var(--t-fast) linear; }
.gallery a:hover { opacity: .9; }
.back-link::before { content: "→"; font-family: var(--font-en); margin-inline-end: 8px; display: inline-block; transition: transform var(--t-fast) var(--ease-out); }
.back-link:hover::before { transform: translateX(4px); }

/* Devices: without an image a short band with the mark, not a big empty frame; a real image keeps its frame. */
.device-grid { gap: 20px; }
.device-card { border-radius: 0; border-color: var(--border); }
.device-card .card-title a { color: var(--primary); text-decoration: none; }
.device-card .card-title a:hover { text-decoration: underline; }
.device-card:hover { border-color: var(--input); }
/* CATALOG-IMAGES-001: one frame for every device: the whole product on white, or the mark in the same frame. */
.device-card .card-media { background: var(--white); border-block-end: 1px solid var(--border); overflow: hidden; }
.device-card .card-media img { object-fit: contain; }
.device-card .card-media.is-empty { background: var(--surface); }
.device-card .card-media.is-empty .device-placeholder::before { inset: 30%; opacity: .14; }
.device-a-media:not(.is-empty) { background: var(--white); border: 1px solid var(--border); }
.device-card .card-body { padding: 20px 20px 24px; }
.device-card .card-actions { justify-content: space-between; }
.device-a-media.is-empty { aspect-ratio: 16 / 9; overflow: hidden; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
@media (max-width: 959px) { .device-a-media.is-empty { aspect-ratio: auto; height: 72px; clip-path: none; } .device-a-media.is-empty .device-placeholder::before { inset: 14px auto 14px 20px; width: 44px; opacity: .14; } }
.device-a-ask { padding: 24px; border: 1px solid var(--border); border-block-start: 3px solid var(--primary); }
.catalog-bar { border-block: 0; padding-block: 0; margin-block-end: 32px; }
.catalog-a .catalog-filters { padding: 20px; background: var(--white); border: 1px solid var(--border); border-block-start: 3px solid var(--primary); }

/* Request: the form's parts respond; sticky summary clears the header; an outcome arrives with a short rise. */
.choice, .check { transition: border-color var(--t-fast) linear, background-color var(--t-fast) linear; }
.choice:hover, .check:hover { border-color: var(--input); }
.request-a .page-head { padding-block-end: 8px; }
@media (min-width: 1024px) { .request-a .request-form > .request-summary { top: calc(var(--header-h) + 16px); } }
.request-a .request-form { clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
.request-a .form-result:not([hidden]), .request-a .form-errors:not([hidden]) { animation: state-in var(--t-med) var(--ease-out); }
@keyframes state-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.file-input { scroll-margin-block-end: 140px; } /* Keyboard focus lands on this hidden input; its button below must come into view with it. */

/* Empty states and the not-found page: one panel with the primary rule. */
.empty-state, .catalog-empty { background: var(--white); border: 1px solid var(--border); border-block-start: 3px solid var(--primary); border-radius: 0; }
.works-empty { border-inline-start: 1px solid var(--border); }
.not-found-panel { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }

/* The small reveal: inner pages only pace the first arrival of rows and cards. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.row-item, .need-grid-a li, .device-card, .works-grid .project-card, .dark-list > div, .faq > div, .project-a-grid > *, .specs-a { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
		.row-item:focus-within, .need-grid-a li:focus-within, .device-card:focus-within, .works-grid .project-card:focus-within, .dark-list > div:focus-within, .faq > div:focus-within, .project-a-grid > *:focus-within, .specs-a:focus-within { animation: none; }
	}
}
@media (prefers-reduced-motion: reduce) {
	.row-item, .need-grid-a li, .device-card, .project-card, .card-more::after, .choice, .check, .gallery a, .back-link::before, .request-a .form-result, .request-a .form-errors { transition: none !important; animation: none !important; }
}