/* ============================================================
   THE BIGG PULL, "In The Press" column + the news-page split
   Scoped to the news page. Deliberately mirrors the Facebook
   feed component (facebook-feed.css) so the two columns read as
   one system: same tokens, same card frame, same hover/focus.
   ============================================================ */

/* ---------- The 2/3 + 1/3 split ---------- */
.news-layout{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:32px;
  align-items:start}
.news-layout__main{min-width:0}
.news-layout__side{min-width:0}

/* The feed now lives in two thirds of the wrap, so three cards no longer fit.
   Two across keeps each card within ~7px of the width it had full-width. */
.news-layout__main .fb-feed__grid{grid-template-columns:repeat(2,1fr)}

/* The feed is long and the press column is short: let it ride down with the
   scroll on desktop. .nav is sticky at ~70px tall, so clear it. */
@media(min-width:1025px){
  .news-layout__side{position:sticky;top:88px}
}

/* Below the split, the column stacks under the feed and the feed goes back to
   its own 3 / 2 / 1 breakpoints (facebook-feed.css lines 8-10). */
@media(max-width:1024px){
  .news-layout{grid-template-columns:minmax(0,1fr);gap:44px}
  .news-layout__main .fb-feed__grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:960px){ .news-layout__main .fb-feed__grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .news-layout__main .fb-feed__grid{grid-template-columns:1fr} }

/* ---------- Column head ---------- */
.press__head{
  padding-bottom:16px;
  margin-bottom:20px;
  border-bottom:1px solid var(--line)}
.press__head h3{
  font-size:1.32rem;
  margin-top:8px;
  line-height:1.05}
.press__head h3 em{color:var(--red-bright);font-style:italic}

.press__list{display:flex;flex-direction:column;gap:18px}

.press__status{
  font-size:.85rem;color:var(--txt-on-dark-mute);text-align:center;margin:16px 0 0}
.press__status--error{color:var(--red-bright)}

.press__more{margin-top:20px;width:100%}
.press__more[hidden]{display:none}

/* ---------- Press card ---------- */
.pc{
  display:flex;flex-direction:column;
  background:var(--ink-3);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  color:var(--txt-on-dark);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.pc:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:rgba(201,162,39,.42)}
.pc:focus-within{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:var(--red)}

/* Optional thumbnail: outlet logo, a screen grab, or a scan of the clipping. */
.pc__media{
  position:relative;display:block;
  aspect-ratio:16/9;background:var(--ink-2);
  overflow:hidden}
.pc__media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .35s ease}
.pc:hover .pc__media img{transform:scale(1.045)}

.pc__body{display:flex;flex-direction:column;gap:10px;padding:16px 16px 18px}

/* ---------- Type badge + date ---------- */
.pc__top{display:flex;align-items:center;gap:10px}
.pc__type{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;
  background:rgba(201,162,39,.13);
  border:1px solid rgba(201,162,39,.42);
  color:var(--red-bright);
  font-size:.66rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
  white-space:nowrap;flex:none}
.pc__type svg{width:13px;height:13px;flex:none}
.pc__date{
  margin-left:auto;
  font-size:.74rem;color:var(--txt-on-dark-mute);
  white-space:nowrap}

/* ---------- Copy ---------- */
.pc__outlet{
  font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--gold);
  margin:0}
.pc__title{
  font-size:1.02rem;line-height:1.2;
  margin:0;
  color:var(--txt-on-dark)}
.pc__blurb{
  font-size:.88rem;line-height:1.6;
  color:rgba(255,255,255,.82);
  margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}

/* ---------- Players ---------- */
.pc__audio{
  width:100%;
  margin-top:2px;
  border-radius:8px;
  /* Chrome paints the native player on a light chrome; this keeps it from
     glaring against the dark card without hiding any control. */
  filter:invert(.92) hue-rotate(180deg) saturate(.75)}
.pc__embed{
  position:relative;
  aspect-ratio:16/9;
  border-radius:8px;
  overflow:hidden;
  background:var(--ink-2)}
.pc__embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pc__dur{font-size:.72rem;color:var(--txt-on-dark-mute)}

