/* themes/cacsJournal/src/styles/process-infographic.css
 *
 * About page "Editorial Process" infographic (owner correction,
 * 2026-11-02): a dedicated, self-contained component built to visually
 * match an owner-supplied reference image (grid of illustrated cards +
 * banner title + flow connectors), NOT a reuse of the thin vertical
 * timeline on the dedicated Editorial Workflow page. Deliberately has no
 * dependency on editorial-workflow.css and no shared class names with it
 * - the two pages are free to diverge visually without any risk of one
 * edit leaking into the other. Scoped entirely under .cacs-process
 * (used only by about.tpl's Editorial Process section).
 *
 * Palette is CACS's own navy/teal + the existing --ok-green token (same
 * one used for the Open Access tag and the previous milestone accent) -
 * the reference's generic sky-blue card headers are reinterpreted as a
 * soft CACS-teal tint so this still reads as the CACS site, not a
 * generic clip-art infographic.
 */

.cacs-process{margin:0 0 var(--sp-7)}

/* ---------- Ribbon/banner title ---------- */
.cacs-process__ribbon{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	margin:0 auto var(--sp-5);
	max-width:620px;
}
.cacs-process__ribbon-flag{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:.85rem 3.2rem;
	background:linear-gradient(135deg,var(--cacs-teal-600),var(--cacs-navy-800));
	border-radius:6px;
	box-shadow:var(--shadow-lift);
}
.cacs-process__ribbon-flag::before,
.cacs-process__ribbon-flag::after{
	content:"";
	position:absolute;
	top:0;
	width:0;
	height:0;
	border-top:1.45rem solid var(--cacs-navy-900);
	filter:brightness(.78);
}
.cacs-process__ribbon-flag::before{
	left:-1.1rem;
	border-right:1.1rem solid transparent;
	border-bottom:1.45rem solid transparent;
}
.cacs-process__ribbon-flag::after{
	right:-1.1rem;
	border-left:1.1rem solid transparent;
	border-bottom:1.45rem solid transparent;
}
.cacs-process__ribbon-flag h2{
	position:relative;
	color:#fff;
	font-size:1.9rem;
	font-weight:600;
	letter-spacing:.01em;
	margin:0;
	white-space:nowrap;
}
.cacs-process__intro{
	margin:var(--sp-4) 0 0;
	color:var(--cacs-gray-600);
	font-size:1.05rem;
	line-height:1.65;
	max-width:52ch;
}

/* ---------- Row of 3 illustrated cards, with inline flow arrows ---------- */
.cacs-process__row{
	display:flex;
	align-items:stretch;
	gap:0;
	margin:0 0 var(--sp-3);
}
.cacs-process__row:first-of-type{margin-top:var(--sp-6)}
.cacs-process__card{
	flex:1 1 0;
	min-width:0;
	display:flex;
	flex-direction:column;
	background:#fff;
	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-process__card:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px)}
}
.cacs-process__card-head{
	display:flex;
	align-items:center;
	gap:.7rem;
	padding:1rem 1.2rem;
	background:linear-gradient(135deg,rgba(1,146,166,.14),rgba(107,201,218,.18));
	border-bottom:1px solid rgba(1,146,166,.16);
}
.cacs-process__num{
	flex:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	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;
}
.cacs-process__card-head h3{
	margin:0;
	font-size:1.12rem;
	font-weight:600;
	line-height:1.25;
	color:var(--cacs-navy-900);
}
.cacs-process__card-body{
	flex:1 1 auto;
	display:flex;
	flex-direction:column;
	gap:var(--sp-3);
	padding:1.1rem 1.2rem 1.3rem;
}
.cacs-process__card-body p{
	margin:0;
	font-size:.92rem;
	line-height:1.55;
	color:var(--cacs-gray-600);
}
.cacs-process__illustration{
	position:relative;
	align-self:center;
	display:flex;
	align-items:center;
	justify-content:center;
	width:84px;
	height:84px;
	margin-top:auto;
}
.cacs-process__illustration::before{
	content:"";
	position:absolute;
	inset:6%;
	border-radius:50%;
	background:radial-gradient(circle,rgba(1,146,166,.14) 0%,rgba(1,146,166,0) 72%);
	z-index:0;
}
.cacs-process__illustration svg{position:relative;z-index:1;width:100%;height:100%}

/* ---------- Inline horizontal arrow between cards in the same row ---------- */
.cacs-process__arrow{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	justify-content:center;
	width:2.6rem;
	color:var(--cacs-teal-600);
}
.cacs-process__arrow svg{width:28px;height:28px}

/* ---------- Curved/vertical connector between rows ---------- */
.cacs-process__row-link{
	display:flex;
	justify-content:center;
	margin:0 0 var(--sp-3);
	color:var(--cacs-teal-600);
}
.cacs-process__row-link svg{width:34px;height:34px}

