/**
 * MLC Critical Issues Graphic block.
 *
 * Reproduces the "Journey to M4.0 Value" pyramid: dark-blue roof, 2-4
 * dark-blue Value Driver tiles in an adaptive grid, then a stack of
 * cyan Value Enabler bars. Right-side band tags ("Value Drivers",
 * "Value Enablers") with a square-bracket affordance.
 */

.cig {
	--cig-dark-blue: var(--wdg-color-dark-blue, #0a3b8a);
	--cig-blue: var(--wdg-color-primary, #0032a0);
	--cig-cyan: var(--wdg-color-cyan, #00a5e0);
	--cig-cyan-light: var(--wdg-color-light-cyan, #6cd0f5);
	--cig-coral: #ee4d72;
	--cig-on-dark: #ffffff;
	--cig-on-cyan: #ffffff;
	--cig-radius: 8px;
	--cig-gap: clamp(8px, 1vw, 14px);
	--cig-band-tag-width: clamp(110px, 11vw, 150px);
	--cig-icon-size: 40px;
	--cig-vd-cols: 3;
	--cig-max-width: 1100px;

	margin: clamp(24px, 4vw, 48px) auto;
	padding: 0 clamp(16px, 4vw, 32px);
	color: var(--cig-on-dark);
}

.cig__inner {
	max-width: var(--cig-max-width, 1100px);
	margin-inline: auto;
}

.cig--align-left  .cig__inner { margin-inline: 0 auto; }
.cig--align-right .cig__inner { margin-inline: auto 0; }

/* Header */

.cig__header {
	text-align: left;
	margin-bottom: clamp(8px, 1.5vw, 16px);
}

.cig__title {
	margin: 0 0 4px;
	font-size: clamp(1.5rem, 1.6vw + 1rem, 2.5rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--cig-blue);
	letter-spacing: -0.01em;
}

.cig__title-accent {
	color: var(--cig-cyan);
}

.cig__subtitle {
	margin: 0;
	font-size: clamp(0.95rem, 0.4vw + 0.8rem, 1.125rem);
	color: var(--cig-coral);
	font-weight: 500;
}

/* Roof (apex triangle, NOT linkable) */

.cig__roof {
	position: relative;
	margin: 0 auto;
	margin-right: var(--cig-band-tag-width);
	width: calc(100% - var(--cig-band-tag-width));
	aspect-ratio: 4 / 1;
	background: var(--cig-blue);
	clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 18%;
}

.cig__roof-label {
	color: var(--cig-on-dark);
	font-weight: 800;
	font-size: clamp(1.2rem, 1.5vw + 0.9rem, 2.25rem);
	line-height: 1;
	letter-spacing: -0.01em;
}

/* Shared band layout (drivers + enablers) */

.cig__band {
	position: relative;
	padding-right: var(--cig-band-tag-width);
	margin-top: var(--cig-gap);
}

.cig__band-tag {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: var(--cig-band-tag-width);
	display: flex;
	align-items: center;
	gap: 10px;
	padding-left: 4px;
	font-weight: 800;
	color: var(--cig-blue);
	font-size: clamp(0.95rem, 0.4vw + 0.8rem, 1.125rem);
	line-height: 1.15;
	white-space: nowrap;
}

/* Discrete square-bracket mark: vertical line with top + bottom feet,
   sized between 40 and 90px and centered next to the label. */
.cig__band-tag::before {
	content: "";
	flex-shrink: 0;
	width: 12px;
	height: clamp(40px, 70%, 90px);
	border-left: 3px solid var(--cig-blue);
	border-top: 3px solid var(--cig-blue);
	border-bottom: 3px solid var(--cig-blue);
}

/* Tiles */

.cig__tile {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-radius: var(--cig-radius);
	color: var(--cig-on-dark);
	text-decoration: none;
	transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease, background-color 180ms ease;
}

.cig__tile--link {
	cursor: pointer;
}

/* Theme gotcha: the sitewide `.entry-content a:not(...)` display rules
   out-rank block CSS on plain anchors, collapsing the tile's flex layout
   (icon renders inline against the label). Out-specify them with the
   :not(#nam-x) pattern used elsewhere in this theme. */
a.cig__tile:not(#nam-x) {
	display: flex !important;
}

.cig__tile--link:hover,
.cig__tile--link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 50, 160, 0.18);
	filter: brightness(1.06);
	outline: none;
}

.cig__tile--link:focus-visible {
	outline: 2px solid var(--cig-cyan);
	outline-offset: 2px;
}

.cig__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--cig-icon-size);
	height: var(--cig-icon-size);
	color: currentColor;
}

.cig__icon svg {
	width: 100%;
	height: 100%;
	display: block;
	color: currentColor;
	stroke: currentColor;
}

.cig__icon--image img {
	max-width: 100%;
	max-height: 100%;
	display: block;
}

.cig__tile-label {
	font-weight: 600;
	line-height: 1.2;
	font-size: clamp(0.9rem, 0.4vw + 0.75rem, 1.05rem);
}

/* Drivers band: 2-4 dark-blue square tiles */

.cig__band-inner--drivers {
	display: grid;
	grid-template-columns: repeat(var(--cig-vd-cols), minmax(0, 1fr));
	gap: var(--cig-gap);
}

.cig__tile--driver {
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	background: var(--cig-blue);
	min-height: 150px;
	padding: 20px 14px 18px;
}

.cig__tile--driver .cig__icon {
	width: 52px;
	height: 52px;
	margin-bottom: 8px;
}

