/**
 * Block: Security — promo card + icon cards (acf/ll-security-split-cards)
 *
 * Self-contained, scoped palette declared on .block-ll-security-split-cards.
 * A dark navy promo card beside a single-column stack of individually-bordered
 * cards, each with its own icon badge. Colours sampled 1:1 from the
 * Property-Listing "Secure & Compliant" cut. Ships no shared .block-head — the
 * header lives inside the navy card with its own classes.
 *
 * The promo card is filled with the SAME diagonal navy→blue gradient used by
 * ll-security-split-checklist. An ACF `scc_promo.bg_image` value overrides it
 * via inline style in render.php.
 */

.block-ll-security-split-cards {
	--scc-navy-1: #0e294f;
	--scc-navy-2: #10376b;
	--scc-accent: #1690d3;
	--scc-icon-bg: #dcecfb;
	--scc-title: #101828;
	--scc-body: #667085;
	--scc-stroke: #eaecf0;
	--scc-white: #fff;
	--scc-panel-sub: #cfe0f2;
	--scc-panel-eyebrow: #4fb0e6;

	padding: 90px 0;
	background: var(--scc-white);
	font-family: var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
}

.block-ll-security-split-cards__inner {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 70px;
}

/* ================================================================= split -- */
.block-ll-security-split-cards__split {
	display: grid;
	grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

/* =========================================================== promo panel -- */
.block-ll-security-split-cards__panel {
	position: sticky;
	top: 90px;
	/* Flex column so the CTA can be pinned to the panel floor (margin-top:auto on
	   __cta) no matter how short the promo copy is. min-height restores the Figma
	   547×420 "hug" floor so the panel never collapses on a one-line paragraph,
	   while align-items:start on __split still keeps it from ballooning up to the
	   tall right-hand card column. */
	display: flex;
	flex-direction: column;
	min-height: 420px;
	padding: 44px 40px;
	border-radius: 18px;
	/* Figma promo background photo (promo-bg.jpg, node 2791:9765) under a navy
	   overlay so the white text stays readable. An operator-set scc_promo.bg_image
	   (inline in render.php) still overrides this. */
	background-color: var(--scc-navy-1);
	background-image:
		linear-gradient(135deg, rgba(14, 41, 79, 0.90) 0%, rgba(16, 55, 107, 0.72) 50%, rgba(20, 60, 120, 0.52) 100%),
		url("promo-bg.jpg");
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	background-position: center, center;
	color: var(--scc-white);
	overflow: hidden;
}
.block-ll-security-split-cards__eyebrow {
	display: block;
	margin-bottom: 16px;
	font: 700 12px/16px var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--scc-panel-eyebrow);
}
.block-ll-security-split-cards__title {
	margin: 0 0 18px;
	font: 700 32px/40px var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	letter-spacing: -0.5px;
	color: var(--scc-white);
}
.block-ll-security-split-cards__text {
	/* Was 120px — a dead CTA reserve that left a big gap above the button on
	   short copy. The CTA is now pinned to the panel floor via margin-top:auto,
	   so the paragraph only needs a normal rhythm gap. (The --checklist variant
	   below still overrides this to 0 and lets the paragraph fill full width.) */
	margin: 0 0 24px;
	max-width: 34ch;
	font: 400 16px/26px var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	color: var(--scc-panel-sub);
}
.block-ll-security-split-cards__cta {
	display: inline-flex;
	align-items: center;
	/* Pin the pill to the bottom of the flex panel, and keep it hugging its
	   label (the column's default stretch would otherwise widen it full-panel). */
	margin-top: auto;
	align-self: flex-start;
	gap: 10px;
	padding: 15px 30px;
	border-radius: 999px;
	background: var(--scc-white);
	color: var(--scc-accent);
	font: 700 15px/1 var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.block-ll-security-split-cards__cta:hover { opacity: 0.9; }

/* =============================================================== cards -- */
.block-ll-security-split-cards__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.block-ll-security-split-cards__item {
	display: flex;
	gap: 20px;
	padding: 24px 28px;
	background: var(--scc-white);
	border: 1px solid var(--scc-stroke);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.block-ll-security-split-cards__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--scc-icon-bg);
	color: var(--scc-accent);
}
.block-ll-security-split-cards__icon svg,
.block-ll-security-split-cards__icon img { display: block; }
.block-ll-security-split-cards__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.block-ll-security-split-cards__item-title {
	margin: 0;
	font: 700 16px/22px var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	color: var(--scc-title);
}
.block-ll-security-split-cards__item-desc {
	margin: 0;
	font: 400 14px/23px var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	color: var(--scc-body);
}

/* ============================================= checklist layout variant -- */
/* scc_layout = checklist: flat rows sharing one blue check glyph (no per-item
   icon, no shadow) — 1:1 with the former ll-security-split-checklist look. */
.block-ll-security-split-cards--checklist .block-ll-security-split-cards__item {
	padding: 22px 28px;
	border-radius: 14px;
	box-shadow: none;
}
.block-ll-security-split-cards--checklist .block-ll-security-split-cards__icon {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: #e8f4fb;
}
/* Promo card sizing — Figma node 4564:6704 (SecurityCompliance) is 547.2 × 420
   and HUGS its content; it must not balloon to the checklist column's height.
   Two things made it ~214px too tall: a 480px column (title wrapped to 5 lines)
   and __text's 120px bottom margin (a CTA reserve — the checklist variant has no
   CTA). Widen the column to the Figma 547 and drop the dead reserve; min-height
   keeps the card from collapsing on short copy. */
.block-ll-security-split-cards--checklist .block-ll-security-split-cards__split {
	grid-template-columns: minmax(0, 547px) minmax(0, 1fr);
	gap: 40px;
}
.block-ll-security-split-cards--checklist .block-ll-security-split-cards__panel {
	min-height: 420px;
	padding: 36px;
}
.block-ll-security-split-cards--checklist .block-ll-security-split-cards__text {
	margin-bottom: 0;
	/* Let the paragraph fill the card width (Figma wraps it full-width); the base
	   34ch cap narrowed it and added ~2 extra lines. */
	max-width: none;
}

/* =========================================================== responsive -- */
@media (max-width: 1024px) {
	.block-ll-security-split-cards__inner { padding: 0 40px; }
	.block-ll-security-split-cards__split { grid-template-columns: 1fr; gap: 32px; }
	/* Neutralise the checklist desktop grid/min-height (2-class specificity) so the
	   card stacks full-width and hugs its content on tablet/mobile. */
	.block-ll-security-split-cards--checklist .block-ll-security-split-cards__split { grid-template-columns: 1fr; }
	.block-ll-security-split-cards--checklist .block-ll-security-split-cards__panel { min-height: 0; }
	/* Stacked full-width: drop the desktop floor so the panel hugs its content
	   (the CTA sits right after the copy — nothing below to pin it to). */
	.block-ll-security-split-cards__panel { position: static; min-height: 0; }
	.block-ll-security-split-cards__text { margin-bottom: 28px; }
}
@media (max-width: 767px) {
	.block-ll-security-split-cards { padding: 60px 0; }
	.block-ll-security-split-cards__inner { padding: 0 20px; }
	.block-ll-security-split-cards__panel { padding: 34px 26px; }
	.block-ll-security-split-cards__title { font-size: 26px; line-height: 33px; }
	.block-ll-security-split-cards__item { padding: 20px 20px; gap: 16px; }
}