/*
 * Design System - AELITA
 * components/antigravel-film-page.css - anti-gravel film service page
 * (wpb-single-post-plenka.php).
 *
 * Composition follows the Stitch screen "folie" (Сервіс: Антигравійна плівка на
 * автомобіль), expressed with the AELITA brand tokens: MyriadSetPro, one red
 * accent (--c-red-600), sharp corners (--radius: 0), flat surfaces and
 * restrained motion. Everything is scoped under .a-film, so no other page is
 * affected. Consumes tokens.css + layout.css only: no raw hex, no `transition:
 * all`, hover effects gated behind (hover: hover) and (pointer: fine).
 * Loaded only on the anti-gravel film page (see inc/enqueue.php; .a-button is
 * enqueued alongside it).
 */

/* -------------------------------------------------------------------- */
/* Page shell                                                           */
/* -------------------------------------------------------------------- */
.a-film {
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	overflow-x: clip;
}

.a-film__section {
	padding-block: var(--section-space);
}

.a-film__section--muted {
	background-color: var(--bg-muted);
}

.a-film__section--invert {
	background-color: var(--bg-invert);
	color: var(--c-ink-100);
}

/* Keep anchored sections clear of the sticky header + breadcrumb bar. */
.a-film .a-film__section[id] {
	scroll-margin-top: 120px;
}

/* -------------------------------------------------------------------- */
/* Section heading                                                      */
/* -------------------------------------------------------------------- */
.a-film__head {
	margin-bottom: var(--space-6);
}

.a-film__title {
	position: relative;
	margin: 0 0 var(--space-5);
	padding-top: var(--space-4);
	font-family: var(--font-display-strong);
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	text-transform: uppercase;
	color: var(--text-primary);
}

/* Decorative red marker replaces the Stitch eyebrow label (no new copy). */
.a-film__title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 3px;
	background-color: var(--c-red-600);
}

.a-film__title--on-dark {
	color: var(--c-white);
}

.a-film__care .a-film__title,
.a-film__why .a-film__title {
	margin-bottom: var(--space-6);
}

/* -------------------------------------------------------------------- */
/* Hero                                                                 */
/* -------------------------------------------------------------------- */
.a-film__hero {
	position: relative;
	overflow: hidden;
	background-color: var(--c-ink-900);
	color: var(--c-white);
}

.a-film__hero-img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	opacity: 0.3;
}

/* Legibility scrim over the photo (flat navy, like the reference). */
.a-film__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		90deg,
		rgba(22, 22, 24, 0.97) 0%,
		rgba(22, 22, 24, 0.9) 45%,
		rgba(22, 22, 24, 0.64) 100%
	);
}

.a-film__hero-inner {
	position: relative;
	z-index: 1;
	padding-block: var(--space-8) var(--space-7);
}

.a-film__hero-content {
	max-width: 760px;
}

.a-film__hero-title {
	margin: 0 0 var(--space-5);
	font-family: var(--font-display-strong);
	font-size: var(--fs-display);
	font-weight: var(--fw-bold);
	line-height: var(--lh-display);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--c-white);
}

/* -------------------------------------------------------------------- */
/* Packages                                                             */
/* -------------------------------------------------------------------- */
.a-film__package-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	align-items: stretch;
}

.a-film__package {
	display: flex;
	flex-direction: column;
	border: var(--border-w) solid var(--border);
	background-color: var(--bg);
	transition:
		border-color var(--dur-popover) var(--ease-out),
		box-shadow var(--dur-popover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.a-film__package:hover {
		border-color: var(--c-ink-300);
		box-shadow: var(--shadow-overlay);
	}
}

.a-film__package-title {
	margin: 0;
	padding: var(--space-5) var(--space-5) var(--space-4);
	font-family: var(--font-display-strong);
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--text-primary);
}

.a-film__package-media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 500 / 235;
	margin: 0 var(--space-5);
	overflow: hidden;
	border: var(--border-w) solid var(--border);
	background-color: var(--bg-muted);
}

.a-film__package-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.a-film__package-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5) var(--space-5);
}

.a-film__package-desc {
	margin: 0;
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	color: var(--text-secondary);
}

.a-film__package-price {
	margin: 0;
	font-family: var(--font-display-strong);
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	color: var(--c-red-600);
}

.a-film__package-time {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: auto 0 0;
	padding-top: var(--space-2);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
}

.a-film__icon {
	flex: 0 0 auto;
	color: var(--c-red-600);
}

.a-film__package-foot {
	padding: 0 var(--space-5) var(--space-5);
}

.a-film__package-cta {
	width: 100%;
}

/* -------------------------------------------------------------------- */
/* Why + layers                                                         */
/* -------------------------------------------------------------------- */
.a-film__why-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: start;
}

.a-film__why-main {
	min-width: 0;
}

/* Dark "4 layers" panel. */
.a-film__layers {
	padding: var(--space-5);
	background-color: var(--bg-invert);
	color: var(--c-ink-100);
}

.a-film__layers-lead {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	color: var(--c-white);
}

