/* ============================================================
   PROCESS PAGE — process.css
   Page-specific styles. Uses global CSS variables from
   global.css and public.css. All classes prefixed .pr-
   ============================================================ */

/* ── Page wrapper ─────────────────────────────────────────── */
.pr-page {
    max-width:  1280px;
    margin:     0 auto;
    padding:    calc(var(--sp-16) + 64px) var(--sp-8) var(--sp-20);
}

/* ── Hero ─────────────────────────────────────────────────── */
.pr-hero {
    max-width:     800px;
    margin-bottom: calc(var(--sp-20) * 2);
}

.pr-label {
    display:        block;
    font-family:    var(--font-display);
    font-size:      0.6875rem;
    font-weight:    600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--clr-green);
    margin-bottom:  var(--sp-5);
}

.pr-h1 {
    font-family:    var(--font-display);
    font-size:      clamp(2.75rem, 6vw, 5.5rem);
    font-weight:    700;
    letter-spacing: -0.03em;
    line-height:    1.05;
    color:          #fff;
    margin-bottom:  var(--sp-8);
}

.pr-h1 em {
    font-style:  italic;
    color:       var(--clr-green);
    font-style:  italic;
}

.pr-hero-sub {
    font-family: var(--font-body);
    font-size:   1.125rem;
    color:       rgba(255,255,255,0.45);
    line-height: 1.7;
    max-width:   600px;
    font-weight: 300;
}

/* ── Timeline section ─────────────────────────────────────── */
.pr-timeline {
    position: relative;
}

/* Central lime line */
.pr-timeline-line {
    display:    none; /* hidden on mobile */
    position:   absolute;
    left:       50%;
    top:        0;
    bottom:     0;
    width:      2px;
    transform:  translateX(-50%);
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--clr-green) 8%,
        var(--clr-green) 92%,
        transparent 100%
    );
    pointer-events: none;
}

@media (min-width: 900px) {
    .pr-timeline-line { display: block; }
}

/* ── Step rows ────────────────────────────────────────────── */
.pr-steps {
    display:        flex;
    flex-direction: column;
    gap:            6rem;
}

@media (min-width: 900px) {
    .pr-steps { gap: 9rem; }
}

.pr-step {
    position:    relative;
    display:     flex;
    flex-direction: column;
    align-items: center;
    gap:         var(--sp-8);
}

@media (min-width: 900px) {
    .pr-step {
        flex-direction:  row;
        align-items:     center;
        justify-content: space-between;
        gap:             var(--sp-6);
    }
    .pr-step--reverse { flex-direction: row-reverse; }
}

/* Text column */
.pr-step-text {
    width:      100%;
    text-align: left;
}

@media (min-width: 900px) {
    .pr-step-text        { width: 41%; }
    /* Odd steps: text is on the left → right-align */
    .pr-step:not(.pr-step--reverse) .pr-step-text { text-align: right; }
    /* Even steps (reversed): text is on the right → left-align */
    .pr-step--reverse .pr-step-text               { text-align: left; }
}

.pr-step-phase {
    display:        block;
    font-family:    var(--font-display);
    font-size:      0.625rem;
    font-weight:    600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--clr-green);
    margin-bottom:  var(--sp-3);
}

.pr-step-title {
    font-family:    var(--font-display);
    font-size:      clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight:    700;
    letter-spacing: -0.025em;
    color:          #fff;
    margin-bottom:  var(--sp-5);
    line-height:    1.1;
}

.pr-step-body {
    font-family: var(--font-body);
    font-size:   0.9375rem;
    color:       rgba(255,255,255,0.5);
    line-height: 1.75;
    font-weight: 300;
}

/* Circle connector node */
.pr-step-node {
    flex-shrink:     0;
    width:           64px;
    height:          64px;
    border-radius:   50%;
    background:      #0e0e0e;
    border:          3px solid rgba(202,255,111,0.22);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         2;
    transition:      transform 0.5s var(--ease-out), border-color 0.3s;
    order:           -1; /* node first on mobile */
}

.pr-step:hover .pr-step-node {
    transform:    scale(1.12);
    border-color: rgba(202,255,111,0.5);
}

.pr-step-node svg {
    width:  26px;
    height: 26px;
    color:  var(--clr-green);
    stroke: var(--clr-green);
}

@media (min-width: 900px) {
    .pr-step-node { order: 0; } /* center on desktop */
}

/* Image panel */
.pr-step-img {
    width:         100%;
    aspect-ratio:  16 / 9;
    border-radius: var(--r-lg);
    overflow:      hidden;
    background:    #0d0d0d;
    position:      relative;
}

@media (min-width: 900px) {
    .pr-step-img { width: 41%; }
}

.pr-step-img img {
    width:      100%;
    height:     100%;
    object-fit: contain;
    opacity:    0.75;
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
    display:    block;
}

.pr-step-img:hover img {
    opacity:   1;
    transform: scale(1.015);
}

