/* ---------------------------------------------------------------------------
   The "no picture chosen for this vibe" tile.

   Shared, like bell.css: the public vibe page draws it through
   listing_vibe_placeholder(), and the partner editor's picture picker draws the
   same markup from vibes.js so the preview and the live page cannot drift.
   Rendered by listing_vibe_placeholder() in app/Helpers/listing_helper.php and,
   for the two editors, by blank() in public/assets/partner/custom/vibes.js and
   the admin's own copy in admin/listings/edit.php — keep those in step with each
   other and with this file.

   Three layers in one element:

     the wash    a gradient in the vibe's own colour, which every vibe has
     the blur    the vibe's `hero` over it, where App\Reference\Vibes sets one
     the disc    the vibe's icon, centred, on white

   Both custom properties come from the markup. --vibe-hero is absent for most
   vibes today, and the wash carries those on its own; filling `hero` in the
   reference lights them up without touching this file.

   It sizes itself to whatever box it is dropped into — a 132px picker preview
   and a ~300px card both get the same proportions — so there is one rule here
   rather than one per context. cq units do that; the plain values above each
   are the fallback for a browser without them, and must stay first.
   --------------------------------------------------------------------------- */

.gq-vibe-blank {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* The element the disc measures itself against. */
    container-type: size;
    background: linear-gradient(
        150deg,
        color-mix(in srgb, var(--vibe-color, #6c757d) 58%, #fff),
        color-mix(in srgb, var(--vibe-color, #6c757d) 24%, #fff)
    );
}

/* Inset past the edge on every side: a blur samples beyond what it covers, so
   an image pinned flush to the box leaves a pale rim all the way round. */
.gq-vibe-blank::before {
    content: '';
    position: absolute;
    inset: -10%;
    background-image: var(--vibe-hero, none);
    background-position: center;
    background-size: cover;
    filter: blur(16px) saturate(1.15);
    opacity: .8;
}

.gq-vibe-blank-disc {
    /* Above the blur, which is why this is positioned at all. */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .93);
    color: var(--vibe-color, #6c757d);
    box-shadow: 0 6px 18px -6px rgba(10, 32, 56, .45);

    width: 42%;
    aspect-ratio: 1;
    font-size: 20px;

    width: 38cqmin;
    height: 38cqmin;
    font-size: 17cqmin;
}

/* The glyph is FontAwesome, which is what the catalogue stores — both panels
   already load it. */
.gq-vibe-blank-disc i { line-height: 1; }