/* ════════════════════════════════════════════════════════════
   RDR LIVE FEED — page stylesheet
   Built against RI Digital Research's official Brand Theme &
   Design System (v1.0, June 2026). Tokens below are the exact
   values from that document, namespaced with an --rdr- prefix
   so they can never collide with the active WordPress theme's
   own CSS variables (many themes define generic names like
   --primary or --text, which would otherwise silently override
   or be overridden by these).
   ════════════════════════════════════════════════════════════ */

.rdr-feed-page {
  --rdr-p:      #5c1d77;
  --rdr-p-d:    #451459;
  --rdr-p-m:    #7b2fa0;
  --rdr-p-l:    #f7f2fa;
  --rdr-p-t:    #ede5f5;
  --rdr-p-p:    #f4eefa;
  --rdr-void:   #0d0a16;
  --rdr-void2:  #130b22;
  --rdr-ink:    #111827;
  --rdr-ink2:   #1e1b2e;
  --rdr-mut:    #4b5563;
  --rdr-fnt:    #6b7280;
  --rdr-wh:     #ffffff;
  --rdr-sl2:    #f4f3f8;
  --rdr-hero-bg: linear-gradient(160deg, #faf8ff 0%, #f3eefb 40%, #ede5f5 100%);
  --rdr-bdr:    #e5e7eb;
  --rdr-bdr-l:  #ede9f7;
  --rdr-grn:    #059669;
  --rdr-grn-b:  #ecfdf5;
  --rdr-amb:    #d97706;
  --rdr-amb-b:  #fffbeb;
  --rdr-r:      8px;
  --rdr-rl:     12px;
  --rdr-rxl:    16px;
  --rdr-r-pill: 100px;
  --rdr-ease:   cubic-bezier(.4, 0, .2, 1);
  --rdr-dur:    .22s;
  --rdr-ff:     'DM Serif Display', Georgia, serif;
  --rdr-fu:     'Plus Jakarta Sans', system-ui, sans-serif;
  --rdr-max-w:  1160px;
  --rdr-pad-x:  32px;

  font-family: var(--rdr-fu);
  color: var(--rdr-ink);
  line-height: 1.6;
}

/* ── Scoped reset — prevents the active theme's default typography,
   list, link, and button styles from bleeding into this page. Every
   rule below is scoped under .rdr-feed-page so nothing here can ever
   leak out and affect the rest of the site. ── */
.rdr-feed-page, .rdr-feed-page *, .rdr-feed-page *::before, .rdr-feed-page *::after {
  box-sizing: border-box;
}
.rdr-feed-page h1, .rdr-feed-page h2, .rdr-feed-page h3,
.rdr-feed-page p, .rdr-feed-page ul, .rdr-feed-page li {
  margin: 0;
  padding: 0;
}
.rdr-feed-page ul { list-style: none; }
.rdr-feed-page a { text-decoration: none; color: inherit; }
.rdr-feed-page button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}
.rdr-feed-page svg { display: block; flex-shrink: 0; }

/* ── Full-bleed helper — lets the hero and CTA bands run edge-to-edge
   across the viewport regardless of how narrow the theme's own page
   container is. ── */
.rdr-fullbleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.rdr-inner {
  max-width: var(--rdr-max-w);
  margin: 0 auto;
  padding: 0 var(--rdr-pad-x);
}

/* ════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════ */
.rdr-hero {
  background: var(--rdr-hero-bg);
  padding: 76px 0 60px;
}
.rdr-hero .rdr-inner { text-align: center; }
.rdr-eyebrow {
  display: inline-block;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rdr-p-m);
  margin-bottom: 16px;
}
.rdr-hero h1 {
  font-family: var(--rdr-ff);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.18;
  color: var(--rdr-ink2);
  max-width: 640px;
  margin: 0 auto 16px;
}
.rdr-hero p.rdr-sub {
  font-size: 1.02rem;
  color: var(--rdr-mut);
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto 28px;
}
.rdr-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--rdr-p-l);
  border: 1px solid var(--rdr-bdr-l);
  border-radius: var(--rdr-r-pill);
  padding: 8px 20px 8px 12px;
  margin: 0 auto;
}
.rdr-trust-badge .rdr-check {
  width: 18px; height: 18px;
  background: var(--rdr-p);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rdr-trust-badge .rdr-check svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 3; fill: none; }
