/* ============================================================================
   PROFILOPOLITICS — Full-site additions, items 67–78
   LANE 1 — MOBILE (BLOG + 2ND AMENDMENT ROOM TOGETHER)
   Load AFTER the main mobile styles so these rules win ties.

   This file carries the PHONE presentation for every item in the
   package. Per the owner's 3-lane rule, mobile is ONE lane: the blog
   and the room are styled here together, separately from both desktop
   lanes (lane3-blog-desktop.css, lane2-room-desktop.css).

   DESKTOP SAFETY — READ FIRST:
   EVERY rule in this file sits inside @media (max-width: 991px).
   At 992px and above this file contains NOTHING that can apply — the
   two desktop lanes run exactly as specified in their own files.
   Element/class contract is identical to the desktop lanes; the specs
   in specs/lane1-mobile-specs.md name each element.
   ============================================================================ */

@media (max-width: 991px) {

  /* ITEM 67 — HOMEPAGE LATEST-NEWS GRID: one column of cards, photo
     band on top of each card, same markup as desktop. */
  .pp-latest-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 22px 0 6px;
    padding: 0 14px;
  }
  .pp-latest-grid .pp-latest-heading {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    color: #0d2138;
    margin: 0 0 2px;
  }
  .pp-latest-card {
    background: #ffffff;
    border: 1px solid #d7dde5;
    overflow: hidden;
  }
  .pp-latest-card .pp-latest-photo {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
  }
  .pp-latest-card .pp-latest-body { padding: 11px 13px 13px; }
  .pp-latest-card .pp-latest-cat {
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #a02c1e;
    font-weight: 700;
  }
  .pp-latest-card .pp-latest-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.35;
    color: #0d2138;
    margin: 6px 0 7px;
  }
  .pp-latest-card .pp-latest-title a { color: inherit; text-decoration: none; }
  .pp-latest-card .pp-latest-time { font-size: 12px; color: #75828f; }

  /* ITEM 68 — MOST READ: full-width block under the article / under
     the blog list on the phone (the rail becomes a stacked block;
     same markup, same order). */
  .pp-most-read {
    background: #ffffff;
    border: 1px solid #d7dde5;
    padding: 15px 15px 7px;
    margin: 20px 14px 22px;
  }
  .pp-most-read h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    color: #0d2138;
    margin: 0 0 11px;
    border-bottom: 3px solid #a02c1e;
    padding-bottom: 8px;
  }
  .pp-most-read ol { list-style: none; margin: 0; padding: 0; }
  .pp-most-read-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 9px 0;
    border-bottom: 1px solid #e6ebf0;
  }
  .pp-most-read-item:last-child { border-bottom: none; }
  .pp-most-read-rank {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 700;
    color: #a02c1e;
    min-width: 22px;
  }
  .pp-most-read-thumb { width: 64px; height: 48px; object-fit: cover; flex: none; }
  .pp-most-read-title { font-size: 14px; line-height: 1.35; color: #16233c; }
  .pp-most-read-title a { color: inherit; text-decoration: none; }

  /* ITEM 69 — TEAM SECTION (About page on the phone): 2×2 grid of
     compact tiles, same avatar-or-initials rule as desktop. */
  .pp-team { margin: 28px 0; padding: 0 14px; }
  .pp-team h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    color: #0d2138;
    margin: 0 0 14px;
    border-bottom: 3px solid #a02c1e;
    padding-bottom: 8px;
  }
  .pp-team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .pp-team-member {
    background: #ffffff;
    border: 1px solid #d7dde5;
    padding: 14px 10px;
    text-align: center;
  }
  .pp-team-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 8px;
    display: block;
  }
  .pp-team-avatar--initials {
    background: #0d2138;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 60px;
  }
  .pp-team-name {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    color: #0d2138;
    margin: 0 0 2px;
  }
  .pp-team-role { font-size: 12px; color: #75828f; margin: 0; }

  /* ITEM 70 — IN-ARTICLE NEWSLETTER BOX: single-column full-width
     card between article body and comments. */
  .pp-newsletter-box {
    background: #0d2138;
    color: #ffffff;
    padding: 20px 16px;
    margin: 28px 0 10px;
  }
  .pp-newsletter-box h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    margin: 0 0 7px;
    color: #ffffff;
  }
  .pp-newsletter-box p { font-size: 13.5px; color: #c7d2dd; margin: 0 0 14px; }
  .pp-newsletter-box form { display: flex; flex-direction: column; gap: 9px; }
  .pp-newsletter-box input[type="text"],
  .pp-newsletter-box input[type="email"] {
    padding: 11px 13px;
    border: 1px solid #41546d;
    background: #ffffff;
    color: #16233c;
    font-size: 14px;
    width: 100%;
  }
  .pp-newsletter-box button {
    background: #a02c1e;
    color: #ffffff;
    border: none;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
  }

  /* ITEM 71 — UPDATED STAMP + PREVIOUS / NEXT: stacked, full width. */
  .pp-updated-stamp {
    display: block;
    font-size: 12.5px;
    color: #a02c1e;
    font-weight: 700;
    margin-top: 4px;
  }
  .pp-prev-next {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 24px 0 4px;
    padding: 16px 0 0;
    border-top: 1px solid #d7dde5;
  }
  .pp-prev-next a { color: #16233c; text-decoration: none; font-size: 14.5px; line-height: 1.4; }
  .pp-prev-next .pp-prev-next-label {
    display: block;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #a02c1e;
    font-weight: 700;
    margin-bottom: 4px;
  }

  /* ITEM 72 — HOMEPAGE HEADER SEARCH: the field opens full width
     under the header bar on the phone (same control as desktop). */
  .pp-header-search { display: flex; align-items: center; gap: 6px; }
  .pp-header-search-input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid #41546d;
    background: #12283f;
    color: #ffffff;
    font-size: 14px;
  }
  .pp-header-search-input::placeholder { color: #93a5b7; }
  .pp-header-search button {
    background: #a02c1e;
    color: #ffffff;
    border: none;
    padding: 9px 15px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  /* ITEM 73 — ROOM CASE-CARD PHOTOS: smaller thumb on the phone,
     same navy stage-word placeholder when a case has no photo. */
  .case-box-link {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  .case-box-body {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .pp-case-thumb { width: 86px; height: 64px; 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: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px;
    border-radius: 4px;
  }

  /* ITEM 74 — STAGE FILTER CHIPS + CARD COUNTS: chips scroll
     horizontally on the phone so the list is never pushed down. */
  .pp-stage-filter {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
    margin: 10px 0 13px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .pp-stage-chip {
    background: #ffffff;
    border: 1px solid #41546d;
    color: #16233c;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    flex: none;
  }
  .pp-stage-chip--active { background: #0d2138 !important; border-color: #0d2138 !important; color: #ffffff !important; }
  .pp-case-counts { font-size: 12px; color: #75828f; margin-top: 4px; }
  .pp-case-counts strong { color: #16233c; }

  /* ITEM 75 — TRENDING STRIP VIEW COUNT (phone strip keeps the
     count on the box's bottom line, same as desktop). */
  .pp-trending-views { font-size: 11.5px; color: #c7d2dd; font-weight: 700; margin-left: 6px; }

  /* ITEM 76 — CASE PAGE ON THE PHONE: share row wraps; more-cases
     becomes a single column; the last-updated stamp stays with the
     fact box. */
  .pp-case-share { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 4px; }
  .pp-case-share a,
  .pp-case-share button {
    background: #0d2138;
    color: #ffffff;
    border: none;
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 13px;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px;
  }
  .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: 12.5px; color: #a02c1e; font-weight: 700; margin: 9px 0 0; }
  .pp-more-cases { margin: 28px 0 8px; }
  .pp-more-cases h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    color: #0d2138;
    margin: 0 0 12px;
    border-bottom: 3px solid #a02c1e;
    padding-bottom: 7px;
  }
  .pp-more-cases .pp-more-cases-row { display: grid; grid-template-columns: 1fr; gap: 12px; }

  /* ITEM 77 — FOOTER ON ROOM PAGES (phone): full width below the
     cases; the phone room keeps its bottom nav above the footer. */
  .pp-room-footer-wrap { clear: both; width: 100%; }

  /* ITEM 78(a) — CLOSED STAMP, PRINTED ONCE (phone, same as
     desktop). The duplication fix itself is template logic — see
     specs/lane1-mobile-specs.md, item 78. */
  .pp-case-closed-stamp {
    display: inline-block;
    background: #a02c1e;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 3px 8px;
    text-transform: uppercase;
    border-radius: 3px;
  }
}


/* ============================================================================
   PROFILOPOLITICS — FIX CODE, items 79–89 (2026-10-27)
   LANE 1 — MOBILE (BLOG + 2ND AMENDMENT ROOM TOGETHER).
   APPEND at the END of the mobile stylesheet — AFTER the additions
   package lane1 file (items 67–78) — so these rules win ties.

   Per the owner's 3-lane rule, mobile is ONE lane: the blog fixes
   (§82, §83, §80/89, §87) and the room fixes (§84, §85, §86, §88)
   are carried here together, at phone sizes. The desktop lanes are
   separate files and are not repeated here.

   DESKTOP SAFETY: every rule sits inside @media (max-width: 991px).
   At 992px and above this file applies NOTHING.
   Nothing here touches the chat panel's position or behaviour; the
   room's phone layout (cases = one page scroll, chat full screen on
   tap) is unchanged.
   ============================================================================ */

@media (max-width: 991px) {

  /* ============================ BLOG ============================ */

  /* ------------------------------------------------------------------
     ITEM 82 — *** PRIORITY *** — MOST READ RAIL (phone)
     (+ the CSS side of ITEM 79 — the homepage rail inserted by
     template-fixes.md §79 uses this same component.)
     BEFORE: on /blog and search pages the photos render as thin
     strips and the headline column squeezes to 1–2 words per line.
     NOW: the item-68 component re-declared complete at its phone
     values (additions lane1) with the same two hardenings as the
     desktop block — fixed-box thumbnail that cannot collapse into a
     strip; title flexes with min-width:0 so it can never push the
     rail off the page. On the phone the rail is a full-width stacked
     block, as the additions package specifies. */
  .pp-most-read {
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d7dde5;
    padding: 15px 15px 7px;
    margin: 20px 14px 22px;
  }
  .pp-most-read h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    color: #0d2138;
    margin: 0 0 11px;
    border-bottom: 3px solid #a02c1e;
    padding-bottom: 8px;
  }
  .pp-most-read ol { list-style: none; margin: 0; padding: 0; }
  .pp-most-read-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 9px 0;
    border-bottom: 1px solid #e6ebf0;
  }
  .pp-most-read-item:last-child { border-bottom: none; }
  .pp-most-read-rank {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 700;
    color: #a02c1e;
    min-width: 22px;
    flex: none;
  }
  img.pp-most-read-thumb,
  .pp-most-read-thumb {
    flex: none;
    display: block;
    width: 64px;
    height: 48px;
    object-fit: cover;
    object-position: 50% 22%;
  }
  .pp-most-read-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    line-height: 1.35;
    color: #16233c;
    overflow-wrap: break-word;
  }
  .pp-most-read-title a { color: inherit; text-decoration: none; }

  /* ------------------------------------------------------------------
     ITEM 83 — BOTTOM-OF-ARTICLE LINK LISTS (phone)
     Same fix as lane3 §83: the LATEST NEWS and MORE IN headline
     links render in the normal dark readable colour (#16233c).
     Scoped to those two lists only. */
  .pp-latest-rail a,
  .pp-latest-news a,
  .pp-more-in a,
  [class*="more-in"] a {
    color: #16233c !important;
  }
  .pp-latest-rail .pp-latest-title,
  .pp-latest-news .pp-latest-title,
  .pp-more-in .pp-latest-title {
    color: #16233c !important;
  }
  .pp-latest-rail a:hover,
  .pp-latest-news a:hover,
  .pp-more-in a:hover {
    color: #0d2138 !important;
    text-decoration: underline;
  }

  /* ------------------------------------------------------------------
     ITEMS 80 + 89 — ADVERT SLOTS (phone): clean space, true size.
     Same neutraliser and true-size discipline as lane3, at the
     phone formats: leaderboard 320x100, in-article 300x250 (never
     wider than the screen), in-feed 250 tall, in-rail 300x250.
     The sticky side rails never render on the phone. */
  .pp-ad-leaderboard, .pp-ad-above-footer, .pp-ad-infeed,
  .pp-ad-inarticle, .pp-ad-inrail, .pp-ad-rail, .pp-ad-rail-home,
  .pp-ad-desk, .pp-ad-sponsorship,
  .pp-ad-slot,
  .ad-slot, .ad-placeholder,
  .pp-article-body .pp-ad-inarticle,
  .pp-article-body .pp-ad-inrail {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: transparent !important;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
  }
  .pp-ad-leaderboard .pp-ad-label, .pp-ad-infeed .pp-ad-label,
  .pp-ad-inarticle .pp-ad-label, .pp-ad-inrail .pp-ad-label,
  .pp-ad-rail .pp-ad-label, .pp-ad-rail-home .pp-ad-label,
  .pp-ad-desk .pp-ad-label,
  .pp-ad-sponsorship .pp-ad-label, .ad-slot .ad-label,
  .ad-placeholder .ad-label,
  .pp-ad-caption, .pp-ad-sub, .ad-caption, .ad-slot-label,
  .ad-placeholder-label, .pp-ad-slot-label {
    display: none !important;
  }
  .pp-ad-leaderboard::before, .pp-ad-leaderboard::after,
  .pp-ad-infeed::before, .pp-ad-infeed::after,
  .pp-ad-inarticle::before, .pp-ad-inarticle::after,
  .pp-ad-inrail::before, .pp-ad-inrail::after,
  .pp-ad-rail::before, .pp-ad-rail::after,
  .pp-ad-slot::before, .pp-ad-slot::after,
  .ad-slot::before, .ad-slot::after,
  .ad-placeholder::before, .ad-placeholder::after {
    content: none !important;
    display: none !important;
  }
  .pp-ad-leaderboard ins.adsbygoogle, .pp-ad-infeed ins.adsbygoogle,
  .pp-ad-inarticle ins.adsbygoogle, .pp-ad-inrail ins.adsbygoogle,
  .pp-ad-rail ins.adsbygoogle, .pp-ad-rail-home ins.adsbygoogle,
  .pp-ad-slot ins.adsbygoogle,
  .ad-slot ins.adsbygoogle,
  .ad-placeholder ins.adsbygoogle {
    background: transparent !important;
  }
  /* True sizes — exact height locked, min and max. */
  .pp-ad-leaderboard, .pp-ad-above-footer {
    display: flex; justify-content: center; align-items: center;
    width: 320px; max-width: 100%;
    height: 100px; min-height: 100px; max-height: 100px;
    margin: 12px auto 4px; padding: 0;
  }
  .pp-ad-infeed {
    display: flex; justify-content: center; align-items: center;
    width: 100%;
    height: 250px; min-height: 250px; max-height: 250px;
    margin: 16px 0; padding: 0;
  }
  .pp-ad-inarticle,
  .pp-article-body .pp-ad-inarticle {
    display: flex; justify-content: center; align-items: center;
    width: 100%;
    height: 250px; min-height: 250px; max-height: 250px;
    margin: 22px 0; padding: 0;
    clear: both;
  }
  .pp-ad-inrail, .pp-ad-desk, .pp-ad-sponsorship,
  .pp-article-body .pp-ad-inrail {
    display: flex; justify-content: center; align-items: center;
    width: 300px; max-width: 100%;
    height: 250px; min-height: 250px; max-height: 250px;
    margin: 0 auto; padding: 0;
  }
  .pp-ad-slot { margin: 14px auto; padding: 0; }
  .pp-ad-slot--leaderboard {
    display: flex; justify-content: center; align-items: center;
    width: 320px; max-width: 100%;
    height: 100px; min-height: 100px; max-height: 100px;
  }
  .pp-ad-slot--inarticle {
    display: flex; justify-content: center; align-items: center;
    width: 100%;
    height: 250px; min-height: 250px; max-height: 250px;
  }
  .pp-ad-slot--halfpage {
    display: flex; justify-content: center; align-items: flex-start;
    width: 300px; max-width: 100%;
    height: 600px; min-height: 600px; max-height: 600px;
  }
  /* Side rails never render at phone width. */
  .pp-ad-rail, .pp-ad-rail-home { display: none !important; }

  /* ------------------------------------------------------------------
     ITEM 87-SECONDARY — "TOP STORIES" CAROUSEL HEADLINES (phone)
     Same rule as lane3 §87, scoped to the SECONDARY carousel only:
     headlines wrap to two lines and trim at a word boundary, never
     mid-word; slide photo crop stays face-safe. The (fixed) main
     hero carousel is not declared anywhere in this file. */
  .pp-carousel .pp-slide-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal !important;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .pp-carousel .pp-slide-photo img {
    object-fit: cover;
    object-position: 50% 18%;
  }

  /* ============================ ROOM ============================ */

  /* ------------------------------------------------------------------
     ITEM 84 — TRENDING BOXES (phone)
     The band has stacked by the page's own breakpoint; the strip is
     full-width and the boxes STAY 3-in-a-row (item-34 spec §7) —
     they shrink, they never stack and never go 2-over-1. Photo
     strip 36px, case name still the full name at max 2 lines. */
  .tac-trend { margin: 0 0 14px; }
  .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: 8px; }
  .tac-trend__box {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 112px;
    background: var(--pp-paper, #fff);
    border: 1px solid var(--pp-line-soft, #e2e8f0);
    border-radius: var(--pp-radius, 8px);
    overflow: hidden;
    text-decoration: none;
  }
  .tac-trend__photo {
    position: relative;
    display: block;
    height: 110px;
    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 {
    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: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
  }
  .tac-trend__rank {
    position: absolute;
    top: 0;
    left: 0;
    padding: 2px 6px;
    background: var(--pp-breaking, #d92323);
    color: #fff;
    font-family: var(--pp-font-sans, "Plus Jakarta Sans", "Inter", sans-serif);
    font-size: 11px;
    font-weight: 800;
    border-radius: 0 0 6px 0;
  }
  .tac-trend__new {
    position: absolute;
    top: 3px;
    right: 3px;
    padding: 2px 5px;
    background: var(--pp-breaking, #d92323);
    color: #fff;
    font-family: var(--pp-font-sans, "Plus Jakarta Sans", "Inter", sans-serif);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    border-radius: 3px;
    white-space: nowrap;
  }
  .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: 6px 7px 0;
    color: var(--pp-heading, #0f172a);
    font-family: var(--pp-font-serif, "Merriweather", "Lora", Georgia, serif);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
  }
  .tac-trend__meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 7px 6px;
    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: 10.5px;
    font-weight: 700;
  }
  .pp-trending-views { font-size: 11.5px; color: #c7d2dd; font-weight: 700; white-space: nowrap; }
  .pp-trending-box { display: flex; flex-direction: column; height: 100%; min-width: 0; }
  .pp-trending-photo { height: 36px; flex: none; overflow: hidden; }
  .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 ONCE (phone): tile sized at the additions phone
     values; the placeholder carries NO text — template-fixes.md §85
     removes the word, and the safety net here (font-size:0 +
     transparent) makes sure it cannot show even if printed. */
  .pp-case-thumb { width: 86px; height: 64px; object-fit: cover; flex: none; display: block; }
  .pp-case-thumb--none {
    background: #0d2138;
    display: flex;
    align-items: center;
    justify-content: center;
    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 (phone): the one stamp,
     styled; the badge guard on closed cards (template marks them
     .pp-case-card--closed and skips the badge — see
     template-fixes.md §86). The case page is untouched. */
  .pp-case-closed-stamp,
  .tac-closed-stamp {
    display: inline-block;
    background: #a02c1e;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 3px 8px;
    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 (phone): sized to its
     text, never wraps, never shrinks in its flex row. */
  .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;
  }

  /* ------------------------------------------------------------------
     ITEM 15A — COLLAPSE AD SLOTS UNTIL FILLED (phone)
     ------------------------------------------------------------------ */
  .pp-ad-leaderboard, .pp-ad-above-footer, .pp-ad-infeed, .pp-ad-inarticle,
  .pp-ad-inrail, .pp-ad-desk, .pp-ad-sponsorship, .pp-ad-slot,
  .pp-ad-slot--leaderboard, .pp-ad-slot--inarticle, .pp-ad-slot--halfpage,
  .pp-ad-rail-block, .pp-adsense-slot,
  .pp-ad-leaderboard-wrap, .pp-ad-infeed-wrap, .pp-ad-inarticle-wrap,
  .pp-article-body .pp-ad-inarticle, .pp-article-body .pp-ad-inrail {
    height: 0 !important; min-height: 0 !important; max-height: 0 !important;
    margin: 0 !important; padding: 0 !important; overflow: hidden !important;
  }
  .pp-ad-leaderboard:has(ins.adsbygoogle[data-ad-status="filled"]),
  .pp-ad-above-footer:has(ins.adsbygoogle[data-ad-status="filled"]),
  .pp-ad-slot--leaderboard:has(ins.adsbygoogle[data-ad-status="filled"]),
  .pp-ad-leaderboard-wrap:has(ins.adsbygoogle[data-ad-status="filled"]) {
    height: 100px !important; min-height: 100px !important; max-height: none !important; margin: 12px auto 4px !important;
  }
  .pp-ad-infeed:has(ins.adsbygoogle[data-ad-status="filled"]),
  .pp-ad-inarticle:has(ins.adsbygoogle[data-ad-status="filled"]),
  .pp-ad-inrail:has(ins.adsbygoogle[data-ad-status="filled"]),
  .pp-ad-slot--inarticle:has(ins.adsbygoogle[data-ad-status="filled"]),
  .pp-ad-infeed-wrap:has(ins.adsbygoogle[data-ad-status="filled"]),
  .pp-ad-inarticle-wrap:has(ins.adsbygoogle[data-ad-status="filled"]),
  .pp-adsense-slot:has(ins.adsbygoogle[data-ad-status="filled"]) {
    height: auto !important; min-height: 250px !important; max-height: none !important; margin: 16px auto !important;
  }
  ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
}

/* ==========================================================================
/* ==========================================================================
   LANE 1 — MOBILE (2nd Amendment + Blog together) · /blog page ONLY
   TWO-ACROSS design, mobile treatment (2026-10-28). Scoped .blog-page:
   this file changes NOTHING in the chat room and nothing on other pages.
   ========================================================================== */

@media (max-width: 760px){
  .blog-page .wrap{flex-direction:column;padding:12px 12px 72px;gap:0}
  .blog-page .feedcol{width:100%;flex:none}
  .blog-page .rail{width:100%;flex:none;margin-top:10px}

  /* phone: one across, full-width cards (two across would be unreadable) */
  .blog-page .feed{grid-template-columns:1fr;gap:16px}
  .blog-page .card img{height:auto;aspect-ratio:16/10}
  .blog-page .card .band{min-height:0}
  .blog-page .card .hl{font-size:17px}

  .blog-page .videorect{height:220px}
  .blog-page .videorect .vtitle{font-size:16px}

  .blog-page .pager{padding:14px 0 4px}
  .blog-page .pnum{min-width:30px;padding:7px 8px}
  .blog-page .pnext,.blog-page .pprev{padding:8px 12px}

  .blog-page .chips{gap:8px;margin-bottom:16px}
  .blog-page .chips a, .blog-page .chips button{padding:7px 14px;font-size:12.5px}

  .blog-page .breaking .blabel{padding:0 12px;font-size:12.5px}
  .blog-page .breaking .btext{font-size:13.5px;padding:0 12px}
}