/* ---------- Footer: Listen/Watch/Read on the left, Share on the right ---------- */
.pc__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;
  margin-top:4px;
  padding-top:12px;
  border-top:1px solid var(--line)}
.pc__foot .pc__more{margin-top:0}

/* The share button + menu are styled in assets/css/share.css, shared with the
   Facebook feed cards. Only the press-card-specific bit stays here. */

/* A card ARRIVED AT from a shared link gets the gold edge too: someone follows
   the link into a column of cards and needs to see which one they were sent.
   (.pc.is-sharing lives in share.css alongside .fbc.is-sharing.)

   scroll-margin-top clears the sticky nav (~70px) so the card's own top edge is
   never tucked underneath it when press.js scrolls to it.

   The mark is .pc--targeted, set by press.js, NOT :target. On a cold load the
   browser resolves the document's target element while parsing, before this
   card exists, and never re-resolves it once the card is inserted, so :target
   matched when moving around inside the page and did nothing at all for a real
   shared link. :target is kept alongside purely as a no-JS courtesy. */
.pc--targeted,
.pc:target{border-color:rgba(201,162,39,.55)}
.pc{scroll-margin-top:100px}
.pc:focus{outline:none}          /* focused only to move screen readers, not a visual state */

/* One pulse on arrival, so it is unmistakable which card the link was for.
   Runs once and stops; the :target gold edge is what persists. */
.pc--landed{animation:pc-landed 1.6s ease-out 1}
@keyframes pc-landed{
  0%   {box-shadow:0 0 0 0 rgba(201,162,39,.55)}
  55%  {box-shadow:0 0 0 7px rgba(201,162,39,0)}
  100% {box-shadow:0 0 0 0 rgba(201,162,39,0)}
}
@media (prefers-reduced-motion: reduce){
  .pc--landed{animation:none}
}

/* ---------- Listen / Watch / Read ---------- */
.pc__more{
  margin-top:4px;align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--red-bright);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .2s ease,gap .2s ease}
.pc__more:hover{border-bottom-color:var(--red-bright);gap:12px}
.pc__arrow{transition:transform .2s ease}
.pc__more:hover .pc__arrow{transform:translateX(3px)}

/* Visible focus, WCAG AA, matching the feed's rings */
.pc a:focus-visible,
.pc audio:focus-visible,
.pc button:focus-visible,
.press__more:focus-visible{
  outline:3px solid var(--red-bright);
  outline-offset:3px;
  border-radius:4px}

/* ---------- "Nothing yet" card ----------
   Reads as a slot waiting to be filled, not as a story. Dashed edge, muted
   copy, no hover lift, because there is nothing to click. */
.pc--waiting{
  background:transparent;
  border-style:dashed;
  border-color:rgba(201,162,39,.24)}
.pc--waiting:hover{transform:none;box-shadow:none;border-color:rgba(201,162,39,.24)}
.pc--waiting .pc__type{
  background:transparent;
  border-color:rgba(201,162,39,.28);
  color:var(--txt-on-dark-mute)}
.pc--waiting .pc__title{color:rgba(255,255,255,.72);font-size:.96rem}
.pc--waiting .pc__blurb{
  color:var(--txt-on-dark-mute);font-size:.84rem;
  -webkit-line-clamp:none;display:block}
.pc__soon{
  margin-left:auto;
  font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--txt-on-dark-mute);
  white-space:nowrap}

/* ---------- Empty / error state ---------- */
.pc--empty{text-align:center}
.pc--empty .pc__body{padding:30px 20px;gap:8px}
.pc--empty .pc__blurb{-webkit-line-clamp:none;display:block;color:var(--txt-on-dark-mute)}

/* ---------- Loading skeleton (reuses the feed's shimmer) ---------- */
.pc--skeleton{pointer-events:none}
.pc--skeleton .pc__body{gap:12px}

/* ---------- Screen-reader-only ---------- */
.press .sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .pc,
  .pc__media img,
  .pc__more,
  .pc__arrow{transition:none !important}
  .pc:hover,
  .pc:focus-within{transform:none}
  .pc:hover .pc__media img{transform:none}
  .pc__more:hover .pc__arrow{transform:none}
}