/* ============================================================
   Climbing Peaks — hub page (peaks.html) and detail-page
   palettes (peak.html).

   Loaded AFTER css/expeditions.css on both pages. The peaks
   section deliberately reuses the whole .exp-* hub language and
   the .dt-* detail language rather than cloning them under a new
   prefix — this file only carries what is genuinely different:

     1. three body.dt-pk-* palettes for the detail template
     2. the three-button card action row (.exp-card-actions--triple)
     3. the difficulty meter on the card
     4. the tier ladder band that closes the hub page

   Nothing here redefines a global token.
   ============================================================ */

/* ============================================================
   1. Per-tier palettes for peak.html
   These mirror body.dt-* in destination.css and body.dt-exp-* in
   expeditions.css, so the detail template inherits the entire
   .dt- design language and only swaps the colour set.
   ============================================================ */

/* Beginner peaks — meadow and pine, the green of the walk-in */
body.dt-pk-entry {
    --dt-deep: #0a2a1e;         --dt-deep-rgb: 10, 42, 30;
    --dt-base: #124534;         --dt-base-rgb: 18, 69, 52;
    --dt-soft: #1d6049;         --dt-soft-rgb: 29, 96, 73;
    --dt-accent: #3f9b6f;       --dt-accent-rgb: 63, 155, 111;
    --dt-accent-bright: #63bd8e; --dt-accent-bright-rgb: 99, 189, 142;
    --dt-mist: #e8f4ee;
    --dt-sand: #f2f9f5;
    --dt-cream: #fafdfb;
    --dt-ink: #1a2f26;
    --dt-muted: #587064;
}

/* Intermediate peaks — glacier ice, the blue of the summit day */
body.dt-pk-intermediate {
    --dt-deep: #06202c;         --dt-deep-rgb: 6, 32, 44;
    --dt-base: #0c3648;         --dt-base-rgb: 12, 54, 72;
    --dt-soft: #145066;         --dt-soft-rgb: 20, 80, 102;
    --dt-accent: #2b8ba8;       --dt-accent-rgb: 43, 139, 168;
    --dt-accent-bright: #4fb2cd; --dt-accent-bright-rgb: 79, 178, 205;
    --dt-mist: #e6f2f7;
    --dt-sand: #f1f8fa;
    --dt-cream: #fafdfe;
    --dt-ink: #182b34;
    --dt-muted: #566c77;
}

/* Technical peaks — granite and copper, the colour of the rock */
body.dt-pk-technical {
    --dt-deep: #241a17;         --dt-deep-rgb: 36, 26, 23;
    --dt-base: #3a2a24;         --dt-base-rgb: 58, 42, 36;
    --dt-soft: #513a31;         --dt-soft-rgb: 81, 58, 49;
    --dt-accent: #a46a45;       --dt-accent-rgb: 164, 106, 69;
    --dt-accent-bright: #c88a61; --dt-accent-bright-rgb: 200, 138, 97;
    --dt-mist: #f4ede8;
    --dt-sand: #f9f4f0;
    --dt-cream: #fdfbf9;
    --dt-ink: #2e241f;
    --dt-muted: #726158;
}

/* Peak heroes use the same high-key snow photography the expedition
   heroes do, so they need the same deepened scrim. expeditions.css
   scopes that to [class*="dt-exp-"]; repeat it for the peak palettes. */
body[class*="dt-pk-"] .dt-hero-overlay {
    background: linear-gradient(180deg,
        rgba(var(--dt-deep-rgb), 0.74) 0%,
        rgba(var(--dt-deep-rgb), 0.5) 42%,
        rgba(var(--dt-deep-rgb), 0.9) 100%);
}

body[class*="dt-pk-"] .dt-hero-title,
body[class*="dt-pk-"] .dt-hero-sub,
body[class*="dt-pk-"] .dt-hero-crumbs {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   2. Hub page deltas
   ============================================================ */

/* ---------- Three-button card action row ----------
   View Details spans the full width as the primary route into the
   peak; Inquiry and Book sit side by side underneath it. Falls back
   to a single column with the rest of the card at 520px. */
.exp-card-actions--triple {
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}

.exp-card-actions--triple .exp-action--details {
    grid-column: 1 / -1;
}

.exp-action--details {
    border: 1px solid rgba(14, 46, 74, 0.18);
    background: linear-gradient(120deg, var(--primary), var(--primary-light));
    color: var(--text-light);
    box-shadow: 0 8px 18px -12px rgba(14, 46, 74, 0.75);
}

.exp-action--details svg {
    transition: transform var(--transition-fast);
}

.exp-action--details:hover,
.exp-action--details:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -12px rgba(14, 46, 74, 0.85);
    outline: none;
}

.exp-action--details:hover svg {
    transform: translateX(4px);
}

/* The two secondary buttons shed a little weight so the details
   button stays the obvious primary action on a busy card. */
.exp-card-actions--triple .exp-action--inquiry,
.exp-card-actions--triple .exp-action--book {
    padding: 0.62rem 0.6rem;
    font-size: 0.81rem;
}

