/* ============================================================================
   Feed card — the single card every FeedItem-backed feed renders.
   Paired with core_data/js/feed_card.js, which emits exactly this markup.

   Two rules keep this working; break either and the drift starts again:

   1. Style the CARD, never the container. No `.lawsndocs-feed article.card`.
      The appearance travels with the markup, so a card renders identically in
      its panel, inside the "Förstora" modal (which copies innerHTML into a
      shared modal body) and anywhere else it is moved. Container-scoped rules
      are exactly what broke Förstora before this file existed.

   2. Colour lives on one token, --fc-accent, set by a .fc-d-* domain class.
      Variation comes from the item's data, never from the page it sits on.

   Values come from design-tokens.css (loaded globally via
   styling_dependencies.html); the fallbacks after each var() keep the card
   intact on any page that somehow misses it.
   ========================================================================= */

/* ── Feed width — the product-wide standard ──────────────────────────────
   The reference is "Senaste i ditt flöde" on Överblick at a 1366px window:
   cards ~410px wide. A feed card should never be much narrower than
   --feed-card-min. The card fills its container, so the rule lives in the
   layouts, and every feed page follows the same three:

   1. A feed shares a row with other content only from xl (≥1200px), in a
      5/12 column or wider: `col-xl-5` / `col-xl-7` / `col-xl-6`, never
      col-md-* or col-lg-*. Below xl the feed takes the full width — a 5/12
      column there left cards 230–320px wide.
   2. ~1rem between the panel's edge and the card, once. A feed inside a
      .card-body takes no horizontal padding of its own (that doubled it).
   3. Grids of cards size their tracks from the token, not from breakpoints:
      repeat(auto-fill, minmax(min(100%, var(--feed-card-min)), 1fr)).
   ========================================================================= */
:root {
  --feed-card-min: 400px;
}

