/* ============================================================
   components/phone-banners.css
   In-content banners on phones (BACKLOG 247.1). Enqueued ONLY when
   the layout is on (inc/phone-banners.php), so with the flag off no
   page requests it and today's HTML is unchanged.

   Two copies of one placement are in the page: the in-content one
   (.rfi-inline-ad) and the rail's. This file shows the in-content
   copy at 767.98 px and narrower and the rail copy everywhere else.
   Desktop and tablet are unchanged: from 768 px the in-content copy
   is display:none and the rail is as before. A lazy image in a
   display:none box is not fetched, so the hidden copy costs nothing.

   NOT the rail's slot class: .rfi-rail__slot is capped at 286 px at
   1100 px and below (rail.css), and an in-content banner is full
   content width (owner, DECISIONS 2026-10-20, second entry). The
   creative keeps its proportion: width 100%, height auto, never
   cropped, as in the rail.
   ============================================================ */
.rfi-inline-ad { display: none; }

@media (max-width: 767.98px) {
  .rfi-inline-ad { display: block; min-width: 0; grid-column: 1 / -1; }

  /* Between page blocks (after </article>, between home sections): the
     same distance as one section from the next (base.css .rfi-section). */
  .rfi-inline-ad--flow { margin-top: var(--rfi-block-gap); }
  /* Among cards: the grid's own gap spaces it like a card. */
  .rfi-inline-ad--grid { margin: 0; }
  /* Inside article text: the body's own figure rhythm (single.css). */
  .rfi-inline-ad--body { margin: 24px 0; }

  .rfi-inline-ad__label {
    display: block; margin: 0 0 6px;
    font-family: var(--rfi-font-ui); font-size: 10.5px; font-weight: 600;
    letter-spacing: .8px; text-transform: uppercase; color: var(--rfi-text-3);
  }
  .rfi-inline-ad .rfi-banner {
    display: block; width: 100%; border-radius: var(--rfi-radius); overflow: hidden;
    text-decoration: none;
  }
  /* The article body styles its links and images; the banner is neither prose nor a figure. */
  .rfi-inline-ad img { display: block; width: 100%; height: auto; margin: 0; border-radius: 0; }

  /* THE RAIL COPY OF A SLOT SHOWN IN THE CONTENT IS HIDDEN, by presence in the
     document rather than by a server flag, so it stays right after listing.js
     replaces a list (a filtered list too short for a position drops its
     in-content copy, and the rail copy reappears). One line per slot the
     layout uses; a slot added to inc/phone-banners.php needs its line here.
     Without :has() support both copies show: a duplicate, never a gap. */
  body:has(.rfi-inline-ad[data-holod-inline="info/V1"]) .rfi-rail .rfi-rail__slot[data-holod-slot="info/V1"],
  body:has(.rfi-inline-ad[data-holod-inline="info/V2"]) .rfi-rail .rfi-rail__slot[data-holod-slot="info/V2"],
  body:has(.rfi-inline-ad[data-holod-inline="catalog/V1"]) .rfi-rail .rfi-rail__slot[data-holod-slot="catalog/V1"] { display: none; }
}