/* ==========================================================
   process-timeline.css — JYL Process Timeline (v1.2.6)
   Full-bleed horizontal track of hard-edged, image-filled step
   tiles (drag or snap-scroll), with a bottom row of evenly-split
   phase segments driving the active/done state.
   ========================================================== */

.jyl-ptl {
    --ptl-ink: var(--jyl-grey-dark);
    --ptl-ink-soft: var(--jyl-grey-light);
    --ptl-surface: var(--jyl-white);
    --ptl-tile-bg: var(--jyl-beige-medium);
    --ptl-placeholder-bg: var(--jyl-beige-medium);
    --ptl-scrim-top: rgba(0, 0, 0, .42);
    --ptl-scrim-bottom: rgba(0, 0, 0, .72);
    /* Phase progress uses the site's monochrome convention: neutral idle,
       mid-grey once done, solid ink for the active phase. No blue block. */
    --ptl-phase-idle: var(--jyl-grey-xlight);
    --ptl-phase-done: var(--jyl-grey-medium);
    --ptl-phase-active: var(--jyl-black);
    /* Arrows follow the shared .jyl-icon-btn range: beige circle, black icon,
       an electric-blue disc that scales in on hover (icon turns white). */
    --ptl-arrow-bg: var(--jyl-beige-medium);
    --ptl-arrow-color: var(--jyl-black);
    --ptl-arrow-hover-fill: var(--jyl-blue);
    --ptl-arrow-hover-color: var(--jyl-white);
    --ptl-arrow-radius: var(--jyl-radius-full);
    /* Accent used only inside the image-filled tiles (number underline, meta
       tag) where a white-on-photo context can carry a light-blue detail. */
    --ptl-accent: var(--jyl-blue-light);
    --ptl-tile-w: 300px;
    --ptl-tile-ratio: 3/4;
    --ptl-gap: 10px;
    --ptl-phase-h: 2px;
    --ptl-edge: clamp(20px, 5vw, 72px);
    --ptl-track-pad-l: var(--ptl-edge);
    --ptl-track-pad-r: var(--ptl-edge);

    position: relative;
    background: var(--ptl-surface);
    color: var(--ptl-ink);
    font-family: var(--jyl-font);
    padding: clamp(56px, 7vw, 104px) 0;
}

/* Dark tone. Elementor's prefix_class lands on the widget wrapper (an
   ancestor of .jyl-ptl), and a custom property declared on the element
   itself always beats an inherited one regardless of ancestor specificity,
   so these must re-target .jyl-ptl as a descendant. */
.jyl-ptl-tone--dark .jyl-ptl,
html.jyl-dark .jyl-ptl-tone--light .jyl-ptl {
    --ptl-ink: var(--jyl-white);
    --ptl-ink-soft: rgba(255, 255, 255, .65);
    --ptl-surface: var(--jyl-black);
    --ptl-tile-bg: #141416;
    --ptl-placeholder-bg: #141416;
    --ptl-phase-idle: rgba(255, 255, 255, .18);
    --ptl-phase-done: rgba(255, 255, 255, .45);
    --ptl-phase-active: var(--jyl-white);
    /* Mirrors .jyl-dark .jyl-icon-btn: grey circle, white icon; the hover
       fill stays electric blue (the disc animation is identical in dark). */
    --ptl-arrow-bg: var(--jyl-grey-medium);
    --ptl-arrow-color: var(--jyl-white);
}

.jyl-ptl *,
.jyl-ptl *::before,
.jyl-ptl *::after { box-sizing: border-box; }

.jyl-fullbleed--yes .jyl-ptl {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* ---- Header: left-aligned, plain, no decoration ---- */

.jyl-ptl__head { padding: 0 var(--ptl-edge); max-width: 1100px; }

.jyl-ptl__title {
    margin: 0 0 16px;
    font-size: 64px;
    font-weight: var(--jyl-fw-bold);
    line-height: var(--jyl-lh-tight);
    color: var(--jyl-grey-dark);
}
.jyl-ptl-tone--dark .jyl-ptl__title,
html.jyl-dark .jyl-ptl__title { color: var(--jyl-white) !important; }

.jyl-ptl__sub {
    margin: 0;
    font-size: var(--jyl-fs-16);
    line-height: var(--jyl-lh-relaxed);
    color: var(--ptl-ink-soft);
    max-width: 56ch;
}

/* ---- Track: full-bleed, bleeds off the right edge ---- */

.jyl-ptl__viewport {
    margin-top: clamp(32px, 4vw, 56px);
    padding-left: var(--ptl-viewport-pad-l, 0px);
    padding-right: var(--ptl-viewport-pad-r, 0px);
}

.jyl-ptl__track {
    display: flex;
    gap: var(--ptl-gap);
    padding: 0 var(--ptl-track-pad-r) 0 var(--ptl-track-pad-l);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}
.jyl-ptl__track::-webkit-scrollbar { display: none; }
.jyl-ptl__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }

