/*
 * Property channel — "Sell with Hagzi" service banner (.hzsvc-*).
 *
 * The homepage entry point to the done-for-you selling service at
 * /sell-with-hagzi. Sits in the seam between the "Property for Sale" and
 * "Property for Rent" rows.
 *
 * ---------------------------------------------------------------------------
 * WHY THIS IS A SEPARATE FILE
 * ---------------------------------------------------------------------------
 *
 * property-pages.css and property-rtl.css are both being written by other
 * sessions right now, and property.css is the homepage's own sheet. A new file
 * is the only place these rules can go without queueing behind someone else's
 * save, and it costs one more request on one page.
 *
 * No build step. Plain CSS out of public/, cache-busted with filemtime by the
 * partial that loads it, which is how every other sheet on this channel is
 * served.
 *
 * ---------------------------------------------------------------------------
 * NAMESPACE
 * ---------------------------------------------------------------------------
 *
 * Every selector is under .hzsvc-. Checked against all five live property
 * sheets before the prefix was chosen: property.css uses .hz-, .pf-, .ph-,
 * .op-, .marketplace-; property-pages.css uses .hzp-, .hzf-, .hzpg-; the
 * homepage promo panel uses .hzb-; the sell page uses .hzs-. None of them
 * contains the string "hzsvc" and none declares an [class*=] or bare element
 * selector that could reach in here.
 *
 * ---------------------------------------------------------------------------
 * WHY THE COLOURS ARE LITERALS AND NOT var(--hzp-*)
 * ---------------------------------------------------------------------------
 *
 * The tokens this banner wants -- --hzp-accent, --hzp-accent-wash,
 * --hzp-accent-line -- are declared by property-pages.css on .hzp-page. The
 * homepage does not carry that class and does not load that sheet, so every
 * one of those references would resolve to nothing and the panel would compute
 * a transparent background under white text. That exact failure is recorded on
 * the sell page for the same reason. The values below are the same numbers,
 * declared locally on .hzsvc so they cannot leak outward either.
 *
 * ---------------------------------------------------------------------------
 * WHY THIS PANEL IS LIGHT WHEN THE ADD-LISTING PANEL IS DARK
 * ---------------------------------------------------------------------------
 *
 * Deliberate, and the point of the whole block.
 *
 * The Add Listing banner (.hzp-sell, on the results page and the listing page)
 * is a deep blue #06358F card. The homepage already carries a second deep
 * blue full-width slab further down (.hzb-banner). A third blue slab in
 * the middle of the same page would read as the same object repeated, which is
 * exactly the failure this banner has to avoid: Add Listing is self-serve and
 * this is done-for-you, and a reader has to be able to tell which is which at
 * a glance.
 *
 * So the register is inverted -- the accent wash as the ground, the blue as
 * the edge and the type -- while every other part of the idiom is kept
 * identical on purpose: the same 999px pill chips at the same 12.5px/700, the
 * same arrow-in-a-round-button call to action, the same title weight, the same
 * flat two-tone illustration built from a gradient shape with a white glyph
 * inside it and three coral sparks beside it. Same family, different member.
 */

/*
 * Scoped border-box. The homepage inherits a Tailwind preflight from the shop
 * build, but this block should not depend on a reset it does not own -- the
 * .hz-shell gutter is added outside its 100% width without it, which overflows
 * the page by the width of the gutter.
 */
.hzsvc,
.hzsvc *,
.hzsvc *::before,
.hzsvc *::after {
    box-sizing: border-box;
}

.hzsvc {
    /* Same numbers as --hzp-accent / --hzp-accent-wash / --hzp-accent-line.
       See the header: they cannot be referenced from here. */
    --hzsvc-accent: #0745D9;
    --hzsvc-accent-dark: #0638B0;
    --hzsvc-wash: #EEF3FF;
    --hzsvc-line: #C4D4FA;
    --hzsvc-ink: #1b1830;
    --hzsvc-muted: #4a4463;
    /* The Add Listing card's coral, used only for the three sparks so the two
       illustrations are visibly siblings. Never for a control here. */
    --hzsvc-spark: #ec6555;
}