/* ---------- Step 7: wide completion card ---------- */
.cacs-process__final{
	display:flex;
	align-items:center;
	gap:var(--sp-5);
	background:linear-gradient(135deg,#fff 55%,rgba(30,122,76,.05));
	border:1px solid rgba(30,122,76,.28);
	border-radius:var(--radius-m);
	box-shadow:var(--shadow-card);
	padding:1.4rem 1.8rem;
}
.cacs-process__final-illustration{
	flex:none;
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:96px;
	height:96px;
}
.cacs-process__final-illustration::before{
	content:"";
	position:absolute;
	inset:4%;
	border-radius:50%;
	background:radial-gradient(circle,rgba(30,122,76,.16) 0%,rgba(30,122,76,0) 72%);
	z-index:0;
}
.cacs-process__final-illustration svg{position:relative;z-index:1;width:100%;height:100%}
.cacs-process__final-body{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:.9rem}
.cacs-process__final-body .cacs-process__num{
	width:42px;
	height:42px;
	font-size:1.2rem;
	background:linear-gradient(145deg,var(--cacs-teal-700),var(--ok-green,#1E7A4C));
	flex:none;
}
.cacs-process__final-text h3{margin:0 0 .35rem;font-size:1.35rem;font-weight:600;color:var(--cacs-navy-900)}
.cacs-process__final-text p{margin:0;font-size:.95rem;line-height:1.6;color:var(--cacs-gray-600)}
.cacs-process__final-timing{
	flex:none;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:.1rem;
	min-width:9.5rem;
	padding:.8rem 1.1rem;
	background:rgba(30,122,76,.12);
	border:1px solid rgba(30,122,76,.26);
	border-radius:var(--radius-m);
	text-align:center;
}
.cacs-process__final-timing strong{font-family:var(--cc-serif);font-size:1.15rem;font-weight:600;color:var(--ok-green,#1E7A4C);line-height:1.2}
.cacs-process__final-timing span{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ok-green,#1E7A4C)}

.cacs-process__cta{margin:var(--sp-5) auto 0;display:flex;justify-content:center}

/* ================= RESPONSIVE ================= */

/* Tablet: keep 3-per-row grid but tighten the card internals */
@media (max-width:1024px){
	.cacs-process__card-body{padding:1rem 1rem 1.2rem}
	.cacs-process__illustration{width:72px;height:72px}
	.cacs-process__arrow{width:2rem}
	.cacs-process__final{padding:1.2rem 1.4rem;gap:var(--sp-4)}
}

/* Narrow tablet: drop to 2-per-row so cards keep breathing room. The
 * horizontal arrow sibling between cards 2-3 (which no longer sit on the
 * same visual row once row 1 wraps to 2+1) would land in a confusing
 * spot, so it's hidden here only; row-to-row vertical connectors still
 * show the overall flow. */
@media (max-width:860px){
	.cacs-process__row{flex-wrap:wrap;row-gap:var(--sp-4)}
	.cacs-process__row .cacs-process__card{flex:1 1 calc(50% - 1.3rem)}
	.cacs-process__arrow{display:none}
	.cacs-process__final{flex-wrap:wrap}
	.cacs-process__final-timing{margin-left:auto}
}

/* Mobile: full stack. .cacs-process__arrow is already a flex sibling
 * sitting between two cards in the row's DOM order - switching the row
 * to column flow naturally places it BETWEEN the two stacked cards, so
 * it's un-hidden and simply rotated to point down instead of needing a
 * separate pseudo-element (which a previous attempt placed as a ::after
 * on .cacs-process__card, where the card's own overflow:hidden silently
 * clipped it - never actually visible). Flow must stay legible when
 * stacked, not just collapse into an unordered pile. */
@media (max-width:640px){
	.cacs-process__ribbon-flag{padding:.7rem 1.8rem}
	.cacs-process__ribbon-flag h2{font-size:1.5rem;white-space:normal}
	.cacs-process__row{flex-direction:column;gap:0}
	.cacs-process__row .cacs-process__card{flex:1 1 auto;margin-bottom:var(--sp-3)}
	.cacs-process__row .cacs-process__arrow{
		display:flex;
		width:auto;
		height:2.2rem;
		margin-bottom:var(--sp-3);
	}
	.cacs-process__row .cacs-process__arrow svg{transform:rotate(90deg)}
	.cacs-process__final{
		flex-direction:column;
		text-align:center;
		padding:1.3rem 1.3rem 1.5rem;
	}
	.cacs-process__final-body{flex-direction:column;gap:.6rem}
	.cacs-process__final-timing{width:100%;margin-left:0}
}

@media (max-width:420px){
	.cacs-process__card-head{padding:.85rem 1rem}
	.cacs-process__card-head h3{font-size:1.02rem}
	.cacs-process__card-body{padding:.9rem .9rem 1.1rem}
	.cacs-process__illustration{width:64px;height:64px}
}

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