/* ===== Journey ladder — uses global tokens from :root ===== */

.journey--ladder {
    margin-block: var(--section-gap);
}

@media (min-width: 768px) {
    .journey--ladder { margin-top: 36px; }
}

.journey--ladder .journey-header {
    display: grid;
    gap: var(--space-8);
    margin-bottom: 36px;
}

.journey--ladder .journey-header h2 {
    margin: 0;
    font-size: var(--fs-32);
    line-height: var(--lh-snug);
}

.journey--ladder .journey-header .lead {
    max-width: 72ch;
}

.journey--ladder .journey-header .subline {
    color: var(--gray-ink);
}

/* Ladder list */
.journey-ladder {
    display: grid;
    gap: var(--space-12);
    margin-top: var(--space-16);
}

.ladder-item {
    border-radius: var(--radius-12);
    border: 1px solid var(--ring);
    background: #fff;
    overflow: hidden;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.ladder-item:hover {
    border-color: var(--brand);
    transform: translateY(-2px);
    box-shadow: var(--shadow-1);
}

.ladder-item summary {
    list-style: none;
    cursor: pointer;
    position: relative;
}

.ladder-item summary::-webkit-details-marker { display: none; }

details[open] { border: 1px solid var(--ring); }

.ladder-main {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-14) var(--space-18);
    padding-right: calc(var(--space-18) + 24px);
}

.level-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    border-radius: 999px;
    font-weight: var(--weight-bold);
    font-size: var(--fs-16);
    background: var(--background-gray);
}

.ladder-text { display: grid; gap: 2px; }

.ladder-title { font-weight: var(--weight-semibold); font-size: var(--fs-18); }

.ladder-meta {
    font-size: var(--fs-14);
    color: var(--gray-ink-soft);
}

/* Chevron */
.ladder-item summary::after {
    content: "";
    position: absolute;
    top: 50%; right: var(--space-32);
    width: 7px; height: 7px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-50%) rotate(-45deg);
    opacity: .6;
    transition: transform .2s ease, opacity .2s ease;
}

.ladder-item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
    opacity: 1;
}

/* Body */
.ladder-body {
    border-top: 1px solid var(--ring);
    padding: var(--space-18) var(--space-24) var(--space-24);
    display: grid;
    gap: var(--space-12);
    background: color-mix(in srgb, var(--brand) 4%, #fff);
    font-size: var(--fs-16);
}

.ladder-points {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 4px;
}

.ladder-points li { margin-bottom: 0; }

.ladder-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-18);
    align-items: center;
    justify-content: space-between;
}

/* Level color coding */
.ladder-item.level-beginner .level-tag {
    background: color-mix(in srgb, var(--level-beginner) 16%, #fff);
    color: var(--level-beginner);
}

.ladder-item.level-intermediate .level-tag {
    background: color-mix(in srgb, var(--level-intermediate) 16%, #fff);
    color: var(--level-intermediate);
}

.ladder-item.level-advanced .level-tag {
    background: color-mix(in srgb, var(--level-advanced) 16%, #fff);
    color: var(--level-advanced);
}

.journey-footnote { margin-top: var(--space-16); }

/* Mobile */
@media (max-width: 768px) {
    .journey--ladder .journey-header { margin-bottom: var(--space-16); }

    .ladder-main {
        align-items: flex-start;
        padding: var(--space-18);
        padding-right: calc(var(--space-16) + 24px);
    }

    .ladder-body { padding: var(--space-16) var(--space-24) var(--space-32); }

    .ladder-footer {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-24);
    }

    .ladder-meta { font-size: var(--fs-14); }
}