/**
 * Qing Timeline widget.
 *
 * Three columns: card | node | image. Odd rows swap the outer two so the steps
 * zig-zag down a centre rule.
 *
 * Ported from the static About page (.tl / .tl__item / .tl__node / .tl__aside
 * in static/assets/pages.css). That file is the design source of truth, so the
 * numbers here are deliberately kept equal to it -- diff against it before
 * changing any value.
 *
 * Control-driven values are read from CSS custom properties, declared here as
 * the standalone defaults so an untouched control falls back to these rather
 * than to nothing.
 *
 * Size rules double the class name to reach (0,2,x). Elementor frontend.css
 * carries `.elementor <element>` resets at (0,1,1) that load after this file
 * and win on a tie -- that is what killed the image height control on the
 * Story widget, so it is pre-empted here.
 */

.qing-tl {
    /* ---- Defaults, overridden by the controls ----
       Source tokens: --gold #b3946f, --ink-deep #23201d, --radius 4px. */
    --qing-tl-accent: #b3946f;
    --qing-tl-bg: #23201d;
    --qing-tl-title: #ffffff;
    --qing-tl-text: rgba(255, 255, 255, 0.62);
    --qing-tl-meta: rgba(255, 255, 255, 0.7);
    --qing-tl-rule: rgba(255, 255, 255, 0.18);
    --qing-tl-chip-border: rgba(255, 255, 255, 0.16);
    /* Source .eyebrow--light is a muted white on the dark panel, not gold. */
    --qing-tl-eyebrow: rgba(255, 255, 255, 0.62);
    /* Short gold rule under the heading (source .sectionHead .h2::after). */
    --qing-tl-headrule-w: 48px;
    --qing-tl-headrule-h: 2px;
    --qing-tl-headrule-gap: 22px;

    --qing-tl-gutter: 64px;
    --qing-tl-row-pad: 26px;
    --qing-tl-img-h: 260px;
    --qing-tl-img-h-tab: 220px;
    --qing-tl-img-h-mob: 180px;
    --qing-tl-radius: 4px;
    --qing-tl-node: 13px;
    /* Ring is a box-shadow, so it never affects layout. */
    --qing-tl-ring: 9px;
    --qing-tl-shift: 34px;

    background-color: var(--qing-tl-bg);
    /* Source .section is padding-block: 110px; the control ships the same. */
    padding-block: 110px;
}

/* Source .wrap: max-width 1180px, padding-inline 24px. */
.qing-tl__inner {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 24px;
}

/* ============================================================
 * Heading
 *
 * Source markup is .sectionHead > .eyebrow--light + .h2--light, and the short
 * gold rule under the heading is the motif that ties the design together --
 * it was missing from the first port, which is most of why the section read
 * as flat.
 * ============================================================ */
.qing-tl .qing-tl__head {
    margin: 0 0 56px;
}

.qing-tl--headCenter .qing-tl__head {
    text-align: center;
}

.qing-tl .qing-tl__eyebrow {
    display: block;
    margin: 0 0 18px;
    color: var(--qing-tl-eyebrow);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.qing-tl .qing-tl__title {
    margin: 0;
    font-family: Georgia, "Songti SC", "SimSun", serif;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--qing-tl-title);
}

/* Matches the source display/heading treatment: italic, accent colour. */
.qing-tl .qing-tl__title em {
    font-style: italic;
    color: var(--qing-tl-accent);
}

/* The gold rule. display:block on a pseudo of the heading, so it follows the
   heading's own text alignment. */
.qing-tl .qing-tl__title::after {
    content: "";
    display: block;
    width: var(--qing-tl-headrule-w);
    height: var(--qing-tl-headrule-h);
    margin-top: var(--qing-tl-headrule-gap);
    background-color: var(--qing-tl-accent);
}

.qing-tl--headCenter .qing-tl__title::after {
    margin-inline: auto;
}

.qing-tl--noHeadRule .qing-tl__title::after {
    display: none;
}

/* ============================================================
 * List and centre rule (source .tl / .tl::before)
 * ============================================================ */
.qing-tl .qing-tl__list {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Runs the full height of the list, behind the nodes. Inset top and bottom so
   it stops at the first and last node instead of floating past them. */
.qing-tl .qing-tl__list::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 50%;
    width: 1px;
    margin-left: -0.5px;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--qing-tl-rule) 6%,
        var(--qing-tl-rule) 94%,
        transparent
    );
}

.qing-tl--noRule .qing-tl__list::before {
    display: none;
}

/* position:relative is needed by the mobile layout, where the node is taken
   out of the grid and pinned to the left rail. */
.qing-tl .qing-tl__item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr var(--qing-tl-gutter) 1fr;
    align-items: center;
    padding-block: var(--qing-tl-row-pad);
}

/* Even rows: image left, card right. Explicit columns rather than
   row-reverse, which would also mirror the text alignment. */
