/* CC Process Flow – front */
.ccpf {
	--ccpf-gap-x: 28px;
	--ccpf-gap-y: 64px;
	--ccpf-pad: 36px;
	--ccpf-band: 12px;
	--ccpf-radius: 20px;
	--ccpf-ease: cubic-bezier(.2, .8, .2, 1);
	position: relative;
	margin: 2em 0;
	color: var(--ccpf-text, #1e293b);
	font: inherit;
}
.ccpf *, .ccpf *::before, .ccpf *::after { box-sizing: border-box; }

.ccpf-heading {
	margin: 0 0 1.2em;
	text-align: center;
	color: inherit;
}

.ccpf-stage {
	position: relative;
	padding: 18px var(--ccpf-pad) 28px;
}

/* ---------- flow line (SVG drawn by JS) ---------- */
.ccpf-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 0;
}
.ccpf-track,
.ccpf-progress {
	fill: none;
	stroke-width: var(--ccpf-band);
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ccpf-track { stroke: var(--ccpf-accent); }
.ccpf-progress {
	stroke: var(--ccpf-accent-2);
	transition: stroke-dashoffset .6s var(--ccpf-ease);
}
.ccpf-track.is-drawing { transition: stroke-dashoffset 1.4s var(--ccpf-ease); }
.ccpf-head { fill: var(--ccpf-accent); }
.ccpf-chev {
	fill: none;
	stroke: var(--ccpf-chevron);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ccpf-chevs { transition: opacity .6s ease .5s; }
.ccpf-svg.is-intro .ccpf-chevs { opacity: 0; }

/* ---------- grid (no-JS fallback = wrapping flex) ---------- */
.ccpf-grid {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ccpf-gap-y) var(--ccpf-gap-x);
	list-style: none;
	margin: 0;
	padding: 0;
}
.ccpf.is-ready .ccpf-grid {
	display: grid;
	grid-template-columns: repeat(var(--ccpf-cols, 4), minmax(0, 1fr));
	justify-content: stretch;
}

.ccpf-item {
	position: relative;
	flex: 0 1 var(--ccpf-min);
	width: 100%;
	max-width: calc(var(--ccpf-min) * 1.7);
	min-width: 0;
	margin: 0;
	padding: 0;
	justify-self: center;
	list-style: none;
}
.ccpf-item::before, .ccpf-item::marker { content: none; }

.ccpf.is-ready .ccpf-item {
	animation: ccpf-in .7s var(--ccpf-ease) both;
	animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes ccpf-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

.ccpf-item:hover,
.ccpf-item:focus-within,
.ccpf-item.is-open { z-index: 10; }

/* ---------- card ---------- */
.ccpf-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: inherit !important;
	text-decoration: none !important;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.ccpf-media {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: var(--ccpf-media-h);
	padding: 14px;
	background: var(--ccpf-card);
	border: 1px solid rgba(15, 23, 42, .07);
	border-radius: var(--ccpf-radius);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 28px -14px rgba(15, 23, 42, .28);
	transition: transform .4s var(--ccpf-ease), box-shadow .4s var(--ccpf-ease), border-color .4s;
}
/* Image box: absolutely positioned so theme / WebP-<picture> / lazy-load CSS can't change its size */
.ccpf-imgbox {
	position: absolute;
	inset: 14px;
	display: block;
	overflow: hidden;
	transition: transform .5s var(--ccpf-ease);
}
.ccpf .ccpf-imgbox picture {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
}
.ccpf .ccpf-imgbox img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	/* natural size, scaled DOWN only (never enlarged / pixelated), centered */
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: auto !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	object-fit: contain !important;
	object-position: center !important;
	transform: none !important;
}
.ccpf--fit-cover .ccpf-media { padding: 0; overflow: hidden; }
.ccpf--fit-cover .ccpf-media .ccpf-imgbox { inset: 0; }
.ccpf--fit-cover .ccpf-media .ccpf-imgbox img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; }
.ccpf-ph { width: 42%; height: 42%; color: #cbd5e1; }

.ccpf-step {
	position: absolute;
	top: 8px;
	inset-inline-start: 8px;
	z-index: 2;
	display: grid;
	place-items: center;
	min-width: 28px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ccpf-accent) 12%, #fff);
	color: var(--ccpf-accent);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	transition: background .3s, color .3s;
}
.ccpf-item.is-passed .ccpf-step {
	background: var(--ccpf-accent-2);
	color: #fff;
}

.ccpf-title {
	display: block;
	max-width: 100%;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	text-wrap: balance;
	transition: color .3s;
}
.ccpf-item.has-panel .ccpf-title::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-inline-start: 8px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	opacity: .55;
	transform: translateY(-3px) rotate(45deg);
	transition: transform .3s var(--ccpf-ease);
}

.ccpf-item:hover .ccpf-media,
.ccpf-item.is-open .ccpf-media,
.ccpf-card:focus-visible .ccpf-media {
	transform: translateY(-6px);
	border-color: color-mix(in srgb, var(--ccpf-accent) 35%, transparent);
	box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 22px 40px -18px color-mix(in srgb, var(--ccpf-accent) 70%, transparent);
}
.ccpf-item:hover .ccpf-media > .ccpf-imgbox { transform: scale(1.04); }
.ccpf-item:hover .ccpf-title,
.ccpf-item.is-open .ccpf-title,
.ccpf-card:focus-visible .ccpf-title { color: var(--ccpf-accent); }
.ccpf-item.is-open .ccpf-title::after { transform: translateY(1px) rotate(-135deg); }
.ccpf-card:focus-visible .ccpf-media { outline: 3px solid color-mix(in srgb, var(--ccpf-accent) 45%, transparent); outline-offset: 3px; }

