/* ===========================================================
   Process — hexagonal honeycomb cluster.
   7 phases as connected hexes in a 4 + 3 zigzag honeycomb.
   Each hex its own brand colour. Hover scales the hex; the row
   offset on the second row creates the honeycomb interlock.
   =========================================================== */

.ced-process {
	background: var(--wp--preset--color--ink);
}

.ced-process__head {
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	max-width: var(--page-max);
	margin: 0 auto var(--wp--preset--spacing--lg);
}
.ced-process__title {
	font-size: clamp(2rem, 4.5vw, 4rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1.04;
	margin: 0;
	max-width: 22ch;
	color: var(--wp--preset--color--paper);
}
.ced-process__lede {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--fog);
	margin: 0;
}

/* ----------------------- Honeycomb layout ----------------------
   Two flex rows. The second row is shifted right by half a hex +
   half the gap so its hexes interlock with the first row's
   trailing edges. Negative vertical margin on the rows pulls them
   into the honeycomb pocket where hex points meet flat edges. */
.ced-process__honey {
	max-width: var(--page-max);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.ced-process__honey-row {
	display: flex;
	gap: 1rem;
	margin-block: -32px;   /* honeycomb interlock — tightens vertical seam */
}
.ced-process__honey-row:first-child { margin-top: 0; }
.ced-process__honey-row:last-child  { margin-bottom: 0; }

/* The offset row shifts right by half a hex width + half the gap
   so its first hex's left edge nests between hex 1 and hex 2 of
   the first row. */
.ced-process__honey-row--offset {
	transform: translateX(calc((220px + 1rem) / 2));
}

/* ----------------------- Hex tile ------------------------------
   Hex shape via clip-path: polygon. Each hex carries its own
   brand colour via a `--card-bg` token + a per-modifier rule.
   Content is centred vertically and trimmed to fit the available
   width once clipped. */
.ced-process__hex {
	width: 220px;
	height: 240px;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background: var(--card-bg, var(--wp--preset--color--lime));
	color: var(--wp--preset--color--ink);
	padding: 2.25rem 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.45rem;
	text-align: center;
	position: relative;
	transition: transform 360ms var(--ease-emph), filter 240ms var(--ease-smooth);
	cursor: default;
	will-change: transform;
}
.ced-process__hex:hover {
	transform: scale(1.06);
	filter: brightness(1.05);
	z-index: 2;
}

/* Per-step accent colour. The coral hex flips text to paper so the
   contrast on saturated coral stays legible. */
.ced-process__hex--lime     { --card-bg: var(--wp--preset--color--lime);     }
.ced-process__hex--coral    { --card-bg: var(--wp--preset--color--coral);    color: var(--wp--preset--color--paper); }
.ced-process__hex--sky      { --card-bg: var(--wp--preset--color--sky);      }
.ced-process__hex--lavender { --card-bg: var(--wp--preset--color--lavender); }
.ced-process__hex--sunset   { --card-bg: var(--wp--preset--color--sunset);   }
.ced-process__hex--sage     { --card-bg: var(--wp--preset--color--sage);     }
.ced-process__hex--rose     { --card-bg: var(--wp--preset--color--rose);     }

/* Soft inner highlight — the radial wash at top-right keeps the
   surface from looking like a flat poster colour. */
.ced-process__hex::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(70% 60% at 50% 0%, rgba(255, 255, 255, 0.20) 0%, transparent 60%),
		radial-gradient(70% 60% at 50% 100%, rgba(5, 5, 7, 0.10) 0%, transparent 55%);
	clip-path: inherit;
	pointer-events: none;
}

.ced-process__hex-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: rgba(5, 5, 7, 0.55);
	position: relative;
}
.ced-process__hex--coral .ced-process__hex-num { color: rgba(244, 242, 238, 0.78); }

.ced-process__hex-name {
	font-size: 1.35rem;
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.04;
	margin: 0;
	color: var(--wp--preset--color--ink);
	position: relative;
}
.ced-process__hex--coral .ced-process__hex-name { color: var(--wp--preset--color--paper); }

.ced-process__hex-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.62rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(5, 5, 7, 0.6);
	position: relative;
}
.ced-process__hex--coral .ced-process__hex-meta { color: rgba(244, 242, 238, 0.78); }

.ced-process__hex-body {
	color: rgba(5, 5, 7, 0.78);
	font-size: 0.78rem;
	line-height: 1.45;
	margin: 0.15rem 0 0;
	position: relative;
	max-width: 22ch;
	margin-inline: auto;
}
.ced-process__hex--coral .ced-process__hex-body { color: rgba(244, 242, 238, 0.88); }

/* Stagger reveal — fades in row by row when the section enters
   the viewport. The `.ced-reveal` class is applied in the markup;
   the theme's IntersectionObserver toggles `.is-in` to play. */
.ced-process__hex {
	opacity: 0;
	transform: translateY(20px) scale(0.96);
	transition: opacity 720ms var(--ease-emph), transform 720ms var(--ease-emph);
	transition-delay: calc(var(--i, 0) * 80ms);
}
.ced-process__hex.is-in,
.ced-process__hex.ced-reveal.is-in {
	opacity: 1;
	transform: translateY(0) scale(1);
}
/* Hover state restores the scale-up but layers it on top of the
   reveal animation. */
.ced-process__hex.is-in:hover,
.ced-process__hex.ced-reveal.is-in:hover {
	transform: scale(1.06);
}

/* ----------------------- Responsive ----------------------------
   Tablet — shrink hexes, reduce row offset.
   Mobile — wrap to a flowing grid, lose the strict 4+3 honeycomb
   geometry and let hexes fall into a 2-up pattern. */
@media (max-width: 1024px) {
	.ced-process__title { font-size: clamp(1.85rem, 5vw, 3rem); }
	.ced-process__hex   { width: 180px; height: 200px; padding: 1.75rem 1rem; }
	.ced-process__hex-name { font-size: 1.1rem; }
	.ced-process__hex-body { font-size: 0.72rem; }
	.ced-process__honey-row--offset { transform: translateX(calc((180px + 1rem) / 2)); }
	.ced-process__honey-row { margin-block: -26px; }
}
@media (max-width: 720px) {
	.ced-process__head  { margin-bottom: 2rem; }
	.ced-process__honey { gap: 0.4rem; }
	.ced-process__honey-row {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
		margin-block: -16px;
	}
	.ced-process__honey-row--offset { transform: none; }
	.ced-process__hex {
		width: 150px;
		height: 165px;
		padding: 1.25rem 0.85rem;
	}
	.ced-process__hex-num  { font-size: 0.85rem; }
	.ced-process__hex-name { font-size: 0.95rem; }
	.ced-process__hex-meta { font-size: 0.55rem; letter-spacing: 0.18em; }
	.ced-process__hex-body { display: none; } /* too cramped at this size */
}
@media (max-width: 380px) {
	.ced-process__hex { width: 135px; height: 148px; }
}

/* Reduced motion — kill scale/hover/reveal animations entirely. */
@media (prefers-reduced-motion: reduce) {
	.ced-process__hex,
	.ced-process__hex.is-in,
	.ced-process__hex.ced-reveal.is-in,
	.ced-process__hex:hover {
		opacity: 1;
		transform: none;
		transition: none;
	}
}