/* Public Hub's image-led identity stage. Source-aware and intentionally compact. */
html[data-hub-storefront] body .hub-market[data-hub-public-view] .hm-visual.has-hero-mosaic {
    position: relative;
    height: clamp(300px, 30vw, 390px) !important;
    min-height: 300px !important;
    max-height: none !important;
    display: block !important;
    overflow: hidden;
    isolation: isolate;
    padding: 0 !important;
    background: #07172d;
    border-radius: 16px !important;
    box-shadow: none !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view]
    .hm-visual.has-hero-mosaic > .ehub-hero-mosaic {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(12,minmax(0,1fr));
    grid-template-rows: repeat(6,minmax(0,1fr));
    gap: 4px;
    height: 100%;
    width: 100%;
    padding: 0;
    background: #07172d;
}
.ehub-mosaic-tile {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    cursor: zoom-in;
    outline-offset: -3px;
    background: #153353;
    transition: filter .15s ease;
}
.ehub-mosaic-tile:hover {filter:brightness(1.08)}
.ehub-mosaic-tile:focus-visible {outline: 3px solid #8cdeff; z-index: 4;}
html[data-hub-storefront] body .hub-market[data-hub-public-view]
    .hm-visual.has-hero-mosaic .ehub-mosaic-tile > img {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    transition: transform .3s ease;
}
.ehub-mosaic-tile:hover > img {transform:scale(1.035)}
.ehub-mosaic-tile-1 {grid-column: 1 / 8;grid-row: 1 / 7}
.ehub-mosaic-tile-2 {grid-column: 8 / 13;grid-row: 1 / 4}
.ehub-mosaic-tile-3 {grid-column: 8 / 13;grid-row: 4 / 7}
.ehub-mosaic-tile-4 {grid-column: 11 / 13;grid-row: 4 / 7}
.ehub-hero-mosaic[data-image-count="2"] .ehub-mosaic-tile-2 {grid-row:1 / 7}
.ehub-hero-mosaic[data-image-count="4"] .ehub-mosaic-tile-3 {grid-column:8 / 11}
.ehub-mosaic-tile[hidden],.ehub-hero-mosaic[hidden] {display:none!important}
.ehub-hero-mosaic.is-single .ehub-mosaic-tile {grid-column:1/-1!important;grid-row:1/-1!important}
.ehub-mosaic-more {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(4,19,37,.55);
    color: #fff;
    font-size: clamp(12px,1.3vw,18px);
    font-weight: 770;
    pointer-events: none;
    text-align: center;
    padding: 8px;
}
.ehub-mosaic-album-label {
    position:absolute;
    bottom: 12px;
    left: 12px;
    z-index: 3;
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:rgba(7,18,35,.78);
    border:1px solid rgba(225,240,255,.24);
    border-radius:9px;
    color:#fff;
    font-size:11px;
    font-weight:720;
    line-height:1.3;
    padding:8px 11px;
    pointer-events:none;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}
/* The existing provenance button is retained and must sit above the collage. */
html[data-hub-storefront] body .hub-market[data-hub-public-view]
    .hm-visual.has-hero-mosaic .hm-visual-info-trigger {
    z-index: 6 !important;
}
.ehub-mosaic-empty[hidden] {display:none!important}
/* Native dialog: full photo, count, caption, and an independent source link. */
.ehub-mosaic-dialog {
    box-sizing:border-box;
    width:min(96vw,1020px);
    max-width:1020px;
    max-height:min(92dvh,860px);
    margin:auto;
    padding:0;
    overflow:hidden;
    background:#07172b;
    border:1px solid rgba(165,203,241,.25);
    color:#f1f7ff;
    border-radius:18px;
    box-shadow:0 28px 85px rgba(0,0,0,.68);
}
.ehub-mosaic-dialog::backdrop {background:rgba(1,8,20,.85);backdrop-filter:blur(5px)}
.ehub-mosaic-dialog:not([open]) {display:none}
.ehub-mosaic-dialog-head {
    display:flex;align-items:center;justify-content:space-between;
    gap:15px;padding:13px 18px;
    font-size:14px;line-height:1.45;
}
.ehub-mosaic-dialog-head strong {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ehub-mosaic-dialog-head strong span {color:#96acc5;font-weight:500}
.ehub-mosaic-dialog button {
    appearance:none;display:grid;place-items:center;
    width:38px;height:38px;min-width:38px;
    padding:0;border:1px solid rgba(171,206,243,.27);
    border-radius:10px;background:#102a49;color:#f5fbff;
    font:inherit;font-size:26px;line-height:1;
    cursor:pointer;
}
.ehub-mosaic-dialog button:hover {background:#1a4167}
.ehub-mosaic-dialog button:focus-visible,.ehub-mosaic-dialog a:focus-visible {
    outline:2px solid #75d9f5;outline-offset:3px;
}
.ehub-mosaic-dialog-media {
    display:grid;
    grid-template-columns:45px minmax(0,1fr) 45px;
    gap:10px;
    align-items:center;
    height:min(63dvh,650px);
    min-height:220px;
    padding:5px 12px;
    background:#030b16;
}
html[data-hub-storefront] body .hub-market .ehub-mosaic-dialog-media > img {
    display:block;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    object-fit:contain !important;
    background:transparent !important;
}
.ehub-mosaic-dialog-foot {
    display:flex;
    align-items:flex-start;
    gap:17px;
    padding:14px 18px 19px;
    font-size:12px;
}
.ehub-mosaic-dialog-foot > span {
    flex:0 0 auto;
    color:#77d7ec;
    font-weight:750;
}
.ehub-mosaic-dialog-caption {
    display:grid;gap:5px;min-width:0;
}
.ehub-mosaic-dialog-caption strong {font-size:12.5px;line-height:1.4;font-weight:680;overflow-wrap:anywhere}
.ehub-mosaic-dialog-caption span {color:#a6bdd2;line-height:1.4;overflow-wrap:anywhere}
.ehub-mosaic-dialog-caption a {color:#92ddfa;text-decoration:none;font-weight:670}
.ehub-mosaic-dialog-caption a[hidden] {display:none!important}
@media(max-width:780px) {
    html[data-hub-storefront] body .hub-market[data-hub-public-view] .hm-visual.has-hero-mosaic {
        height:clamp(230px,58vw,350px) !important;
        min-height:230px !important;
    }
}
@media(max-width:540px) {
    html[data-hub-storefront] body .hub-market[data-hub-public-view] .hm-visual.has-hero-mosaic {
        height:clamp(225px,67vw,305px) !important;
        min-height:225px !important;
        border-radius:13px !important;
    }
    .ehub-hero-mosaic {gap:3px!important}
    .ehub-mosaic-album-label {bottom:10px;left:9px;font-size:10px;padding:7px 9px}
    .ehub-mosaic-dialog {width:100vw;max-height:95dvh;border-radius:13px}
    .ehub-mosaic-dialog-head {padding:10px 12px}
    .ehub-mosaic-dialog-media {grid-template-columns:31px minmax(0,1fr) 31px;gap:4px;padding:4px;height:min(62dvh,520px)}
    .ehub-mosaic-dialog button {width:30px;min-width:30px;height:34px;font-size:24px}
    .ehub-mosaic-dialog-foot {padding:12px 14px;gap:10px}
}
@media(prefers-reduced-motion:reduce) {
    .ehub-mosaic-tile,.ehub-mosaic-tile > img {transition:none!important;transform:none!important}
}
