/* =====================================================================
   CIVIC THEME  —  Step 3c: compact action row + card header refinements
   ---------------------------------------------------------------------
   Additive. Loads AFTER civic-theme-step3b-topics.css.

   Replaces the old oversized <img> action controls (.action-icon /
   .clap-icon / .event-icon, 2.5–4em) and their absolutely-positioned
   count badges (.likes-count / .event-count / .comment-count) with the
   slim inline line-icon row from the redesign.

   Ships with markup hooks in tappet/templates/post.html:
     .post-identity / .post-meta   stacked author + "org · date"
     .connect-pill                 "+ Connect" / "Connected" text pill
     .event-block / .event-row     grey When/Where card
     .act-item / .act-icon / .act-count / .act-label   the footer row
   and the icon set  static/img/icon/act-*.svg.
   ===================================================================== */

/* ---- Card header: stacked identity, muted meta line ----------------- */
.post-top {
    gap: 11px;
    padding: 14px 18px 0;
}
.post-top a {
    display: flex;          /* keeps the avatar link from adding baseline gap */
    text-decoration: none;
}
.profile-img-sm {
    width: 40px;
    height: 40px;
    margin-right: 0;
}
.post-identity {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}
.post-identity .post-info {
    font-size: .92em;
    padding: 0;
}
.post-meta {
    font-size: .8em;
    color: #8a90a0;
}

/* ---- Connect: text pill instead of the handshake glyph -------------- */
.connect-icon {
    width: auto;
    margin-left: auto;
    flex-shrink: 0;
}
.connect-pill {
    display: inline-block;
    font-size: .8em;
    font-weight: 600;
    color: #566277;
    background: #ffffff;
    border: 1px solid #d3d9e6;
    border-radius: 8px;
    padding: 6px 12px;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.connect-pill:hover {
    background: #eef1f7;
}
.connect-pill.on {
    color: #ffffff;
    background: #566277;
    border-color: #566277;
}

/* ---- Topic label: dot + uppercase, no pill chrome ------------------- */
/* Step 3 gave .post-topic a slate pill; the resolved direction inlines it
   above the title, colored to match its own topic dot. */
.post-topic {
    display: inline-flex;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-size: .74em;
    letter-spacing: .05em;
    color: #64748b;
}
.post-topic::before {
    margin-right: 6px;
}
.post-topic[data-topic="Economic Stability"] { color: #1d4ed8; }
.post-topic[data-topic="Education"]          { color: #7e22ce; }
.post-topic[data-topic="Environment"]        { color: #16803d; }
.post-topic[data-topic="Health Care"]        { color: #b91c1c; }
.post-topic[data-topic="Food Security"]      { color: #b45309; }
.post-topic[data-topic="Housing"]            { color: #0f766e; }

.post-middle {
    margin: .8em 1.15em 0;
}

/* ---- Event details: soft grey card with label : value rows ---------- */
.event-block {
    background: #f5f6f8;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    padding: 11px 13px;
    margin-top: .9em;
    font-size: .88em;
}
.event-details {
    margin-bottom: 6px;
}
.event-row {
    display: flex;
    gap: 10px;
    line-height: 1.5;
}
.event-key {
    color: #8a90a0;
    min-width: 48px;
    flex-shrink: 0;
}
.event-val {
    color: #1b1f26;
    font-weight: 600;
    min-width: 0;
}

/* ---- Footer: slim inline icon row ----------------------------------- */
.actions {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 14px;
    padding: 12px 0 4px;
    font-size: .85em;
    color: #5a616e;
}
.act-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}
.act-icon {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    /* the old rules sized these at 2.5–4em with big right margins */
    margin: 0;
}
.act-count {
    font-weight: 600;
    color: #1b1f26;
    font-variant-numeric: tabular-nums;
}
.act-label {
    color: #5a616e;
}
.act-sep {
    color: #b9bec8;
}
/* Attend sits at the far right and reads as the primary card action. */
.act-attend {
    margin-left: auto;
    color: #566277;
    font-weight: 600;
}
.act-attend .act-label,
.act-attend .act-count {
    color: #566277;
}

/* The old badge/positioning rules no longer apply to any element in the
   feed card, but the classes still exist in tappet.css — neutralize them
   here so a stray usage can't reintroduce the absolute offsets. */
.post .likes-count,
.post .event-count,
.post .comment-count {
    position: static;
    margin: 0;
}

/* ---- Comment composer ---------------------------------------------- */
.comment-field {
    align-items: center;
    gap: 10px;
    margin-top: .3em;
}
.comment-input {
    padding: 9px 13px;
    margin-bottom: 0;
}
.send-icon {
    width: 30px;
    height: 30px;
    margin-left: 0;
    flex-shrink: 0;
}

/* ---- Comments list --------------------------------------------------
   comment.html lays its three parts out as chota grid columns, which
   strands the name miles from the text. Reflow them as avatar + stacked
   name/date over the body, without touching the partial's markup. */
.comments .comment {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2px 10px;
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid #f1f2f5;
}
.comments .comment-photo {
    flex: 0 0 34px;
    min-width: 34px;
    max-width: 34px;
    height: 34px;
    border: 1px solid #e6e8ec;
    float: none;
}
.comments .comment-header {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    gap: 8px;
    max-width: none;
    margin: 0;
    text-align: left;
    float: none;
}
.comment-author {
    font-size: .95em;
    color: #1b1f26;
}
.comment-date {
    font-size: .8em;
    color: #9aa0ab;
}
.comments .comment-content {
    flex: 1 1 100%;
    max-width: none;
    margin: 2px 0 0 44px;
    padding: 0;
    float: none;
    display: block;
    color: #3f454e;
    line-height: 1.55;
}

@media (max-width: 600px) {
    .actions {
        gap: 16px;
    }
    .act-attend .act-label,
    .act-attend .act-sep {
        display: none;      /* keep the row on one line on narrow phones */
    }
}