.feed-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.feedcard {
  --fc-accent: var(--brand-color-accent, #0f88f2);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;

  background: var(--brand-color-surface, #ffffff);
  border: 1px solid var(--brand-color-border, rgba(18, 32, 51, 0.12));
  border-left: 3px solid var(--fc-accent);
  border-radius: 10px;
  padding: 0.85rem 0.95rem;

  /* Border first, shadow only on hover. --brand-shadow-soft is a 40px panel
     blur; twenty cards each casting it turns a feed into mush. */
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.feedcard:hover {
  border-color: rgba(18, 32, 51, 0.22);
  box-shadow: 0 4px 14px rgba(22, 50, 79, 0.07);
}

.feedcard:focus-within {
  border-color: var(--fc-accent);
  box-shadow: 0 0 0 3px var(--brand-color-accent-soft, rgba(15, 136, 242, 0.12));
}

/* ── Meta row: who it came from, and when ──────────────────────────────── */
.fc-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.72rem;
  line-height: 1.3;
}

.fc-source {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fc-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-source::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--fc-accent);
}

/* Right-aligned and tabular so the column stays straight down a long list. */
.fc-time {
  margin-left: auto;
  white-space: nowrap;
  color: var(--brand-color-text-muted, #5d6c80);
  font-variant-numeric: tabular-nums;
}

/* ── Title — the link. The CARD is never an <a>. ───────────────────────── */
.fc-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--brand-color-heading, #0b1627);
}

.fc-title a {
  color: inherit;
  text-decoration: none;
}

.fc-title a:hover,
.fc-title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Description — clamped in CSS, not truncated on the server ─────────── */
.fc-desc {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--brand-color-text-muted, #5d6c80);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Variant: the description is the content, not a teaser.
   Two lines is right for a news feed, where the title carries the story and the
   description only hints at it. It is wrong for Riksdagens kalender, where the
   description holds the time, the place and the agenda — the three things a
   calendar entry exists to state — and the clamp cut them off mid-sentence.
   Opted into per feed with FeedCard's `cardClass: "fc-desc-full"`, and set on
   the card so it survives the copy into feed_expand.js's modal. */
.feedcard.fc-desc-full .fc-desc {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  overflow: visible;
  font-size: 0.85rem;
}

/* ── Chips carry the variable data. Always neutral: if the party badge, the
      type badge and the source are all coloured, none of them is a signal. ─ */
.fc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.fc-chip {
  padding: 0.06rem 0.42rem;
  border: 1px solid var(--brand-color-border, rgba(18, 32, 51, 0.12));
  border-radius: 20px;
  background: var(--brand-color-surface-muted, #f5f8fc);
  color: var(--brand-color-text-muted, #5d6c80);
  font-size: 0.69rem;
  font-weight: 500;
  line-height: 1.5;
}

/* Chip kinds, opted into per chip with FeedCard's { label, className } form.
   Still neutral — weight and type set them apart, not colour. */
.fc-chip.is-party {
  border-color: rgba(18, 32, 51, 0.2);
  background: var(--brand-color-surface, #ffffff);
  color: var(--brand-color-heading, #0b1627);
  font-weight: 700;
  min-width: 1.6rem;
  text-align: center;
}

/* An identifier, not a category: quieter, monospaced, pushed to the end. */
.fc-chip.is-id {
  margin-left: auto;
  border-color: transparent;
  background: transparent;
  font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

/* A status ("Inkommen", "Beslutad") — a small dot marks it as a state. */
.fc-chip.is-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.fc-chip.is-status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

/* ── Actions ───────────────────────────────────────────────────────────── */
.fc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--brand-color-border, rgba(18, 32, 51, 0.12));
}

.fc-actions:empty {
  display: none;
}

.fc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.24rem 0.6rem;
  border: 1px solid var(--brand-color-border, rgba(18, 32, 51, 0.12));
  border-radius: 6px;
  background: var(--brand-color-surface, #ffffff);
  color: var(--brand-color-text, #122033);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}

.fc-btn:hover {
  background: var(--brand-color-surface-muted, #f5f8fc);
  border-color: rgba(18, 32, 51, 0.24);
  color: var(--brand-color-text, #122033);
}

.fc-btn.is-primary {
  color: var(--fc-accent);
  border-color: rgba(18, 32, 51, 0.18);
}

/* Pushes the save button to the right, so the bookmark sits in the same spot
   on every card in the product. */
.fc-spacer {
  margin-left: auto;
}

/* ── Empty / error / loading states, so every feed says it the same way ─── */
.fc-state {
  padding: 1.75rem 1rem;
  color: var(--brand-color-text-muted, #5d6c80);
  text-align: center;
  font-size: 0.88rem;
}

.fc-state.is-error {
  color: var(--brand-color-danger, #b4453c);
}

/* ── "Ladda fler" — the one load-more button in the product ────────────────
   Every feed, list and grid that pages uses this: .fc-more around a
   .fc-load-more button with a chevron and the label "Ladda fler" ("Hämtar…"
   while a page is in flight). Build it with FeedCard.loadMoreHtml() in JS, or
   copy the markup in a template:

     <div class="fc-more"><button type="button" class="fc-load-more">
       <i class="bi bi-chevron-down" aria-hidden="true"></i>
       <span class="fc-load-more-label">Ladda fler</span></button></div>

   Pages do not restyle it — one look, so the product reads as one product. */
.fc-more {
  display: flex;
  justify-content: center;
  padding: 0.75rem 0;
}

.fc-more[hidden] {
  display: none;
}

.fc-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--brand-color-border, rgba(18, 32, 51, 0.12));
  border-radius: 10px;
  background: var(--brand-color-surface, #ffffff);
  color: var(--brand-color-text, #122033);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: var(--brand-font-weight-semibold, 600);
  line-height: 1.4;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.fc-load-more:hover:not(:disabled) {
  color: var(--brand-color-accent-strong, #1157bf);
  border-color: rgba(15, 136, 242, 0.45);
  background: var(--brand-color-accent-soft, rgba(15, 136, 242, 0.08));
}

.fc-load-more:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-color-accent-soft, rgba(15, 136, 242, 0.18));
}

.fc-load-more:disabled {
  color: var(--brand-color-text-muted, #5d6c80);
  cursor: progress;
}

.fc-load-more i {
  transition: transform 0.16s ease;
}

.fc-load-more:hover:not(:disabled) i {
  transform: translateY(2px);
}

@media (prefers-reduced-motion: reduce) {
  .fc-load-more,
  .fc-load-more i {
    transition: none;
  }
}

/* ── Domain accents ────────────────────────────────────────────────────────
   Matched lightness and saturation so no domain shouts louder than another in
   a mixed feed, and all dark enough to pass contrast as label text on white. */
.fc-d-politik   { --fc-accent: orange; }
.fc-d-ekonomi   { --fc-accent: #1f5fae; }
.fc-d-sakerhet  { --fc-accent: red; }
.fc-d-regionalt { --fc-accent: orange; }
.fc-d-myndighet { --fc-accent: grey; }

/* ── Inside the Förstora modal ─────────────────────────────────────────────
   The card needs no overrides — that is the point of styling the class. The
   list only gains a little more air, since the modal is wider than a panel.

   It deliberately stays the single column `.feed-list` already is. A two-column
   grid used to kick in at ≥992px, and it broke the one thing a feed has to get
   right: reading order. The items arrive newest first, but across two columns
   the second item sits to the *right* of the first rather than under it, so the
   eye has to zigzag to follow the chronology — and it read as two separate
   feeds side by side rather than one. */
#feedExpandModalBody .feed-list {
  gap: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .feedcard {
    transition: none;
  }
}