.rdr-trust-badge span { font-size: .8rem; font-weight: 700; color: var(--rdr-p-m); }

/* ════════════════════════════════════════════════════════════
   LEGEND — explains the status chips in plain, reassuring language
   ════════════════════════════════════════════════════════════ */
.rdr-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  padding: 22px 0 0;
  font-size: .8rem;
  color: var(--rdr-fnt);
}
.rdr-legend-item { display: flex; align-items: center; gap: 8px; }
.rdr-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rdr-legend-dot.rdr-dot-done { background: var(--rdr-grn); }
.rdr-legend-dot.rdr-dot-ongoing { background: var(--rdr-amb); }

/* ════════════════════════════════════════════════════════════
   FILTER BAR
   ════════════════════════════════════════════════════════════ */
.rdr-body-section { background: var(--rdr-wh); padding: 52px 0 96px; }
.rdr-filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
}
.rdr-filter-tab {
  background: var(--rdr-wh);
  border: 1.5px solid var(--rdr-bdr);
  color: var(--rdr-mut);
  font-family: var(--rdr-fu);
  font-weight: 600;
  font-size: .82rem;
  padding: 8px 18px;
  border-radius: var(--rdr-r-pill);
  transition: all var(--rdr-dur) var(--rdr-ease);
}
.rdr-filter-tab:hover { border-color: var(--rdr-p); color: var(--rdr-p); }
.rdr-filter-tab.active { background: var(--rdr-p); border-color: var(--rdr-p); color: #fff; }
.rdr-filter-count { font-size: .8rem; color: var(--rdr-fnt); margin: 0 0 20px; }

/* ════════════════════════════════════════════════════════════
   SECTIONS — "Recently Completed" / "Ongoing Projects" groupings.
   Headings and grouping logic are settings-driven (see Feed
   Settings admin page). Each section opens with a small status-
   tinted "eyebrow" badge (with a live item count), the serif
   heading itself, and a short centered accent rule - deliberately
   NOT a full-width divider line, so it never reads as glued to
   the card grid below it. Generous margin on both sides of the
   whole block is the actual fix for that - the accent rule is
   just the visual signature that makes the section feel designed
   rather than a plain text label with a line under it.
   ════════════════════════════════════════════════════════════ */
.rdr-section + .rdr-section { margin-top: 72px; }
.rdr-section-head-block {
  text-align: center;
  margin: 0 0 44px;
}
.rdr-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: var(--rdr-r-pill);
  margin-bottom: 16px;
}
.rdr-section-eyebrow svg { width: 11px; height: 11px; stroke-width: 3; }
.rdr-section-head-done .rdr-section-eyebrow { background: var(--rdr-grn-b); color: var(--rdr-grn); }
.rdr-section-head-ongoing .rdr-section-eyebrow { background: var(--rdr-amb-b); color: var(--rdr-amb); }
.rdr-section-heading {
  font-family: var(--rdr-ff);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--rdr-ink2);
  margin: 0 0 18px;
}
.rdr-section-rule {
  display: inline-block;
  width: 48px;
  height: 3px;
  border-radius: 2px;
}
.rdr-section-head-done .rdr-section-rule { background: var(--rdr-grn); }
.rdr-section-head-ongoing .rdr-section-rule { background: var(--rdr-amb); }

/* ════════════════════════════════════════════════════════════
   CARDS — Theme 1 "Standard Grid" (default). Themes 2 and 3
   below override this base using the exact same HTML structure,
   so switching the "Card visual theme" setting needs no code
   changes anywhere else.
   ════════════════════════════════════════════════════════════ */
.rdr-feed-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  align-items: stretch; /* every card in a row takes the height of the tallest
                            card in that row - combined with .rdr-feed-card's
                            height:100% and .rdr-feed-top's flex-grow, this is
                            what keeps buttons pinned to a shared bottom edge */
}
.rdr-feed-empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--rdr-mut);
  background: var(--rdr-sl2);
  border-radius: var(--rdr-rxl);
}
.rdr-feed-card {
  background: var(--rdr-wh);
  border: 1px solid var(--rdr-bdr);
  border-radius: var(--rdr-rxl);
  padding: 30px;
  transition: border-color var(--rdr-dur) var(--rdr-ease), box-shadow var(--rdr-dur) var(--rdr-ease), transform var(--rdr-dur) var(--rdr-ease);
  display: flex;
  flex-direction: column;
  height: 100%; /* combined with the grid's default row stretch, this + the flex
                   structure below is what keeps every card in a row the same
                   height with its button pinned to the same bottom edge,
                   regardless of how much summary text or how many chips it has */
}
.rdr-feed-card:hover {
  border-color: var(--rdr-bdr-l);
  box-shadow: 0 16px 48px rgba(92, 29, 119, .1);
  transform: translateY(-3px);
}
/* Everything above the button grows to absorb the row's extra height (from
   grid-stretching to match the tallest card in the row) - the button never
   moves, it just gets pushed to a shared bottom edge as a fixed-height footer. */
.rdr-feed-top {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.rdr-feed-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 10px;
}
.rdr-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--rdr-r-pill);
  padding: 4px 12px 4px 10px;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.7; /* keeps the pill's vertical centering identical to
                        .rdr-feed-time's line-height, so both halves of the
                        head row sit on the same visual baseline */
}
.rdr-status-chip svg { width: 11px; height: 11px; stroke-width: 3; }
.rdr-status-chip.rdr-done { background: var(--rdr-grn-b); color: var(--rdr-grn); border-color: rgba(5,150,105,.2); }
.rdr-status-chip.rdr-ongoing { background: var(--rdr-amb-b); color: var(--rdr-amb); border-color: rgba(217,119,6,.2); }
.rdr-feed-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .74rem;
  color: var(--rdr-fnt);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.7;
}
.rdr-feed-time svg { width: 12px; height: 12px; stroke: var(--rdr-fnt); stroke-width: 2; fill: none; }
.rdr-feed-title {
  font-family: var(--rdr-ff);
  font-size: 1.16rem;
  font-weight: 400;
  color: var(--rdr-ink2);
  line-height: 1.35;
  margin-bottom: 12px;
}
.rdr-feed-body {
  font-size: .87rem;
  color: var(--rdr-mut);
  line-height: 1.75;
  margin-bottom: 20px;
}
.rdr-feed-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  margin-top: auto; /* if the card has extra grown space, the chip row sits just
                        above the footer rather than drifting away from the text */
}
.rdr-feed-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--rdr-wh);
  border: 1px solid var(--rdr-bdr);
  font-size: .76rem;
  color: var(--rdr-ink2);
  font-weight: 700;
  padding: 5px 14px 5px 5px;
  border-radius: var(--rdr-r-pill);
  line-height: 1.4;
}
.rdr-chip-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rdr-p-l);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rdr-feed-chip svg { width: 12px; height: 12px; stroke: var(--rdr-p-m); stroke-width: 2; fill: none; }
.rdr-feed-page .rdr-feed-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--rdr-p);
  color: #fff;
  font-family: var(--rdr-fu);
  font-size: .84rem;
  font-weight: 700;
  padding: 13px;
  border-radius: var(--rdr-r);
  transition: background var(--rdr-dur) var(--rdr-ease), transform var(--rdr-dur) var(--rdr-ease);
}
.rdr-feed-btn svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 2.5; fill: none; }
.rdr-feed-page .rdr-feed-btn:hover { background: var(--rdr-p-d); transform: translateY(-1px); }

/* ════════════════════════════════════════════════════════════
   CTA BANNER — closing section, always the deep-purple final band
   ════════════════════════════════════════════════════════════ */
