/* =====================================================================
   CIVIC THEME  —  Step 3: editorial post cards
   ---------------------------------------------------------------------
   Additive override. Loads AFTER civic-theme-step2-header.css. Reskins
   the post card surface + typography to the editorial redesign. Targets
   the real classes in post.html — no markup changes.
   Remove the <link> to revert to Step 2.

   INSTALL
     1. Save as:  tappet/static/css/civic-theme-step3-posts.css
     2. In templates/base_index.html, add immediately AFTER the step-2 link:

          <link rel="stylesheet" href="{% static '/css/civic-theme-step3-posts.css' %}" />

     3. Hard-refresh (Cmd/Ctrl-Shift-R).
   ===================================================================== */

/* ---- Card surface: soft border + lifted shadow, roomier radius ------ */
.post {
    background-color: #ffffff;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    box-shadow: 0 6px 18px -10px rgba(30, 40, 60, .22);
    margin-bottom: 1.4em;
    padding: 4px 2px 10px;
}

/* ---- Header row: padding + round avatar ---------------------------- */
.post-top {
    align-items: center;
    padding: 12px 16px 2px;
    color: #8a90a0;
}
.profile-img-sm {
    width: 44px;
    height: 44px;
    border-radius: 50%;         /* was an angular 0 0 60px */
    object-fit: cover;
    margin-right: .7em;
    border: 1px solid #e6e8ec;  /* was heavy grey L-borders */
}

/* Author name reads as the identity; org/meta stays muted. */
.post-info {
    font-size: .95em;
    font-weight: 600;
    color: #1b1f26;
    padding: 0 3px;
}

/* ---- Topic: uppercase micro-label in slate ------------------------- */
/* (Per-topic accent colors need a data-hook in the markup — deferred to
    a later step; this gives every topic a consistent civic-slate label.) */
.post-topic {
    margin-left: auto;
    margin-right: 1em;
    font-size: .72em;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #566277;
    background: #eef1f7;
    border: 1px solid #dbe0ea;
    padding: 4px 10px;
    border-radius: 20px;
}

/* ---- Body ----------------------------------------------------------- */
.post-middle {
    margin: .6em 1.1em 0;
}
.post-title {
    /* font family already set to Newsreader in Step 1 */
    font-size: 1.35em;
    line-height: 1.2;
    color: #1b1f26;
    display: inline-block;
    margin: 6px 0 4px;
}
.post-comment {
    font-size: .95em;
    line-height: 1.55;
    color: #4a505b;
}
.post-middle img {
    border-radius: 10px;
    margin-top: .9em;
}

/* ---- Event detail block: soft grey card ---------------------------- */
.post-middle hr {
    border: none;
    border-top: 1px solid #f1f2f5;
    margin: .9em 0;
}
.event-details {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .7em;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8a90a0;
    margin-bottom: 4px;
}

/* ---- Footer / actions: tighten + divider --------------------------- */
.post-bottom {
    margin: 0 1.1em;
}
.actions {
    padding-top: .5em;
    border-top: 1px solid #f1f2f5;
    align-items: center;
}

/* Comment composer: rounded pill to match the header search. */
.comment-input {
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    background: #f5f6f8;
    color: #1b1f26;
}