/**
 * A.R.C Technology — Cards v6.0
 * "Resilient Orbit" — Thick borders, vibrant accents, bouncy hover lift
 */

/* ===========================
   BASE CARD
   =========================== */
.card {
  background: var(--color-surface);
  border: var(--border-thick) solid var(--color-navy);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  transition: transform var(--transition-base) var(--ease-bounce),
              box-shadow var(--transition-base) var(--ease-bounce),
              border-color var(--transition-base) ease;
  position: relative;
}

.card:hover {
  transform: translateY(-16px);
  box-shadow: var(--shadow-xl);
}

/* ===========================
   SERVICE CARD — vibrant border accents
   =========================== */
.card--service {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
}

/* Align feature lists + buttons to a common baseline across a card row */
.card--service .card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.card--service .card__feature-list {
  margin-top: auto;
}

.card--service:hover { border-color: var(--color-teal-a11y); }

/* Teal variant */
.card--teal { border-color: var(--color-teal-a11y); }
.card--teal:hover { box-shadow: var(--shadow-teal); }

/* Coral variant */
.card--coral { border-color: var(--color-coral-a11y); }
.card--coral:hover { box-shadow: var(--shadow-coral); }

/* Yellow variant */
.card--yellow { border-color: var(--color-yellow); }
.card--yellow:hover { box-shadow: var(--shadow-yellow); }

/* ===========================
   CARD ICON
   =========================== */
.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--color-teal-subtle);
  color: var(--color-on-light-teal);
  flex-shrink: 0;
  transition: background var(--transition-base) var(--ease-bounce),
              transform var(--transition-base) var(--ease-bounce);
}

.card:hover .card__icon { transform: scale(1.1); }

.card__icon--coral { background: var(--color-coral-subtle); color: var(--color-on-light-coral-deep); flex-shrink: 0; }
.card__icon--yellow { background: var(--color-yellow-subtle); color: var(--color-on-light-yellow); flex-shrink: 0; }

/* ===========================
   CARD TITLE & DESC
   =========================== */
.card__tag {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-family: var(--font-display); font-size: var(--fs-label);
  font-weight: var(--font-semibold); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--color-on-light-teal);
}

.card__title,
.card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
  font-weight: var(--font-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}

.card__desc,
.card p {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  flex: 1;
}

.card__link {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: var(--fs-sm); font-weight: var(--font-semibold);
  color: var(--color-link); text-decoration: none;
  transition: gap var(--transition-fast) ease;
  margin-top: auto; padding-top: var(--space-2);
}
.card__link:hover {
  gap: 0.75rem;
  color: var(--color-on-light-teal);
}
.card__link svg { transition: transform var(--transition-base) var(--ease-bounce); }
.card__link:hover svg { transform: translateX(3px); }

/* ===========================
   LINK CARD (anchor tiles)
   =========================== */
.card--link {
  display: flex; flex-direction: column; gap: var(--space-3);
  text-decoration: none; height: 100%;
}
.card--link h3 { margin: 0; }
.card--link p { margin: 0; flex: 1; }
.card--link:hover h3 { color: var(--color-on-light-teal); }

.card__link-indicator {
  display: inline-flex; font-size: var(--fs-sm); font-weight: var(--font-semibold);
  color: var(--color-on-light-teal); margin-top: auto; padding-top: var(--space-1);
}

/* Focus: teal outline fails 3:1 against white — navy ring for link cards (2.4.7 / 2.4.13) */
.card--link:focus-visible {
  outline: 3px solid var(--color-navy);
  outline-offset: 3px;
}

/* ===========================
   FEATURE CARD (icon + text grid)
   =========================== */
.card--feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-5);
  align-items: start;
}

.card--feature .card__icon,
.card--feature .card__feature-icon {
  grid-row: 1 / -1;
  flex-shrink: 0;
}

.card__feature-icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--radius-lg);
  background: var(--color-teal-subtle); color: var(--color-on-light-teal); flex-shrink: 0;
}

.card--feature h3,
.card--feature p,
.card--feature .card__body { grid-column: 2; min-width: 0; }

.card--feature h3 {
  font-family: var(--font-display); font-size: 1.125rem; font-weight: var(--font-bold);
  color: var(--color-text); line-height: var(--leading-snug); margin: 0;
}

.card--feature p {
  font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: 1.7; margin: 0;
}

/* ===========================
   DARK CARD (navy bg)
   =========================== */
.card--dark {
  background: var(--color-navy);
  border-color: var(--color-yellow);
  color: #fff;
}
.card--dark h3,
.card--dark .card__title { color: #fff; }
.card--dark p,
.card--dark .card__desc { color: rgba(255,255,255,0.7); }
.card--dark:hover { border-color: var(--color-teal); box-shadow: var(--shadow-teal); }

/* ===========================
   STAT CARD
   =========================== */
.card--stat {
  text-align: center;
  padding: var(--space-8) var(--space-6);
  border-color: var(--color-teal-a11y);
}
.card--stat .stat__number {
  display: block; font-family: var(--font-display);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-weight: var(--font-bold); color: var(--color-on-light-teal);
  line-height: 1; margin-bottom: var(--space-2); letter-spacing: -0.03em;
}
.card--stat .stat__label {
  font-size: var(--fs-sm); color: var(--color-text-secondary); font-weight: var(--font-medium);
}

/* ===========================
   TEAM CARD
   =========================== */
.card--team { text-align: center; padding: var(--space-8) var(--space-6); }

/* ===========================
   HIGHLIGHTED CARD
   =========================== */
.card--highlighted {
  border-color: var(--color-teal-a11y);
  box-shadow: 0 0 0 2px var(--color-teal-glow);
}

/* ===========================
   ACCENT TOP
   =========================== */
.card--accent-top::before {
  content: ''; position: absolute; top: 0; left: var(--space-8);
  width: 64px; height: 12px; background: var(--color-teal);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* Service card accent color variants */
.card--service:nth-child(3n+2)::before { background: var(--color-yellow); }
.card--service:nth-child(3n)::before { background: var(--color-coral); }

/* ===========================
   CARD CATEGORY LABEL
   =========================== */
.card__category {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-on-light-teal);
  margin-bottom: var(--space-2);
}
.card__category--cyan { color: var(--color-on-light-teal); }
.card__category--purple { color: var(--color-on-light-purple); }
.card__category--green { color: var(--color-on-light-green); }

/* ===========================
   FEATURE ICON COLOR VARIANTS
   =========================== */
.card__feature-icon--cyan,
.card__feature-icon--teal { background: var(--color-teal-subtle); color: var(--color-on-light-teal); flex-shrink: 0; }
.card__feature-icon--coral,
.card__feature-icon--alert { background: var(--color-coral-subtle); color: var(--color-on-light-coral-deep); flex-shrink: 0; }
.card__feature-icon--yellow { background: var(--color-yellow-subtle); color: var(--color-on-light-yellow); flex-shrink: 0; }
.card__feature-icon--purple { background: rgba(167,139,250,0.12); color: var(--color-on-light-purple); flex-shrink: 0; }
.card__feature-icon--green { background: rgba(16,185,129,0.12); color: var(--color-on-light-green); flex-shrink: 0; }

/* ===========================
   CARD BODY (service card inner)
   =========================== */
.card__body { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }