/* ============================================================
   _cards.css — Cards
   .card .card-glass .card-dark .card-bordered .card-primary
   + Bulma: .card .card-header .card-content .card-footer
   ============================================================ */

/* ── Base card ── */
.card {
  border-radius: var(--radius-md);
  background: var(--color-primary-opacity);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
  transition: all var(--ease);
}

/* ── Variants ── */
.card-glass {
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: var(--space-5);
  transition: all var(--ease);
}
.card-glass:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: var(--shadow-glow);
}

.card-dark {
  border-radius: var(--radius-md);
  background: var(--color-dark-secondary);
  border: 1px solid var(--color-neutral-700);
  padding: var(--space-5);
}

.card-bordered {
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid var(--color-neutral-600);
  padding: var(--space-5);
}
.card-bordered-primary {
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid var(--color-primary);
  padding: var(--space-5);
  box-shadow: 0 0 20px var(--color-primary-shadow);
}
.card-bordered-accent {
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid var(--color-accent);
  padding: var(--space-5);
  box-shadow: var(--shadow-accent);
}

.card-primary {
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(0,0,0,0.38) -17.54%, rgba(0,0,0,0.38) 114.47%);
  border: 1px solid rgba(255, 255, 255, 0.735);
  padding: var(--space-5) var(--space-8);
  box-shadow: 0 0 20px rgba(255,255,255,0.3), 0 0 40px var(--color-primary-shadow);
  backdrop-filter: blur(3px);
  max-width: 600px;
  width: 100%;
  margin: var(--space-8) auto;
}

.card-gradient {
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-primary) -17.54%, rgba(20,161,255,0.56) 114.47%);
  padding: var(--space-5);
  width: 100%;
}

.card-glow {
  border-radius: var(--radius-md);
  background: var(--color-dark-secondary);
  border: 1px solid var(--color-primary);
  padding: var(--space-5);
  box-shadow: 0 0 15px var(--color-primary-shadow), 0 0 30px rgba(20,160,255,0.1);
  transition: all var(--ease);
}
.card-glow:hover {
  box-shadow: 0 0 25px var(--color-primary-shadow), 0 0 50px rgba(20,160,255,0.2);
  transform: translateY(-3px);
}

/* ── Bulma-style card ── */
.card-bulma {
  background: var(--color-dark-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.card-bulma .card-header {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--color-neutral-700);
  padding: var(--space-4);
}
.card-bulma .card-header-title {
  font-size: var(--fs-base);
  font-weight: 700;
  flex: 1;
}
.card-bulma .card-header-icon {
  cursor: pointer;
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-bulma .card-image img {
  width: 100%;
  display: block;
  object-fit: cover;
}
.card-bulma .card-content {
  padding: var(--space-5);
}
.card-bulma .card-footer {
  display: flex;
  border-top: 1px solid var(--color-neutral-700);
}
.card-bulma .card-footer-item {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--color-neutral-700);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: background var(--ease);
}
.card-bulma .card-footer-item:last-child { border-right: none; }
.card-bulma .card-footer-item:hover { background: rgba(255,255,255,0.04); }

/* ── Box (Bulma) ── */
.box {
  background: var(--color-dark-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}
.box-glass {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  border: 1px solid rgba(255,255,255,0.1);
}

/* ── Card list ── */
.card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}

/* ── Text styles inside cards ── */
.card-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-light);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.card-subtitle {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
}
.card-text {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--color-light);
  text-transform: uppercase;
}

/* ── Image-on-top card ── */
.card-media {
  border-radius: var(--radius-lg);
  background: var(--color-primary-opacity);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-neutral-600) 25%, transparent);
  display: flex;
  flex-direction: column;
}
.card-media-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.card-media-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-media-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}
.card-media-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-light);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}
.card-media-text {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  flex: 1;
  margin-bottom: var(--space-4);
}

/* ── Cover card — image fills entire card, content overlays bottom ── */
.card-cover {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
}
.card-cover-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}
.card-cover:hover .card-cover-bg { transform: scale(1.05); }
.card-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 55%, transparent 100%);
  z-index: 1;
}
.card-cover-body {
  position: relative;
  z-index: 2;
  padding: var(--space-5);
  width: 100%;
}
.card-cover-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--space-1);
}
.card-cover-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-1);
}
.card-cover-text {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.75);
}