/* ---------- Difficulty meter ---------- */
.pk-level {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.9rem 0 0;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pk-level-bars {
    display: inline-flex;
    gap: 3px;
}

.pk-level-bar {
    width: 16px;
    height: 5px;
    border-radius: 2px;
    background: var(--border-color);
    transition: background-color var(--transition-normal);
}

.pk-level-bar.is-on {
    background: linear-gradient(120deg, var(--accent-hover), var(--accent));
}

.exp-card:hover .pk-level-bar.is-on {
    background: linear-gradient(120deg, var(--accent), #d9b566);
}

/* ---------- Permit line under the description ---------- */
.pk-permit {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.75rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.pk-permit svg {
    width: 14px;
    height: 14px;
    margin-top: 0.15rem;
    fill: var(--accent);
    flex-shrink: 0;
}

/* ---------- Cross-reference card ----------
   Peaks that we run as full expeditions rather than climbs keep
   their card here but point at the expedition catalogue, so the
   two sections can never describe the same mountain twice. */
.exp-card--xref .exp-badge {
    color: var(--primary);
}

.exp-card--xref .exp-badge-dot {
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(184, 134, 58, 0.22);
}

.pk-xref-note {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--border-radius-sm);
    background: rgba(184, 134, 58, 0.09);
    border: 1px solid rgba(184, 134, 58, 0.22);
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--accent-hover);
}

.pk-xref-note svg {
    width: 14px;
    height: 14px;
    margin-top: 0.15rem;
    fill: currentColor;
    flex-shrink: 0;
}

/* ---------- Tier ladder ----------
   The one section on this page that has no equivalent on the
   expeditions hub: the progression from a first snow summit to an
   8000m permit, which is also the honest way to choose from the
   list above. */
.pk-ladder {
    padding: 4rem 0 4.4rem;
    background:
        linear-gradient(150deg, rgba(14, 46, 74, 0.97), rgba(7, 27, 47, 0.99)),
        radial-gradient(circle at 84% 8%, rgba(184, 134, 58, 0.28), transparent 55%);
}

.pk-ladder-head {
    max-width: 680px;
    margin: 0 auto 3rem;
    text-align: center;
}

.pk-ladder-head .exp-eyebrow {
    color: var(--accent-soft);
}

.pk-ladder-head .exp-eyebrow::before,
.pk-ladder-head .exp-eyebrow::after {
    background: var(--accent-soft);
}

.pk-ladder-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: var(--weight-heading);
    line-height: 1.2;
    letter-spacing: var(--track-tight);
    color: var(--text-light);
}

.pk-ladder-sub {
    margin-top: 0.9rem;
    font-size: 1rem;
    line-height: 1.78;
    color: rgba(255, 255, 255, 0.78);
}

.pk-ladder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 1.2rem;
    counter-reset: pk-step;
}

.pk-step {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem 1.7rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--border-radius-md);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform var(--transition-normal), border-color var(--transition-normal), background-color var(--transition-normal);
}

.pk-step:hover,
.pk-step:focus-visible {
    transform: translateY(-6px);
    border-color: rgba(184, 134, 58, 0.55);
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

/* The arrow between steps. Hidden on the last card and whenever the
   grid has wrapped onto more than one row is not detectable in CSS,
   so it is drawn small and low-contrast enough to read as decoration
   either way. */
.pk-step::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -0.85rem;
    width: 10px;
    height: 10px;
    border-top: 2px solid rgba(184, 134, 58, 0.6);
    border-right: 2px solid rgba(184, 134, 58, 0.6);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
}

.pk-step:last-child::after {
    display: none;
}

.pk-step-num {
    counter-increment: pk-step;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 1.1rem;
    border-radius: 12px;
    background: linear-gradient(140deg, var(--accent-hover), var(--accent));
    box-shadow: var(--shadow-gold);
    font-family: var(--font-numbers);
    font-size: 1.05rem;
    font-weight: var(--weight-heading);
    color: var(--text-light);
}

.pk-step-num::before {
    content: counter(pk-step);
}

.pk-step-alt {
    font-family: var(--font-numbers);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-soft);
}

.pk-step h3 {
    margin: 0.35rem 0 0.55rem;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: var(--weight-heading);
    letter-spacing: var(--track-snug);
    color: var(--text-light);
}

.pk-step p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
}

/* margin-top:auto keeps the four links on one baseline even though the
   step descriptions are different lengths. */
.pk-step-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 1.1rem;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--accent-soft);
    transition: color var(--transition-fast), gap var(--transition-fast);
}

.pk-step-link svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.pk-step:hover .pk-step-link,
.pk-step-link:hover {
    color: var(--text-light);
    gap: 0.6rem;
}

/* ============================================================
   3. Detail page deltas (peak.html)
   ============================================================ */

/* Difficulty and permit sit in the hero sub-line on a peak page,
   where an expedition page carries the oxygen note instead. */
.pk-hero-permit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 0.6rem;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

/* ============================================================
   4. Responsive
   ============================================================ */

@media (max-width: 992px) {
    .pk-step::after {
        display: none;
    }
}

@media (max-width: 768px) {
    .pk-ladder {
        padding: 3rem 0 3.2rem;
    }

    .pk-ladder-head {
        margin-bottom: 2.2rem;
    }
}

@media (max-width: 520px) {
    /* expeditions.css collapses .exp-card-actions to one column here;
       the triple row has to follow or the details button keeps its
       two-column span against a single-column grid. */
    .exp-card-actions--triple {
        grid-template-columns: 1fr;
    }

    .exp-card-actions--triple .exp-action--inquiry,
    .exp-card-actions--triple .exp-action--book {
        padding: 0.72rem 0.9rem;
        font-size: 0.85rem;
    }
}