/**
 * Pilbe — Property Detail Treatment for Unclaimed-Agent Listings
 *
 * Scoped entirely to `body.pilbe-unclaimed-property` so the rules are
 * inert on every other page. Greys the first gallery slot (the actual
 * extracted photo), overlays a "Preview Image" badge, and styles the
 * "Know this agent?" sidebar CTA injected by pilbe-property-unclaimed.php.
 *
 * Houzez exposes a handful of gallery markups depending on which
 * `top-area-v*` is active. The selectors below cover the variants in
 * active use on Pilbe (v1, v3, v4, v6, v7 + lightbox + mobile-view).
 *
 * @package Pilbe
 * @version 1.0.0
 */

/* ──────────────────────────────────────────────────────────────────
   Gallery first-image greying + "Preview" overlay badge
   ────────────────────────────────────────────────────────────────── */

/* The shared "hero" image is rendered inside a handful of wrappers
   depending on the active top-area version. Target each first-child
   image consistently. */
.pilbe-unclaimed-property .houzez-gallery .swiper-slide:first-child img,
.pilbe-unclaimed-property .houzez-gallery .houzez-thumbs .swiper-slide img,
.pilbe-unclaimed-property .property-gallery .swiper-slide:first-child img,
.pilbe-unclaimed-property .block-banner-image img,
.pilbe-unclaimed-property .property-banner-image img,
.pilbe-unclaimed-property .listing-detail-mobile-cont img:first-of-type,
.pilbe-unclaimed-property .gallery-luxury-bg-image,
.pilbe-unclaimed-property .property-image-gallery .item:first-child img {
    filter: grayscale(100%);
    opacity: 0.65;
}

/* "Preview Image" overlay badge — inject via a wrapping pseudo-element
   on the gallery container. Each top-area variant has its own
   container, so we target the most common ones. Position relative is
   needed so the absolute badge anchors to the container. */
.pilbe-unclaimed-property .houzez-gallery,
.pilbe-unclaimed-property .property-gallery,
.pilbe-unclaimed-property .block-banner-image,
.pilbe-unclaimed-property .property-banner-image,
.pilbe-unclaimed-property .listing-detail-mobile-cont,
.pilbe-unclaimed-property .property-image-gallery {
    position: relative;
}

.pilbe-unclaimed-property .houzez-gallery::before,
.pilbe-unclaimed-property .property-gallery::before,
.pilbe-unclaimed-property .block-banner-image::before,
.pilbe-unclaimed-property .property-banner-image::before,
.pilbe-unclaimed-property .listing-detail-mobile-cont::before,
.pilbe-unclaimed-property .property-image-gallery::before {
    content: 'Preview Image';
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-family: var(--pilbe-font, 'Inter', sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 3px;
    pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────────
   Sidebar claim CTA card — injected via dynamic_sidebar_before
   ────────────────────────────────────────────────────────────────── */

.pilbe-property-claim-cta {
    background: var(--pilbe-warning-50);
    border: 1px solid var(--pilbe-warning-500);
    border-radius: var(--pilbe-radius-md);
}

.pilbe-property-claim-cta__head {
    display: flex;
    align-items: center;
    gap: var(--pilbe-space-3);
    margin-bottom: var(--pilbe-space-2);
}

.pilbe-property-claim-cta__icon {
    flex: 0 0 auto;
    color: var(--pilbe-warning-700);
    display: inline-flex;
}

.pilbe-property-claim-cta__title {
    font-family: var(--pilbe-font);
    font-size: var(--pilbe-text-h5, 1.1rem);
    line-height: 1.3;
    font-weight: 700;
    color: var(--pilbe-text-primary);
    margin: 0;
}

.pilbe-property-claim-cta__lead {
    margin: 0 0 var(--pilbe-space-3) 0;
    font-family: var(--pilbe-font);
    font-size: var(--pilbe-text-sm);
    line-height: var(--pilbe-lh-sm);
    color: var(--pilbe-text-secondary);
}

.pilbe-property-claim-cta__btn {
    width: 100%;
    justify-content: center;
}