/*
 * rdx-cards.css
 * ───────────────────────────────────────────────────────────────────
 * Shared card style for ReasonDx selection menus across browse,
 * dashboard, index, welcome, casedx, CoachDx, and the new daily
 * picks hero. Implements the "Prototype D" hybrid visual language:
 *
 *   - Serif headlines (Cormorant Garamond) for case stems so the
 *     card reads as content, not a database row
 *   - 3px left border in acuity green / blue / red as the only
 *     color signal (replaces tag pills)
 *   - Small uppercase eyebrow label above headline with a status dot
 *   - Single category text + Start button in a thin-bordered footer
 *   - Featured cards get a full blue border + "For you" tab
 *   - Restrained palette, no shadows, no gradients
 *
 * Usage:
 *   <link rel="stylesheet" href="/css/rdx-cards.css">
 *   <div class="rdx-cards-grid">
 *     <a class="rdx-card" data-acuity="2" href="...">
 *       <div class="rdx-card-eyebrow">
 *         <span class="rdx-card-eyebrow-dot"></span>
 *         <span class="rdx-card-eyebrow-label">Today's pick</span>
 *         <span class="rdx-card-eyebrow-meta">15 min</span>
 *       </div>
 *       <h3 class="rdx-card-headline">A 52-year-old with...</h3>
 *       <p class="rdx-card-teaser">BP differs between arms...</p>
 *       <div class="rdx-card-footer">
 *         <span class="rdx-card-cat">Cardiovascular</span>
 *         <span class="rdx-card-cta">Start →</span>
 *       </div>
 *     </a>
 *   </div>
 *
 * Acuity:
 *   data-acuity="1"  Critical (red)
 *   data-acuity="2"  Urgent (orange — used in the catalog grid only;
 *                    the hero collapses 1+2 into red)
 *   data-acuity="3"  Routine (green)
 *   data-acuity="4"  Routine (green)
 *   data-acuity="5"  Routine (green)
 *
 * Featured: add the rdx-card--featured class.
 */

/* Cormorant for serif headlines. Loaded once per page via this CSS. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&display=swap');

/* ── Grid container ──────────────────────────────────────────────── */
.rdx-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px;
  padding: 0;
}

/* Hero variant: 3 equal columns at desktop, stacks on mobile */
.rdx-cards-grid--hero {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Catalog variant: denser cards for the 520-case browse grid */
.rdx-cards-grid--catalog {
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 10px;
}

@media (max-width: 880px) {
  .rdx-cards-grid--hero {
    grid-template-columns: 1fr;
  }
}

/* ── Card ────────────────────────────────────────────────────────── */
.rdx-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fff;
  border: 0.5px solid #E2E8F0;
  border-left: 3px solid #94A3B8; /* default; overridden by data-acuity */
  border-radius: 0; /* sharp on the bordered side; clean on others */
  padding: 16px 18px 14px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  min-height: 220px;
  font-family: 'DM Sans', -apple-system, sans-serif;
}

.rdx-card:hover {
  border-color: #94A3B8;
  box-shadow: 0 2px 12px rgba(15,23,42,.06);
  transform: translateY(-1px);
}

.rdx-card:focus-visible {
  outline: 2px solid #2874A6;
  outline-offset: 2px;
}

/* Hero-sized cards have more breathing room */
.rdx-cards-grid--hero .rdx-card {
  min-height: 248px;
  padding: 18px 20px 16px;
}

/* Catalog cards are tighter */
.rdx-cards-grid--catalog .rdx-card {
  min-height: 168px;
  padding: 14px 16px 12px;
}