/* Expand / zoom hint button */
.pr-expand-hint {
    position:         absolute;
    bottom:           var(--sp-3);
    right:            var(--sp-3);
    width:            32px;
    height:           32px;
    border-radius:    50%;
    background:       rgba(0,0,0,0.55);
    border:           1px solid rgba(202,255,111,0.25);
    color:            rgba(202,255,111,0.7);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    cursor:           pointer;
    opacity:          0;
    transform:        scale(0.8);
    transition:       opacity 0.3s, transform 0.3s, border-color 0.2s;
    pointer-events:   none;
    z-index:          2;
}

.pr-expand-hint svg {
    width:  14px;
    height: 14px;
}

.pr-step-img:hover .pr-expand-hint {
    opacity:       1;
    transform:     scale(1);
    pointer-events: auto;
}

.pr-expand-hint:hover {
    background:   rgba(0,0,0,0.75);
    border-color: rgba(202,255,111,0.6);
    color:        var(--clr-green);
}


/* ── Footer tagline ───────────────────────────────────────── */
.pr-tagline {
    text-align:  center;
    margin-top:  var(--sp-20);
    font-family: var(--font-body);
    font-size:   0.9375rem;
    color:       rgba(255,255,255,0.4);
}

.pr-tagline strong {
    color:       var(--clr-green);
    font-weight: 700;
}

/* ── CTA section ──────────────────────────────────────────── */
.pr-cta {
    margin-top:      calc(var(--sp-20) * 2);
    padding:         var(--sp-16) var(--sp-8);
    background:      rgba(38,38,38,0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius:   var(--r-xl);
    border-top:      1px solid rgba(202,255,111,0.1);
    border-left:     1px solid rgba(255,255,255,0.04);
    border-right:    1px solid rgba(255,255,255,0.04);
    border-bottom:   1px solid rgba(255,255,255,0.04);
    text-align:      center;
}

.pr-cta-h2 {
    font-family:    var(--font-display);
    font-size:      clamp(2rem, 4.5vw, 3.75rem);
    font-weight:    700;
    letter-spacing: -0.03em;
    color:          #fff;
    margin-bottom:  var(--sp-5);
}

.pr-cta-sub {
    font-family:   var(--font-body);
    font-size:     1.0625rem;
    color:         rgba(255,255,255,0.4);
    max-width:     480px;
    margin:        0 auto var(--sp-10);
    line-height:   1.65;
    font-weight:   300;
}

.pr-cta-actions {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             var(--sp-4);
}

@media (min-width: 600px) {
    .pr-cta-actions { flex-direction: row; }
}

/* Ghost outline button */
.pr-btn-ghost {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--sp-2);
    padding:         0.875rem 2rem;
    border:          1px solid rgba(202,255,111,0.3);
    border-radius:   var(--r-pill);
    font-family:     var(--font-display);
    font-size:       0.9375rem;
    font-weight:     600;
    color:           var(--clr-green);
    text-decoration: none;
    transition:      background 0.2s, border-color 0.2s;
}

.pr-btn-ghost:hover {
    background:   rgba(202,255,111,0.07);
    border-color: rgba(202,255,111,0.55);
}

/* ── Lightbox ─────────────────────────────────────────────── */
.pr-lightbox {
    position:        fixed;
    inset:           0;
    z-index:         9000;
    background:      rgba(0,0,0,0.92);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         var(--sp-6);
    animation:       pr-lb-in 0.22s var(--ease-out);
    backdrop-filter: blur(6px);
}

@keyframes pr-lb-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pr-lightbox[hidden] { display: none; }

.pr-lightbox-close {
    position:  absolute;
    top:       var(--sp-5);
    right:     var(--sp-5);
    width:     44px;
    height:    44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    border:     1px solid rgba(255,255,255,0.12);
    color:      rgba(255,255,255,0.7);
    display:    flex;
    align-items:     center;
    justify-content: center;
    cursor:     pointer;
    transition: background 0.2s, color 0.2s;
    z-index:    1;
}

.pr-lightbox-close:hover {
    background: rgba(255,255,255,0.14);
    color:      #fff;
}

.pr-lightbox-close svg {
    width:  20px;
    height: 20px;
}

.pr-lightbox-figure {
    max-width:  1200px;
    width:      100%;
    display:    flex;
    flex-direction: column;
    align-items:    center;
    gap:        var(--sp-4);
}

.pr-lightbox-img {
    width:         100%;
    height:        auto;
    max-height:    85vh;
    object-fit:    contain;
    border-radius: var(--r-lg);
    box-shadow:    0 32px 80px rgba(0,0,0,0.6);
    animation:     pr-lb-img-in 0.28s var(--ease-out);
}

@keyframes pr-lb-img-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

.pr-lightbox-caption {
    font-family:    var(--font-display);
    font-size:      0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.35);
}

/* ── Mobile tweaks ────────────────────────────────────────── */
@media (max-width: 599px) {
    .pr-page { padding-left: var(--sp-5); padding-right: var(--sp-5); }
    .pr-hero { margin-bottom: var(--sp-16); }
    .pr-steps { gap: var(--sp-16); }
    .pr-cta   { padding: var(--sp-10) var(--sp-5); }
}