/* ============================================================
   PROCESS STEPPER SECTION
   The specific look (header, icon circle, background watermark, fact
   chips) built on top of the generic pin/scroll mechanic in
   pinned-stepper.css/.js. Pair with
   template-parts/process-stepper-section.php.

   Theme per page with:
     .process-stepper-section__scroll { --pinned-stepper-accent: #yourcolor; }
   (falls back to pinned-stepper.css's own default, --brainbuffet-red)
   ============================================================ */

.process-stepper-section__header {
    text-align: center;
    margin-bottom: 3rem;
}

.process-stepper-section__header span {
    display: block;
    text-align: center;
    font-size: 1.2rem;
    color: #555;
    max-width: 600px;
    margin: 0.5rem auto 0;
}

.process-stepper-section__scroll {
    --pinned-stepper-height: 85vh;
    --pinned-stepper-sticky-top: 4vh;
    --pinned-stepper-sticky-height: 84vh;
}

/* The "stage": without this, pinned content just floats centered in a
   tall blank box and any leftover space reads as empty rather than
   designed. A bounded card with its own backdrop gives the space a
   visible edge, so filling less of the viewport still looks intentional. */
.pinned-stepper.is-pinned .pinned-stepper__sticky-inner {
    background: linear-gradient(180deg, color-mix(in srgb, var(--pinned-stepper-accent) 12%, #fff), #fff);
    border-radius: 32px;
    padding: 4.5rem 3rem;
    box-shadow: 0 24px 64px color-mix(in srgb, var(--pinned-stepper-accent) 16%, transparent);
    overflow: hidden;
}

/* header lives inside the sticky panel so it stays on screen with the
   steps */
.pinned-stepper.is-pinned .process-stepper-section__header {
    margin-bottom: 2.5rem;
}

.pinned-stepper.is-pinned .process-stepper-section__header h2 {
    font-size: clamp(2rem, 3.4vw, 2.75rem);
}

.pinned-stepper.is-pinned .process-stepper-section__header span {
    font-size: 1.1rem;
}

/* ---- Base (static) panel styling — used in both modes ---- */
.pinned-stepper__panel {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1.5rem 1.4rem;
    border-left: 4px solid var(--pinned-stepper-accent);
    overflow: hidden;
}

.process-stepper-section__panel-watermark {
    position: absolute;
    right: -0.3rem;
    bottom: -1.2rem;
    font-size: 5rem;
    font-weight: 900;
    color: var(--pinned-stepper-accent);
    opacity: 0.06;
    line-height: 1;
    letter-spacing: -0.05em;
    user-select: none;
    pointer-events: none;
}

.process-stepper-section__panel-visual {
    flex: none;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pinned-stepper-accent) 8%, #fff);
    color: var(--pinned-stepper-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.process-stepper-section__panel-visual svg {
    width: 1.9rem;
    height: 1.9rem;
}

.process-stepper-section__panel-copy {
    flex: 1;
    min-width: 0;
}

.process-stepper-section__panel-number {
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--pinned-stepper-accent);
    opacity: 0.7;
    margin-bottom: 0.3rem;
    user-select: none;
}

.process-stepper-section__panel-copy h3 {
    font-size: 1.15rem;
    margin-bottom: 0.4rem;
}

.process-stepper-section__panel-copy p {
    font-size: 0.92rem;
    color: #444;
    line-height: 1.5;
    margin: 0;
}

.process-stepper-section__panel-facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 0.9rem 0 0;
}

.process-stepper-section__panel-facts li {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--pinned-stepper-accent);
    background: color-mix(in srgb, var(--pinned-stepper-accent) 8%, #fff);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
}

/* ============================================================
   Pinned mode overrides: bigger showcase, icon+text side by side
   ============================================================ */
.pinned-stepper.is-pinned .pinned-stepper__rail-nav {
    margin-bottom: 3rem;
}

.pinned-stepper.is-pinned .pinned-stepper__dot {
    width: 2.7rem;
    height: 2.7rem;
    font-size: 0.85rem;
}

.pinned-stepper.is-pinned .pinned-stepper__panel {
    align-items: center;
    gap: 2.4rem;
    padding: 0;
    border-left: none;
}

.pinned-stepper.is-pinned .process-stepper-section__panel-watermark {
    right: auto;
    left: 50%;
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 22rem;
}

.pinned-stepper.is-pinned .process-stepper-section__panel-visual {
    width: 8rem;
    height: 8rem;
}

.pinned-stepper.is-pinned .process-stepper-section__panel-visual svg {
    width: 4.2rem;
    height: 4.2rem;
}

.pinned-stepper.is-pinned .process-stepper-section__panel-number {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.pinned-stepper.is-pinned .process-stepper-section__panel-copy h3 {
    font-size: clamp(2rem, 3.2vw, 2.6rem);
    margin-bottom: 0.7rem;
}

.pinned-stepper.is-pinned .process-stepper-section__panel-copy p {
    font-size: 1.2rem;
    max-width: 460px;
}

.pinned-stepper.is-pinned .process-stepper-section__panel-facts li {
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
}

.pinned-stepper.is-pinned .process-stepper-section__panel-facts {
    margin-top: 1.2rem;
}

.pinned-stepper.is-pinned .pinned-stepper__panels {
    max-width: 760px;
    margin: 0 auto;
}