/**
 * Edge Zone — Path to the Summit (climb stylesheet)
 *
 * Layout:
 *   Desktop: 3-column grid (video + trail-map | screenshots | details)
 *   Mobile:  single-column stack, sticky top bar, collapsible trail map
 *
 * Brand color is #ac8d3b. Stage colors override .nil-climb-pin fills via inline
 * style, so the trail naturally shifts hue from green base camp → blue
 * protection → gold summit.
 *
 * All selectors are scoped under .nil-climb-root so dropping this on any
 * WP page (Elementor, theme, builder) doesn't bleed styles into the host.
 */

/* ── Fallback EdgeZone nav (rendered inside the shortcode) ────────────── */
/*  Always renders by default. JS detects whether the theme's actual site
    header is already on the page; if yes, this fallback hides itself.
    If no, this stays visible so you never lose the brand + primary nav. */
.nil-climb-fallback-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 28px;
    background: #000;
    border-bottom: 1px solid #1a1a1a;
    flex-wrap: wrap;
}
.nil-climb-fallback-nav.theme-header-detected { display: none; }
.nil-climb-fallback-brand img {
    height: 44px;
    width: auto;
    display: block;
}
.nil-climb-fallback-links {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
.nil-climb-fallback-links a {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: color .15s;
}
.nil-climb-fallback-links a:hover { color: #ac8d3b; }
@media (max-width: 800px) {
    .nil-climb-fallback-nav { padding: 10px 14px; gap: 12px; }
    .nil-climb-fallback-brand img { height: 32px; }
    .nil-climb-fallback-links { gap: 14px; }
    .nil-climb-fallback-links a { font-size: 11px; letter-spacing: 1px; }
}

/* ── Force-show the site header on the climb page ─────────────────────── */
/*  Defensive override for the case where a theme/builder template was
    auto-set on this page that hides the header. We force-show every
    common header selector (Bricks, Elementor, classic WP). The PHP
    side also resets _wp_page_template to default on every climb-page
    load, but this CSS is the safety net. */
.page-id-path-to-the-summit .brxe-header,
body .brxe-header,
body header.site-header,
body .site-header,
body #masthead,
body .elementor-location-header,
body .ehf-header,
body header[role="banner"] {
    display: revert !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

/* ── Root scope + tokens ──────────────────────────────────────────────── */
.nil-climb-root {
    --nil-brand: #ac8d3b;
    --nil-brand-dark: #8a6f2c;
    --nil-active-color: #ac8d3b;
    --nil-bg: #060912;
    --nil-panel: #0f1520;
    --nil-panel-2: #141b2a;
    --nil-border: #1e2838;
    --nil-text: #e8ecf3;
    --nil-text-muted: #98a3b3;
    --nil-text-dim: #6b7689;
    --nil-success: #2ecc71;
    --nil-radius: 14px;
    --nil-radius-sm: 8px;
    --nil-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    /* Reserved space for the site header (and admin bar if logged in).
       Override per-site if your header isn't ~120px:
       .nil-climb-root { --nil-header-offset: 80px; } */
    --nil-header-offset: 120px;

    box-sizing: border-box;
    color: var(--nil-text);
    background: var(--nil-bg);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.55;
    /* Natural page flow — the climb is as tall as its content needs. The page
       (browser body) scrolls if the climb is taller than the viewport. No
       internal scroll boxes, columns just live in the page. */
    min-height: calc(100vh - var(--nil-header-offset));
    display: flex;
    flex-direction: column;
    /* Hero background staging */
    position: relative;
    isolation: isolate;
}
.nil-climb-root::before {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--nil-hero-bg, none);
    background-size: cover;
    background-position: center;
    z-index: -2;
    transition: background-image .6s ease-out, opacity .6s;
    opacity: .65;
}
.nil-climb-root::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(172, 141, 59, .15) 0%, transparent 70%),
        linear-gradient(180deg, rgba(6, 9, 18, .55) 0%, rgba(6, 9, 18, .82) 70%, rgba(6, 9, 18, .92) 100%);
    z-index: -1;
    pointer-events: none;
}
/* WordPress admin bar bumps the header down 32px (or 46px on mobile) */
.admin-bar .nil-climb-root { --nil-header-offset: 152px; }
@media (max-width: 782px) { .admin-bar .nil-climb-root { --nil-header-offset: 166px; } }
.nil-climb-root *, .nil-climb-root *::before, .nil-climb-root *::after { box-sizing: border-box; }
.nil-climb-root img { max-width: 100%; height: auto; display: block; }
.nil-climb-root button { font-family: inherit; cursor: pointer; }

