/**
 * Qing Principle widget.
 *
 * One numbered promise row: image on one side with an oversized outline
 * numeral half off its corner, kicker + heading + text + tick list on the
 * other. Ported from the static About page.
 *
 * Stack several instances to build the full set; the top border on the
 * wrapper is what separates consecutive rows, so alternate the Image
 * Position control to get the zig-zag of the original design.
 *
 * Layout values driven by the Elementor controls are read from CSS custom
 * properties, declared here as the standalone defaults so an untouched
 * control falls back to these rather than to nothing.
 */

.qing-principle {
    /* ---- Defaults, overridden by the widget controls ---- */
    --qing-pr-gap: 64px;
    --qing-pr-cols: 1fr 1fr;
    --qing-pr-accent: #b3946f;
    --qing-pr-text: #2f2b28;
    --qing-pr-muted: #7a736c;
    --qing-pr-line: #eae5df;
    --qing-pr-radius: 4px;
    --qing-pr-num-x: -18px;
    --qing-pr-num-y: -26px;
    /* Separate from the accent so recolouring the numeral does not also
       recolour the kicker, the <em> accent and the tick marks. */
    --qing-pr-num-color: var(--qing-pr-accent);

    width: 100%;
}

/* ============================================================
 * Row layout
 * ============================================================ */
.qing-principle__row {
    display: grid;
    grid-template-columns: var(--qing-pr-cols);
    gap: var(--qing-pr-gap);
    align-items: center;
}

/* Media column must allow the numeral to hang outside its box. */
.qing-principle__media {
    position: relative;
    overflow: visible;
    margin: 0;
    min-width: 0;
}

/* Image side. The markup is always body-then-media, so auto placement already
   gives image-right; only the left variant needs explicit column indexes.
   Explicit indexes rather than direction:rtl, which would also flip the text
   alignment inside the body. */
.qing-principle--mediaLeft .qing-principle__media {
    grid-column: 1;
    grid-row: 1;
}

.qing-principle--mediaLeft .qing-principle__body {
    grid-column: 2;
    grid-row: 1;
}

.qing-principle--mediaRight .qing-principle__media {
    grid-column: 2;
    grid-row: 1;
}

.qing-principle--mediaRight .qing-principle__body {
    grid-column: 1;
    grid-row: 1;
}

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

/* ============================================================
 * Image
 * ============================================================ */
/* Doubled class lifts specificity to (0,2,1), above Elementor frontend.css's
   `.elementor img { height: auto }`(0,1,1) -- that rule loads after this file,
   so on a specificity tie it wins and the Height control appears dead. */
.qing-principle .qing-principle__media img {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: var(--qing-pr-radius);
    /* Slight desaturation at rest; full colour on hover of the row. */
    filter: saturate(0.85);
    transition: filter 0.6s ease, transform 0.6s ease;
}

.qing-principle:hover .qing-principle__media img {
    filter: saturate(1);
    transform: translateY(-6px);
}

/* Opt out of the hover move without losing the colour shift. */
.qing-principle--noLift:hover .qing-principle__media img {
    transform: none;
}

/* ============================================================
 * Outline numeral
 *
 * Sits half over the image corner so the two columns interlock instead of
 * reading as separate boxes.
 * ============================================================ */
.qing-principle__numeral {
    position: absolute;
    right: var(--qing-pr-num-x);
    bottom: var(--qing-pr-num-y);
    font-family: Georgia, "Songti SC", "SimSun", serif;
    font-size: 6.5rem;
    line-height: 1;
    color: transparent;
    /* Longhands rather than the -webkit-text-stroke shorthand: the Outline
       Thickness control writes -webkit-text-stroke-width on its own, and a
       shorthand here would reset it back to 1px. */
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--qing-pr-num-color);
    /* Firefox / older engines ignore text-stroke; the low opacity keeps it
       from looking like a solid slab there. */
    opacity: 0.85;
    pointer-events: none;
    user-select: none;
}

/* ---- Corner ----
 *
 * Which corner of the image the numeral hangs off. Written by the Corner
 * control, so the choice is independent of the image side.
 *
 * Every variant sets all four insets -- the two it does not use go to auto
 * -- otherwise switching corners would leave the previous inset applied and
 * the glyph would stretch across the frame.
 */