.rdr-cta {
  background: var(--rdr-p);
  padding: 68px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.rdr-cta::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 320px; height: 320px;
  background: rgba(255,255,255,.05);
  border-radius: 50%;
}
.rdr-cta h2 {
  font-family: var(--rdr-ff);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: #fff;
  margin-bottom: 14px;
  position: relative;
}
.rdr-cta p {
  font-size: .98rem;
  color: rgba(255,255,255,.75);
  max-width: 480px;
  margin: 0 auto 28px;
  line-height: 1.7;
  position: relative;
}
.rdr-feed-page .rdr-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--rdr-p);
  font-family: var(--rdr-fu);
  font-weight: 700;
  font-size: .96rem;
  padding: 15px 32px;
  border-radius: var(--rdr-r);
  transition: transform var(--rdr-dur) var(--rdr-ease), box-shadow var(--rdr-dur) var(--rdr-ease);
  position: relative;
}
.rdr-cta-btn svg { width: 15px; height: 15px; stroke: var(--rdr-p); stroke-width: 2.5; fill: none; }
.rdr-feed-page .rdr-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.18); }

/* ════════════════════════════════════════════════════════════
   THEME 2 — "Compact List"
   Single column, each card becomes a horizontal row: meta/title
   on the left, chips and button on the right, divider lines
   instead of boxed borders. Best for a long-running feed with
   many items where scannability matters more than showcase feel.
   ════════════════════════════════════════════════════════════ */
