/**
 * Service pages — page-access-control.php, page-commercial-cctv.php
 *
 * Reuses the home page design system (assets/css/home.css): the same tokens,
 * .wrap, .sec, .eyebrow, .btn, .blueprint, .radial-glow and FAQ accordion.
 * Only the content blocks unique to this page are defined here.
 */

/* ---------- Hero ----------
   The hero reuses .heroA from home-hero.css (shell, grid, quote card).
   Only the h1 is toned down: the home page headline is a short marketing
   statement, this one is a longer service-page title. */

.bp-home.bp-ac .heroA h1 {
	font-size: clamp(32px, 3.6vw, 48px);
}

.bp-home.bp-ac .heroA .sub {
	max-width: 620px;
}

/* ---------- Body copy ---------- */

.bp-home.bp-ac .sec-head p {
	line-height: 1.7;
}

.bp-home.bp-ac .sec-head p + p {
	margin-top: 14px;
}

.bp-home.bp-ac .sec-head a {
	color: var(--blue-600);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bp-home.bp-ac .sec-head a:hover {
	color: var(--navy);
}

/* ---------- Checklist blocks ---------- */

.bp-home .ac-list {
	margin-top: 28px;
	max-width: 900px;
}

.bp-home .ac-list__intro {
	font-weight: 600;
	color: var(--ink-text);
	font-size: 16px;
	margin: 0 0 16px;
}

.bp-home .ac-checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 28px;
}

.bp-home .ac-checks li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--slate);
}

.bp-home .ac-checks__ico {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--blue-soft);
	color: var(--blue-600);
}

.bp-home .ac-checks__ico svg {
	width: 12px;
	height: 12px;
}

.bp-home .ac-checks a {
	color: var(--blue-600);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bp-home .ac-checks a:hover {
	color: var(--navy);
}

.bp-home .ac-note {
	margin-top: 22px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--slate);
	max-width: 820px;
}

.bp-home .ac-after {
	margin-top: 22px;
	max-width: 820px;
}

.bp-home .ac-after p {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--slate);
}

.bp-home .ac-after p + p {
	margin-top: 14px;
}

