/* ═══════════════════════════════════════════════
   GLH Real Estate Business Directory — single
   profile page + directory grid shortcode.
═══════════════════════════════════════════════ */

.glhbd-profile {
    max-width: 760px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1A1A2E;
}

.glhbd-profile-head-text { min-width: 0; }

.glhbd-profile-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}
.glhbd-profile-meta-item {
    background: #f6f7f9;
    border: 1px solid rgba(20,20,40,.06);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.glhbd-profile-meta-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: rgba(20,20,40,.5); }
.glhbd-profile-meta-value { font-size: 18px; font-weight: 800; color: #1A1A2E; }
.glhbd-profile-meta-sub { font-size: 11px; color: rgba(20,20,40,.45); }

.glhbd-profile-rating {
    background: #fffaf0;
    border: 1px solid #f5e2b8;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.glhbd-profile-rating-eyebrow { display: block; font-size: 12px; font-weight: 700; color: #8a6d1f; margin-bottom: 6px; }
.glhbd-profile-rating-note { font-weight: 500; color: #a08838; }
.glhbd-profile-rating-row { display: flex; align-items: baseline; gap: 10px; }
.glhbd-profile-rating-score { font-size: 22px; font-weight: 900; color: #1A1A2E; }
.glhbd-profile-rating-count { font-size: 13px; font-weight: 600; color: rgba(20,20,40,.6); }
.glhbd-profile-rating-src { margin: 4px 0 0; font-size: 12px; color: rgba(20,20,40,.5); }
.glhbd-profile-rating-unavailable { margin: 0; font-size: 13.5px; font-weight: 600; color: rgba(20,20,40,.5); font-style: italic; }

/* The opening line inside the identity card's bio — see
   GLH_Business_Directory::render_identity_card(). */
.glhbd-profile-bio-lead {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.55;
    color: rgba(255,255,255,.92);
    margin: 0 0 12px;
}

/* ── Live map banner + overlapping identity card ──
   Same full-bleed 100vw treatment as the identity card, sitting right
   above it. The card is pulled up over the map's bottom edge via
   negative margin rather than the two sitting as separate blocks. */
.glhbd-map-hero {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    height: 200px;
    overflow: hidden;
    background: #e9ebe9; /* shows briefly while the iframe loads */
}
.glhbd-map-hero-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.glhbd-map-hero-expand {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border: none;
    border-radius: 20px;
    background: rgba(20,20,40,.82);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(2px);
}
.glhbd-map-hero-expand:hover { background: rgba(20,20,40,.95); }

/* Leaflet/OSM fallback for the hero and its Expand modal — used when
   no Google Maps API key is configured (see assets() in
   class-glh-business-directory.php). Same box as the iframe variant
   above, just a plain div Leaflet renders into instead of an iframe. */
.glhbd-map-hero-leaflet,
.glhbd-map-modal-leaflet {
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Shown instead of any embed at all when geocoding couldn't resolve
   the address — a plain, safe link out to Google Maps, never risking
   any embedded third-party UI. */
.glhbd-map-hero-linkonly {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1A1A2E;
}
.glhbd-map-hero-linkonly a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 20px;
    background: rgba(255,255,255,.1);
}
.glhbd-map-hero-linkonly a:hover { background: rgba(255,255,255,.18); }

/* ── The one identity + bio card ──
   Dark, edge-to-edge (breaks out of the theme's content column on
   purpose via the 100vw trick below, regardless of that theme's own
   padding value), square logo. This is now the ONLY place the
   name/title/location/bio render — see render_identity_card(). */
.glhbd-identity-card {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    background: linear-gradient(160deg,#1c2140,#12142a);
    margin-bottom: 22px;
}
/* Only applied when a map banner precedes this card — pulls it up so
   its rounded top corners sit over the map's bottom edge, like a
   bottom sheet, instead of the two stacking as flush separate blocks. */
.glhbd-identity-card--overlap {
    margin-top: -28px;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 24px rgba(0,0,0,.18);
}
.glhbd-identity-card-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 26px 20px 24px;
}
.glhbd-identity-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

/* Square frame — this represents the company's own logo, not a
   person, so it deliberately does not use a circular crop. */
.glhbd-identity-logo {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
    cursor: pointer;
}
.glhbd-identity-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.glhbd-identity-logo-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; font-weight: 800; color: #fff;
}

.glhbd-identity-head-text { min-width: 0; padding-top: 2px; }
.glhbd-identity-name { font-size: 25px; font-weight: 900; margin: 0 0 5px; line-height: 1.2; color: #fff; }
.glhbd-identity-title { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.7); margin: 0 0 8px; }
.glhbd-identity-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255,255,255,.65);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
}
.glhbd-identity-location:hover { color: #C9A84C; }
.glhbd-identity-location svg { flex: 0 0 auto; }

.glhbd-identity-bio {
    color: rgba(255,255,255,.82);
    font-size: 14.5px;
    line-height: 1.65;
    max-height: 84px;
    overflow: hidden;
    position: relative;
    transition: max-height .25s ease;
}
.glhbd-identity-bio::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 36px;
    background: linear-gradient(to bottom, rgba(18,20,42,0), #14162c);
    pointer-events: none;
}
.glhbd-identity-bio.is-expanded { max-height: 2000px; }
.glhbd-identity-bio.is-expanded::after { display: none; }
.glhbd-identity-readmore {
    display: block;
    margin-top: 10px;
    background: none;
    border: none;
    padding: 0;
    color: #C9A84C;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

/* Real address map, opened from the location pin in the identity
   card — see render_identity_card()'s JS-driven modal. */
.glhbd-map-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10,10,20,.75);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.glhbd-map-modal.is-open { display: flex; }
.glhbd-map-modal-inner {
    position: relative;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 4 / 3;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
}
.glhbd-map-modal-frame { width: 100%; height: 100%; border: 0; display: block; }
.glhbd-map-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(20,20,40,.75);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.glhbd-profile-actions {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin-bottom: 24px;
    padding: 0 20px;
    box-sizing: border-box;
}
.glhbd-profile-website,
.glhbd-profile-claim {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 0;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    border-radius: 0; /* square corners, per site owner request */
    padding: 15px 18px;
}
.glhbd-profile-website svg { flex: 0 0 auto; }
.glhbd-profile-website { background: rgba(20,20,40,.06); color: #1A1A2E; }
.glhbd-profile-website:hover { background: rgba(20,20,40,.12); }
.glhbd-profile-claim { background: #C9A84C; color: #1A1A2E; }
.glhbd-profile-claim:hover { background: #d9bb63; }

@media (max-width: 480px) {
    .glhbd-profile-actions { flex-wrap: wrap; }
    .glhbd-profile-website, .glhbd-profile-claim { flex: 1 1 100%; }
}

@media (max-width: 560px) {
    .glhbd-profile-meta { grid-template-columns: 1fr 1fr; }
    .glhbd-identity-top { gap: 12px; }
    .glhbd-identity-logo { width: 64px; height: 64px; border-radius: 10px; }
    .glhbd-identity-name { font-size: 20px; }
}

@media (min-width: 700px) {
    .glhbd-map-hero { height: 280px; }
}

/* ── [glh_business_directory] grid ── */
.glhbd-directory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 900px) { .glhbd-directory-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .glhbd-directory-grid { grid-template-columns: 1fr; } }

.glhbd-directory-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid rgba(20,20,40,.08);
    border-radius: 14px;
    padding: 16px;
    transition: box-shadow .15s ease, transform .15s ease;
}
.glhbd-directory-card:hover { box-shadow: 0 6px 20px rgba(20,20,40,.12); transform: translateY(-2px); }
.glhbd-directory-card-logo {
    width: 52px; height: 52px; border-radius: 12px; overflow: hidden;
    background: rgba(20,20,40,.06);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 20px; color: #1A1A2E;
    margin-bottom: 6px;
}
.glhbd-directory-card-logo img { width: 100%; height: 100%; object-fit: cover; }
.glhbd-directory-card-name { font-size: 15.5px; font-weight: 800; color: #1A1A2E; }
.glhbd-directory-card-title { font-size: 12.5px; font-weight: 600; color: rgba(20,20,40,.6); }
.glhbd-directory-card-loc { font-size: 12px; color: rgba(20,20,40,.5); }

.glhbd-directory-empty { padding: 30px; text-align: center; color: rgba(20,20,40,.5); }

/* Logo button (the profile head now uses a real <button>, not a plain
   span, so it's keyboard and screen-reader accessible) plus the small
   camera badge that signals it opens a full-size view. */
.glhbd-profile-logo-btn {
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
}
.glhbd-profile-logo-btn img { width: 100%; height: 100%; object-fit: cover; }
.glhbd-profile-logo-cam {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: #1A1A2E;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

/* One-image lightbox — see business-profile.js. Deliberately small
   and self-contained: the site's existing gallery lightbox is built
   for multiple images tied to a listing's photo gallery, which does
   not fit a single company logo. */
.glhbd-lb {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10,10,20,.9);
    align-items: center;
    justify-content: center;
}
.glhbd-lb.is-open { display: flex; }
.glhbd-lb-img { max-width: 92vw; max-height: 86vh; border-radius: 10px; object-fit: contain; }
.glhbd-lb-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

/* Square company logo inside the theme's author-bio box, replacing
   the round Gravatar there. No longer used — see
   GLH_Business_Directory::brand_author_box(), which now hides that
   theme slot entirely on a profile post instead of filling it with a
   second copy of the logo+bio (the identity card at the top of the
   page is the only place that renders now). Left here harmlessly in
   case a future need for that slot comes back. */
.glhbd-brand-author-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 10px !important;
    background: rgba(20,20,40,.06) !important;
    overflow: hidden;
}
.glhbd-brand-author-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; border: none !important; }

/* Safety-net for GLH_Business_Directory::remove_theme_hero_image() —
   force-hides GridBit's own full-width single-post hero image
   (.gridbit-post-thumbnail-single, the theme's the_post_thumbnail()
   call at 770px wide/auto-height) on a profile page, no matter why
   the PHP-side unhook of gridbit_media_content_single didn't take
   effect on a given request (stale cached HTML, a future theme
   priority change, etc.). Scoped to .glhbd-profile-page (see
   add_profile_body_class()) — that class is now added to every single
   post site-wide, so the big hero image is hidden everywhere, not
   just on business-profile pages. */
body.glhbd-profile-page .gridbit-post-thumbnail-single {
    display: none !important;
}

/* ── Property photo gallery (separate from logo/avatar) ── */
.glhbd-profile-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0 0 18px;
}
.glhbd-profile-gallery-item {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: #f0f0f4;
}
.glhbd-profile-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s ease;
}
.glhbd-profile-gallery-item:hover img { transform: scale(1.04); }
@media (max-width: 480px) {
    .glhbd-profile-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ── Category + Unverified badges on the identity card ── */
.glhbd-identity-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 4px;
}
.glhbd-identity-category-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,.25);
}
.glhbd-identity-unverified-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.85);
    border: 1px dashed rgba(255,255,255,.35);
    cursor: help;
}