/* ============================================================
   PROGRAM CARDS — shared "rich" card system
   Used by both the homepage pricing section (#start) and the
   Pricing page (Direction A). Builds on the .door / .door-featured
   / .door-badge / .door-tier base in styles-new.css; adds the
   detail block, footer layout, and the 3-up subgrid that lines
   header / title / body / detail / price / CTA / reassurance up
   across all three cards.
   ============================================================ */

.prog-cards { margin-top: 8px; }
.door-rich {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 32px 30px;
}
.door-rich .door-header { border-bottom: 0; padding-bottom: 10px; }
.door-rich .door-title { font-size: 22px; line-height: 1.22; letter-spacing: -.01em; margin: 0 0 10px; }
.door-rich .door-body { font-size: 15.5px; line-height: 1.55; color: hsl(var(--muted-foreground)); margin: 0; }

.door-detail {
  display: flex; flex-direction: column; gap: 14px;
  margin: 22px 0;
  padding: 20px 0;
  border-top: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
}
.door-detail-row { display: flex; flex-direction: column; gap: 4px; }
.door-detail-k {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.door-detail-v { font-size: 15px; line-height: 1.5; color: hsl(var(--foreground) / .9); }
/* --- Footer: flex fallback (mobile + 2-col), bottom-anchored --- */
.door-rich .door-footer { display: flex; flex-direction: column; margin-top: auto; border-top: 0; padding-top: 18px; }
.door-rich .door-price-row { min-height: 0; margin-bottom: 16px; }
.door-rich .door-price { font-size: 26px; }
.door-rich .door-reassure { min-height: 0; margin-top: 14px; }
.door-rich .door-cta { width: 100%; justify-content: center; }

/* --- 3-up: restore the homepage subgrid so header / title / body / detail /
   price / CTA / reassurance all line up at the same Y across the three cards.
   7 tracks; the footer is a nested subgrid spanning the last 3. align-self:start
   keeps each cell top-anchored, so a short reassurance pill aligns at its top
   instead of stretching into an empty box. --- */
@media (min-width: 1101px) {
  .prog-cards.doors-3 { grid-template-rows: auto auto 1fr auto auto auto auto; }
  .prog-cards .door-rich {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 7;
    row-gap: 20px;
  }
  .prog-cards .door-rich .door-detail { margin: 0; }
  .prog-cards .door-rich .door-footer {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 16px;
    margin-top: 0;
    padding-top: 0;
  }
  .prog-cards .door-rich .door-price-row { align-self: start; margin-bottom: 0; }
  .prog-cards .door-rich .door-cta { align-self: start; }
  .prog-cards .door-rich .door-reassure { align-self: start; margin-top: 0; }
}