/* When the climb is embedded mid-page (compact mode), let host page handle scrolling */
.nil-climb-root.compact { height: auto; min-height: auto; border-radius: var(--nil-radius); overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════════
   TOP BAR
   ══════════════════════════════════════════════════════════════════════ */
.nil-climb-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 20px;
    background: rgba(6, 9, 18, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--nil-border);
    flex-shrink: 0;
    z-index: 50;
}
.nil-climb-brand img { height: 32px; width: auto; }
.nil-climb-progress {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    margin-left: 8px;
}
.nil-climb-counter {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--nil-panel);
    border: 1px solid var(--nil-border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--nil-text);
}
.nil-climb-counter-sep { opacity: .35; margin: 0 2px; }
.nil-climb-stage-pill {
    background: linear-gradient(135deg, var(--nil-active-color) 0%, rgba(0, 0, 0, .5) 100%);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, .08);
    transition: background .35s;
}
.nil-climb-elevation {
    background: var(--nil-panel);
    border: 1px solid var(--nil-border);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--nil-text-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.nil-climb-controls { display: flex; gap: 10px; align-items: center; }

/* Auto/Manual toggle */
.nil-climb-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--nil-panel);
    border: 1px solid var(--nil-border);
    color: var(--nil-text);
    padding: 6px 8px 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    transition: border-color .15s, background .15s;
}
.nil-climb-toggle:hover { border-color: var(--nil-brand); }
.nil-climb-toggle-knob {
    width: 28px; height: 16px;
    background: #1f2a3d;
    border-radius: 999px;
    position: relative;
    transition: background .2s;
}
.nil-climb-toggle-knob::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 12px; height: 12px; background: #fff; border-radius: 50%;
    transition: left .2s;
}
.nil-climb-toggle[aria-pressed="true"] .nil-climb-toggle-knob { background: var(--nil-brand); }
.nil-climb-toggle[aria-pressed="true"] .nil-climb-toggle-knob::after { left: 14px; }

.nil-climb-exit {
    background: transparent;
    border: 1px solid var(--nil-border);
    color: var(--nil-text);
    width: 36px; height: 36px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    transition: border-color .15s, color .15s;
}
.nil-climb-exit:hover { border-color: #e74c3c; color: #e74c3c; }

/* ══════════════════════════════════════════════════════════════════════
   MAIN GRID — [video+trail (left) | slides (center) | details (right)]
   Mirrors the DRIVE-NIL reference: narrative content on the sides, the
   visual centerpiece in the middle.
   ══════════════════════════════════════════════════════════════════════ */
.nil-climb-main {
    display: grid;
    /* Narrower right column so the slides centerpiece has room to breathe.
       Right column is 230–260px wide and grows tall as content needs. */
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) minmax(230px, 260px);
    gap: 14px;
    padding: 12px 18px 24px;
    align-items: start;
}
.nil-climb-col { min-width: 0; }

/* ══════════════════════════════════════════════════════════════════════
   COLUMN 1 (LEFT): meta + video + Start CTA + trail map
   Natural block flow — items stack, scroll inside the column if needed.
   No flex stretch fighting with the trail map's required dimensions.
   ══════════════════════════════════════════════════════════════════════ */
