/* --- BEGIN "Prefiere Relevo en Google" pill -------------------------------
   Markup + enqueue: ig-includes/preferred-source.php. Behaviour:
   js/preferred-source.js. To revert: delete this file and its enqueue.

   Enqueued on its own (not added to a module list), so it loads AFTER the
   module blob. Every selector here is nonetheless written at a specificity at
   least equal to the base.css rule it sits next to, so the placement below does
   not depend on that order holding.

   THE PILL. Outline, deliberately subordinate to the share icons next to it --
   it must not read as a Google endorsement. Same 36px height as .share-btn
   (28px under 450px, where the share buttons shrink too) and the 13px/12px of
   .byline-detail, so the meta bar keeps one type scale. */
.ps-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px; border: 1px solid rgba(111, 111, 111, 0.35); border-radius: 999px; background: #ffffff; color: #6f6f6f; font-size: 13px; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: border-color .2s ease, color .2s ease; }
.ps-btn:hover { border-color: #7464DE; color: #1a1a1a; }
.ps-btn:focus-visible { outline: 2px solid #7464DE; outline-offset: 2px; }
/* The Google G keeps its own colours -- never `fill: currentColor` here. */
.ps-btn svg { width: 16px; height: 16px; flex-shrink: 0; display: block; }

/* PLACEMENT, MODE 1 -- the plain flex bar. A row of its own under the byline,
   right edge flush with the share icons, as in the approved mockup. flex-basis
   100% is what forces the break; the .ps-slot wrapper (rather than the anchor
   itself) is what keeps the pill at its intrinsic width inside that full-width
   row. */
.article-meta-bar > .ps-slot { flex: 0 0 100%; display: flex; justify-content: flex-end; }

/* PLACEMENT, MODE 2 -- .has-updated-row, where base.css:131 switches the bar to
   display:grid and places all three existing children EXPLICITLY. A fourth
   child with no placement of its own lands in an implicit cell and breaks the
   bar on every post that has an "Actualizado por" editor, so it gets explicit
   placement in both of that mode's layouts: the updated row sits on row 2 below
   1200px (pill -> row 3) and moves up into the middle column at 1200px
   (pill -> row 2). row-gap is 0 there, hence the explicit margin. */
.article-meta-bar.has-updated-row > .ps-slot { grid-column: 1 / -1; grid-row: 3; margin-top: 12px; }
@media (min-width: 1200px) {
  .article-meta-bar.has-updated-row > .ps-slot { grid-row: 2; }
}

@media (max-width: 449px) {
  /* base.css:105 sets flex-wrap:nowrap under 450px, to stop .share-list
     dropping onto a row of its own. With a pill present we need the wrap back
     -- but only paired with flex-basis:0 on the byline. THAT is the load-
     bearing half: line breaking uses an item's hypothetical main size (its
     flex-basis), so the min-width:0 that block already sets would let the
     byline shrink and still push .share-list to the next line. With
     `flex: 1 1 0` the byline's hypothetical size is 0, it never forces a break,
     and only the 100%-basis .ps-slot does. Scoped to .has-ps-row so a bar
     without a pill keeps base.css's nowrap untouched. */
  .article-meta-bar.has-ps-row { flex-wrap: wrap; }
  .article-meta-bar.has-ps-row > .article-byline { flex: 1 1 0; min-width: 0; }
  .article-meta-bar.has-ps-row > .share-list { flex: 0 0 auto; }

  .ps-btn { min-height: 28px; padding: 3px 8px; font-size: 12px; gap: 5px; }
  .ps-btn svg { width: 14px; height: 14px; }
}
/* --- END "Prefiere Relevo en Google" pill --------------------------------- */