/* Cyber Armor Systems — Cards / surfaces.  Requires cas-tokens.css.
   A raised surface built entirely from theme tokens, so it flips light/dark for
   free. Surfaces lift via the BORDER, not the fill: the white-on-off-white and
   navy-on-navy-dark steps are only ~1.1:1, so --cas-theme-border is what makes a
   card read as raised — do not thin it. Compose the optional parts as needed:

     <div class="cas-card">
       <div class="cas-card-header">Title</div>
       <div class="cas-card-body"><p>…</p></div>
       <div class="cas-card-footer"><button class="cas-btn cas-btn-primary">Act</button></div>
     </div>

   Put cards in a grid with align-items:stretch (the grid default) and equal-width
   tracks to get equal-height cards across a row. */

.cas-card {
  display: flex;
  flex-direction: column;
  background: var(--cas-theme-surface);
  color: var(--cas-theme-text);
  border: 1px solid var(--cas-theme-border);
  border-radius: var(--cas-radius-md);
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
/* Hover: lift + slightly stronger edge. Cards are often linked (whole-card CTA);
   the affordance is harmless on static cards too. */
.cas-card:hover {
  box-shadow: var(--cas-shadow-md);
  transform: translateY(-2px);
  border-color: var(--cas-theme-text-muted);
}

.cas-card-header {
  padding: var(--cas-space-12) var(--cas-space-16);
  border-bottom: 1px solid var(--cas-theme-border);
  font: 900 var(--cas-text-h5)/1.2 var(--cas-font-heading);
  color: var(--cas-theme-text);
}

/* Body flexes so footers sit at the bottom on equal-height rows. */
.cas-card-body { padding: var(--cas-space-16); flex: 1 1 auto; }
.cas-card-body > :first-child { margin-top: 0; }
.cas-card-body > :last-child  { margin-bottom: 0; }
.cas-card-body p { color: var(--cas-theme-text-body); margin: 0; }

.cas-card-footer {
  padding: var(--cas-space-12) var(--cas-space-16);
  border-top: 1px solid var(--cas-theme-border);
  display: flex;
  gap: var(--cas-space-8);
  align-items: center;
  flex-wrap: wrap;
}

/* Full-bleed media at the top of a card (edge-to-edge under the rounded corners). */
.cas-card-media { display: block; width: 100%; height: auto; }

/* Accent strip variant — a brand top rule for feature/pricing cards. */
.cas-card--accent { border-top: 3px solid var(--cas-theme-accent); }