.qing-tl .qing-tl__item:nth-child(even) .qing-tl__card {
    grid-column: 3;
    grid-row: 1;
    text-align: left;
}

.qing-tl .qing-tl__item:nth-child(even) .qing-tl__aside {
    grid-column: 1;
    grid-row: 1;
}

/* Odd rows sit left of the rule, so their text is right-aligned and the chip
   has to follow. */
.qing-tl .qing-tl__item:nth-child(odd) .qing-tl__card {
    text-align: right;
}

/* ---- Text-only rows ----
 * Not in the source, which always has an image. With no image the card would
 * still be boxed into one 1fr column and leave a hole on the far side, so it
 * spans the rule instead and centres itself.
 */
.qing-tl .qing-tl__item--noImg .qing-tl__card,
.qing-tl .qing-tl__item--noImg:nth-child(even) .qing-tl__card {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: 620px;
    margin: 0 auto;
    padding-left: 40px;
    text-align: left;
}

/* ============================================================
 * Card (source .tl__card / .tl__step / .tl__title / .tl__text / .tl__meta)
 * ============================================================ */
.qing-tl .qing-tl__card {
    padding: 4px 0;
}

.qing-tl .qing-tl__step {
    display: block;
    margin-bottom: 12px;
    color: var(--qing-tl-accent);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.qing-tl .qing-tl__itemTitle {
    margin: 0 0 14px;
    font-family: Georgia, "Songti SC", "SimSun", serif;
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 400;
    line-height: 1.25;
    color: var(--qing-tl-title);
}

.qing-tl .qing-tl__itemTitle em {
    font-style: italic;
    color: var(--qing-tl-accent);
}

.qing-tl .qing-tl__text {
    margin: 0 0 18px;
    color: var(--qing-tl-text);
    font-size: 0.97rem;
    line-height: 1.8;
}

/* The source is a bare <p>; here wpautop wraps the field, so the paragraphs
   inherit rather than pick up the theme p rules. */
.qing-tl .qing-tl__text p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.qing-tl .qing-tl__text p + p {
    margin-top: 14px;
}

/* Duration chip. */
.qing-tl .qing-tl__meta {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--qing-tl-chip-border);
    border-radius: 100px;
    color: var(--qing-tl-meta);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
}

/* ============================================================
 * Node on the centre rule (source .tl__node)
 *
 * The ring is a box-shadow so it does not affect layout, and it expands on
 * hover of the whole row rather than the dot, which is far too small a target.
 * ============================================================ */
.qing-tl .qing-tl__node {
    position: relative;
    z-index: 1;
    justify-self: center;
    width: var(--qing-tl-node);
    height: var(--qing-tl-node);
    border-radius: 50%;
    background-color: var(--qing-tl-accent);
    box-shadow: 0 0 0 0 rgba(179, 148, 111, 0.28);
    transition: box-shadow 0.4s ease;
}

.qing-tl .qing-tl__item:hover .qing-tl__node {
    box-shadow: 0 0 0 var(--qing-tl-ring) rgba(179, 148, 111, 0.18);
}

.qing-tl--noNode .qing-tl__node {
    display: none;
}

/* ============================================================
 * Image (source .tl__aside)
 * ============================================================ */
.qing-tl .qing-tl__aside {
    overflow: hidden;
    border-radius: var(--qing-tl-radius);
}

.qing-tl .qing-tl__aside img.qing-tl__img {
    display: block;
    width: 100%;
    height: var(--qing-tl-img-h);
    object-fit: cover;
    filter: saturate(0.8) brightness(0.92);
    transition: transform 0.7s ease, filter 0.5s ease;
}

.qing-tl .qing-tl__item:hover .qing-tl__aside img.qing-tl__img {
    transform: scale(1.05);
    filter: saturate(1) brightness(1);
}

.qing-tl--noZoom .qing-tl__item:hover .qing-tl__aside img.qing-tl__img {
    transform: none;
}

/* ============================================================
 * Reveal on scroll (source .js-reveal [data-reveal])
 *
 * Only active once the script adds .qing-reveal to <html>, so with JavaScript
 * off the content is plainly visible -- the correct fallback for content.
 * Each row slides in from its own side, which is why this cannot be a single
 * shared translate.
 * ============================================================ */