.nil-climb-col-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nil-climb-col-left .nil-climb-eyebrow { margin-bottom: 0; }
.nil-climb-col-left .nil-climb-headline { margin: 0 0 4px; }
.nil-climb-eyebrow {
    font-size: 10px;
    color: var(--nil-active-color);
    letter-spacing: 3px;
    font-weight: 800;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.nil-climb-headline {
    font-size: clamp(22px, 2vw, 28px);
    margin: 0;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: #fff;
}
.nil-climb-video-frame {
    position: relative;
    background: #000;
    border-radius: var(--nil-radius-sm);
    aspect-ratio: 16 / 9;
    max-height: 200px;          /* cap so the trail map below gets real space */
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--nil-border);
    box-shadow: var(--nil-shadow);
}
.nil-climb-video-frame video,
.nil-climb-video-frame .nil-climb-video {
    width: 100%; height: 100%;
    object-fit: cover;
}
.nil-climb-video {
    width: 100%; height: 100%;
    object-fit: cover;
    background: #000;
    display: block;
}
.nil-climb-video-placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: 30px;
    background: linear-gradient(135deg, rgba(172, 141, 59, .12) 0%, rgba(0, 0, 0, .8) 100%);
}
.nil-climb-placeholder-icon { font-size: 56px; margin-bottom: 14px; opacity: .85; }
.nil-climb-placeholder-text { font-size: 18px; font-weight: 700; margin-bottom: 6px; color: #fff; }
.nil-climb-placeholder-sub { font-size: 13px; color: var(--nil-text-muted); max-width: 360px; }

.nil-climb-video-fade {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(0,0,0,.5) 0%, rgba(0,0,0,.97) 70%),
        rgba(0,0,0,.85);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    /* Slow, cinematic fade so the video gently dissolves into the next-camp card */
    transition: opacity 1.6s cubic-bezier(.25, .1, .25, 1);
}
.nil-climb-video-fade.show { opacity: 1; pointer-events: auto; }
.nil-climb-video-fade .nil-climb-fade-content {
    /* Content slides in 0.4s after the fade starts so there's a gradual reveal */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .8s ease-out .4s, transform .8s ease-out .4s;
}
.nil-climb-video-fade.show .nil-climb-fade-content {
    opacity: 1;
    transform: translateY(0);
}
.nil-climb-fade-content { text-align: center; padding: 24px; max-width: 380px; }
.nil-climb-fade-eyebrow {
    font-size: 11px;
    color: var(--nil-active-color);
    letter-spacing: 3px;
    font-weight: 800;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.nil-climb-fade-title {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 18px;
    line-height: 1.2;
}
.nil-climb-fade-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Buttons */
.nil-climb-btn {
    border: 1px solid transparent;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    transition: transform .15s, background .15s, border-color .15s;
}
.nil-climb-btn.primary { background: var(--nil-active-color); color: #000; }
.nil-climb-btn.primary:hover { transform: translateY(-1px); }
.nil-climb-btn.ghost { background: transparent; border-color: rgba(255, 255, 255, .25); color: #fff; }
.nil-climb-btn.ghost:hover { border-color: #fff; }

/* "Start the Climb" CTA — full-width pill in the left column */
.nil-climb-startbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    background: #000;
    color: #fff;
    border: 2px solid var(--nil-brand);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .3px;
    box-shadow: 0 8px 24px rgba(172, 141, 59, .35);
    transition: transform .15s, background .15s;
    flex-shrink: 0;
}
.nil-climb-startbtn:hover { transform: translateY(-1px); background: var(--nil-brand); color: #000; }
.nil-climb-startbtn .nil-climb-play-icon {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--nil-brand);
    color: #000;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
    transition: background .15s;
}
.nil-climb-startbtn:hover .nil-climb-play-icon { background: #000; color: var(--nil-brand); }

.nil-climb-source-badges {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    flex-shrink: 0;
}
.nil-climb-source-badge {
    font-size: 9px;
    color: var(--nil-text-dim);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
    background: var(--nil-panel);
    border: 1px solid var(--nil-border);
    border-radius: 4px;
    padding: 4px 8px;
}
.nil-climb-source-badge.dim { opacity: .6; }

/* Floating nav pill — lives in the slides footer now */
.nil-climb-navpill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(15, 21, 32, .9);
    border: 1px solid var(--nil-border);
    border-radius: 999px;
    padding: 4px;
    backdrop-filter: blur(10px);
}
.nil-climb-nav-prev,
.nil-climb-nav-next {
    background: transparent;
    border: 0;
    color: var(--nil-text);
    width: 36px; height: 36px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    transition: background .15s, color .15s;
}
.nil-climb-nav-prev:hover:not([disabled]),
.nil-climb-nav-next:hover:not([disabled]) {
    background: var(--nil-active-color);
    color: #000;
}
.nil-climb-nav-prev[disabled],
.nil-climb-nav-next[disabled] { opacity: .3; cursor: not-allowed; }
.nil-climb-nav-progress {
    font-size: 12px;
    color: var(--nil-text-muted);
    padding: 0 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ── Trail map — sits beneath the video in the left column ───────────── */
.nil-climb-trailmap {
    background: var(--nil-panel);
    border: 1px solid var(--nil-border);
    border-radius: var(--nil-radius);
    height: 380px;               /* fixed — no flex math, never collapses */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.nil-climb-trailmap-head {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--nil-panel-2);
    color: var(--nil-text);
    padding: 8px 14px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.nil-climb-trailmap-hint {
    font-size: 9px;
    color: var(--nil-text-dim);
    letter-spacing: .5px;
    text-transform: lowercase;
    font-weight: 600;
}
.nil-climb-trailmap-body {
    padding: 8px;
    flex: 1;
    overflow: hidden;
}
.nil-climb-trailmap-svg-wrap {
    background: #050a14;
    border-radius: var(--nil-radius-sm);
    padding: 6px;
    width: 100% !important;
    height: 100% !important;
    min-height: 234px;
    display: block !important;       /* not flex — let the SVG fill naturally */
    overflow: hidden;
}
.nil-climb-trail-svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* Pins — calm hover, no animation, no jumping circles. Active state uses a
   subtle white-ring + glow on the dot itself. */
.nil-climb-trailmap-svg-wrap .nil-climb-trail-path,
.nil-climb-trailmap-svg-wrap .nil-climb-trail-path *,
.nil-climb-trailmap-svg-wrap .nil-climb-progress-line {
    pointer-events: none !important;
}
.nil-climb-pin {
    cursor: pointer !important;
    pointer-events: all !important;
    transition: filter .15s ease;
}
.nil-climb-pin * { pointer-events: all; }
.nil-climb-pin-hit {
    pointer-events: all !important;
    cursor: pointer !important;
}
/* Pulse circle is fully suppressed — no animation, no flicker, no movement. */
.nil-climb-pin-pulse { display: none !important; }
.nil-climb-pin:hover { filter: brightness(1.4); }
.nil-climb-pin.active .nil-climb-pin-dot {
    stroke: #fff;
    stroke-width: 3;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, .65));
}
.nil-climb-pin.completed .nil-climb-pin-dot { opacity: .5; }
.nil-climb-progress-line { filter: drop-shadow(0 0 3px rgba(172, 141, 59, .5)); }

/* ══════════════════════════════════════════════════════════════════════
   COLUMN 2 (CENTER): slides — the visual centerpiece
   Always shows something: rotating screenshots when populated, or a
   milestone-aware placeholder card with the hero image as background.
   ══════════════════════════════════════════════════════════════════════ */
.nil-climb-col-slides {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}
.nil-climb-slides-stack {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;              /* computer-screen shape — fills column width */
    background: rgba(15, 21, 32, .55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--nil-radius);
    overflow: hidden;
    box-shadow: var(--nil-shadow);
}
.nil-climb-shot {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    /* cover — fills the 16:9 screen-shaped box edge to edge. Most product
       screenshots are 16:9 / 16:10 so this rarely crops anything; for
       portrait or extreme aspect images, edges crop slightly to fit. */
    object-fit: cover !important;
    object-position: center center;
    opacity: 0;
    transition: opacity .8s ease-in-out;
    background: #000;
    border: 0;
}
.nil-climb-shot.active { opacity: 1; }
.nil-climb-shot-video {
    pointer-events: none;
}
.nil-climb-shot-iframe {
    border: 0 !important;
    background: #000;
    /* iframes don't honor object-fit; explicit dimensions keep them filled */
}

/* When a stop has no slides, the hero already shows as the page background —
   we just place the milestone name + tagline as a subtle frosted overlay. */
.nil-climb-slides-empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: 30px;
}
.nil-climb-slides-empty-art {
    max-width: 580px;
}
.nil-climb-slides-empty-title {
    font-size: clamp(30px, 3.6vw, 50px);
    font-weight: 900;
    color: #fff;
    margin: 14px 0 12px;
    line-height: 1.05;
    text-shadow: 0 6px 24px rgba(0, 0, 0, .85);
    letter-spacing: -.01em;
}
.nil-climb-slides-empty-sub {
    font-size: 16px;
    color: rgba(255, 255, 255, .92);
    line-height: 1.5;
    text-shadow: 0 3px 12px rgba(0, 0, 0, .75);
    font-style: italic;
}

/* Slide footer: dots + nav pill */
.nil-climb-slides-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.nil-climb-screens-dots {
    display: flex; gap: 6px;
    flex: 1;
}
.nil-climb-shot-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--nil-border);
    transition: background .2s, width .2s;
}
.nil-climb-shot-dot.active { background: var(--nil-active-color); width: 24px; border-radius: 4px; }

