/*
 * Lifecycle block (T-07; sealcoin-core `sealcoin/lifecycle`). Ported from the
 * redesign PoC (css/site.css @ ed0ab9f7, "Lifecycle stepper", ".icon-btn")
 * using theme.json tokens and base.css aliases only. The block's markup and
 * behaviour live in sealcoin-core; this file is presentation only.
 *
 * Without JavaScript the block is an ordered list of steps (all text shown).
 * With view.js (`.is-enhanced`) it is a row of tabs over a panel. Breakpoint
 * md (900px) as in the PoC. Transitions run only when motion is allowed.
 * Literal values kept from the PoC: 1px and 2px lines, round dots and
 * buttons (50%).
 */

.sc-lifecycle {
	position: relative;
}

.sc-lifecycle :where(h3, p) {
	margin: 0;
}

/* ---------- Icons (list, tabs, nav) ---------- */

.sc-lc-icon,
.sc-lc-dot {
	display: grid;
	place-items: center;
	width: var(--wp--custom--lifecycle--dot-size);
	height: var(--wp--custom--lifecycle--dot-size);
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--c-ink-deep);
	color: var(--c-faint);
	--sc-icon-size: var(--wp--custom--lifecycle--dot-icon-size);
}

.sc-lc-dot > .sc-lc-icon {
	width: auto;
	height: auto;
	border: 0;
	background: none;
	color: inherit;
}

/* ---------- Without JavaScript: an ordered list ---------- */

.sc-lc-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--custom--lifecycle--list-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: sc-lc;
}

.sc-lc-step {
	display: grid;
	grid-template-columns: var(--wp--custom--lifecycle--dot-size) 1fr;
	column-gap: var(--wp--custom--lifecycle--panel-gap);
	padding: var(--wp--custom--lifecycle--panel-padding);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-card);
	background: var(--c-panel);
	counter-increment: sc-lc;
}

.sc-lc-step > .sc-lc-icon {
	grid-row: span 3;
}

.sc-lc-step > :not(.sc-lc-icon) {
	grid-column: 2;
}

.sc-lc-step > .sc-lc-title::before {
	content: counter(sc-lc, decimal-leading-zero) " ";
	color: var(--c-orange);
}

.sc-lc-text {
	color: var(--c-muted);
}

.sc-lc-title {
	margin-bottom: var(--wp--custom--lifecycle--title-offset);
	font-size: var(--wp--preset--font-size--h-3);
}

.sc-lifecycle .sc-lc-pillar {
	display: inline-block;
	justify-self: start;
	margin-top: var(--wp--custom--lifecycle--tag-offset);
	padding: var(--wp--custom--lifecycle--tag-padding);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	font-family: var(--f-display);
	font-size: var(--wp--custom--font-size--lifecycle-tag);
	letter-spacing: var(--wp--custom--letter-spacing--micro);
	text-transform: uppercase;
	color: var(--c-orange);
}

/* ---------- Enhanced: tabs ---------- */

.sc-lc-track {
	--sc-lc-progress: 5%;
	position: relative;
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	gap: var(--wp--custom--lifecycle--track-gap);
	margin-bottom: var(--wp--custom--lifecycle--track-offset);
}

.sc-lc-track::before {
	content: "";
	position: absolute;
	top: var(--wp--custom--lifecycle--track-line-top);
	right: var(--wp--custom--lifecycle--track-line-inset);
	left: var(--wp--custom--lifecycle--track-line-inset);
	height: 2px;
	background: linear-gradient(90deg, var(--c-orange) var(--sc-lc-progress), color-mix(in srgb, var(--c-orange) 18%, transparent) var(--sc-lc-progress));
}

.sc-lc-tab {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--lifecycle--step-gap);
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-muted);
	font: inherit;
	font-size: var(--wp--custom--font-size--lifecycle-step);
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
}

.sc-lc-tab.is-done .sc-lc-dot {
	border-color: var(--c-orange);
	color: var(--c-orange);
}

.sc-lc-tab.is-current {
	color: var(--c-text);
}

.sc-lc-tab.is-current .sc-lc-dot {
	border-color: var(--c-orange);
	background: var(--c-orange);
	box-shadow: 0 0 0 var(--wp--custom--lifecycle--dot-ring) color-mix(in srgb, var(--c-orange) 18%, transparent);
	color: var(--c-on-orange);
}

.sc-lc-stage {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--wp--custom--lifecycle--panel-gap);
	align-items: center;
	padding: var(--wp--custom--lifecycle--panel-padding);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--c-panel);
}

.sc-lc-panel {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--wp--custom--lifecycle--panel-gap);
	align-items: center;
}

.sc-lc-panel[hidden] {
	display: none;
}

.sc-lc-number {
	font-family: var(--f-display);
	font-size: var(--wp--custom--font-size--lifecycle-number);
	font-weight: 700;
	line-height: 1;
	color: var(--c-orange);
}

/* Block flow, as the PoC's panel text (the pillar tag is inline-block). */
.sc-lc-panel-body {
	display: block;
}

.sc-lc-nav {
	display: flex;
	gap: var(--wp--custom--lifecycle--nav-gap);
}

.sc-lc-nav-button {
	display: grid;
	place-items: center;
	width: var(--wp--custom--lifecycle--nav-size);
	height: var(--wp--custom--lifecycle--nav-size);
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: transparent;
	color: var(--c-text);
	cursor: pointer;
	--sc-icon-size: var(--wp--custom--lifecycle--nav-icon-size);
}

.sc-lc-nav-button:hover {
	background: color-mix(in srgb, var(--c-orange) 10%, transparent);
}

@media (prefers-reduced-motion: no-preference) {

	.sc-lc-dot {
		transition: background var(--motion-base), border-color var(--motion-base), color var(--motion-base), box-shadow var(--motion-base);
	}
}

/* md */
@media (max-width: 900px) {

	.sc-lc-track {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		row-gap: var(--wp--custom--lifecycle--track-row-gap);
	}

	.sc-lc-track::before {
		display: none;
	}

	.sc-lc-stage,
	.sc-lc-panel {
		grid-template-columns: 1fr;
	}

	.sc-lc-number {
		font-size: var(--wp--custom--font-size--lifecycle-number-small);
	}

	.sc-lc-list {
		grid-template-columns: 1fr;
	}
}

/* ---------- Block editor ---------- */

/* The editor shows the steps as numbered cards; the pillar is a tag. */
.sc-lifecycle-step-editor {
	padding: var(--wp--custom--lifecycle--panel-padding);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-card);
	background: var(--c-panel);
	counter-increment: sc-lc-editor-step;
}

.sc-lifecycle-step-editor::before {
	content: counter(sc-lc-editor-step, decimal-leading-zero);
	display: block;
	font-family: var(--f-display);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	color: var(--c-orange);
}

.sc-lifecycle-step-editor > * {
	margin-block: 0;
}

.sc-lifecycle-step-editor > * + * {
	margin-top: var(--wp--custom--lifecycle--title-offset);
}

.sc-lifecycle-step-editor > p:nth-of-type(1) {
	color: var(--c-muted);
}

.sc-lifecycle-step-editor > p:nth-of-type(2) {
	display: inline-block;
	margin-top: var(--wp--custom--lifecycle--tag-offset);
	padding: var(--wp--custom--lifecycle--tag-padding);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	font-size: var(--wp--preset--font-size--eyebrow);
	color: var(--c-orange);
}

.sc-lifecycle-editor > .block-editor-inner-blocks > * {
	display: grid;
	gap: var(--wp--custom--lifecycle--list-gap);
	counter-reset: sc-lc-editor-step;
}