/* ---- Step tile: hard-edged, image-filled ---- */

.jyl-ptl__step {
    position: relative;
    flex: 0 0 var(--ptl-tile-w);
    aspect-ratio: var(--ptl-tile-ratio);
    scroll-snap-align: start;
    overflow: hidden;
    display: block;
    border: 0;
    padding: 0;
    background: var(--ptl-tile-bg);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.jyl-ptl__media { position: absolute; inset: 0; overflow: hidden; }
.jyl-ptl__media--placeholder { background: var(--ptl-placeholder-bg); }

/* Parallax layer: scaled up so the vertical drift (driven by GSAP from
   data-jyl-parallax-amount) never exposes an edge. Matches the catalogue
   cards. Static scale falls back to 1 when parallax is off. */
.jyl-ptl__img-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: scale(var(--ptl-par-scale, 1));
    will-change: transform;
}
.jyl-ptl[data-jyl-parallax="1"] .jyl-ptl__img-inner { transform: scale(var(--ptl-par-scale, 1.2)); }

.jyl-ptl__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    /* Matches the catalogue cards: image sits slightly dimmed and lifts to
       full opacity on hover — a restrained "light up" rather than a zoom. */
    opacity: .85;
    transition: opacity var(--jyl-t500) var(--jyl-ease);
}
.jyl-ptl__step:hover .jyl-ptl__media img { opacity: 1; }

.jyl-ptl__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, var(--ptl-scrim-top) 0%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0) 46%, var(--ptl-scrim-bottom) 100%);
}

/* Number: small, top-left */

.jyl-ptl__num {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    font-size: var(--jyl-fs-12);
    font-weight: var(--jyl-fw-medium);
    letter-spacing: var(--jyl-ls-xl);
    color: var(--jyl-white);
}
.jyl-ptl__num::after {
    content: "";
    display: block;
    width: 0;
    height: 1px;
    margin-top: 6px;
    background: var(--ptl-accent);
    transition: width var(--jyl-t500) var(--jyl-ease);
}
.jyl-ptl__step.is-active .jyl-ptl__num::after { width: 28px; }

/* Body: bottom-left overlay */

.jyl-ptl__body { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; }

.jyl-ptl__step-title {
    display: block;
    margin: 0;
    font-size: var(--jyl-fs-24);
    font-weight: var(--jyl-fw-medium);
    line-height: 1.2;
    color: var(--jyl-white);
}

.jyl-ptl__step-desc {
    display: block;
    margin: 6px 0 0;
    font-size: var(--jyl-fs-14);
    line-height: 1.5;
    color: rgba(255, 255, 255, .78);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--jyl-t500) var(--jyl-ease), opacity var(--jyl-t300) var(--jyl-ease);
}
.jyl-ptl__step:hover .jyl-ptl__step-desc,
.jyl-ptl__step.is-active .jyl-ptl__step-desc { max-height: 120px; opacity: 1; }

.jyl-ptl__step-meta {
    display: inline-block;
    margin-top: 10px;
    font-size: var(--jyl-fs-12);
    letter-spacing: var(--jyl-ls-xl);
    text-transform: uppercase;
    color: var(--ptl-accent);
}

/* ---- Foot: hairline progress + phases + arrows ---- */

.jyl-ptl__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding: 28px var(--ptl-edge) 0;
}

.jyl-ptl__phases { flex: 1 1 auto; min-width: 0; }
.jyl-ptl__phase-bar { display: flex; gap: 4px; }

/* Flex column on the button: flex items are blockified, so the line, name
   and days always stack vertically even if an outside rule (theme reset,
   stale Elementor post CSS) forces the inner spans to display:inline. */
