/*
=========================================================
PROCESS STYLESHEET - Joshua Dalton Media
=========================================================

Purpose
-------
This file contains the shared styles for process / steps / timeline sections used
across joshuadaltonmedia.com. It supports numbered process cards, icon-led steps,
simple vertical timelines, compact process rows, CTA endings, and reusable
section wrappers for explaining how a project moves from enquiry to delivery.

What belongs in this file
-------------------------
- Shared process section wrappers
- Shared process grid and track layouts
- Shared process card / step styles
- Shared step number, icon, eyebrow, title, copy, and points styles
- Shared optional status / meta rows
- Shared compact / featured / timeline variants
- Shared CTA ending card styles
- Shared responsive rules for process sections

Asset path usage
----------------
This stylesheet is intended to be referenced from pages with:

<link rel="stylesheet" href="/assets/css/process.css">

Relationship to page files
--------------------------
Page files should:
1. load this stylesheet in the head
2. use the shared process class system where possible
3. keep truly page-specific process tweaks inside their page skin stylesheet

Maintenance rule
----------------
If a selector is not genuinely reusable across multiple process implementations
or templates, it should not be added here. Keep this file shared, stable, and predictable.
*/

/* ================= PROCESS WRAPPERS ================= */
.process-embed{display:grid;gap:14px;margin-top:clamp(10px,3vw,24px)}
.process-embed.compact{gap:10px}
.process-embed.loose{gap:18px}
.process-embed.flush{margin-top:0}

.process-head{display:grid;gap:10px}

/* ================= PROCESS LAYOUTS ================= */
.process-grid{display:grid;gap:12px}
.process-grid.one{grid-template-columns:1fr}
.process-grid.two{grid-template-columns:1fr}
.process-grid.three{grid-template-columns:1fr}
.process-grid.four{grid-template-columns:1fr}

/* ================= PROCESS STEP ================= */
.process-step{position:relative;display:grid;gap:14px;min-height:100%;padding:18px;border-radius:var(--radius);background:linear-gradient(180deg,rgba(20,20,20,.92),rgba(20,20,20,.74));border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 40px rgba(0,0,0,.45);overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.process-step::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,77,77,.14),transparent 42%);opacity:.28;pointer-events:none}
.process-step > *{position:relative;z-index:1}
.process-step.flat{background:rgba(255,255,255,.03);box-shadow:none}
.process-step.panel{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));box-shadow:0 14px 44px rgba(0,0,0,.28)}
.process-step.highlight{border-color:rgba(255,77,77,.2);background:linear-gradient(180deg,rgba(255,77,77,.08),rgba(20,20,20,.82))}
.process-step.compact{gap:10px;padding:14px}
.process-step.center{text-align:center;justify-items:center}
.process-step.minimal::before{display:none}
.process-step.minimal{background:rgba(255,255,255,.03);box-shadow:none}

/* ================= STEP TOP ================= */
.process-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.process-top.start{justify-content:flex-start}
.process-top.center{justify-content:center}
.process-top.stack{display:grid;justify-content:stretch}

.process-num{font-size:clamp(28px,8vw,44px);font-weight:800;line-height:1;color:rgba(255,255,255,.08);letter-spacing:-.03em}
.process-num.sm{font-size:clamp(22px,6vw,34px)}
.process-num.lg{font-size:clamp(34px,10vw,54px)}

.process-icon{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:rgba(255,77,77,.14);border:1px solid rgba(255,77,77,.35);font-size:18px;line-height:1;flex:0 0 auto}
.process-icon.sm{width:36px;height:36px;font-size:15px}
.process-icon.lg{width:52px;height:52px;font-size:20px}
.process-icon.ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}

/* ================= STEP COPY ================= */
.process-copy{display:grid;gap:8px}
.process-kicker{font-size:.68rem;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--accent)}
.process-title{margin:0;font-size:clamp(1rem,3.5vw,1.22rem);line-height:1.2;color:var(--ink)}
.process-text{margin:0;font-size:clamp(.84rem,2.7vw,.96rem);line-height:1.6;color:var(--muted);max-width:70ch}
.process-copy.tight{gap:6px}
.process-copy.loose{gap:10px}

/* ================= STEP POINTS ================= */
.process-points{--accent-list-gap:8px;--accent-list-font-size:clamp(.78rem,2.5vw,.88rem);--accent-list-line-height:1.45;--accent-list-color:var(--ink)}

.process-points.compact{--accent-list-gap:6px;--accent-list-font-size:clamp(.76rem,2.4vw,.84rem)}
.process-points.muted{--accent-list-color:var(--muted)}
.process-points.check li::before{width:9px;height:9px;border-radius:999px}
.process-points.clean li{padding-left:0}
.process-points.clean li::before{display:none}

/* ================= META / STATUS ================= */
.process-meta{display:flex;flex-wrap:wrap;gap:8px 10px;padding-top:2px}

/* ================= CTA / END CARD ================= */
.process-cta{display:grid;gap:10px;padding:16px;border-radius:var(--radius);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.process-cta > *{margin:0}
.process-cta p{font-size:clamp(.8rem,2.7vw,.9rem);line-height:1.5;color:var(--muted)}
.process-cta strong{color:var(--ink)}
.process-cta-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.process-cta.center{text-align:center;justify-items:center}
.process-cta.highlight{background:linear-gradient(180deg,rgba(255,77,77,.1),rgba(255,255,255,.03));border-color:rgba(255,77,77,.22)}
.process-cta.compact{padding:12px;border-radius:12px}

/* ================= UTILITIES ================= */
.process-step.is-hidden{display:none}

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

@media(min-width:360px){
	/* ================= PROCESS WRAPPERS ================= */
	.process-embed{gap:15px}
	/* ================= PROCESS LAYOUTS ================= */
	.process-grid{gap:14px}
	/* ================= PROCESS STEP ================= */
	.process-step{padding:20px}
	/* ================= CTA / END CARD ================= */
	.process-cta{padding:16px}
}

@media(min-width:700px){
	/* ================= PROCESS WRAPPERS ================= */
	.process-embed{gap:16px}
	/* ================= PROCESS LAYOUTS ================= */
	.process-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
	.process-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
	.process-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
	/* ================= PROCESS STEP ================= */
	.process-step{padding:24px}
	/* ================= STEP COPY ================= */
	.process-title{font-size:clamp(1rem,1.7vw,1.18rem)}
	.process-text{font-size:clamp(.84rem,1.2vw,.92rem)}
	/* ================= STEP POINTS ================= */
	.process-points li{font-size:clamp(.78rem,1.05vw,.86rem)}
	/* ================= CTA / END CARD ================= */
	.process-cta{padding:18px}
}

@media(min-width:1024px){
	/* ================= PROCESS WRAPPERS ================= */
	.process-embed{gap:18px}
	/* ================= PROCESS LAYOUTS ================= */
	.process-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
	/* ================= PROCESS STEP ================= */
	.process-step{padding:28px}
	/* ================= STEP COPY ================= */
	.process-title{font-size:1.22rem}
	/* ================= CTA / END CARD ================= */
	.process-cta{padding:20px}
}

@media(hover:hover){
	/* ================= PROCESS STEP ================= */
	.process-step:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.12);box-shadow:0 18px 48px rgba(0,0,0,.5)}
	.process-step.highlight:hover{border-color:rgba(255,77,77,.28)}
}