/* Auto: follows the image side so the glyph hangs off the row outer edge.
   Original behaviour, kept as the default. */
.qing-principle--numAuto .qing-principle__numeral {
    right: var(--qing-pr-num-x);
    bottom: var(--qing-pr-num-y);
    left: auto;
    top: auto;
}

.qing-principle--numAuto.qing-principle--mediaLeft .qing-principle__numeral {
    right: auto;
    left: var(--qing-pr-num-x);
}

.qing-principle--numBR .qing-principle__numeral {
    right: var(--qing-pr-num-x);
    bottom: var(--qing-pr-num-y);
    left: auto;
    top: auto;
}

.qing-principle--numBL .qing-principle__numeral {
    left: var(--qing-pr-num-x);
    bottom: var(--qing-pr-num-y);
    right: auto;
    top: auto;
}

.qing-principle--numTR .qing-principle__numeral {
    right: var(--qing-pr-num-x);
    top: var(--qing-pr-num-y);
    left: auto;
    bottom: auto;
}

.qing-principle--numTL .qing-principle__numeral {
    left: var(--qing-pr-num-x);
    top: var(--qing-pr-num-y);
    right: auto;
    bottom: auto;
}

/* Solid variant: filled glyph instead of an outline. */
/* Solid variant: filled glyph instead of an outline. */
.qing-principle--numSolid .qing-principle__numeral {
    color: var(--qing-pr-num-color);
    -webkit-text-stroke-width: 0;
}

/* ============================================================
 * Body text
 * ============================================================ */
.qing-principle__kicker {
    margin: 0 0 14px;
    color: var(--qing-pr-accent);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.qing-principle__title {
    margin: 0 0 18px;
    font-family: Georgia, "Songti SC", "SimSun", serif;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--qing-pr-text);
}

.qing-principle__title em,
.qing-principle__title i {
    font-style: italic;
    color: var(--qing-pr-accent);
}

.qing-principle__text {
    margin: 0 0 26px;
    color: var(--qing-pr-muted);
    line-height: 1.85;
}

/* Drops the gap when the tick list is the next thing after the text. */
.qing-principle__text:last-child {
    margin-bottom: 0;
}

/* ============================================================
 * Tick list
 *
 * The mark is drawn with two borders rotated 45deg, so there is no icon
 * font and no extra request.
 * ============================================================ */
.qing-principle__ticks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.qing-principle__ticks li {
    position: relative;
    padding: 9px 0 9px 30px;
    font-size: 0.93rem;
    line-height: 1.7;
    color: var(--qing-pr-text);
    border-top: 1px solid var(--qing-pr-line);
}

/* Closes the list with a rule so it does not end on open space. */
.qing-principle--ticksClosed .qing-principle__ticks li:last-child {
    border-bottom: 1px solid var(--qing-pr-line);
}

.qing-principle__ticks li::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 4px;
    width: 11px;
    height: 6px;
    border-left: 1.5px solid var(--qing-pr-accent);
    border-bottom: 1.5px solid var(--qing-pr-accent);
    transform: rotate(-45deg);
}

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

    .qing-principle__row {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    /* Image above the words once stacked. The markup keeps the text first so
       the reading order is correct for screen readers and with CSS off;
       `order` only changes the visual sequence. */
    .qing-principle__media {
        order: -1;
    }

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

    /* Numeral moves inside the frame: there is no longer a column beside the
       image for it to hang into. Size is left alone -- it comes from the
       responsive Size control, which writes its own per-breakpoint rule, and
       overriding it here would win because this block comes later. */
    .qing-principle__numeral,
    .qing-principle--numAuto .qing-principle__numeral,
    .qing-principle--numAuto.qing-principle--mediaLeft .qing-principle__numeral,
    .qing-principle--numBR .qing-principle__numeral,
    .qing-principle--numBL .qing-principle__numeral,
    .qing-principle--numTR .qing-principle__numeral,
    .qing-principle--numTL .qing-principle__numeral {
        right: 14px;
        left: auto;
        bottom: 10px;
    }
}

/* The only motion is the image hover, which is decorative. */
@media (prefers-reduced-motion: reduce) {

    .qing-principle__media img {
        transition-duration: 0.01ms;
    }

    .qing-principle:hover .qing-principle__media img {
        transform: none;
    }
}