/* ══════════════════════════════════════════════════════════════════════
   COLUMN 3 (RIGHT): details panel — slim, info-dense
   ══════════════════════════════════════════════════════════════════════ */
.nil-climb-col-details { display: block; }
.nil-climb-details-card {
    background: var(--nil-panel);
    border: 1px solid var(--nil-border);
    border-radius: var(--nil-radius);
    overflow: hidden;
    box-shadow: var(--nil-shadow);
}
.nil-climb-details-card.hidden { display: none; }
.nil-climb-details-band {
    background: linear-gradient(135deg, var(--nil-active-color) 0%, rgba(0, 0, 0, .85) 90%);
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--nil-border);
    color: #fff;
    transition: background .35s;
}
.nil-climb-details-stage {
    font-size: 9px;
    letter-spacing: 2px;
    font-weight: 800;
    text-transform: uppercase;
    opacity: .85;
    margin-bottom: 4px;
}
.nil-climb-details-icon { font-size: 26px; line-height: 1; margin-bottom: 4px; }
.nil-climb-details-name { font-size: 17px; font-weight: 900; margin: 0 0 4px; line-height: 1.15; color: #fff; }
.nil-climb-details-subtitle { font-size: 11px; opacity: .9; line-height: 1.4; }

.nil-climb-details-body {
    padding: 14px 16px;
}
.nil-climb-details-tagline {
    border-left: 3px solid var(--nil-active-color);
    padding: 5px 10px;
    margin: 0 0 12px;
    font-size: 12px;
    font-style: italic;
    color: var(--nil-text);
    background: rgba(172, 141, 59, .06);
    border-radius: 0 var(--nil-radius-sm) var(--nil-radius-sm) 0;
    line-height: 1.45;
}
.nil-climb-details-section-label {
    font-size: 9px;
    color: var(--nil-text-dim);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 6px;
}
.nil-climb-details-bullets {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}
.nil-climb-details-bullets li {
    position: relative;
    padding: 4px 0 4px 18px;
    font-size: 12px;
    color: var(--nil-text);
    line-height: 1.45;
}
.nil-climb-details-bullets li::before {
    content: '✓';
    position: absolute;
    left: 0; top: 6px;
    color: var(--nil-active-color);
    font-weight: 800;
    font-size: 12px;
}
/* Locked styling — !important guards against host-theme link overrides
   (some themes set "a { color: gold }" which made our black text disappear) */
.nil-climb-root .nil-climb-details-cta {
    display: block !important;
    text-align: center !important;
    background: linear-gradient(135deg, var(--nil-active-color) 0%, #8a6f2c 100%) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 12px 16px !important;
    border-radius: var(--nil-radius-sm) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    letter-spacing: .3px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    border: 1px solid rgba(0, 0, 0, .22) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .15);
    transition: transform .15s, filter .15s, box-shadow .15s;
}
.nil-climb-root .nil-climb-details-cta:hover,
.nil-climb-root .nil-climb-details-cta:focus {
    color: #ffffff !important;
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE / TABLET
   ══════════════════════════════════════════════════════════════════════ */
/* Tablet (1100px and below): tighten the side columns */
@media (max-width: 1100px) {
    .nil-climb-main {
        grid-template-columns: minmax(250px, 280px) minmax(0, 1fr) minmax(220px, 240px);
        gap: 12px;
        padding: 12px 14px;
    }
}

/* Below 980px: drop the right-side details under the slides as a sticky band */
@media (max-width: 980px) {
    .nil-climb-main { grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); }
    .nil-climb-col-details { display: none; }    /* details accessible via "I" key or future drawer */
}

/* Mobile (760px and below): single-column vertical scroll */
@media (max-width: 760px) {
    .nil-climb-root { height: auto; overflow: visible; }   /* page scrolls on phone */
    .nil-climb-topbar { padding: 8px 12px; gap: 8px; position: sticky; top: 0; }
    .nil-climb-brand img { height: 26px; }
    .nil-climb-progress { gap: 6px; flex-wrap: wrap; }
    .nil-climb-stage-pill { font-size: 10px; padding: 4px 10px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nil-climb-elevation { display: none; }
    .nil-climb-counter { font-size: 12px; padding: 4px 10px; }
    .nil-climb-toggle-label { display: none; }
    .nil-climb-toggle { padding: 6px; }
    .nil-climb-exit { width: 32px; height: 32px; font-size: 18px; }

    .nil-climb-main {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 12px;
        padding-bottom: 120px;
        overflow: visible;
    }

    .nil-climb-col-left   { order: 1; height: auto; overflow: visible; }
    .nil-climb-col-slides { order: 2; height: auto; min-height: 240px; }
    .nil-climb-col-details{ order: 3; display: flex; height: auto; }

    .nil-climb-trailmap { flex: none; height: 360px; }   /* fixed-height map on phones */

    .nil-climb-headline { font-size: 22px; }
    .nil-climb-details-card { height: auto; }
    .nil-climb-details-body { overflow-y: visible; }
}

@media (max-width: 480px) {
    .nil-climb-topbar { padding: 8px 10px; }
    .nil-climb-brand img { height: 24px; }
    .nil-climb-startbtn { width: 100%; justify-content: center; padding: 12px 18px; font-size: 14px; }
    .nil-climb-fade-title { font-size: 20px; }
    .nil-climb-details-band { padding: 18px; }
    .nil-climb-details-name { font-size: 19px; }
    .nil-climb-details-body { padding: 18px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .nil-climb-shot { transition: none; }
    .nil-climb-video-fade { transition: none; }
    .nil-climb-pin { transition: none; }
}