/* ---------- hover panel ---------- */
.ccpf-panel {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 20;
	width: min(300px, calc(100vw - 20px));
	padding-top: 12px; /* hover bridge */
	opacity: 0;
	visibility: hidden;
	transform: translate(calc(-50% + var(--ccpf-shift, 0px)), 10px);
	transition: opacity .25s ease, transform .35s var(--ccpf-ease), visibility 0s linear .35s;
}
.ccpf-item.is-open .ccpf-panel,
.ccpf-item.has-panel:focus-within .ccpf-panel {
	opacity: 1;
	visibility: visible;
	transform: translate(calc(-50% + var(--ccpf-shift, 0px)), 0);
	transition: opacity .25s ease, transform .35s var(--ccpf-ease), visibility 0s;
}
@media (hover: hover) and (pointer: fine) {
	.ccpf--hover .ccpf-item.has-panel:hover .ccpf-panel {
		opacity: 1;
		visibility: visible;
		transform: translate(calc(-50% + var(--ccpf-shift, 0px)), 0);
		transition: opacity .25s ease, transform .35s var(--ccpf-ease), visibility 0s;
	}
	.ccpf--hover .ccpf-item.has-panel:hover .ccpf-title::after { transform: translateY(1px) rotate(-135deg); }
}

.ccpf-panel-inner {
	position: relative;
	overflow: hidden;
	background: #fff;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(15, 23, 42, .08);
	border-top: 3px solid var(--ccpf-accent);
	border-radius: 16px;
	box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .35), 0 4px 12px -4px rgba(15, 23, 42, .12);
	color: var(--ccpf-text, #1e293b);
	text-align: start;
}
.ccpf-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px 8px;
	font-weight: 700;
	font-size: .9rem;
}
.ccpf-count {
	min-width: 24px;
	padding: 2px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ccpf-accent) 12%, #fff);
	color: var(--ccpf-accent);
	font-size: 11px;
	text-align: center;
}
.ccpf-panel-list {
	max-height: 320px;
	margin: 0;
	padding: 0 6px 6px;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	scrollbar-width: thin;
}
.ccpf-panel-list li { margin: 0; padding: 0; list-style: none; }
.ccpf-panel-list li::before { content: none; }
.ccpf-panel-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	border-radius: 10px;
	color: inherit !important;
	text-decoration: none !important;
	transition: background .2s, transform .2s;
}
.ccpf-panel-list a:hover,
.ccpf-panel-list a:focus-visible {
	background: color-mix(in srgb, var(--ccpf-accent) 9%, #fff);
	outline: none;
}
.ccpf-panel-list a:hover .ccpf-pname > span:first-child { color: var(--ccpf-accent); }
.ccpf-pthumb {
	flex: 0 0 44px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 4px;
	border-radius: 10px;
	background: #f1f5f9;
	overflow: hidden;
}
.ccpf-pthumb { position: relative; }
.ccpf-pthumb .ccpf-imgbox { inset: 4px; }
.ccpf-pthumb .ccpf-ph { width: 60%; height: 60%; }
.ccpf-pname {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-size: .875rem;
	line-height: 1.3;
}
.ccpf-pmeta { font-size: .78rem; opacity: .7; }
.ccpf-pmeta del { opacity: .6; }
.ccpf-panel-list a.is-term .ccpf-pname > span:first-child { font-weight: 600; }

.ccpf-panel-all {
	display: block;
	padding: 10px 14px;
	border-top: 1px solid rgba(15, 23, 42, .07);
	background: color-mix(in srgb, var(--ccpf-accent) 5%, #fff);
	color: var(--ccpf-accent) !important;
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none !important;
}
.ccpf-panel-all::after { content: " ←"; }
.ccpf[dir="ltr"] .ccpf-panel-all::after { content: " →"; }
.ccpf-panel-all:hover { background: color-mix(in srgb, var(--ccpf-accent) 11%, #fff); }

/* Esc pressed: hide until the pointer/focus leaves the item */
.ccpf .ccpf-item.is-dismissed .ccpf-panel {
	opacity: 0 !important;
	visibility: hidden !important;
}

/* ---------- single column (phones) ---------- */
.ccpf[data-cols="1"] .ccpf-grid { row-gap: 36px; }
.ccpf[data-cols="1"] .ccpf-item { max-width: 520px; }
.ccpf[data-cols="1"] .ccpf-card {
	flex-direction: row;
	gap: 16px;
}
.ccpf[data-cols="1"] .ccpf-media {
	flex: 0 0 44%;
	height: calc(var(--ccpf-media-h) * .85);
}
.ccpf[data-cols="1"] .ccpf-title { text-align: start; }
.ccpf[data-cols="1"] .ccpf-panel { left: 50%; }

/* ---------- small screens ---------- */
@media (max-width: 782px) {
	.ccpf { --ccpf-gap-x: 18px; --ccpf-gap-y: 52px; --ccpf-pad: 28px; }
}
@media (max-width: 480px) {
	.ccpf-media > .ccpf-imgbox { inset: 10px; }
	.ccpf { --ccpf-gap-x: 14px; --ccpf-gap-y: 46px; --ccpf-pad: 22px; --ccpf-band: 10px; --ccpf-radius: 16px; }
	.ccpf-media { height: calc(var(--ccpf-media-h) * .8); padding: 10px; }
	.ccpf-title { font-size: .85rem; }
}

.ccpf-empty-note {
	padding: 12px 16px;
	border: 1px dashed #94a3b8;
	border-radius: 10px;
	color: #475569;
}

@media (prefers-reduced-motion: reduce) {
	.ccpf *, .ccpf *::before, .ccpf *::after {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}