.rdr-theme-2 .rdr-feed-container {
  grid-template-columns: 1fr;
  gap: 0;
}
.rdr-theme-2 .rdr-feed-card {
  border: none;
  border-bottom: 1px solid var(--rdr-bdr);
  border-radius: 0;
  padding: 26px 4px;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  height: auto;
}
.rdr-theme-2 .rdr-feed-card:hover {
  box-shadow: none;
  transform: none;
  background: var(--rdr-sl2);
  margin: 0 -20px;
  padding: 26px 24px;
  border-radius: var(--rdr-r);
}
.rdr-theme-2 .rdr-feed-top { flex-direction: row; align-items: center; gap: 24px; flex-wrap: wrap; }
.rdr-theme-2 .rdr-feed-head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 0; min-width: 130px; }
.rdr-theme-2 .rdr-feed-title { flex: 1; min-width: 220px; margin-bottom: 4px; font-size: 1.05rem; }
.rdr-theme-2 .rdr-feed-body { display: none; } /* summary hidden in list view - title + chips carry it */
.rdr-theme-2 .rdr-feed-chips { margin: 0; flex: 1; min-width: 200px; }
.rdr-theme-2 .rdr-feed-page .rdr-feed-btn { width: auto; padding: 11px 22px; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
   THEME 3 — "Minimal Editorial"
   Single column, no card boxes at all - just generous vertical
   rhythm and a hairline divider, like an editorial listing.
   Chips render as plain separated text instead of pill badges.
   Hero, section headings, and the filter bar are all centered by
   default now (every theme) - the one thing still unique to
   Theme 3 is that every card also centers, for a calm, single-
   column magazine feel that themes 1 and 2 don't use.
   ════════════════════════════════════════════════════════════ */
.rdr-theme-3 .rdr-filter-count { text-align: center; }

.rdr-theme-3 .rdr-feed-container {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 760px;
  margin: 0 auto;
}
.rdr-theme-3 .rdr-feed-card {
  border: none;
  border-bottom: 1px solid var(--rdr-bdr-l);
  border-radius: 0;
  padding: 40px 0;
  height: auto;
  align-items: center;
  text-align: center;
}
.rdr-theme-3 .rdr-feed-card:hover { box-shadow: none; transform: none; }
.rdr-theme-3 .rdr-feed-head { flex-direction: column; justify-content: center; gap: 8px; margin-bottom: 18px; }
.rdr-theme-3 .rdr-feed-title { font-size: 1.4rem; margin-bottom: 14px; }
.rdr-theme-3 .rdr-feed-body { font-size: .92rem; margin-bottom: 20px; max-width: 560px; }
.rdr-theme-3 .rdr-status-chip {
  background: none !important;
  border: none !important;
  padding: 0;
  color: var(--rdr-fnt) !important;
}
.rdr-theme-3 .rdr-status-chip.rdr-done svg { stroke: var(--rdr-grn); }
.rdr-theme-3 .rdr-status-chip.rdr-ongoing svg { stroke: var(--rdr-amb); }
.rdr-theme-3 .rdr-feed-chips { gap: 0; justify-content: center; }
.rdr-theme-3 .rdr-chip-icon { background: none; width: auto; height: auto; }
.rdr-theme-3 .rdr-feed-chip svg { stroke: var(--rdr-fnt); }
.rdr-theme-3 .rdr-feed-chip {
  background: none;
  border: none;
  padding: 0;
  font-weight: 500;
}
.rdr-theme-3 .rdr-feed-chip:not(:last-child)::after {
  content: '\00b7';
  margin-left: 12px;
  color: var(--rdr-bdr);
}
.rdr-theme-3 .rdr-feed-page .rdr-feed-btn {
  display: inline-flex;
  width: auto;
  background: none;
  color: var(--rdr-p) !important;
  padding: 0;
  font-size: .82rem;
  margin: 0 auto;
}
.rdr-theme-3 .rdr-feed-page .rdr-feed-btn svg { stroke: var(--rdr-p); }
.rdr-theme-3 .rdr-feed-page .rdr-feed-btn:hover { transform: none; background: none; gap: 10px; }

/* ════════════════════════════════════════════════════════════
   MOBILE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .rdr-feed-container { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .rdr-feed-page { --rdr-pad-x: 20px; }
  .rdr-hero { padding: 56px 0 44px; }
  .rdr-body-section { padding: 36px 0 72px; }
  .rdr-section + .rdr-section { margin-top: 52px; }
  .rdr-section-head-block { margin-bottom: 32px; }
  .rdr-section-heading { font-size: 1.32rem; }
  .rdr-cta { padding: 52px 0; }
  .rdr-trust-badge {
    border-radius: var(--rdr-rl);
    align-items: flex-start;
    padding: 12px 16px;
  }
  .rdr-trust-badge .rdr-check { margin-top: 2px; }
  .rdr-theme-2 .rdr-feed-card, .rdr-theme-2 .rdr-feed-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .rdr-theme-2 .rdr-feed-page .rdr-feed-btn { width: 100%; }

  /* Filter tabs: a swipeable single-row scroll strip reads far cleaner on a
     narrow screen than pills wrapping unevenly across 2-3 ragged rows.
     scroll-snap gives each swipe a clean resting point instead of stopping
     mid-pill, and the mask-image fade on the trailing edge signals "more to
     scroll" at a glance instead of the row just looking abruptly cut off. */
  .rdr-filter-bar {
    flex-wrap: nowrap;
    justify-content: flex-start; /* centering a row that overflows and scrolls is a
      known cross-browser inconsistency (some browsers start the scroll position
      already offset, making the first pill unreachable) - left-aligned is the
      only reliably scrollable behavior once the row no longer fits on screen */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    margin-left: calc(var(--rdr-pad-x) * -1);
    margin-right: calc(var(--rdr-pad-x) * -1);
    padding-left: var(--rdr-pad-x);
    padding-right: calc(var(--rdr-pad-x) + 24px);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
  }
  .rdr-filter-bar::-webkit-scrollbar { display: none; }
  .rdr-filter-tab { flex-shrink: 0; scroll-snap-align: start; }
}
@media (max-width: 480px) {
  .rdr-feed-page { --rdr-pad-x: 16px; }
  .rdr-feed-card { padding: 22px; }
  .rdr-cta-btn { width: 100%; justify-content: center; }
  .rdr-legend { gap: 14px; }
  .rdr-section-head-block { margin-bottom: 26px; }
  .rdr-section-heading { font-size: 1.18rem; }
  .rdr-section-eyebrow { font-size: .64rem; padding: 6px 13px; }
}