.bp-home .ac-after a {
	color: var(--blue-600);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bp-home .ac-after a:hover {
	color: var(--navy);
}

/* ---------- Split section figure ----------
   Reuses .map-grid / .map-canvas from home-areas.css. That block was built
   for an inline SVG on a navy ground, so for a photo the navy fill is
   dropped and the image is made to cover the box. */

.bp-home .ac-figure {
	background: var(--paper-2);
	/* .map-canvas carries a 1px light border for the navy SVG; on a photo
	   it would show as a hairline gap, so the border is dropped. */
	border: 0;
}

/* Column ratio.
   home-areas.css uses 1.1fr .9fr — correct there, where the wide column
   holds the map. On this page the copy column carries the heading, prose
   and tick lists, so it takes the wider half in both directions.

   Scoped to .bp-ac so the home page's own .map-grid is untouched. */
.bp-home.bp-ac .map-grid {
	grid-template-columns: .9fr 1.1fr;
}

/* Image on the right, copy on the left.
   The figure stays first in the DOM (so it is described before the copy
   for assistive tech); order flips it visually only. */
/* The copy column carries the heading, prose and tick list, so it takes
   the wider half; the image sits in the narrower one. (The home "areas"
   section is the reverse: map wide, copy narrow.) */
.bp-home.bp-ac .map-grid--flip {
	/* order:2 puts the figure in the SECOND track, so the ratio is mirrored
	   here: copy (track 1) takes 1.1fr, image 0.9fr. */
	grid-template-columns: 1.1fr .9fr;
}

.bp-home.bp-ac .map-grid--flip > .ac-figure {
	order: 2;
}

/* ---------- Sticky image ----------
   The figure follows the copy as it scrolls, keeping the image in view
   beside long text blocks. Three requirements:
     1. the grid aligns to `start`, or a centred/stretched item has no
        free space to move within and sticky silently does nothing;
     2. the offset clears the sticky site header (.site-head, 75px);
     3. the image must be SHORTER than the copy column, otherwise the
        grid collapses to the image height and there is nothing to
        travel. The 3:2 ratio often makes the image the taller of the
        two, so its height is capped here and the aspect ratio is
        dropped — object-fit: cover keeps the framing. */
@media (min-width: 981px) {
	.bp-home.bp-ac .map-grid {
		align-items: start;
	}

	.bp-home.bp-ac .map-grid > .ac-figure {
		position: sticky;
		top: calc(var(--bp-head-h, 75px) + 24px);
		aspect-ratio: auto;
		/* Shorter than the shortest copy column on these pages (~330px),
		   so every section has room for the image to travel. */
		height: min(46vh, 450px);
	}

	.bp-home.bp-ac .map-grid > .ac-figure img {
		height: 100%;
		object-fit: cover;
	}
}

/* A short viewport cannot show a tall sticky image and the copy at the
   same time, so it reverts to normal flow. */
@media (min-width: 981px) and (max-height: 700px) {
	.bp-home.bp-ac .map-grid > .ac-figure {
		position: static;
	}
}


/* Lists inside a split column have half the width, so they stay single
   column rather than inheriting the two-column full-width grid. */
.bp-home .ac-list--split {
	margin-top: 22px;
	max-width: none;
}

.bp-home .ac-checks--single {
	grid-template-columns: 1fr;
	gap: 10px;
}

.bp-home .area-prose.mt22 {
	margin-top: 22px;
}

.bp-home .ac-figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No image set yet: a labelled placeholder holds the column so the
   two-column layout is visible during content entry. Setting the
   section's 'image' key replaces it with the real photo. */
.bp-home .ac-figure--empty {
	background: var(--paper-2);
	border: 1px dashed var(--line-strong);
	display: flex;
	align-items: center;
	justify-content: center;
}

.bp-home .sec.paper .ac-figure--empty {
	background: var(--white);
}

.bp-home .ac-figure__ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 24px;
	text-align: center;
	max-width: 300px;
}

.bp-home .ac-figure__ph-ico {
	width: 26px;
	height: 26px;
	color: var(--slate-3);
}

.bp-home .ac-figure__ph-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--slate-2);
}

.bp-home .ac-figure__ph-text {
	font-size: 13px;
	line-height: 1.5;
	color: var(--slate-3);
}

/* Card grid column count.
   home-industries.css fixes .ind-grid at 4 columns; service pages can ask
   for 3 via 'cols' => 3. Scoped to .bp-ac so the home page keeps its 4. */
.bp-home.bp-ac .ind-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 980px) {
	.bp-home.bp-ac .ind-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.bp-home.bp-ac .ind-grid--3 {
		grid-template-columns: 1fr;
	}
}

/* Optional closing note under the enterprise band's copy column. */
.bp-home.bp-ac .ent-note {
	margin-top: 18px;
	font-size: 14px;
	line-height: 1.6;
	color: #a9b8d0;
	max-width: 520px;
}

.bp-home.bp-ac .ent-note a {
	color: var(--blue-bright);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bp-home.bp-ac .ent-note a:hover {
	color: #fff;
}

/* Numbered sequence ('ordered' => true), e.g. an escalation path.
   Uses a counter so the number can be styled as a brand-coloured chip. */
.bp-home.bp-ac .ac-steps {
	list-style: none;
	counter-reset: bp-step;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.bp-home.bp-ac .ac-steps li {
	counter-increment: bp-step;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--slate);
}

.bp-home.bp-ac .ac-steps li::before {
	content: counter(bp-step);
	flex: none;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--blue-soft);
	color: var(--blue-600);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.bp-home.bp-ac .sec.dark .ac-steps li {
	color: #a9b8d0;
}

.bp-home.bp-ac .sec.dark .ac-steps li::before {
	background: rgba(255, 255, 255, 0.1);
	color: var(--blue-bright);
}

/* ---------- Credential cards ----------
   Reuses .ind-grid / .ind-card from home-industries.css. These cards carry
   prose rather than the home page's tick list, so .ic-body gets paragraph
   spacing in place of the list styling. */

.bp-home .ind-card .ic-body--prose {
	padding-top: 18px;
}

.bp-home .ind-card .ic-body--prose p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.58;
	color: var(--slate);
}

