/**
 * Qing CTA band.
 *
 * Ported from the static About page (static/assets/pages.css, the "Closing
 * CTA" block plus the shared .btn rules). Class names are namespaced to
 * .qing-cta, but every measurement and colour is the value the static page
 * uses.
 *
 * Two actions: the first opens an enquiry dialog, the second is a plain
 * WhatsApp link. The dialog reuses the .qing-cs__* form classes from the
 * contact split widget so the form looks identical in both places -- the
 * widget declares qing-contact-split as a style dependency for that reason.
 */

.qing-cta {
    /* From :root in pages.css. */
    --qing-cta-bg: #23201d;
    --qing-cta-ink: #2f2b28;
    --qing-cta-accent: #b3946f;
    --qing-cta-accent-dark: #96774f;
    --qing-cta-display: Georgia, "Songti SC", "SimSun", serif;
    --qing-cta-radius: 4px;

    --qing-cta-pad-block: 110px;
    --qing-cta-wrap: 620px;
    --qing-cta-pad: 24px;
    --qing-cta-gap: 14px;

    box-sizing: border-box;
    padding-block: var(--qing-cta-pad-block);
    background-color: var(--qing-cta-bg);
}

.qing-cta *,
.qing-cta *::before,
.qing-cta *::after {
    box-sizing: inherit;
}

/* Source: .cta__inner -- a narrow centred column, not the full wrap. */
.qing-cta__inner {
    width: 100%;
    max-width: var(--qing-cta-wrap);
    margin-inline: auto;
    padding-inline: var(--qing-cta-pad);
    text-align: center;
}

/* Source: .eyebrow + .eyebrow--light */
.qing-cta__eyebrow {
    display: block;
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.76rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

/* Source: .display + .h2--light. The static heading is a serif display face
   at normal weight -- bolding it is the usual way this band goes wrong. */
.qing-cta__title {
    margin: 0;
    color: #fff;
    font-family: var(--qing-cta-display);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 400;
    line-height: 1.25;
}

/* Source: .display em -- the accent phrase is not italic. */
.qing-cta__title em {
    color: var(--qing-cta-accent);
    font-style: normal;
}

/* Source: .cta__text */
.qing-cta__text {
    margin: 20px 0 36px;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.75;
}

/* Source: .cta__actions */
.qing-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--qing-cta-gap);
}

/* Source: .btn. The gap is what puts the icon to the left of the label; the
   static buttons carry no icon, so this is the one addition. */
.qing-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 34px;
    border: 1px solid transparent;
    border-radius: var(--qing-cta-radius);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* The icon is sized in em so it tracks the label if the font size changes. */
.qing-cta__btn svg {
    flex: none;
    width: 1.15em;
    height: 1.15em;
    fill: currentColor;
}

/* Source: .btn--light -- the primary action. */
.qing-cta__btn--light {
    background-color: #fff;
    color: var(--qing-cta-ink);
}

.qing-cta__btn--light:hover,
.qing-cta__btn--light:focus-visible {
    background-color: var(--qing-cta-accent);
    color: #fff;
}

/* Source: .btn--outlineLight -- the secondary action. */
.qing-cta__btn--outline {
    border-color: rgba(255, 255, 255, 0.34);
    background-color: transparent;
    color: #fff;
}

.qing-cta__btn--outline:hover,
.qing-cta__btn--outline:focus-visible {
    border-color: #fff;
    background-color: #fff;
    color: var(--qing-cta-ink);
}

/* ---- Enquiry dialog ----
   A native <dialog>: the browser supplies the modal semantics, the focus
   trap and Esc-to-close, so the script only has to call showModal(). The
   form inside uses the .qing-cs__* classes from qing-contact-split.css. */
.qing-cta__dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 0;
    border-radius: var(--qing-cta-radius);
    background: #fff;
    color: var(--qing-cta-ink);
    overflow: auto;
}

.qing-cta__dialog::backdrop {
    background: rgba(35, 32, 29, 0.62);
}

