/* themes/cacsJournal/src/styles/editorial-workflow.css
 *
 * Premium "Editorial Workflow" page (public, ungated — about/submissions
 * ?view=editorial-workflow). Loaded after premium-refinement.css (see
 * CacsJournalThemePlugin addStyle order) so it can safely build on the
 * Concept C tokens defined in concept-c.css and the shared .cacs-page-hero /
 * .cmp_breadcrumbs rules in inner-pages.css without fighting specificity —
 * every selector below is scoped under .cacs-workflow to stay a narrow,
 * additive layer (see frontend-implementation skill note on the
 * `> li >` vs descendant-selector specificity bug from an earlier phase).
 */

/* The Concept C --cc-serif/--cc-sans tokens fall back to generic system
 * fonts (Georgia/Segoe UI). tokens.css already loads the real premium
 * pair this page's approved concept uses - Source Serif 4 / Source Sans 3
 * (see fonts.css @import, loaded site-wide) - via --cacs-font-display /
 * --cacs-font-body. Re-pointing --cc-serif/--cc-sans to them *only* inside
 * .cacs-workflow keeps every other Concept C page's typography untouched. */
.cacs-workflow{
	--cc-serif:var(--cacs-font-display,"Source Serif 4",Georgia,serif);
	--cc-sans:var(--cacs-font-body,"Source Sans 3",'Segoe UI',sans-serif);
}

/* Same widened-container pattern already used by .cacs-about/.cacs-issue/
 * .cacs-resource (inner-pages.css) - gives this page's premium timeline a
 * fuller, less margin-heavy composition without touching the shared
 * site-wide --cacs-container token every other page still uses. */
.cacs-inner.cacs-workflow{max-width:1240px;margin-inline:auto}

/* ---------- Hero (text only) ---------- */
.cacs-workflow-hero{
	padding:var(--sp-6) var(--sp-7);
}
.cacs-workflow-hero__content{max-width:68ch}
.cacs-workflow-hero__subtitle{
	font-family:var(--cc-serif);
	font-size:1.05rem;
	font-weight:600;
	letter-spacing:.01em;
	color:var(--cacs-cyan-400);
	margin:0 0 .9rem;
}
.cacs-workflow-hero__lead{margin:0}

@media (max-width:900px){
	.cacs-workflow-hero{padding:var(--sp-5) var(--sp-4)}
}

/* ---------- Timeline section heading ---------- */
.cacs-workflow-timeline__heading{
	font-family:var(--cc-serif);
	font-weight:400;
	font-size:1.7rem;
	color:var(--cacs-navy-900);
	margin:var(--sp-6) 0 var(--sp-5);
}

/* ---------- Vertical connected timeline ---------- */
.cacs-workflow-timeline{
	position:relative;
	list-style:none;
	margin:0 0 var(--sp-7);
	padding:0;
	display:flex;
	flex-direction:column;
	gap:var(--sp-5);
}
.cacs-workflow-timeline::before{
	content:"";
	position:absolute;
	left:29px;
	top:8px;
	bottom:8px;
	width:3px;
	border-radius:2px;
	background:linear-gradient(180deg,var(--cacs-navy-700),var(--cacs-teal-500) 55%,var(--cacs-cyan-400));
	opacity:.75;
}

/* Every step shares ONE grid: marker, icon, panel. The panel column is the
 * single source of each row's right edge, whether or not that step has a
 * timing inset - this is what keeps every row's width visually consistent
 * (previously, timing-less steps' cards stretched further right than
 * timed steps', producing the uneven/"thin" look). */
.cacs-workflow-step{
	/* base.css applies `li { max-width: var(--cacs-measure) }` site-wide for
	 * prose readability (see the same override already used for
	 * .cacs-inner .cacs-iss-list>li) - this <li> is a layout row, not a
	 * prose line, so it needs the full row width. */
	max-width:none;
	position:relative;
	display:grid;
	grid-template-columns:60px 68px minmax(0,1fr);
	align-items:stretch;
	gap:var(--sp-4);
}

.cacs-workflow-step__marker{
	position:relative;
	z-index:1;
	display:flex;
	align-items:flex-start;
	justify-content:center;
	padding-top:.3rem;
}
.cacs-workflow-step__num{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:42px;
	height:42px;
	border-radius:50%;
	background:linear-gradient(145deg,var(--cacs-navy-800),var(--cacs-teal-600));
	color:#fff;
	font-family:var(--cc-serif);
	font-size:1rem;
	font-weight:600;
	letter-spacing:.02em;
	box-shadow:0 0 0 4px #fff,var(--shadow-card);
}