.a-film__layers-list {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.a-film__layer {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-4);
	border: var(--border-w) solid rgba(255, 255, 255, 0.1);
	background-color: rgba(255, 255, 255, 0.05);
	transition: border-color var(--dur-popover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.a-film__layer:hover {
		border-color: rgba(203, 0, 44, 0.6);
	}
}

.a-film__layer-num {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background-color: rgba(203, 0, 44, 0.18);
	color: var(--c-red-500);
	font-family: var(--font-display);
	font-size: var(--fs-caption);
	font-weight: var(--fw-bold);
}

.a-film__layer:last-child .a-film__layer-num {
	background-color: var(--c-red-600);
	color: var(--c-white);
}

.a-film__layer-text {
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	color: var(--c-ink-100);
}

/* -------------------------------------------------------------------- */
/* Care rules                                                           */
/* -------------------------------------------------------------------- */
.a-film__care-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

.a-film__care-card {
	position: relative;
	padding: var(--space-5);
	border-top: 3px solid var(--c-red-600);
	background-color: var(--bg);
	box-shadow: 0 1px 0 rgba(22, 22, 24, 0.04);
}

.a-film__care-text {
	margin: 0;
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	color: var(--text-secondary);
}

.a-film__care-note {
	margin-top: var(--space-5);
	padding: var(--space-4) var(--space-5);
	border: var(--border-w) solid var(--border);
	background-color: var(--bg);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	color: var(--text-secondary);
}

.a-film__care-note p {
	margin: 0;
}

/* -------------------------------------------------------------------- */
/* Booking                                                              */
/* -------------------------------------------------------------------- */
.a-film__booking-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: start;
}

.a-film__booking-intro {
	min-width: 0;
}

.a-film__booking-panel {
	padding: var(--space-6);
	background-color: var(--bg);
	color: var(--text-primary);
}

.a-film__booking-panel-title {
	margin: 0 0 var(--space-5);
	font-family: var(--font-display-strong);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	text-transform: uppercase;
	color: var(--text-primary);
}

.a-film__form {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

.a-film__field {
	display: grid;
	gap: var(--space-2);
	min-width: 0;
}

.a-film__field-label {
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

.a-film__input {
	width: 100%;
	min-height: calc(var(--space-6) + var(--space-3));
	padding: var(--space-3) var(--space-4);
	border: var(--border-w) solid var(--border);
	border-radius: var(--radius);
	background-color: var(--bg-muted);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-heading);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--dur-press) var(--ease-out);
}

.a-film__input:focus {
	border-color: var(--c-red-600);
	outline: none;
}

.a-film__submit-row {
	margin-top: var(--space-2);
}

.a-film__submit {
	width: 100%;
}

.a-film__form-status:not(:empty) {
	margin-top: var(--space-4);
	padding-left: var(--space-3);
	border-left: 3px solid var(--c-ink-500);
	font-size: var(--fs-small);
	color: var(--text-primary);
}

/* The existing AJAX success/error markup (feedback-form__text + red note). */
.a-film__form-status .feedback-form__text {
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

.a-film__form-status img {
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------- */
/* Rich text (existing post content only)                               */
/* -------------------------------------------------------------------- */
.a-film__prose {
	width: 100%;
	color: var(--text-primary);
}

.a-film__prose > :first-child {
	margin-top: 0;
}

.a-film__prose p {
	margin: 0 0 var(--space-4);
}

.a-film__prose p:last-child {
	margin-bottom: 0;
}

.a-film__prose :where(h2, h3) {
	margin: 0 0 var(--space-5);
	padding-top: var(--space-4);
	font-family: var(--font-display-strong);
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	text-transform: uppercase;
	color: var(--text-primary);
}

.a-film__prose h2::before {
	content: "";
	display: block;
	width: 32px;
	height: 3px;
	margin-bottom: var(--space-4);
	background-color: var(--c-red-600);
}

.a-film__prose :where(h2, h3):first-child {
	margin-top: 0;
}

.a-film__prose ul,
.a-film__prose ol {
	margin: 0 0 var(--space-4);
	padding-left: var(--space-6);
	list-style-position: outside;
}

.a-film__prose ul {
	list-style-type: disc;
}

.a-film__prose ol {
	list-style-type: decimal;
}

.a-film__prose li {
	margin-bottom: var(--space-2);
}

.a-film__prose li:last-child {
	margin-bottom: 0;
}

.a-film__prose li::marker {
	color: var(--c-ink-500);
	font-weight: var(--fw-semibold);
}

.a-film__prose strong {
	color: var(--text-primary);
	font-weight: var(--fw-bold);
}

.a-film__prose a {
	color: var(--c-red-600);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.a-film__prose img {
	max-width: 100%;
	height: auto;
}

.a-film__prose--on-dark {
	color: var(--c-ink-100);
}

.a-film__prose--on-dark p {
	color: var(--c-ink-100);
}

.a-film__advantages-body {
	max-width: 900px;
}

/* -------------------------------------------------------------------- */
/* Breakpoints                                                          */
/* -------------------------------------------------------------------- */
@media (min-width: 576px) {
	.a-film__form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.a-film__field--full {
		grid-column: 1 / -1;
	}

	.a-film__hero-inner {
		padding-block: var(--space-9) var(--space-8);
	}
}

@media (min-width: 768px) {
	.a-film__package-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.a-film__care-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.a-film__hero-inner {
		display: flex;
		align-items: center;
		min-height: 420px;
	}

	.a-film__why-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
	}

	.a-film__booking-grid {
		grid-template-columns: 5fr 7fr;
		gap: var(--space-8);
		align-items: center;
	}
}

@media (min-width: 1200px) {
	.a-film__package-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------- */
/* Reduced motion                                                       */
/* -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.a-film__package,
	.a-film__layer,
	.a-film__input {
		transition: none;
	}
}