/* C:\Dropbox\dvlpmnt\web_dev\chzr.llc\public\css\apps\hub.css
   The Hub: hero preview of the landing (prefix hub-). The window chrome comes from
   the shared chzr-preview-window / chzr-window-* classes in chzr.css; here only the
   inside of the window and the rounded corners of the brand are styled. */

/* Rounded corners of the brand (owner, 2026-11-07): the clay logo is a square piece,
   so it is rounded on the landing hero and in the app header. Scoped to the app so no
   other logo changes. */
[data-app="thehub"] .chzr-hero-logo,
body[data-app="thehub"] .module-logo {
    border-radius: 26%;
    box-shadow: 0 10px 28px rgba(46, 58, 52, .18);
}

.hub-window { max-width: 540px; }

/* Cover photo of the community inside the preview */
.hub-cover { position: relative; border-radius: 12px; overflow: hidden; margin: 0 0 10px; }
.hub-cover img { display: block; width: 100%; height: auto; }
.hub-cover:after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20, 32, 28, .05) 0%, rgba(20, 32, 28, .72) 100%);
}
.hub-cover-txt { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; color: #fff; }
.hub-cover-txt strong { display: block; font-size: 1.02rem; line-height: 1.2; }
.hub-cover-txt small { display: block; font-size: .72rem; opacity: .85; margin-top: 2px; }
.hub-chip {
    display: inline-block; font-size: .64rem; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; background: rgba(159, 216, 192, .92); color: #17332a;
    border-radius: 999px; padding: 2px 8px; margin-bottom: 4px;
}

/* Spaces strip */
.hub-spaces { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.hub-space {
    font-size: .68rem; font-weight: 700; padding: 4px 9px; border-radius: 999px;
    background: #f3f5f4; color: #4b5563; border: 1px solid #e5e7eb;
}
.hub-space-on { background: #4e9d80; border-color: #4e9d80; color: #fff; }

/* Fake posts */
.hub-feed { display: grid; gap: 8px; }
.hub-post { display: flex; gap: 9px; background: #fff; border: 1px solid #eceff1; border-radius: 12px; padding: 9px 11px; }
.hub-ava {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; font-size: .6rem; font-weight: 800;
    background: #e6f4ee; color: #2f6b57;
}
.hub-ava-2 { background: #fdf0e3; color: #9a5b18; }
.hub-post-body { min-width: 0; }
.hub-post-body strong { display: block; font-size: .76rem; color: #273029; }
.hub-post-body strong small { font-weight: 500; color: #98a29c; }
.hub-post-body p { margin: 3px 0 6px; font-size: .74rem; line-height: 1.45; color: #4b5563; }
.hub-post-foot { display: flex; gap: 12px; font-size: .68rem; color: #8b948e; align-items: center; }
.hub-tag { background: #e6f4ee; color: #2f6b57; border-radius: 999px; padding: 1px 7px; font-weight: 700; }

/* Composer */
.hub-compose {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .72rem; color: #98a29c; background: #fafbfa;
    border: 1px dashed #d7dcd9; border-radius: 999px; padding: 7px 12px;
}
.hub-send { color: #4e9d80; }

@media (max-width: 640px) {
    .hub-window { max-width: 100%; }
    .hub-cover-txt strong { font-size: .92rem; }
}