.qing-cta__dialogInner {
    position: relative;
    padding: 32px 30px;
}

/* Sits over the card padding rather than in the flow, so the heading below
   keeps the same top edge it has on the contact page. */
.qing-cta__close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #7a736c;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.qing-cta__close:hover {
    background: rgba(35, 32, 29, 0.06);
    color: var(--qing-cta-ink);
}

/* The form classes come from qing-contact-split.css, where they are scoped
   under .qing-cs. Declaring that scope here lets the same rules apply inside
   the dialog without duplicating them. */
.qing-cta__dialog .qing-cs__cardHead {
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid #eae5df;
}

.qing-cta__dialog .qing-cs__cardTitle {
    margin: 0 0 8px;
    font-family: var(--qing-cta-display);
    font-size: 1.4rem;
    font-weight: 400;
}

.qing-cta__dialog .qing-cs__note {
    margin: 0;
    color: #7a736c;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* Confirmation shown in place of the form after an AJAX submit. */
.qing-cta__done {
    margin: 0;
    padding: 22px 0;
    color: var(--qing-cta-ink);
    text-align: center;
}

.qing-cta__done[hidden] {
    display: none;
}

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

    .qing-cta {
        --qing-cta-pad-block: 78px;
    }
}

@media (max-width: 640px) {

    .qing-cta {
        --qing-cta-pad-block: 58px;
        --qing-cta-pad: 18px;
    }

    /* Full-width buttons stacked: two 34px-padded buttons side by side do not
       fit a narrow screen without the labels wrapping mid-word. */
    .qing-cta__actions {
        flex-direction: column;
    }

    .qing-cta__btn {
        width: 100%;
        padding-inline: 20px;
    }

    .qing-cta__dialogInner {
        padding: 26px 18px;
    }
}

/* ============================================================
 * Dialog layout corrections
 *
 * Appended after the original dialog block so source order settles ties.
 * ============================================================ */

/* The card carries .qing-cs because the field rules in qing-contact-split.css
   are scoped under that class. But .qing-cs is two things at once: the form
   styles AND the contact page two-panel layout -- display:grid, columns
   0.85fr 1.15fr, min-height 100vh. Inside the dialog only the form half is
   wanted. Left alone, the card head lands in column one, the fields in column
   two, and the box is stretched to a full viewport height; that stretch is the
   empty space under the form. Class doubled to (0,2,x) so these win whichever
   stylesheet loads last. */
.qing-cta__dialog .qing-cs.qing-cs {
    display: block;
    grid-template-columns: none;
    min-height: 0;
}

/* Height is content-driven now, so the box can be centred rather than pinned
   to the top of the viewport. */
.qing-cta__dialog {
    margin: auto;
}

/* The textarea floor is sized for a full-page card; in a dialog it is what
   pushes the submit button down the box. */
.qing-cta__dialog .qing-cs.qing-cs .qing-cs__input--area {
    min-height: 96px;
}

/* Full width suits the page card, in a dialog it reads as a banner. */
.qing-cta__dialog .qing-cs.qing-cs .qing-cs__btn {
    width: auto;
    min-width: 200px;
}

/* ---- Close glyph ----
   Wrapped in a span so the size and baseline are set on the glyph itself. As
   a bare text node it inherited the button line box and sat high, with
   nothing to target when it needed nudging. */
.qing-cta__closeIcon {
    display: block;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    /* Optical centring: the multiplication sign carries more space above the
       glyph than below. */
    transform: translateY(-1px);
    pointer-events: none;
}

/* ---- Button icons ----
   An uploaded icon arrives as either an <svg> (SVG file, printed inline) or
   an <i> (icon font). Both are wrapped in .qing-cta__btnIco so one rule
   sizes whichever came through. */
.qing-cta__btnIco {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    height: 1.15em;
    line-height: 1;
}

.qing-cta__btnIco svg {
    width: 100%;
    height: 100%;
}

.qing-cta__btnIco i {
    font-size: 1.15em;
    line-height: 1;
}