/* ── Gradient card variants ── */
.card-gradient-purple  { border-radius: var(--radius-lg); background: linear-gradient(135deg,#667eea,#764ba2); padding: var(--space-5); color: #fff; }
.card-gradient-sunset  { border-radius: var(--radius-lg); background: linear-gradient(135deg,#f093fb,#f5576c); padding: var(--space-5); color: #fff; }
.card-gradient-ocean   { border-radius: var(--radius-lg); background: linear-gradient(135deg,#4facfe,#00f2fe); padding: var(--space-5); color: #fff; }
.card-gradient-emerald { border-radius: var(--radius-lg); background: linear-gradient(135deg,#43e97b,#38f9d7); padding: var(--space-5); color: #fff; }
.card-gradient-fire    { border-radius: var(--radius-lg); background: linear-gradient(135deg,#f7971e,#ffd200); padding: var(--space-5); color: #fff; }
.card-gradient-purple .card-title,
.card-gradient-sunset .card-title,
.card-gradient-ocean .card-title,
.card-gradient-emerald .card-title,
.card-gradient-fire .card-title { color: #fff; }

/* ── Shadow variants ── */
.card-shadow-sm  { border-radius: var(--radius-md); background: var(--color-primary-opacity); padding: var(--space-5); box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.card-shadow-md  { border-radius: var(--radius-md); background: var(--color-primary-opacity); padding: var(--space-5); box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.2); }
.card-shadow-lg  { border-radius: var(--radius-md); background: var(--color-primary-opacity); padding: var(--space-5); box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3); }
.card-shadow-primary { border-radius: var(--radius-md); background: var(--color-primary-opacity); padding: var(--space-5); box-shadow: 0 6px 28px color-mix(in srgb,var(--color-primary) 40%,transparent); border: 1px solid color-mix(in srgb,var(--color-primary) 25%,transparent); }
.card-shadow-accent  { border-radius: var(--radius-md); background: var(--color-primary-opacity); padding: var(--space-5); box-shadow: 0 6px 28px color-mix(in srgb,var(--color-accent) 40%,transparent); border: 1px solid color-mix(in srgb,var(--color-accent) 25%,transparent); }

/* ── Horizontal card ── */
.card-horizontal {
  border-radius: var(--radius-lg);
  background: var(--color-primary-opacity);
  border: 1px solid color-mix(in srgb, var(--color-neutral-600) 25%, transparent);
  overflow: hidden;
  display: flex;
}
.card-h-img {
  width: 110px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: var(--color-dark-secondary);
}
.card-h-body {
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
}
.card-h-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-light);
}
.card-h-text { font-size: var(--fs-sm); color: var(--color-muted); }

/* ── Stat / Metric card ── */
.card-stat {
  border-radius: var(--radius-md);
  background: var(--color-primary-opacity);
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--color-neutral-600) 25%, transparent);
}
.card-stat-icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-3);
}
.card-stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-light);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.card-stat-label {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  font-weight: 500;
}
.card-stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  margin-top: var(--space-2);
  padding: 2px 8px;
  border-radius: 20px;
}
.card-stat-trend.up   { color: var(--color-success); background: color-mix(in srgb,var(--color-success) 12%,transparent); }
.card-stat-trend.down { color: var(--color-error);   background: color-mix(in srgb,var(--color-error)   12%,transparent); }

/* Backward compatibility */
.card-regular-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-5);
}
.card-regular {
  background: linear-gradient(180deg, var(--color-primary) -17.54%, rgba(20,161,255,0.56) 114.47%);
  border-radius: var(--radius-lg);
  width: 100%;
  padding: var(--space-5);
}

