/*
 * Susret.app P2-03 content and entity surface layer.
 * Site-owned presentation only; canonical UNA markup, routes and actions stay intact.
 */

/* Shared content rhythm. The selectors intentionally overlap UNA's existing
 * unit names so the layer also works when a real fixture is present. */
[data-susret-p2-03-entity] #bx-content-main,
[data-susret-p2-03-entity] #bx-content-main .bx-layout-wrapper {
    min-width: 0;
}

[data-susret-p2-03-entity] #bx-content-main a,
[data-susret-p2-03-entity] #bx-content-main p,
[data-susret-p2-03-entity] #bx-content-main h1,
[data-susret-p2-03-entity] #bx-content-main h2,
[data-susret-p2-03-entity] #bx-content-main h3,
[data-susret-p2-03-entity] #bx-content-main h4 {
    overflow-wrap: anywhere;
}

[data-susret-p2-03-entity] #bx-content-main .bx-db-title,
[data-susret-p2-03-entity] #bx-content-main .bx-db-content {
    min-width: 0;
}

/* Feed cards: author/context and body remain visually primary, while
 * engagement and safety actions keep a clear, quiet action row. */
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-tl-item,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-timeline-post,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-posts-post,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-base-general-unit {
    overflow: hidden;
}

[data-susret-p2-03-entity="posts"] #bx-content-main .bx-tl-item-header,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-timeline-post-header,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-posts-post-header {
    align-items: center;
    gap: var(--sus-space-3);
    min-width: 0;
}

[data-susret-p2-03-entity="posts"] #bx-content-main .bx-tl-item-header a,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-timeline-post-header a,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-posts-post-header a {
    font-weight: 700;
}

[data-susret-p2-03-entity="posts"] #bx-content-main .bx-tl-item-content,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-timeline-post-content,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-posts-post-content {
    color: var(--sus-text);
    font-size: 1rem;
    line-height: 1.65;
    min-width: 0;
}

[data-susret-p2-03-entity="posts"] #bx-content-main .bx-tl-item-content img,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-timeline-post-content img,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-posts-post-content img,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-media-phone,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-media-desktop {
    border-radius: var(--sus-radius-md);
    height: auto;
    max-width: 100%;
}

[data-susret-p2-03-entity="posts"] #bx-content-main .bx-tl-item-footer,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-tl-item-actions,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-timeline-post-footer,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-posts-post-footer {
    align-items: center;
    border-top: 1px solid color-mix(in srgb, var(--sus-border) 72%, transparent);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sus-space-2) var(--sus-space-3);
    margin-top: var(--sus-space-4);
    padding-top: var(--sus-space-3);
}

[data-susret-p2-03-entity="posts"] #bx-content-main .bx-tl-item-footer a,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-tl-item-footer button,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-tl-item-actions a,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-tl-item-actions button,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-timeline-post-footer a,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-timeline-post-footer button,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-posts-post-footer a,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-posts-post-footer button {
    min-height: 2.75rem;
}

/* Composer surface: make the start action readable without changing the
 * EditorJS/UNA form contract. */
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-posts-form,
[data-susret-p2-03-entity="posts"] #bx-content-main form[id*="post"],
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-form-container {
    min-width: 0;
}

[data-susret-p2-03-entity="posts"] #bx-content-main .bx-posts-form textarea,
[data-susret-p2-03-entity="posts"] #bx-content-main form[id*="post"] textarea,
[data-susret-p2-03-entity="posts"] #bx-content-main .bx-editorjs {
    line-height: 1.55;
    max-width: 100%;
}

[data-susret-p2-03-entity="posts"] #bx-content-main .bx-posts-form .bx-btn-primary,
[data-susret-p2-03-entity="posts"] #bx-content-main form[id*="post"] .bx-btn-primary {
    min-width: 8rem;
}

/* Entity identity: the same card system, with a restrained type-specific
 * edge so communities, parishes, events and discussions are distinguishable. */
[data-susret-p2-03-entity="groups"] #bx-content-main .bx-grid-unit,
[data-susret-p2-03-entity="groups"] #bx-content-main .bx-base-pofile-unit,
[data-susret-p2-03-entity="groups"] #bx-content-main .bx-base-profile-unit,
[data-susret-p2-03-entity="groups"] #bx-content-main .bx-base-general-unit {
    border-top: .2rem solid var(--sus-brand-primary) !important;
}

[data-susret-p2-03-entity="organizations"] #bx-content-main .bx-grid-unit,
[data-susret-p2-03-entity="organizations"] #bx-content-main .bx-base-pofile-unit,
[data-susret-p2-03-entity="organizations"] #bx-content-main .bx-base-profile-unit,
[data-susret-p2-03-entity="organizations"] #bx-content-main .bx-base-general-unit {
    border-top: .2rem solid var(--sus-brand-accent) !important;
}