.cig__tile--driver .cig__tile-label {
	color: var(--cig-on-dark);
}

/* Enablers band: stacked cyan horizontal bars */

.cig__band-inner--enablers {
	display: flex;
	flex-direction: column;
	gap: var(--cig-gap);
}

.cig__tile--enabler {
	background: var(--cig-cyan);
	min-height: 56px;
	padding: 12px 22px;
	color: var(--cig-on-cyan);
}

.cig__tile--enabler .cig__icon {
	width: 28px;
	height: 28px;
	color: var(--cig-on-cyan);
}

.cig__tile--enabler .cig__tile-label {
	color: var(--cig-on-cyan);
}

/* Centered variant (opt-in via the block's Additional CSS class).
 *
 * A fully symmetric composition: centered header, roof spanning the whole
 * diagram width, and the band labels rendered as centered divider rows
 * (label between two short rule lines) instead of a right-side bracket
 * gutter. Used on the Become a Member page; other pages keep the default
 * bracket layout.
 */

.cig--centered {
	--cig-gap: 10px;
	--cig-band-tag-width: 0px;
	--cig-radius: 6px;
	--cig-max-width: 860px;

	margin-inline: auto;
}

.cig--centered .cig__header {
	text-align: center;
	margin-bottom: clamp(14px, 2vw, 22px);
}

.cig--centered .cig__title {
	font-size: clamp(1.5rem, 1.8vw, 2rem);
}

.cig--centered .cig__subtitle {
	font-size: 0.85rem;
}

.cig--centered .cig__roof {
	margin-right: 0;
	width: 100%;
	aspect-ratio: 5 / 1;
	box-sizing: border-box;
	padding-top: 6.5%;
}

.cig--centered .cig__roof-label {
	font-size: clamp(1.15rem, 1.7vw, 1.65rem);
}

/* Band labels become centered divider rows above their tiles. The label
   markup sits after the tiles in the DOM, so flex order swaps it up. */
.cig--centered .cig__band {
	padding-right: 0;
	display: flex;
	flex-direction: column;
	margin-top: clamp(14px, 2vw, 20px);
}

.cig--centered .cig__band-inner {
	order: 2;
}

.cig--centered .cig__band-tag {
	position: static;
	transform: none;
	order: 1;
	width: 100%;
	justify-content: center;
	gap: 14px;
	margin: 0 0 10px;
	padding: 0;
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cig--centered .cig__band-tag::before,
.cig--centered .cig__band-tag::after {
	content: "";
	flex: 0 0 clamp(28px, 6vw, 64px);
	width: auto;
	height: 0;
	border: 0;
	border-top: 2px solid var(--cig-cyan);
}

.cig--centered .cig__tile {
	gap: 10px;
}

.cig--centered .cig__tile--driver {
	min-height: 112px;
	padding: 16px 12px 14px;
}

.cig--centered .cig__tile--driver .cig__icon {
	width: 22px;
	height: 22px;
	margin-bottom: 5px;
}

.cig--centered .cig__tile--driver .cig__tile-label {
	font-size: clamp(0.88rem, 1vw, 0.95rem);
	line-height: 1.3;
}

.cig--centered .cig__tile--enabler {
	min-height: 46px;
	padding: 10px 18px;
}

.cig--centered .cig__tile--enabler .cig__icon {
	width: 16px;
	height: 16px;
}

.cig--centered .cig__tile--enabler .cig__tile-label {
	font-size: clamp(0.88rem, 1vw, 0.95rem);
	line-height: 1.2;
}

/* Responsive */

@media (max-width: 900px) {
	.cig {
		--cig-band-tag-width: clamp(100px, 14vw, 130px);
		--cig-icon-size: 36px;
	}
}

@media (max-width: 640px) {
	.cig {
		--cig-band-tag-width: 0px;
		--cig-icon-size: 32px;
	}

	.cig__roof {
		margin-right: 0;
		aspect-ratio: 5 / 1.6;
		padding-top: 20%;
	}

	/* On narrow screens, drop the absolute-positioned tag below each band
	   so it doesn't fight the stacked tiles for space. */
	.cig__band-tag {
		position: static;
		transform: none;
		width: auto;
		padding: 8px 0 0;
		margin-top: 6px;
		justify-content: flex-end;
		gap: 8px;
		white-space: normal;
	}

	.cig__band-tag::before {
		height: 28px;
	}

	.cig__band-inner--drivers {
		grid-template-columns: 1fr;
	}

	.cig__tile--driver {
		min-height: 0;
		flex-direction: row;
		align-items: center;
		text-align: left;
	}

	.cig__tile--driver .cig__icon {
		width: 36px;
		height: 36px;
		margin-bottom: 0;
	}

	/* Centered variant on mobile: divider labels stay centered above their
	   band; drivers stack as horizontal cards (from the defaults above). */
	.cig--centered .cig__roof {
		aspect-ratio: 5 / 1.3;
		padding-top: 12%;
	}

	.cig--centered .cig__band-tag {
		justify-content: center;
		padding: 0;
		margin: 0 0 10px;
	}

	.cig--centered .cig__band-tag::before,
	.cig--centered .cig__band-tag::after {
		height: 0;
	}

	.cig--centered .cig__tile--driver {
		min-height: 0;
		padding: 12px 14px;
	}

	.cig--centered .cig__tile--driver .cig__icon {
		width: 22px;
		height: 22px;
		margin-bottom: 0;
	}
}