.cacs-workflow-step__icon{
	position:relative;
	z-index:1;
	align-self:flex-start;
	display:flex;
	align-items:center;
	justify-content:center;
	width:56px;
	height:56px;
	margin-top:.4rem;
	border-radius:50%;
	background:rgba(1,146,166,.08);
	color:var(--cacs-teal-700);
	border:1px solid rgba(1,146,166,.18);
}
.cacs-workflow-step__icon svg{width:28px;height:28px}

/* The unified "premium block": content card + timing inset live inside one
 * bordered/shadowed panel instead of two separate floating boxes, so the
 * row reads as a single substantial unit and the timing inset always
 * aligns flush to the panel's own right edge. */
.cacs-workflow-step__panel{
	display:flex;
	align-items:stretch;
	min-width:0;
	background:linear-gradient(180deg,#fff,rgba(1,146,166,.035));
	border:1px solid var(--cacs-gray-300);
	border-radius:var(--radius-m);
	box-shadow:var(--shadow-card);
	overflow:hidden;
	transition:box-shadow .2s ease,transform .2s ease;
}
@media (hover:hover){
	.cacs-workflow-step:hover .cacs-workflow-step__panel{
		box-shadow:var(--shadow-lift);
		transform:translateY(-2px);
	}
}

.cacs-workflow-step__card{
	flex:1 1 auto;
	min-width:0;
	padding:var(--sp-5) var(--sp-6);
}
.cacs-workflow-step__card h3{
	font-family:var(--cc-serif);
	font-weight:600;
	font-size:1.35rem;
	color:var(--cacs-navy-900);
	margin:0 0 .5rem;
}
.cacs-workflow-step__card p{
	font-size:1.05rem;
	line-height:1.65;
	color:var(--cacs-gray-600);
	margin:0;
	max-width:62ch;
}

.cacs-workflow-step__timing{
	flex:0 0 240px;
	display:flex;
	align-items:center;
	gap:.75rem;
	padding:var(--sp-5);
	background:linear-gradient(165deg,rgba(1,146,166,.1),rgba(107,201,218,.07));
	border-left:1px solid rgba(1,146,166,.2);
}
.cacs-workflow-step__timing-icon{
	flex:none;
	display:flex;
	align-items:center;
	justify-content:center;
	width:30px;
	height:30px;
	border-radius:8px;
	background:var(--cacs-teal-600);
	color:#fff;
}
.cacs-workflow-step__timing-icon svg{width:16px;height:16px}
.cacs-workflow-step__timing-text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.cacs-workflow-step__timing-value{
	font-family:var(--cc-serif);
	font-weight:600;
	font-size:1.1rem;
	color:var(--cacs-navy-900);
	line-height:1.2;
}
.cacs-workflow-step__timing-label{
	font-size:.68rem;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--cacs-teal-700);
}

/* ---------- Tablet: narrower marker/icon columns, trim panel insets ---------- */
@media (max-width:900px){
	.cacs-workflow-step{
		grid-template-columns:48px 56px minmax(0,1fr);
		gap:var(--sp-3);
	}
	.cacs-workflow-timeline::before{left:23px}
	.cacs-workflow-step__card{padding:var(--sp-4) var(--sp-5)}
	.cacs-workflow-step__timing{flex-basis:200px;padding:var(--sp-4)}
}

/* ---------- Mobile: stack marker+icon+panel, timing drops below card ---------- */
@media (max-width:640px){
	.cacs-workflow-timeline::before{left:23px}
	.cacs-workflow-step{
		grid-template-columns:48px 1fr;
		grid-template-areas:
			"marker icon"
			"gap    panel";
		row-gap:.6rem;
	}
	.cacs-workflow-step__marker{grid-area:marker}
	.cacs-workflow-step__icon{grid-area:icon;justify-self:start;margin-top:0}
	.cacs-workflow-step__panel{grid-area:panel;flex-direction:column}
	.cacs-workflow-step__timing{
		flex-basis:auto;
		border-left:none;
		border-top:1px solid rgba(1,146,166,.2);
	}
}

@media (max-width:420px){
	.cacs-workflow-step__card{padding:var(--sp-3) var(--sp-4)}
	.cacs-workflow-step__timing{padding:var(--sp-3) var(--sp-4)}
	.cacs-workflow-timeline__heading{font-size:1.3rem}
}

@media (prefers-reduced-motion:reduce){
	.cacs-workflow-step__panel{transition:none}
}