/* ============================================================================
   PROFILOPOLITICS — Full-site additions, items 73–78
   LANE 2 — 2ND AMENDMENT CHAT ROOM DESKTOP
   Load AFTER the room's main stylesheet so these rules win ties.

   This file carries the PRESENTATION for items 73–77 on desktop room
   pages, plus the display side of item 78. The elements themselves are
   added by the template changes in specs/lane2-room-desktop-specs.md —
   class names here are the contract.

   The room's writing side is unchanged in position and width by every
   rule below: the additions live INSIDE the existing cases column and
   case page column. The chat panel is not touched at all.

   MOBILE SAFETY — READ FIRST:
   EVERY rule in this file sits inside @media (min-width: 992px).
   Below 992px this file contains NOTHING that can apply — the phone
   room is carried by css/lane1-mobile.css, written separately.
   ============================================================================ */

@media (min-width: 992px) {

  /* ------------------------------------------------------------------
     ITEM 73 — CASE-CARD PHOTOS
     Element: inside each case list card, before the text block:
     <img class="pp-case-thumb"> when the case has a photo, otherwise
     <div class="pp-case-thumb pp-case-thumb--none">STAGE WORD</div>
     (navy placeholder carrying the case's stage word — the owner's
     standing rule: never a stock photo).
     ------------------------------------------------------------------ */
  .case-box-link {
    display: flex !important;
    gap: 14px !important;
    align-items: flex-start !important;
  }
  .case-box-body {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .pp-case-thumb {
    width: 118px;
    height: 84px;
    object-fit: cover;
    flex: none;
    display: block;
    border-radius: 4px;
  }
  .pp-case-thumb--none {
    background: #0d2138;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px;
    border-radius: 4px;
  }

  /* ------------------------------------------------------------------
     ITEM 74 — STAGE FILTER + CARD COUNTS
     Filter element: <div class="pp-stage-filter"> of buttons
     .pp-stage-chip (the active one also .pp-stage-chip--active),
     above the cases list, under the search box.
     Counts element: <div class="pp-case-counts"> inside each card:
     "3 updates · 128 views".
     ------------------------------------------------------------------ */
  .pp-stage-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 16px;
  }
  .pp-stage-chip {
    background: #ffffff;
    border: 1px solid #41546d;
    color: #16233c;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 6px 13px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .pp-stage-chip:hover { border-color: #0d2138; }
  .pp-stage-chip--active {
    background: #0d2138 !important;
    border-color: #0d2138 !important;
    color: #ffffff !important;
  }
  .pp-case-counts {
    font-size: 12.5px;
    color: #75828f;
    margin-top: 5px;
  }
  .pp-case-counts strong { color: #16233c; }

  /* ------------------------------------------------------------------
     ITEM 75 — TRENDING STRIP VIEW COUNTS
     Element: inside each trending box, on the bottom line beside the
     stage badge: <span class="pp-trending-views">128 views today</span>
     ------------------------------------------------------------------ */
  .pp-trending-views {
    font-size: 12px;
    color: #c7d2dd;
    font-weight: 700;
    margin-left: 8px;
  }

  /* ------------------------------------------------------------------
     ITEM 76 — CASE PAGE: SHARE BUTTONS, MORE CASES, LAST-UPDATED
     Share element: <div class="pp-case-share"> under the summary.
     Stamp element: <p class="pp-case-updated"> in the fact box area.
     More-cases element: <section class="pp-more-cases"> at the foot of
     the case column, 3 cards reusing the list-card markup.
     ------------------------------------------------------------------ */
  .pp-case-share { display: flex; gap: 8px; margin: 14px 0 4px; }
  .pp-case-share a,
  .pp-case-share button {
    background: #0d2138;
    color: #ffffff;
    border: none;
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 13px;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
  }
  .pp-case-share .pp-share-x { background: #000000; }
  .pp-case-share .pp-share-fb { background: #1877f2; }
  .pp-case-share .pp-share-copy { background: #41546d; }
  .pp-case-updated {
    font-size: 13px;
    color: #a02c1e;
    font-weight: 700;
    margin: 10px 0 0;
  }
  .pp-more-cases { margin: 34px 0 10px; }
  .pp-more-cases h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    color: #0d2138;
    margin: 0 0 14px;
    border-bottom: 3px solid #a02c1e;
    padding-bottom: 8px;
  }
  .pp-more-cases .pp-more-cases-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  /* ------------------------------------------------------------------
     ITEM 77 — SITE FOOTER ON ROOM PAGES
     The room pages gain the SAME footer element the blog prints
     (element + classes unchanged, see specs). One room-side rule only:
     the footer spans the full page width BELOW the room's two columns
     and never inside either column.
     ------------------------------------------------------------------ */
  .pp-room-footer-wrap { clear: both; width: 100%; position: relative; z-index: 10; }

  /* ------------------------------------------------------------------
     ITEM 78(a) — CLOSED STAMP, PRINTED ONCE
     The closed stamp is one element: <span class="pp-case-closed-stamp">
     CLOSED</span> followed by the one-line outcome. The list card must
     NOT also print its stage badge when the stamp is present — that
     duplication ("CLOSED CLOSED") is template logic (see specs); this
     rule styles the single stamp.
     ------------------------------------------------------------------ */
  .pp-case-closed-stamp {
    display: inline-block;
    background: #a02c1e;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 3px 9px;
    text-transform: uppercase;
    border-radius: 3px;
  }
}


/* ============================================================================
   PROFILOPOLITICS — FIX CODE, items 79–89 (2026-10-27)
   LANE 2 — 2ND AMENDMENT CHAT ROOM DESKTOP.
   APPEND at the END of the room desktop stylesheet — AFTER the
   additions package lane2 file (items 73–78) and AFTER the corrections
   code (items 15–34) — so these rules win ties.

   Room code only. Nothing blog in this file. NOTHING here touches the
   chat panel: it stands full height on its side, does not move,
   reload or scroll — every rule below lives inside the cases column
   or the case page column, exactly as before.

   MOBILE SAFETY: every rule sits inside @media (min-width: 992px).
   Below 992px this file applies NOTHING — the phone room is carried
   by css/lane1-mobile.css.
   Class names are the contract: the item-34 / item15-24 corrections
   code names (tac-trend…, tac-stage, tac-closed-stamp) and the
   additions package names (pp-case-thumb, pp-case-closed-stamp,
   pp-trending-views, pp-more-cases, pp-new-update).
   ============================================================================ */

@media (min-width: 992px) {

  /* ------------------------------------------------------------------
     ITEM 84 — TRENDING BOXES: PHOTO STRIP + FULL NAME, 2 LINES MAX
     BEFORE: the deployed boxes have NO photo element and the case
     name is cut mid-word after a few characters. NOW: the item-34
     box, restated in full — photo strip on top (the case's own first
     photo; no photo -> navy strip with the stage word, never stock),
     red #rank chip, NEW UPDATE badge top-right only when the list
     shows it too, the FULL case name clamped at 2 lines (ellipsis
     after line 2, never mid-word: the clamp cuts between words
     because the name wraps normally first), stage badge + today's
     view count pinned on the bottom line. Ranking unchanged.
     The markup itself is template work — template-fixes.md §84
     gives the exact box (the item-34 render). These rules size it. */
  .tac-trend {
    margin: 0 0 14px; /* the strip stops here — it does not push
                        the "Cases" heading down */
  }
  .tac-trend__label {
    margin: 0 0 8px;
    color: var(--pp-breaking, #d92323);
    font-family: var(--pp-font-sans, "Plus Jakarta Sans", "Inter", sans-serif);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
  }
  .tac-trend__row {
    display: flex;
    gap: 12px;
  }
  .tac-trend__box {
    flex: 1 1 0;
    min-width: 0; /* a long case name can never stretch its box */
    display: flex;
    flex-direction: column;
    height: 128px; /* FIXED — all three boxes the same height,
                      whatever the headline length */
    background: var(--pp-paper, #fff);
    border: 1px solid var(--pp-line-soft, #e2e8f0);
    border-radius: var(--pp-radius, 8px);
    overflow: hidden;
    text-decoration: none;
    transition: var(--pp-transition, all .2s ease-in-out);
  }
  .tac-trend__box:hover {
    box-shadow: var(--pp-shadow-sm, 0 1px 3px #0c1b3314, 0 1px 2px #0c1b330a);
  }
  .tac-trend__photo {
    position: relative;
    display: block;
    height: 140px;
    flex: none;
    background: var(--pp-ink, #0c1b33);
    overflow: hidden;
  }
  .tac-trend__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }
  .tac-trend__nophoto {
    /* no photo yet: navy strip with the stage word — never a
       stock image, never another case's photo */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #fff;
    font-family: var(--pp-font-sans, "Plus Jakarta Sans", "Inter", sans-serif);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
  }
  .tac-trend__rank {
    position: absolute;
    top: 0;
    left: 0;
    padding: 3px 8px;
    background: var(--pp-breaking, #d92323);
    color: #fff;
    font-family: var(--pp-font-sans, "Plus Jakarta Sans", "Inter", sans-serif);
    font-size: 12px;
    font-weight: 800;
    border-radius: 0 0 6px 0;
  }
  .tac-trend__new {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 6px;
    background: var(--pp-breaking, #d92323);
    color: #fff;
    font-family: var(--pp-font-sans, "Plus Jakarta Sans", "Inter", sans-serif);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    border-radius: 3px;
    white-space: nowrap;
  }
  /* THE NAME — the fault line. It wraps normally and clamps at
     2 lines; nothing here (or anywhere) may put white-space:nowrap
     or single-line ellipsis on it. */
  .tac-trend__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    padding: 7px 9px 0;
    color: var(--pp-heading, #0f172a);
    font-family: var(--pp-font-serif, "Merriweather", "Lora", Georgia, serif);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
  }
  .tac-trend__meta {
    margin-top: auto; /* pinned to the box's bottom */
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 9px 7px;
    white-space: nowrap;
    overflow: hidden;
  }
  .tac-trend__views {
    color: var(--pp-accent-dark, #991b1b);
    font-family: var(--pp-font-sans, "Plus Jakarta Sans", "Inter", sans-serif);
    font-size: 11px;
    font-weight: 700;
  }
  /* The additions package's name for the same count span (item 75),
     styled to match when the template prints it instead. */
  .pp-trending-views {
    font-size: 12px;
    color: #c7d2dd;
    font-weight: 700;
    white-space: nowrap;
  }
  /* Aliases from the earlier 79–89 bundle — if the deployed box
     markup carries the pp- hooks instead of the item-34 hooks, the
     same sizing applies to them, unchanged. */
  .pp-trending-box { display: flex; flex-direction: column; height: 100%; min-width: 0; }
  .pp-trending-photo { height: 48px; flex: none; overflow: hidden; border-radius: 4px 4px 0 0; }
  .pp-trending-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
  .pp-trending-photo--none {
    background: #0c1b33; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; letter-spacing: .06em;
  }
  .pp-trending-name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; white-space: normal;
    overflow-wrap: break-word; word-break: normal; line-height: 1.3;
  }

  /* ------------------------------------------------------------------
     ITEM 85 — STAGE PRINTED ONCE: THE PLACEHOLDER TILE CARRIES NO TEXT
     The fix itself is template logic (template-fixes.md §85): the
     card tile prints the case photo, or an EMPTY navy placeholder;
     the stage shows once, in the badge (tac_stage_badge()).
     These rules size the tile at the additions values and add the
     safety net: even if an unpatched template still prints a stage
     word into the placeholder, it cannot show — font-size:0 +
     transparent colour on the placeholder and anything inside it.
     The badge itself keeps the item15-24 styling; the nowrap below
     guarantees the label prints whole, on one line. */
  .pp-case-thumb {
    width: 118px;
    height: 84px;
    object-fit: cover;
    flex: none;
    display: block;
  }
  .pp-case-thumb--none {
    background: #0d2138;
    display: flex;
    align-items: center;
    justify-content: center;
    /* safety net — the placeholder carries NO text (item 85): */
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0;
  }
  .pp-case-thumb--none * {
    color: transparent !important;
    font-size: 0 !important;
  }
  .tac-stage { white-space: nowrap; }

  /* ------------------------------------------------------------------
     ITEM 86 — CLOSED ONCE ON LIST CARDS
     The fix itself is template logic (template-fixes.md §86): a
     closed list card prints the stamp (with its one-line outcome)
     and does NOT print the generic stage badge; the tile prints
     nothing (item 85). The case PAGE keeps its single stamp —
     untouched here.
     These rules style the one stamp at the additions values and add
     the guard: on a closed card (the template marks it
     .pp-case-card--closed) a stage badge can never also render, so
     CLOSED cannot appear twice even if both are printed. */
  .pp-case-closed-stamp,
  .tac-closed-stamp {
    display: inline-block;
    background: #a02c1e;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 3px 9px;
    text-transform: uppercase;
  }
  .pp-case-card--closed .tac-stage,
  .pp-case-card--closed .pp-case-stage {
    display: none !important;
  }

  /* ------------------------------------------------------------------
     ITEM 88 — "NEW UPDATE" PILL ON ONE LINE
     BEFORE: on the More Cases cards the red pill wraps to two lines
     ("NEW" / "UPDATE") when its flex row squeezes it. NOW: the pill
     is sized to its text, never wraps, never shrinks. Applies to the
     pill wherever cards render it — cases list and More Cases alike.
     (.tac-new is the item15-24 name for the same badge where the
     template prints that hook instead.) */
  .pp-more-cases .pp-new-update,
  .pp-case-card .pp-new-update,
  .pp-new-update,
  .tac-new {
    display: inline-block;
    white-space: nowrap;
    width: auto;
    flex: none;
  }
}