/* Shared press-card geometry for the UnGovr Monitors press surfaces.
   Anatomy follows the UnGovr news card, which is the worked example the
   member sites copy.

   GEOMETRY AND CHIP SEMANTICS ONLY. Not one colour or face is decided here:
   every site sets the custom properties below from its own palette, so the
   thing that must not drift between sites (what a pill means, how big the art
   tile is, where the edge tab sits) has one owner, and the thing that must
   stay each site's own has none.

   Why a shared file rather than another copied template: copied row partials
   are how the member sites came to disagree about one interaction (some
   rendered their function chips as inert spans while their heads offered the
   filter, the rest rendered buttons). Nothing failed; the fleet simply
   disagreed with itself.

   Required custom properties, set by the consuming site:
     --pc-bg      card background. The ELEVATED surface, not the page ground:
                  the edge tab masks the card's border rule with this colour,
                  so a value that does not match the card's own background
                  paints a visible notch in the rule.
     --pc-rule    hairline / border
     --pc-ink     primary text
     --pc-ink-2   secondary text (byline, chips)
     --pc-accent  hover, focus and link accent
     --pc-serif   headline face
     --pc-mono    metadata face

   Optional, with defaults:
     --pc-col-min      narrowest a grid column may get (340px)
     --pc-title-size   headline size (1.04rem)
     --pc-meta-size    byline and meta band size (0.7rem) */

.press-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--pc-col-min, 340px), 100%), 1fr));
  gap: 0.95rem;
  /* The edge tab sits on the first row's top border; without this the grid's
     own top edge would clip it against whatever precedes the grid. */
  padding-top: 0.5rem;
}

.press-card {
  position: relative;                /* anchors the edge tab */
  display: flex;
  gap: 0.9rem;
  padding: 0.9rem;
  min-width: 0;
  background: var(--pc-bg);
  border: 1px solid var(--pc-rule);
  border-radius: 6px;
}
.press-card:hover { border-color: var(--pc-accent); }

/* The edge tab: the card's primary place, set INTO the top border line at the
   right in fieldset-legend style, its own background masking the rule where
   the label crosses it. A tab with a filter behind it is a button; a place no
   control on the page offers renders the same tab as plain text, so it stops
   offering a click that could do nothing. */
.press-card .pc-tab {
  position: absolute;
  top: -0.62em;
  right: 12px;
  max-width: 82%;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font: inherit;
  font-family: var(--pc-mono);
  font-size: 0.68rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pc-accent);
  background: var(--pc-bg);
  padding: 0 0.4rem;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.press-card button.pc-tab:hover { color: var(--pc-ink); }
.press-card button.pc-tab:hover .pc-tab-name { text-decoration: underline; }
.press-card .pc-tab--inert { color: var(--pc-ink-2); cursor: default; }
.press-card .pc-tab:focus-visible {
  outline: 2px solid var(--pc-accent);
  outline-offset: 2px;
}
/* Ellipsis on the NAME, not on the tab: an inline-flex box clips its children
   but renders no ellipsis, so a long name would cut mid-letter. */
.press-card .pc-tab-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Square and cropped, so a card's height never depends on the publisher's
   aspect ratio. */
.press-card .pc-art {
  flex: none;
  display: block;
  width: 96px;
  height: 96px;
}
.press-card .pc-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 1px solid var(--pc-rule);
  border-radius: 4px;
}
.press-card:hover .pc-art img { border-color: var(--pc-accent); }

/* A card with no art is a DESIGNED state on these surfaces, not an edge case:
   a large share of every member feed carries none, and a member surface has
   no flag to fall back to that would not restate what the whole page already
   says. So the body takes the full card rather than leaving a 96px gutter,
   and a bare card reads as a variant instead of one whose image failed to
   load. */
.press-card .pc-body {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Who filed it and when, above the headline. */
.press-card .pc-byline {
  font-family: var(--pc-mono);
  font-size: var(--pc-meta-size, 0.7rem);
  color: var(--pc-ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  align-items: center;
  margin-bottom: 0.3rem;
}

.press-card .pc-title {
  font-family: var(--pc-serif);
  font-size: var(--pc-title-size, 1.04rem);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.45rem;
  letter-spacing: 0;
}
.press-card .pc-title a { color: var(--pc-ink); text-decoration: none; }
.press-card .pc-title a:hover { color: var(--pc-accent); text-decoration: underline; }

/* A PILL IS A FILTER, and nothing that is not a pill is one.

   This band mixes values a reader can act on (technology, place) with values
   they cannot (a contract marker, "also carried by 3"), and no reader can
   tell them apart by reading. So the actionable ones take one shape, a
   bordered pill that is a real button, and everything else takes any shape
   but that.

   No pressed state on a card pill, deliberately: filtering to one value
   would put a filled pill on every card still standing, restating one fact a
   hundred times. The head controls and the active-filter strip are the one
   place the page reports what it is showing, and a card pill writes through
   to them. */
.press-card .pc-meta {
  font-family: var(--pc-mono);
  font-size: var(--pc-meta-size, 0.7rem);
  color: var(--pc-ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  align-items: center;
}

.press-card .pc-also {
  margin-top: 0.4rem;
  font-family: var(--pc-mono);
  font-size: var(--pc-meta-size, 0.7rem);
  color: var(--pc-ink-2);
}

/* A self-published release is a different kind of thing from a filed story,
   and the page says so by shape as well as by its band: it spans the grid
   instead of sitting in it as one card among many. */
.press-card--release {
  grid-column: 1 / -1;
  display: block;
}

/* ---------- Phone ----------

   The art tile costs the headline a fixed 96px whatever the card is worth,
   and on a phone the card IS the viewport. Measured on the first converted
   feed at 390px, a card with art gave its headline about two thirds of the
   measure a bare card got, taking the longest headlines to nine lines.

   The tile shrinks rather than moving. Stacking it above the body would give
   every arted card the full measure, but it would also add the tile's height
   to most cards on the longest pages, and make arted and bare cards two
   different shapes rather than one shape with an optional part. */
@media (max-width: 520px) {
  .press-card { gap: 0.6rem; padding: 0.75rem; }
  .press-card .pc-art { width: 64px; height: 64px; }
}