.forge-process-block {
--forge-process-surface: var(--forge-process-surface-custom, var(--forge-card-bg));
--forge-process-border: var(--forge-process-border-custom, var(--forge-card-border));
--forge-process-radius: var(--forge-process-radius-custom, var(--forge-card-radius));
--forge-process-shadow: var(--forge-process-shadow-custom, var(--forge-card-shadow));
--forge-process-shadow-hover: var(--forge-process-shadow-hover-custom, var(--forge-card-shadow-hover));
--forge-process-accent: var(--forge-process-accent-custom, var(--forge-primary));
--forge-process-accent-height: var(--forge-process-accent-height-custom, var(--forge-card-accent-thickness));
--forge-process-indicator-radius: var(--forge-badge-radius);
--forge-process-heading-color: var(--forge-process-heading-color-custom, var(--forge-on-card-bg, #2E2A3F));
--forge-process-text-color: var(--forge-process-text-color-custom, var(--forge-on-card-bg, #2E2A3F));
--forge-process-icon-bg: var(--forge-process-accent);
--forge-process-icon-color: var(--forge-process-icon-color-custom, var(--forge-on-primary));
display: block;
width: 100%;
margin-bottom: var(--block-margin-bottom, var(--forge-section-gap));
}
.forge-process-block .process-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--forge-spacing-md);
padding-top: 2rem; 
}
.forge-process-block .process-step-card {
background: var(--forge-process-surface);
border: var(--forge-process-border);
border-radius: var(--forge-process-radius);
box-shadow: var(--forge-process-shadow);
padding: 2.5rem 2rem 2rem;
position: relative;
border-top: var(--forge-process-accent-height) solid var(--forge-process-accent);
transition: var(--forge-transition-base);
}
.forge-process-block .process-step-card:hover {
transform: var(--forge-card-hover-transform);
box-shadow: var(--forge-process-shadow-hover);
}
.forge-process-block .step-number-wrapper {
position: absolute;
top: -20px; 
left: 2rem;
width: 40px;
height: 40px;
background: var(--forge-process-icon-bg);
border-radius: var(--forge-process-indicator-radius); 
color: var(--forge-process-icon-color);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-family: var(--forge-font-action);
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
z-index: 2;
}
.forge-process-block .step-title {
font-family: var(--forge-process-heading-font-custom, var(--forge-font-heading));
color: var(--forge-process-heading-color);
font-size: 1.25rem;
margin: 1rem 0 0.75rem;
font-weight: var(--forge-font-heading-weight-custom, 700);
}
.forge-process-block .step-description {
font-family: var(--forge-process-body-font-custom, var(--forge-font-body));
color: var(--forge-process-text-color);
font-size: 1rem;
line-height: 1.6;
opacity: 0.9;
}
.forge-process-block.style-2 .process-grid {
padding-top: 0;
}
.forge-process-block.style-2 .process-step-card {
background: transparent;
border: none;
border-top: none;
box-shadow: none;
padding: 0;
border-radius: 0;
}
.forge-process-block.style-2 .process-step-card:hover {
transform: none;
box-shadow: none;
}
.forge-process-block.style-2 .step-number-wrapper {
position: static;
width: auto;
height: auto;
background: transparent;
border-radius: 0;
box-shadow: none;
color: var(--forge-process-accent);
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: 800;
font-family: var(--forge-font-heading);
line-height: 1;
opacity: 0.85;
display: block;
margin-bottom: 0.5rem;
}
.forge-process-block.style-2 .step-title {
margin: 0 0 0.5rem;
font-size: 1.15rem;
}
.forge-process-block.style-2 .step-description {
font-size: 0.95rem;
}
.forge-process-block.process-steps-4 .process-grid {
grid-template-columns: repeat(auto-fit, minmax(clamp(190px, (760px + 3 * var(--forge-spacing-md, 1.5rem) - 100%) * 999, 300px), 1fr));
}
.forge-process-block.process-steps-5 .process-grid {
grid-template-columns: repeat(auto-fit, minmax(clamp(190px, (950px + 4 * var(--forge-spacing-md, 1.5rem) - 100%) * 999, 300px), 1fr));
}
.forge-process-block.process-steps-4:not(.style-2) .process-step-card,
.forge-process-block.process-steps-5:not(.style-2) .process-step-card {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.forge-process-block.process-steps-4:not(.style-2) .step-number-wrapper,
.forge-process-block.process-steps-5:not(.style-2) .step-number-wrapper {
left: 1.5rem;
}
@media (max-width: 768px) {
.forge-process-block .process-grid {
gap: var(--forge-spacing-sm);
}
}
.forge-process-block.tx-brutalist-assembly .pr-assembly {
display: flex;
flex-direction: column;
border-left: 4px solid var(--forge-border-color, #000);
}
.tx-brutalist-assembly .pr-asm-step {
display: flex;
align-items: flex-start;
gap: 1.5rem;
padding: 1.75rem 0 1.75rem 1.5rem;
position: relative;
}
.tx-brutalist-assembly .pr-asm-step::before {
content: "";
position: absolute;
left: -4px;
top: 2.4rem;
width: 1.5rem;
height: 4px;
background: var(--forge-border-color, #000);
}
.tx-brutalist-assembly .pr-asm-num {
flex-shrink: 0;
font-family: 'Space Mono', 'Courier New', monospace;
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 1px;
background: var(--forge-primary);
color: var(--forge-border-color, #000);
border: 2px solid var(--forge-border-color, #000);
box-shadow: 4px 4px 0 var(--forge-border-color, #000);
padding: 6px 12px;
margin-top: 0.3rem;
}
.tx-brutalist-assembly .pr-asm-title {
font-family: 'Space Mono', 'Courier New', monospace;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 0.5rem;
font-size: 1.15rem;
color: var(--forge-on-page-bg, inherit);
}
.tx-brutalist-assembly .pr-asm-desc {
margin: 0;
line-height: 1.55;
color: var(--forge-on-page-bg, inherit);
opacity: 0.85;
}
@media (max-width: 768px) {
.tx-brutalist-assembly .pr-asm-step {
flex-direction: column;
gap: 0.75rem;
}
}
.forge-process-block.tx-editorial-chapters .pr-chapters {
display: flex;
flex-direction: column;
border-top: 3px double color-mix(in srgb, currentColor 40%, transparent);
}
.tx-editorial-chapters .pr-chapter {
padding: 2rem 0.5rem;
border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.tx-editorial-chapters .pr-chapter-kicker {
display: block;
font-variant: small-caps;
letter-spacing: 3px;
font-size: 0.85rem;
color: var(--forge-primary);
margin-bottom: 0.5rem;
}
.tx-editorial-chapters .pr-chapter-title {
font-family: var(--forge-font-heading, serif);
font-size: clamp(1.4rem, 2.6vw, 2.1rem);
font-weight: 700;
letter-spacing: -0.01em;
margin: 0 0 0.6rem;
color: var(--forge-on-page-bg, inherit);
}
.tx-editorial-chapters .pr-chapter-standfirst {
font-style: italic;
line-height: 1.6;
margin: 0;
max-width: 60ch;
color: var(--forge-on-page-bg, inherit);
opacity: 0.8;
}
.forge-process-block.tx-junior-path .pr-path {
display: flex;
flex-direction: column;
padding: 42px 24px 20px;
}
.tx-junior-path .pr-stone-row,
.tx-junior-path .pr-trail {
--pr-stone-color: var(--forge-process-accent);
}
.tx-junior-path .pr-c1 { --pr-stone-color: #FF6B4A; }
.tx-junior-path .pr-c2 { --pr-stone-color: #4AA8FF; }
.tx-junior-path .pr-c3 { --pr-stone-color: #7ED957; }
.tx-junior-path .pr-c4 { --pr-stone-color: #FFC94A; }
.tx-junior-path .pr-c5 { --pr-stone-color: #B05CFF; }
.tx-junior-path .pr-stone-row {
position: relative;
display: flex;
align-items: flex-start;
gap: 1.5rem;
}
.tx-junior-path .pr-row-right {
flex-direction: row-reverse;
}
.tx-junior-path .pr-stone-row:not(:last-child)::after {
content: "";
position: absolute;
top: 98px;
bottom: -1px;
left: 44px;
width: 0;
border-left: 3px dashed color-mix(in srgb, var(--pr-stone-color) 55%, transparent);
pointer-events: none;
z-index: 0;
}
.tx-junior-path .pr-row-right:not(:last-child)::after {
left: auto;
right: 44px;
}
.tx-junior-path .pr-stone {
position: relative;
z-index: 1;
flex-shrink: 0;
width: 88px;
height: 88px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
background: var(--pr-stone-color);
border: 4px solid var(--forge-card-bg, #ffffff);
border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
box-shadow: 0 0 0 3px var(--pr-stone-color), 0 7px 0 1px color-mix(in srgb, var(--pr-stone-color) 45%, transparent);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tx-junior-path .pr-stone-num {
font-family: var(--forge-font-heading, inherit);
font-size: 2rem;
font-weight: 800;
line-height: 1;
color: var(--pr-stone-ink, #ffffff);
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}
.tx-junior-path .pr-c3,
.tx-junior-path .pr-c4 {
--pr-stone-ink: color-mix(in srgb, var(--pr-stone-color) 55%, #000000);
}
.tx-junior-path .pr-stone-flag {
position: absolute;
top: -22px;
left: -16px;
transform: rotate(-8deg);
background: var(--forge-card-bg, #ffffff);
border: 2px solid var(--pr-stone-color);
border-radius: 999px;
padding: 2px 10px;
font-family: var(--forge-font-heading, inherit);
font-size: 0.75rem;
font-weight: 800;
color: color-mix(in srgb, var(--pr-stone-color) 72%, #000000);
white-space: nowrap;
z-index: 2;
}
.tx-junior-path .pr-stone-flag-end {
left: auto;
right: -16px;
transform: rotate(8deg);
}
.tx-junior-path .pr-stone-card {
flex: 1;
min-width: 0;
background: var(--forge-card-bg, #ffffff);
border: 3px solid var(--pr-stone-color);
border-radius: 22px;
padding: 1.15rem 1.5rem 1.25rem;
box-shadow: 0 7px 0 -2px color-mix(in srgb, var(--pr-stone-color) 40%, transparent);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.tx-junior-path .pr-row-left .pr-stone-card {
border-top-left-radius: 6px;
transform: rotate(0.6deg);
}
.tx-junior-path .pr-row-right .pr-stone-card {
border-top-right-radius: 6px;
transform: rotate(-0.6deg);
}
.tx-junior-path .pr-stone-title {
font-family: var(--forge-font-heading, inherit);
font-size: 1.15rem;
margin: 0 0 0.4rem;
color: color-mix(in srgb, var(--pr-stone-color) 72%, #000000);
}
.tx-junior-path .pr-stone-desc {
font-family: var(--forge-font-body, inherit);
margin: 0;
line-height: 1.55;
max-width: 62ch;
color: var(--forge-on-card-bg, inherit);
opacity: 0.85;
}
.tx-junior-path .pr-trail {
height: 58px;
margin: 0 44px;
border-bottom: 3px dashed color-mix(in srgb, var(--pr-stone-color) 55%, transparent);
pointer-events: none;
}
.tx-junior-path .pr-trail-ltr {
border-left: 3px dashed color-mix(in srgb, var(--pr-stone-color) 55%, transparent);
border-bottom-left-radius: 55% 100%;
}
.tx-junior-path .pr-trail-rtl {
border-right: 3px dashed color-mix(in srgb, var(--pr-stone-color) 55%, transparent);
border-bottom-right-radius: 55% 100%;
}
.tx-junior-path .pr-stone-row:hover .pr-stone {
animation: pr-stone-hop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tx-junior-path .pr-stone-row:hover .pr-stone-flag {
animation: pr-flag-wave 0.55s ease-in-out;
}
.tx-junior-path .pr-stone-row:hover .pr-stone-flag-end {
animation: pr-flag-wave-end 0.55s ease-in-out;
}
.tx-junior-path .pr-stone-row:hover .pr-stone-card {
transform: rotate(0deg) translateY(-4px);
box-shadow: 0 11px 0 -3px color-mix(in srgb, var(--pr-stone-color) 45%, transparent);
}
@keyframes pr-stone-hop {
0%, 100% { transform: translateY(0) rotate(0deg); }
30% { transform: translateY(-10px) rotate(-5deg); }
60% { transform: translateY(0) rotate(4deg); }
80% { transform: translateY(-3px) rotate(0deg); }
}
@keyframes pr-flag-wave {
0%, 100% { transform: rotate(-8deg); }
50% { transform: rotate(-15deg) translateY(-2px); }
}
@keyframes pr-flag-wave-end {
0%, 100% { transform: rotate(8deg); }
50% { transform: rotate(15deg) translateY(-2px); }
}
@media (max-width: 768px) {
.forge-process-block.tx-junior-path .pr-path {
padding: 36px 16px 16px;
}
.tx-junior-path .pr-row-right {
flex-direction: row;
}
.tx-junior-path .pr-stone-row {
gap: 1rem;
}
.tx-junior-path .pr-stone {
width: 64px;
height: 64px;
}
.tx-junior-path .pr-stone-num {
font-size: 1.5rem;
}
.tx-junior-path .pr-stone-row:not(:last-child)::after,
.tx-junior-path .pr-row-right:not(:last-child)::after {
top: 74px;
left: 30px;
right: auto;
}
.tx-junior-path .pr-trail,
.tx-junior-path .pr-trail-ltr,
.tx-junior-path .pr-trail-rtl {
height: 34px;
margin: 0 0 0 30px;
border-bottom: none;
border-right: none;
border-left: 3px dashed color-mix(in srgb, var(--pr-stone-color) 55%, transparent);
border-radius: 0;
}
.tx-junior-path .pr-row-right .pr-stone-card {
border-radius: 22px;
border-top-left-radius: 6px;
transform: rotate(0.6deg);
}
.tx-junior-path .pr-stone-flag {
top: -20px;
left: -10px;
}
.tx-junior-path .pr-stone-flag-end {
left: auto;
right: -10px;
}
}
@media (prefers-reduced-motion: reduce) {
.tx-junior-path .pr-stone-row:hover .pr-stone,
.tx-junior-path .pr-stone-row:hover .pr-stone-flag,
.tx-junior-path .pr-stone-row:hover .pr-stone-flag-end {
animation: none;
}
.tx-junior-path .pr-stone,
.tx-junior-path .pr-stone-card {
transition: none;
}
}