[data-susret-p2-03-entity="events"] #bx-content-main .bx-grid-unit,
[data-susret-p2-03-entity="events"] #bx-content-main .bx-base-pofile-unit,
[data-susret-p2-03-entity="events"] #bx-content-main .bx-base-profile-unit,
[data-susret-p2-03-entity="events"] #bx-content-main .bx-base-general-unit {
    border-top: .2rem solid var(--sus-info) !important;
}

[data-susret-p2-03-entity="discussions"] #bx-content-main .bx-grid-unit,
[data-susret-p2-03-entity="discussions"] #bx-content-main .bx-base-pofile-unit,
[data-susret-p2-03-entity="discussions"] #bx-content-main .bx-base-profile-unit,
[data-susret-p2-03-entity="discussions"] #bx-content-main .bx-base-general-unit {
    border-top: .2rem solid var(--sus-success) !important;
}

[data-susret-p2-03-entity="groups"] #bx-content-main .bx-grid-unit,
[data-susret-p2-03-entity="organizations"] #bx-content-main .bx-grid-unit,
[data-susret-p2-03-entity="events"] #bx-content-main .bx-grid-unit,
[data-susret-p2-03-entity="discussions"] #bx-content-main .bx-grid-unit {
    min-width: 0;
    overflow-wrap: anywhere;
}

[data-susret-p2-03-entity="events"] #bx-content-main .bx-btn,
[data-susret-p2-03-entity="groups"] #bx-content-main .bx-btn,
[data-susret-p2-03-entity="discussions"] #bx-content-main .bx-btn {
    min-height: 2.75rem;
}

/* Profile identity and safety actions remain visible without introducing new
 * personal fields or changing Members privacy. */
[data-susret-p2-03-entity="profile"] #bx-content-main .bx-cover-wrapper,
[data-susret-p2-03-entity="profile"] #bx-content-main .bx-cover {
    border-radius: var(--sus-radius-lg);
    overflow: hidden;
}

[data-susret-p2-03-entity="profile"] #bx-content-main .bx-profile-unit,
[data-susret-p2-03-entity="profile"] #bx-content-main .bx-base-profile-unit,
[data-susret-p2-03-entity="profile"] #bx-content-main .bx-profile-info {
    min-width: 0;
}

/* A selected state must have a shape/outline signal in addition to color. */
[data-susret-p2-03-entity] #bx-content-main [aria-pressed="true"],
[data-susret-p2-03-entity] #bx-content-main [aria-selected="true"],
[data-susret-p2-03-entity] #bx-content-main .bx-vote-active,
[data-susret-p2-03-entity] #bx-content-main .bx-menu-item-active {
    box-shadow: inset 0 0 0 2px var(--sus-brand-accent) !important;
}

[data-susret-p2-03-entity] #bx-content-main [role="button"],
[data-susret-p2-03-entity] #bx-content-main button,
[data-susret-p2-03-entity] #bx-content-main .bx-btn {
    max-width: 100%;
}

[data-susret-p2-03-entity] #bx-content-main .bx-msg-box,
[data-susret-p2-03-entity] #bx-content-main .bx-search-result-block-empty {
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    [data-susret-p2-03-entity] #bx-content-main .bx-tl-item-footer,
    [data-susret-p2-03-entity] #bx-content-main .bx-tl-item-actions,
    [data-susret-p2-03-entity] #bx-content-main .bx-timeline-post-footer,
    [data-susret-p2-03-entity] #bx-content-main .bx-posts-post-footer {
        align-items: stretch;
    }

    [data-susret-p2-03-entity] #bx-content-main .bx-tl-item-footer > *,
    [data-susret-p2-03-entity] #bx-content-main .bx-tl-item-actions > *,
    [data-susret-p2-03-entity] #bx-content-main .bx-timeline-post-footer > *,
    [data-susret-p2-03-entity] #bx-content-main .bx-posts-post-footer > * {
        max-width: 100%;
    }

    [data-susret-p2-03-entity] #bx-content-main .bx-db-menu,
    [data-susret-p2-03-entity] #bx-content-main .bx-db-menu-tabs {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: thin;
    }
}

@media (max-width: 390px) {
    [data-susret-p2-03-entity] #bx-content-main .bx-tl-item,
    [data-susret-p2-03-entity] #bx-content-main .bx-grid-unit,
    [data-susret-p2-03-entity] #bx-content-main .bx-base-pofile-unit,
    [data-susret-p2-03-entity] #bx-content-main .bx-base-profile-unit,
    [data-susret-p2-03-entity] #bx-content-main .bx-base-general-unit {
        border-radius: var(--sus-radius-md) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-susret-p2-03-entity] #bx-content-main * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}