/* ── Color Glow Cards (dark base + radial color overlay) ── */
.card-bg-primary,
.card-bg-accent,
.card-bg-success,
.card-bg-error,
.card-bg-warning,
.card-bg-dark,
.card-bg-light {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
}
.card-bg-primary::before,
.card-bg-accent::before,
.card-bg-success::before,
.card-bg-error::before,
.card-bg-warning::before,
.card-bg-dark::before,
.card-bg-light::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 25%, var(--_glow-color) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.card-bg-primary > *,
.card-bg-accent > *,
.card-bg-success > *,
.card-bg-error > *,
.card-bg-warning > *,
.card-bg-dark > *,
.card-bg-light > * { position: relative; z-index: 1; }

.card-bg-primary {
  background: linear-gradient(135deg, #001020 0%, #001e3c 100%);
  border-color: color-mix(in srgb, var(--color-primary) 28%, transparent);
  --_glow-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.card-bg-accent {
  background: linear-gradient(135deg, #1a0008 0%, #350010 100%);
  border-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
  --_glow-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.card-bg-success {
  background: linear-gradient(135deg, #001a0c 0%, #003018 100%);
  border-color: color-mix(in srgb, var(--color-success) 28%, transparent);
  --_glow-color: color-mix(in srgb, var(--color-success) 22%, transparent);
}
.card-bg-error {
  background: linear-gradient(135deg, #1a0008 0%, #340010 100%);
  border-color: color-mix(in srgb, var(--color-error) 28%, transparent);
  --_glow-color: color-mix(in srgb, var(--color-error) 22%, transparent);
}
.card-bg-warning {
  background: linear-gradient(135deg, #1a1000 0%, #302000 100%);
  border-color: color-mix(in srgb, var(--color-warning) 28%, transparent);
  --_glow-color: color-mix(in srgb, var(--color-warning) 22%, transparent);
}
.card-bg-dark {
  background: linear-gradient(135deg, #050505 0%, #111114 100%);
  border-color: rgba(255,255,255,0.07);
  --_glow-color: rgba(255,255,255,0.05);
}
.card-bg-light {
  background: linear-gradient(135deg, #ffffff 0%, #e8eef5 100%);
  border-color: rgba(0,0,0,0.09);
  --_glow-color: rgba(100,140,255,0.12);
}

/* ============================================================
   GRADIENT EFFECT CARDS — hover/shine/outline/aura
   Pattern: .card-gradient-hover .card-gradient-hover-{color}
   ============================================================ */

/* ── Gradient Hover — gradient washes in on hover ── */
.card-gradient-hover {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--card-gc1, var(--color-primary)) 20%, transparent);
  background: var(--bg-secondary);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card-gradient-hover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--card-gc1, var(--color-primary)), var(--card-gc2, var(--color-accent)));
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
}
.card-gradient-hover > * { position: relative; z-index: 1; }
.card-gradient-hover:hover::before { opacity: 0.13; }
.card-gradient-hover:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--card-gc1, var(--color-primary)) 55%, transparent);
  box-shadow: 0 14px 40px color-mix(in srgb, var(--card-gc1, var(--color-primary)) 22%, transparent);
}

.card-gradient-hover-primary {
  --card-gc1: var(--color-primary);
  --card-gc2: color-mix(in oklch, var(--color-primary) 65%, #fff);
}
.card-gradient-hover-accent {
  --card-gc1: var(--color-accent);
  --card-gc2: var(--color-primary);
}
.card-gradient-hover-success {
  --card-gc1: var(--color-success);
  --card-gc2: var(--color-primary);
}
.card-gradient-hover-error {
  --card-gc1: var(--color-error);
  --card-gc2: var(--color-accent);
}
.card-gradient-hover-fire {
  --card-gc1: var(--color-error);
  --card-gc2: var(--color-warning);
}
.card-gradient-hover-ocean {
  --card-gc1: var(--color-primary);
  --card-gc2: var(--color-accent);
}
.card-gradient-hover-sunset {
  --card-gc1: #ff6b35;
  --card-gc2: #ff2d7c;
}
.card-gradient-hover-aurora {
  --card-gc1: #00c6ff;
  --card-gc2: #a855f7;
}

/* ── Shine Cards — gradient + sweep animation ── */
.card-shine {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(to right, var(--card-gc1, var(--color-primary)), var(--card-gc2, var(--color-accent)));
  border: none;
  overflow: hidden;
  color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
.card-shine::after {
  content: "";
  position: absolute;
  top: -50%; left: -75%;
  width: 50%; height: 200%;
  background: linear-gradient(120deg, transparent 0%, color-mix(in srgb, #fff 22%, transparent) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: shineSweep 4.5s ease-in-out infinite;
}
.card-shine:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--card-gc1, var(--color-primary)) 32%, transparent);
  filter: brightness(1.1) saturate(1.1);
}

.card-shine-primary { --card-gc1: var(--color-primary); --card-gc2: color-mix(in oklch, var(--color-primary) 65%, #fff); }
.card-shine-accent  { --card-gc1: var(--color-accent);  --card-gc2: var(--color-primary); }
.card-shine-fire    { --card-gc1: var(--color-error);   --card-gc2: var(--color-warning); }
.card-shine-ocean   { --card-gc1: var(--color-primary); --card-gc2: var(--color-accent); }
.card-shine-sunset  { --card-gc1: #ff6b35; --card-gc2: #ff2d7c; }
.card-shine-aurora  { --card-gc1: #00c6ff; --card-gc2: #a855f7; }
.card-shine-cosmic  { --card-gc1: #7c3aed; --card-gc2: #c026d3; }

/* ── Outline Gradient Cards — animated gradient border ── */
.card-outline-gradient {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  border: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-outline-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--card-og1, var(--color-primary)), var(--card-og2, var(--color-accent)), var(--card-og1, var(--color-primary)));
  background-size: 200% 200%;
  animation: shineShift 3.5s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.card-outline-gradient:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--card-og1, var(--color-primary)) 20%, transparent);
}

.card-outline-gradient-primary { --card-og1: var(--color-primary); --card-og2: color-mix(in oklch, var(--color-primary) 65%, #fff); }
.card-outline-gradient-accent  { --card-og1: var(--color-accent);  --card-og2: var(--color-primary); }
.card-outline-gradient-fire    { --card-og1: var(--color-error);   --card-og2: var(--color-warning); }
.card-outline-gradient-ocean   { --card-og1: var(--color-primary); --card-og2: var(--color-accent); }
.card-outline-gradient-sunset  { --card-og1: #ff6b35; --card-og2: #ff2d7c; }
.card-outline-gradient-aurora  { --card-og1: #00c6ff; --card-og2: #a855f7; }
.card-outline-gradient-cosmic  { --card-og1: #7c3aed; --card-og2: #c026d3; }

/* ── Aura Cards — glow halo blooms on hover ── */
.card-aura {
  position: relative;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--card-aura-bg, var(--bg-secondary));
  z-index: 1;
  transition: transform 0.35s ease, filter 0.35s ease;
}
.card-aura::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: calc(var(--radius-lg) + 10px);
  background: var(--card-aura-glow, linear-gradient(135deg, var(--color-primary), var(--color-accent)));
  filter: blur(20px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s ease;
}
.card-aura:hover::before { opacity: 0.65; }
.card-aura:hover { transform: translateY(-6px); filter: brightness(1.06); }

.card-aura-primary {
  --card-aura-bg: var(--bg-secondary);
  --card-aura-glow: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}
.card-aura-sunset {
  --card-aura-bg: linear-gradient(160deg, #1a0800, #2a0e00);
  --card-aura-glow: linear-gradient(135deg, #ff6b35, #ff2d7c);
}
.card-aura-aurora {
  --card-aura-bg: linear-gradient(160deg, #000d1a, #0a1626);
  --card-aura-glow: linear-gradient(135deg, #00c6ff, #a855f7);
}
.card-aura-cosmic {
  --card-aura-bg: linear-gradient(160deg, #0d0014, #160024);
  --card-aura-glow: linear-gradient(135deg, #7c3aed, #c026d3);
}
.card-aura-gold {
  --card-aura-bg: linear-gradient(160deg, #110e00, #1e1800);
  --card-aura-glow: linear-gradient(135deg, #f59e0b, #fbbf24);
}
.card-aura-ocean {
  --card-aura-bg: linear-gradient(160deg, #00101a, #001c2e);
  --card-aura-glow: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}