/* ── Acuity left border colors ──────────────────────────────────── */
.rdx-card[data-acuity="1"] { border-left-color: #A32D2D; }   /* critical red */
.rdx-card[data-acuity="2"] { border-left-color: #BA7517; }   /* urgent amber */
.rdx-card[data-acuity="3"] { border-left-color: #185FA5; }   /* moderate blue */
.rdx-card[data-acuity="4"] { border-left-color: #639922; }   /* routine green */
.rdx-card[data-acuity="5"] { border-left-color: #639922; }   /* routine green */

/* ── Featured card: full blue border + small ribbon ──────────────── */
.rdx-card--featured {
  border: 0.5px solid #185FA5;
  border-left-color: #185FA5; /* override acuity so featured reads featured */
}

.rdx-card--featured::before {
  content: 'For you';
  position: absolute;
  top: -1px;
  right: 18px;
  background: #185FA5;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px 4px;
  border-radius: 0 0 4px 4px;
}

/* ── Eyebrow row (status dot + label + right-aligned meta) ──────── */
.rdx-card-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.rdx-card-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94A3B8; /* default; matches acuity color */
  flex-shrink: 0;
}

.rdx-card[data-acuity="1"] .rdx-card-eyebrow-dot { background: #A32D2D; }
.rdx-card[data-acuity="2"] .rdx-card-eyebrow-dot { background: #BA7517; }
.rdx-card[data-acuity="3"] .rdx-card-eyebrow-dot { background: #185FA5; }
.rdx-card[data-acuity="4"] .rdx-card-eyebrow-dot,
.rdx-card[data-acuity="5"] .rdx-card-eyebrow-dot { background: #639922; }

.rdx-card-eyebrow-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #475569;
}

.rdx-card[data-acuity="1"] .rdx-card-eyebrow-label { color: #791F1F; }
.rdx-card[data-acuity="2"] .rdx-card-eyebrow-label { color: #854F0B; }
.rdx-card[data-acuity="3"] .rdx-card-eyebrow-label { color: #0C447C; }
.rdx-card[data-acuity="4"] .rdx-card-eyebrow-label,
.rdx-card[data-acuity="5"] .rdx-card-eyebrow-label { color: #3B6D11; }

.rdx-card-eyebrow-meta {
  font-size: 10px;
  color: #94A3B8;
  margin-left: auto;
  font-weight: 500;
}

/* ── Headline (the case stem — serif) ───────────────────────────── */
.rdx-card-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  color: #1E293B;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}

.rdx-cards-grid--hero .rdx-card-headline { font-size: 18px; }
.rdx-cards-grid--hero .rdx-card--featured .rdx-card-headline { font-size: 20px; }
.rdx-cards-grid--catalog .rdx-card-headline { font-size: 16px; line-height: 1.28; }

/* ── Teaser (one-line subtitle in DM Sans) ──────────────────────── */
.rdx-card-teaser {
  font-size: 12px;
  line-height: 1.55;
  color: #64748B;
  margin: 0 0 12px;
  font-weight: 400;
}

.rdx-cards-grid--catalog .rdx-card-teaser {
  font-size: 11.5px;
  margin-bottom: 10px;
}

/* ── Footer (category + Start button, separated by thin rule) ───── */
.rdx-card-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 0.5px solid #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rdx-card-cat {
  font-size: 11px;
  color: #94A3B8;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rdx-card-cta {
  font-size: 12px;
  font-weight: 600;
  color: #1E293B;
  border: 0.5px solid #CBD5E1;
  padding: 5px 12px;
  border-radius: 6px;
  background: transparent;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .12s, border-color .12s;
  font-family: inherit;
}

.rdx-card:hover .rdx-card-cta {
  background: #F8FAFC;
  border-color: #94A3B8;
}

/* Featured card gets a filled blue button */
.rdx-card--featured .rdx-card-cta {
  background: #185FA5;
  color: #fff;
  border-color: #185FA5;
}

.rdx-card--featured:hover .rdx-card-cta {
  background: #0C447C;
  border-color: #0C447C;
}

/* ── Done state (completed case) ────────────────────────────────── */
.rdx-card--done {
  position: relative;
}

.rdx-card--done::after {
  content: '✓ Done';
  position: absolute;
  top: 8px;
  right: 8px;
  background: #047857;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 8px;
  z-index: 2;
}

/* ── Section header above a card grid ───────────────────────────── */
.rdx-cards-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 14px;
  gap: 12px;
  flex-wrap: wrap;
}

.rdx-cards-section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: #1E293B;
  margin: 0 0 2px;
}

.rdx-cards-section-sub {
  font-size: 12px;
  color: #64748B;
  margin: 0;
}

.rdx-cards-section-meta {
  font-size: 12px;
  color: #94A3B8;
  font-weight: 500;
  margin-left: auto;
}

/* ── Bottom strip: Browse all + Search the library ──────────────── */
.rdx-cards-doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

@media (max-width: 640px) {
  .rdx-cards-doors { grid-template-columns: 1fr; }
}

.rdx-cards-door {
  background: #F8FAFC;
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-decoration: none;
  color: #1E293B;
  cursor: pointer;
  border: 0.5px solid transparent;
  transition: background .12s, border-color .12s;
}

.rdx-cards-door:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
}

.rdx-cards-door-text-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
  color: #1E293B;
}

.rdx-cards-door-text-sub {
  font-size: 11px;
  color: #64748B;
  font-weight: 400;
}

.rdx-cards-door-arrow {
  width: 16px;
  height: 16px;
  color: #94A3B8;
  flex-shrink: 0;
}

/* ── In-progress card (shown on dashboard) ──────────────────────── */
.rdx-card--inprogress {
  border-left-color: #F59E0B; /* amber */
  background: linear-gradient(to right, #FFFBEB 0%, #fff 60px);
}

.rdx-card--inprogress .rdx-card-eyebrow-dot { background: #F59E0B; }
.rdx-card--inprogress .rdx-card-eyebrow-label { color: #92400E; }