/*
 * Property channel — "valuation" promo banner (hzb-*).
 *
 * Standalone block for the property homepage, intended to sit between the
 * "Explore new projects in Jordan" section and "Why choose Hagzi?".
 *
 * Namespace
 * ---------
 * Every selector below is under .hzb-*. Checked against both live sheets
 * before this prefix was chosen: property.css uses .hz-, .pf-, .ph-, .op-,
 * .marketplace-; property-pages.css uses .hzp-, .hzf-. Neither contains the
 * string "hzb", and neither declares an [class*=] / [class^=] selector or a
 * bare element selector that could reach in here. The custom properties are
 * declared on .hzb-banner rather than :root so they cannot leak either.
 *
 * Depends on two site classes for its outer rhythm, both from property.css:
 *   .hz-sec    section padding (44px top, 34px under 720px)
 *   .hz-shell  1200px max-width + 24px gutter
 * If those are ever renamed this block still renders; it just loses the
 * shared page rhythm.
 *
 * No JavaScript. Nothing here binds a listener, so the Vue app that mounts on
 * #app can rebuild the subtree without breaking anything.
 *
 * Plain CSS served from public/. No build step, by design.
 */

/*
 * Scoped border-box. The homepage gets this from the shop build's Tailwind
 * preflight, but this block should not depend on a reset it does not own —
 * without it .hz-shell's 24px gutter is added outside its 100% width and the
 * page overflows by 48px. Measured, not assumed: that is exactly what happened
 * on the preview page before this rule existed.
 */
.hzb-banner,
.hzb-banner *,
.hzb-banner *::before,
.hzb-banner *::after {
    box-sizing: border-box;
}

.hzb-banner {
    /*
     * Deep blue, deliberately not the site's red. The panel advertises
     * something that does not exist yet, so it should not wear the colour the
     * live calls to action use. Measured 10.5:1 against white.
     */
    --hzb-purple: #0638B0;
    --hzb-white: #ffffff;
    --hzb-soft: rgba(255, 255, 255, 0.87);
    --hzb-faint: rgba(255, 255, 255, 0.62);
    --hzb-red: #d92228;
    --hzb-ink: #12141a;
    --hzb-card-muted: #56607a;
}

.hzb-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px 132px;
    grid-template-areas: "copy card rail";
    align-items: center;
    gap: 36px;
    padding: 34px 40px;
    border-radius: 18px;
    background: var(--hzb-purple);
    color: var(--hzb-white);
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

.hzb-copy {
    grid-area: copy;
    min-width: 0;
}

.hzb-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}

.hzb-mark {
    flex: none;
    width: 30px;
    height: 30px;
    fill: none;
    stroke: var(--hzb-white);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
 * Reads "Design preview", not "Beta". Beta would imply something exists and
 * can be used. The site's red is used here and only here, to tie the panel
 * back to the palette without letting it look like a live promotion.
 */
.hzb-pill {
    padding: 3px 9px;
    border-radius: 4px;
    background: var(--hzb-red);
    color: var(--hzb-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hzb-title {
    margin: 0 0 12px;
    color: var(--hzb-white);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.4px;
}

.hzb-title span {
    display: block;
}

.hzb-lede {
    margin: 0;
    max-width: 46em;
    color: var(--hzb-soft);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

.hzb-alt {
    margin: 14px 0 0;
    color: var(--hzb-soft);
    font-size: 13.5px;
    line-height: 1.55;
}

/* 700, not 600: the page loads Roboto 400/500/700 only, so 600 would be faux-bold. */
.hzb-link {
    color: var(--hzb-white);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.hzb-link:hover {
    text-decoration-thickness: 2px;
}

/* Focus ring never removed, only restyled — same rule the site follows. */
.hzb-link:focus-visible {
    outline: 3px solid var(--hzb-white);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ------------------------------------------------------ mock-up card ------ */

.hzb-card {
    grid-area: card;
    min-width: 0;
    margin: 0;
    border-radius: 14px;
    background: var(--hzb-white);
    /* Clips the photograph to the top corners. */
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(12, 8, 40, 0.28);
}

.hzb-card__photo {
    display: block;
    width: 100%;
    height: 116px;
    object-fit: cover;
    background: #dfe3ea;
}

.hzb-card__body {
    padding: 13px 18px 15px;
}

/*
 * Dashed outline rather than a solid chip: the card is a drawing of a result,
 * and the label should not look like a status the system produced.
 */
.hzb-card__label {
    display: inline-block;
    margin: 0 0 11px;
    padding: 2px 8px;
    border: 1px dashed #9aa2b8;
    border-radius: 4px;
    color: var(--hzb-card-muted);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hzb-figures {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.hzb-figures__end {
    flex: none;
    color: var(--hzb-card-muted);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

/*
 * The middle figure is set at the same size and weight as the two ends. It is
 * the only invented number on the page, and at display size it was both the
 * largest number below the hero and a bolded centre value, which reads as a
 * point estimate — the one thing the headline says does not exist. Colour alone
 * marks the centre of the band; the gradient bar carries the rest.
 */
.hzb-figures__mid {
    flex: none;
    color: var(--hzb-ink);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

.hzb-bar {
    height: 6px;
    margin-top: 11px;
    border-radius: 999px;
    background: linear-gradient(90deg, #E7EEFF 0%, #79A0F0 52%, var(--hzb-purple) 100%);
}

.hzb-card__note {
    margin: 11px 0 0;
    padding-top: 10px;
    border-top: 1px solid #e7e9ee;
    color: var(--hzb-card-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

/* ------------------------------------------------------------- QR rail ---- */

.hzb-rail {
    grid-area: rail;
    min-width: 0;
    text-align: center;
}

.hzb-qr {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto;
    padding: 6px;
    border-radius: 8px;
    background: var(--hzb-white);
}

.hzb-rail__note {
    margin: 9px 0 0;
    color: var(--hzb-soft);
    font-size: 11.5px;
    line-height: 1.45;
}

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

/*
 * Under 1080 the three-up row runs out of room for the copy, so the copy takes
 * a full row and the card keeps its width beside the QR.
 */
@media (max-width: 1080px) {
    .hzb-panel {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "copy copy"
            "card rail";
        align-items: start;
        gap: 26px 28px;
        padding: 30px 32px;
    }

    .hzb-title {
        font-size: 27px;
    }

    .hzb-rail {
        padding-top: 6px;
    }
}

/*
 * Single column. The card takes the full width rather than being squeezed, and
 * the QR lies down next to its caption so it costs one short row instead of
 * two tall ones.
 */
@media (max-width: 720px) {
    .hzb-panel {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "copy"
            "card"
            "rail";
        gap: 22px;
        padding: 26px 24px;
        border-radius: 16px;
    }

    .hzb-title {
        font-size: 25px;
    }

    .hzb-card__photo {
        height: 132px;
    }

    .hzb-rail {
        display: flex;
        align-items: center;
        gap: 14px;
        text-align: start;
        padding-top: 0;
    }

    .hzb-qr {
        flex: none;
        width: 84px;
        height: 84px;
        margin: 0;
    }

    .hzb-rail__note {
        margin: 0;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .hzb-panel {
        gap: 20px;
        padding: 22px 18px;
        border-radius: 14px;
    }

    .hzb-title {
        font-size: 22px;
        line-height: 1.25;
    }

    .hzb-lede {
        font-size: 13.5px;
    }

    .hzb-card__body {
        padding: 12px 14px 14px;
    }

    .hzb-figures__end,
    .hzb-figures__mid {
        font-size: 11.5px;
    }
}