.jyl-ptl__phase {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.jyl-ptl__phase-line {
    display: block;
    width: 100%;
    height: var(--ptl-phase-h);
    background: var(--ptl-phase-idle);
    transition: background var(--jyl-t300) var(--jyl-ease);
}
.jyl-ptl__phase.is-done .jyl-ptl__phase-line { background: var(--ptl-phase-done); }
.jyl-ptl__phase.is-active .jyl-ptl__phase-line { background: var(--ptl-phase-active); }

.jyl-ptl__phase-name {
    display: block;
    margin-top: 10px;
    font-size: var(--jyl-fs-12);
    font-weight: var(--jyl-fw-medium);
    color: var(--ptl-ink-soft);
    transition: color var(--jyl-t300) var(--jyl-ease);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.jyl-ptl__phase.is-active .jyl-ptl__phase-name { color: var(--jyl-grey-dark); }
.jyl-ptl-tone--dark .jyl-ptl__phase.is-active .jyl-ptl__phase-name,
html.jyl-dark .jyl-ptl__phase.is-active .jyl-ptl__phase-name { color: var(--jyl-white) !important; }

.jyl-ptl__phase-days {
    display: block;
    margin-top: 2px;
    font-size: var(--jyl-fs-12);
    color: var(--jyl-grey-xlight);
}
.jyl-ptl-tone--dark .jyl-ptl__phase-days,
html.jyl-dark .jyl-ptl__phase-days { color: rgba(255, 255, 255, .4); }

.jyl-ptl__arrows { display: flex; gap: 8px; flex: 0 0 auto; }

/* Mirrors the shared .jyl-icon-btn: a hard circle with a blue disc that
   scales in on hover rather than a flat colour swap. */
.jyl-ptl .jyl-ptl__arrow {
    position: relative;
    z-index: 0;
    width: var(--ptl-arrow-size, 44px);
    height: var(--ptl-arrow-size, 44px);
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: var(--ptl-arrow-radius);
    margin: 0;
    padding: 0;
    background: var(--ptl-arrow-bg);
    box-shadow: none;
    color: var(--ptl-arrow-color);
    line-height: 0;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--jyl-t200) var(--jyl-ease);
}
.jyl-ptl__arrow::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--ptl-arrow-radius);
    background: var(--ptl-arrow-hover-fill);
    opacity: 0;
    transform: scale(0);
    transition: opacity var(--jyl-t200) var(--jyl-ease), transform var(--jyl-t200) var(--jyl-ease);
    z-index: -1;
}
.jyl-ptl__arrow svg { display: block; position: relative; z-index: 10; }
.jyl-ptl__arrow:hover:not(:disabled) { color: var(--ptl-arrow-hover-color); }
.jyl-ptl__arrow:hover:not(:disabled)::after { opacity: 1; transform: scale(1.1); }
.jyl-ptl__arrow:disabled { opacity: .4; cursor: not-allowed; }

/* ---- Responsive ---- */

@media (max-width: 897px) {
    .jyl-ptl__title { font-size: 48px; }
}

@media (max-width: 597px) {
    .jyl-ptl__title { font-size: 36px; }
    .jyl-ptl__foot { flex-direction: column; align-items: stretch; gap: 20px; }
    .jyl-ptl__arrows { display: none; }
    .jyl-ptl__phase-name { font-size: 11px; }
    .jyl-ptl__step-desc { max-height: 120px; opacity: 1; }
}

/* ---- Accessibility ---- */

.jyl-ptl__step:focus-visible,
.jyl-ptl__phase:focus-visible,
.jyl-ptl__arrow:focus-visible {
    outline: 2px solid var(--jyl-blue);
    outline-offset: 2px;
}
.jyl-ptl-tone--dark .jyl-ptl__step:focus-visible,
.jyl-ptl-tone--dark .jyl-ptl__phase:focus-visible,
.jyl-ptl-tone--dark .jyl-ptl__arrow:focus-visible,
html.jyl-dark .jyl-ptl__step:focus-visible,
html.jyl-dark .jyl-ptl__phase:focus-visible,
html.jyl-dark .jyl-ptl__arrow:focus-visible { outline-color: var(--jyl-blue-light); }

@media (prefers-reduced-motion: reduce) {
    .jyl-ptl__media img,
    .jyl-ptl__num::after,
    .jyl-ptl__step-desc,
    .jyl-ptl__phase-line,
    .jyl-ptl__phase-name,
    .jyl-ptl__arrow,
    .jyl-ptl__arrow::after { transition: none !important; }
    /* No hover reveal when motion is off: show images and descriptions fully. */
    .jyl-ptl__media img { opacity: 1; }
    .jyl-ptl__arrow:hover:not(:disabled)::after { transform: scale(1); }
    .jyl-ptl__step-desc { max-height: 120px; opacity: 1; }
}

/* ---- Print ---- */

@media print {
    .jyl-ptl { padding: 0; background: #fff !important; }
    .jyl-ptl__track { overflow: visible; flex-wrap: wrap; }
    .jyl-ptl__step { flex: 0 0 33%; }
    .jyl-ptl__arrows { display: none; }
}