.bp-home .ind-card .ic-body--prose p + p {
	margin-top: 10px;
}

/* ---------- Sub-topic blocks ---------- */

.bp-home .ac-subs {
	margin-top: 32px;
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Two-column variant (#platforms, #facilities). */
.bp-home .ac-subs--grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Three-column variant ('layout' => 'grid3'). */
.bp-home .ac-subs--grid3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: none;
}

@media (max-width: 980px) {
	.bp-home .ac-subs--grid3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.bp-home .ac-subs--grid3 {
		grid-template-columns: 1fr;
	}
}

/* Single-column stack for narrative sub-sections. */
.bp-home .ac-subs:not(.ac-subs--grid):not(.ac-subs--grid3) {
	grid-template-columns: 1fr;
	gap: 18px;
	max-width: 900px;
}

.bp-home .ac-sub {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 26px 28px;
	box-shadow: var(--shadow-sm);
}

.bp-home .sec.paper .ac-sub {
	background: var(--white);
}

.bp-home .ac-sub__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--r);
	background: var(--blue-soft);
	color: var(--blue-600);
	margin-bottom: 16px;
}

.bp-home .ac-sub__ico svg {
	width: 20px;
	height: 20px;
}

.bp-home .ac-sub h3 {
	font-size: 19px;
	line-height: 1.25;
	color: var(--navy);
	margin: 0 0 12px;
}

.bp-home .ac-sub p {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--slate);
	margin: 0;
}

.bp-home .ac-sub p + p {
	margin-top: 12px;
}

.bp-home .ac-sub a {
	color: var(--blue-600);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bp-home .ac-sub a:hover {
	color: var(--navy);
}

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

/* home-areas.css collapses .map-grid at 980px; the --flip override needs
   its own matching breakpoint or the two columns persist on mobile. */
@media (max-width: 980px) {
	.bp-home.bp-ac .map-grid,
	.bp-home.bp-ac .map-grid--flip {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	/* Stacked: copy first, image after it. */
	.bp-home.bp-ac .map-grid--flip > .ac-figure {
		order: 2;
		position: static;
		top: auto;
	}
}

@media (max-width: 849px) {
	.bp-home .ac-checks,
	.bp-home .ac-subs {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 549px) {
	.bp-home .ac-sub {
		padding: 22px 20px;
	}
}

/* ==========================================================================
   Split sections on a dark ground (.sec.dark)
   --------------------------------------------------------------------------
   home.css handles the navy background and headings; the prose, tick list
   and image placeholder in this file default to slate tones, so they are
   lightened here for contrast.
   ========================================================================== */

/* The glow is absolutely positioned over the section, so the content
   needs to sit above it. */
.bp-home .sec.dark > .wrap {
	position: relative;
	z-index: 1;
}

.bp-home .sec.dark .area-prose p {
	color: #a9b8d0;
}

.bp-home .sec.dark .area-prose a {
	color: var(--blue-bright);
}

.bp-home .sec.dark .area-prose a:hover {
	color: #fff;
}

.bp-home .sec.dark .ac-list__intro {
	color: #fff;
}

.bp-home .sec.dark .ac-checks li {
	color: #a9b8d0;
}

.bp-home .sec.dark .ac-checks__ico {
	background: rgba(255, 255, 255, 0.1);
	color: var(--blue-bright);
}

.bp-home .sec.dark .ac-checks a {
	color: var(--blue-bright);
}

.bp-home .sec.dark .ac-checks a:hover {
	color: #fff;
}

/* Placeholder figure needs to read on navy rather than on paper. */
.bp-home .sec.dark .ac-figure--empty {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.18);
}

.bp-home .sec.dark .ac-figure__ph-ico {
	color: var(--blue-bright);
}

.bp-home .sec.dark .ac-figure__ph-label {
	color: var(--blue-bright);
}

.bp-home .sec.dark .ac-figure__ph-text {
	color: #9fb0c9;
}