.qing-reveal .qing-tl [data-qing-reveal] {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.qing-reveal .qing-tl .qing-tl__item:nth-child(odd)[data-qing-reveal] {
    transform: translateX(calc(var(--qing-tl-shift) * -1));
}

.qing-reveal .qing-tl .qing-tl__item:nth-child(even)[data-qing-reveal] {
    transform: translateX(var(--qing-tl-shift));
}

/* Head and footnote use the source base reveal: straight up, 26px. */
.qing-reveal .qing-tl .qing-tl__head[data-qing-reveal],
.qing-reveal .qing-tl .qing-tl__foot[data-qing-reveal] {
    transform: translateY(26px);
}

.qing-reveal .qing-tl [data-qing-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* ============================================================
 * Footnote
 *
 * No source equivalent -- the static page ends the section at the list. Styled
 * off the source body copy so it does not read as a foreign element.
 * ============================================================ */
.qing-tl .qing-tl__foot {
    margin: 56px 0 0;
    text-align: center;
    color: var(--qing-tl-text);
    font-size: 0.94rem;
    line-height: 1.8;
}

.qing-tl .qing-tl__foot a {
    color: var(--qing-tl-title);
    text-decoration: none;
    border-bottom: 1px solid var(--qing-tl-chip-border);
}

.qing-tl .qing-tl__foot a:hover {
    color: var(--qing-tl-accent);
    border-bottom-color: var(--qing-tl-accent);
}

/* ============================================================
 * Responsive (source @media 1023px / 599px blocks)
 *
 * Collapses to a single left-hand rail: image above, text below, every row
 * aligned the same way.
 * ============================================================ */
@media (max-width: 1023px) {

    .qing-tl.qing-tl .qing-tl__list::before {
        left: 6px;
        margin-left: 0;
    }

    .qing-tl.qing-tl .qing-tl__item,
    .qing-tl.qing-tl .qing-tl__item:nth-child(even) .qing-tl__card,
    .qing-tl.qing-tl .qing-tl__item:nth-child(even) .qing-tl__aside {
        grid-template-columns: 1fr;
        grid-column: auto;
        grid-row: auto;
    }

    .qing-tl.qing-tl .qing-tl__item {
        gap: 22px;
        padding: 8px 0 34px 40px;
        align-items: start;
    }

    .qing-tl.qing-tl .qing-tl__item:nth-child(odd) .qing-tl__card,
    .qing-tl.qing-tl .qing-tl__item:nth-child(even) .qing-tl__card {
        text-align: left;
    }

    /* The text-only override has to be undone as well, or its auto margins and
       extra padding fight the rail. */
    .qing-tl.qing-tl .qing-tl__item--noImg .qing-tl__card,
    .qing-tl.qing-tl .qing-tl__item--noImg:nth-child(even) .qing-tl__card {
        max-width: none;
        margin: 0;
        padding-left: 0;
    }

    /* Node moves onto the left rail, level with the top of the image so it
       marks where each step begins. */
    .qing-tl.qing-tl .qing-tl__node {
        position: absolute;
        left: 0;
        justify-self: start;
        margin-top: 14px;
    }

    /* Image above the text, matching every other stacked block. */
    .qing-tl.qing-tl .qing-tl__aside {
        order: -1;
    }

    .qing-tl.qing-tl .qing-tl__aside img.qing-tl__img {
        height: var(--qing-tl-img-h-tab);
    }

    /* Both sides enter from the same direction once they share a rail. */
    .qing-reveal .qing-tl.qing-tl .qing-tl__item:nth-child(odd)[data-qing-reveal],
    .qing-reveal .qing-tl.qing-tl .qing-tl__item:nth-child(even)[data-qing-reveal] {
        transform: translateY(24px);
    }
}

@media (max-width: 599px) {

    .qing-tl.qing-tl .qing-tl__aside img.qing-tl__img {
        height: var(--qing-tl-img-h-mob);
    }

    .qing-tl.qing-tl .qing-tl__item {
        padding-left: 32px;
    }

    /* Source drops --pad to 18px at this width. */
    .qing-tl__inner {
        padding-inline: 18px;
    }
}

/* The slide, the ring and the image zoom are all decorative. */
@media (prefers-reduced-motion: reduce) {

    .qing-tl .qing-tl__node,
    .qing-tl .qing-tl__aside img.qing-tl__img {
        transition: none;
    }

    .qing-tl .qing-tl__item:hover .qing-tl__aside img.qing-tl__img {
        transform: none;
    }
}

/* ============================================================
 * Reveal settle -- MUST BE LAST IN THIS FILE
 *
 * The shift rules above are .qing-reveal .qing-tl .qing-tl__item:nth-child()
 * [data-qing-reveal] = (0,5,0), and the tablet override doubles .qing-tl to
 * reach (0,6,0). A settle rule written at (0,4,0) loses to both, so the
 * entry translate never came off: every odd row stayed 34px left and every
 * even row 34px right, permanently, and each node was dragged off the centre
 * rule with its row -- the rows did not line up.
 *
 * The source has the same pair at equal specificity and relies on source
 * order, which is why its comment says the settle has to come after the
 * shift. This port scoped the shift rules more tightly than the settle, so
 * order alone was not enough and the specificity has to be matched here.
 *
 * Keep this block at the end of the file, and at (0,6,0) or above.
 * ============================================================ */
.qing-reveal .qing-tl.qing-tl [data-qing-reveal].is-visible,
.qing-reveal .qing-tl.qing-tl .qing-tl__item[data-qing-reveal].is-visible {
    opacity: 1;
    transform: none;
}