.hzsvc__panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px 22px;
    padding: 22px 26px;
    border: 1px solid var(--hzsvc-line);
    border-radius: 18px;
    background: var(--hzsvc-wash);
}

/* ----------------------------------------------------------- illustration -- */

.hzsvc__art {
    flex: none;
    width: 92px;
    height: auto;
}

/* ------------------------------------------------------------------ copy -- */

.hzsvc__body {
    min-width: 0;
}

/*
 * The one-glance label. .hzp-sell has no pill, so this is not a borrowed
 * element -- it is the fastest way to say "done for you" before the headline
 * is read, which is the whole job of this banner next to the other one.
 */
.hzsvc__pill {
    display: inline-block;
    margin: 0 0 8px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--hzsvc-accent);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* 21px/800 is .hzp-sell__title exactly. The two headlines should sit at the
   same rank in the page even though the panels do not share a ground. */
.hzsvc__title {
    margin: 0;
    color: var(--hzsvc-ink);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.hzsvc__text {
    max-width: 62ch;
    margin: 8px 0 0;
    color: var(--hzsvc-muted);
    font-size: 13.5px;
    line-height: 1.5;
}

/* ----------------------------------------------------------------- chips -- */

.hzsvc__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 13px;
}

/*
 * Labels, not controls: no hover, no pointer, no focus target -- the same
 * contract .hzp-sell__chip states. A border rather than the shadowless white
 * of the dark card, because white on the wash has too little edge without one.
 */
.hzsvc__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid var(--hzsvc-line);
    border-radius: 999px;
    background: #ffffff;
    color: #212026;
    font-size: 12.5px;
    font-weight: 700;
    cursor: default;
}

.hzsvc__chip svg {
    flex: none;
    width: 15px;
    height: 15px;
}

/* ------------------------------------------------------------------- cta -- */

.hzsvc__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 20px;
    border-radius: 999px;
    background: var(--hzsvc-accent);
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.hzsvc__cta:hover {
    background: var(--hzsvc-accent-dark);
    color: #ffffff;
}

.hzsvc__cta:focus-visible {
    outline: 2px solid var(--hzsvc-accent);
    outline-offset: 2px;
}

.hzsvc__cta svg {
    flex: none;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
 * The arrow points along the reading direction, so in Arabic it points the
 * other way. Same treatment and same reason as .hz-seeall's arrow in
 * property-rtl.css; kept here rather than added there because that file is
 * open in another session.
 */
[dir="rtl"] .hzsvc__cta svg {
    transform: scaleX(-1);
}

/* ------------------------------------------------------------ responsive -- */

/*
 * The call to action drops under the copy before the copy is squeezed. At this
 * width a nowrap Arabic button and a headline cannot share a row without one
 * of them wrapping badly.
 */
@media (max-width: 899.98px) {
    .hzsvc__panel {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 16px 18px;
        padding: 20px;
    }

    .hzsvc__cta {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/*
 * Phone. The illustration goes -- the same call .hzp-sell makes below its own
 * breakpoint, and for the same reason: at this width it is taking a third of
 * the row off the words. The button goes full width because a left-aligned
 * pill in a 350px column reads as an offcut.
 */
@media (max-width: 599.98px) {
    .hzsvc__panel {
        grid-template-columns: minmax(0, 1fr);
        padding: 18px 16px;
        border-radius: 14px;
    }

    .hzsvc__art {
        display: none;
    }

    .hzsvc__title {
        font-size: 19px;
    }

    .hzsvc__cta {
        justify-self: stretch;
        width: 100%;
        /* The English label fits on one line at 390; the Arabic one is longer
           and must be allowed to use two rather than push the panel wide. */
        white-space: normal;
    }
}