/**
 * Qing Story widget.
 *
 * Section heading with a short gold rule, then a two-column body: prose with
 * an oversized opening paragraph and an optional pull quote on one side, a
 * staggered pair of images on the other. Ported from the static About page.
 *
 * Layout values driven by the Elementor controls are read from CSS custom
 * properties, declared here as the standalone defaults. The controls write
 * the same properties, so an untouched control falls back to these rather
 * than to nothing.
 */

.qing-story {
    /* ---- Defaults, overridden by the widget controls ---- */
    --qing-st-gap: 70px;
    --qing-st-cols: 1.15fr 0.85fr;
    --qing-st-accent: #b3946f;
    --qing-st-text: #2f2b28;
    --qing-st-body: #4a443f;
    --qing-st-muted: #7a736c;
    --qing-st-radius: 4px;
    --qing-st-img-h: 260px;
    --qing-st-img-gap: 22px;
    --qing-st-stagger: 40px;

    width: 100%;
}

/* ============================================================
 * Section heading
 * ============================================================ */
.qing-story__head {
    margin-bottom: 56px;
}

.qing-story__eyebrow {
    margin: 0 0 18px;
    color: var(--qing-st-accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.qing-story__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-st-text);
}

/* The short gold rule under the heading: the motif that ties the page
   sections together. Width/height are set by the controls. */
.qing-story__title::after {
    content: "";
    display: block;
    width: var(--qing-st-rule-w, 48px);
    height: var(--qing-st-rule-h, 2px);
    margin-top: var(--qing-st-rule-gap, 22px);
    background-color: var(--qing-st-rule-color, var(--qing-st-accent));
}

/* Hidden rather than removed from the markup, so the heading keeps its
   semantics when the rule is switched off. */
.qing-story--noRule .qing-story__title::after {
    display: none;
}

/* Centred variant: the rule has to be centred too, or it hangs left. */
.qing-story--headCenter .qing-story__head {
    text-align: center;
}

.qing-story--headCenter .qing-story__title::after {
    margin-inline: auto;
}

/* ============================================================
 * Body layout
 * ============================================================ */
.qing-story__grid {
    display: grid;
    grid-template-columns: var(--qing-st-cols);
    gap: var(--qing-st-gap);
    align-items: start;
}

/* Images on the left. Explicit column indexes rather than direction:rtl,
   which would also flip the text alignment. */
.qing-story--mediaLeft .qing-story__aside {
    grid-column: 1;
    grid-row: 1;
}

.qing-story--mediaLeft .qing-story__body {
    grid-column: 2;
    grid-row: 1;
}

/* Single-column variant: no image column, so the prose gets a readable
   measure instead of running the full container width. */
.qing-story--noMedia .qing-story__grid {
    grid-template-columns: 1fr;
}

.qing-story--noMedia .qing-story__body {
    max-width: var(--qing-st-prose-max, 72ch);
}

.qing-story__body {
    min-width: 0;
}

.qing-story__body p {
    margin: 0 0 22px;
    color: var(--qing-st-body);
    line-height: 1.8;
}

.qing-story__body p:last-child {
    margin-bottom: 0;
}

/* Larger opening paragraph, as a magazine would set it. */
.qing-story__opening {
    font-family: Georgia, "Songti SC", "SimSun", serif;
    font-size: 1.35rem;
    line-height: 1.6;
    /* Wins over the generic paragraph colour above without needing a more
       specific selector chain. */
    color: var(--qing-st-text) !important;
}

/* ============================================================
 * Pull quote
 * ============================================================ */
.qing-story__pull {
    margin: 40px 0 0;
    padding-left: 28px;
    border-left: 2px solid var(--qing-st-accent);
}

.qing-story__pull p {
    margin: 0 0 12px;
    font-family: Georgia, "Songti SC", "SimSun", serif;
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--qing-st-text);
}

.qing-story__pull cite {
    color: var(--qing-st-muted);
    font-size: 0.78rem;
    font-style: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ============================================================
 * Image column
 *
 * Staggered pair: the indent on the second image keeps the column from
 * looking like a plain stack of boxes.
 * ============================================================ */
.qing-story__aside {
    display: grid;
    gap: var(--qing-st-img-gap);
    min-width: 0;
}

.qing-story .qing-story__aside img {
    display: block;
    width: 100%;
    height: var(--qing-st-img-h, 260px);
    object-fit: cover;
    border-radius: var(--qing-st-radius);
}

.qing-story__aside .qing-story__fig {
    margin: 0;
    min-width: 0;
}

/* Indent every image after the first. :not(:first-child) rather than
   :last-child so the stagger still works with three or more images. */
.qing-story__aside .qing-story__fig:not(:first-child) {
    margin-left: var(--qing-st-stagger);
}

/* Mirrored stagger when the images sit on the left, so the indent leans
   away from the text rather than into it. */
.qing-story--mediaLeft .qing-story__aside .qing-story__fig:not(:first-child) {
    margin-left: 0;
    margin-right: var(--qing-st-stagger);
}

/* ============================================================
 * Responsive
 * ============================================================ */
@media (max-width: 1024px) {

    .qing-story__head {
        margin-bottom: 40px;
    }

    .qing-story__grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    /* Image above the words once stacked. The markup keeps the prose first so
       the reading order is correct for screen readers and with CSS off;
       `order` only changes the visual sequence. */
    .qing-story__aside {
        order: -1;
        /* Side by side while there is still width for it. */
        grid-template-columns: 1fr 1fr;
    }

    /* Reset the desktop column swap: with one column those indexes would
       leave a gap where column 2 used to be. */
    .qing-story--mediaLeft .qing-story__aside,
    .qing-story--mediaLeft .qing-story__body {
        grid-column: auto;
        grid-row: auto;
    }

    /* The stagger only reads as deliberate in a vertical stack. */
    .qing-story__aside .qing-story__fig:not(:first-child),
    .qing-story--mediaLeft .qing-story__aside .qing-story__fig:not(:first-child) {
        margin-left: 0;
        margin-right: 0;
    }

    .qing-story--noMedia .qing-story__body {
        max-width: none;
    }
}

@media (max-width: 600px) {

    .qing-story__aside {
        grid-template-columns: 1fr;
    }

    /* Height comes from --qing-st-img-h, which the responsive Height control
       rewrites per breakpoint, so there is nothing to override here. */

    .qing-story__opening {
        font-size: 1.18rem;
    }

    .qing-story__pull {
        margin-top: 32px;
        padding-left: 20px;
    }
}