/* ========================================================================== 
   Base Variables and Card Shell
   ========================================================================== */

.Cc-card {
  --Cc-card-bg: linear-gradient(
    135deg,
    rgba(9, 24, 45, 0.96),
    rgba(7, 20, 38, 0.92),
    rgba(4, 11, 24, 0.96)
  );

  --Cc-card-bg-hover: var(--Cc-card-bg);

  --Cc-card-border: linear-gradient(
    135deg,
    rgba(35, 90, 165, 0.75),
    rgba(200, 38, 165, 0.75),
    rgba(253, 172, 6, 0.55)
  );

  --Cc-card-border-hover: var(--Cc-card-border);
  --Cc-card-border-size: 1px;
  --Cc-card-border-size-hover: var(--Cc-card-border-size);
  --Cc-card-radius: 18px;

  --Cc-card-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  --Cc-card-shadow-hover: 0 24px 70px rgba(0, 0, 0, 0.36);

  --Cc-card-title-color: #ffffff;
  --Cc-card-title-color-hover: var(--Cc-card-title-color);
  --Cc-card-title-bg: none;
  --Cc-card-title-bg-hover: var(--Cc-card-title-bg);
  --Cc-card-title-size: 1.5rem;
  --Cc-card-title-weight: 700;

  --Cc-card-text-color: rgba(255, 255, 255, 0.75);
  --Cc-card-text-color-hover: var(--Cc-card-text-color);
  --Cc-card-text-bg: none;
  --Cc-card-text-bg-hover: var(--Cc-card-text-bg);
  --Cc-card-text-size: 1rem;

  --Cc-card-icon-size: 3rem;
  --Cc-card-icon-radius: 16px;
  --Cc-card-icon-bg: rgba(255, 255, 255, 0.08);
  --Cc-card-icon-color: linear-gradient(
    135deg,
    #235aa5,
    #c826a5,
    #fdac06
  );
  --Cc-card-icon-color-hover: var(--Cc-card-icon-color);

  --Cc-card-arrow-color: #235aa5;
  --Cc-card-arrow-color-hover: #fdac06;

  --Cc-card-transform-hover: translateY(-6px);
  --Cc-card-transition-duration: 0.3s;
  --Cc-card-transition-timing: ease;

  position: relative;
  height: 100%;
  border-radius: var(--Cc-card-radius);
  background: var(--Cc-card-bg);
  box-shadow: var(--Cc-card-shadow);
  isolation: isolate;
  overflow: hidden;

  transition:
    transform var(--Cc-card-transition-duration)
      var(--Cc-card-transition-timing),
    box-shadow var(--Cc-card-transition-duration)
      var(--Cc-card-transition-timing),
    background var(--Cc-card-transition-duration)
      var(--Cc-card-transition-timing);
}

/* ========================================================================== 
   Border Layer
   ========================================================================== */

.Cc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: var(--Cc-card-border-size, 1px);
  border-radius: inherit;
  background: var(--Cc-card-border);
  pointer-events: none;
  z-index: 1;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;
  mask-composite: exclude;

  transition:
    padding var(--Cc-card-transition-duration)
      var(--Cc-card-transition-timing),
    background var(--Cc-card-transition-duration)
      var(--Cc-card-transition-timing),
    opacity var(--Cc-card-transition-duration)
      var(--Cc-card-transition-timing);
}

/* ========================================================================== 
   Inner Card Wrapper
   ========================================================================== */

.Cc-card > a,
.Cc-card > .Cc-card__inner {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* ========================================================================== 
   Small Card Layout
   ========================================================================== */

.Cc-small-card > a,
.Cc-small-card > .Cc-card__inner {
  align-items: center;
  gap: 1rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.Cc-small-card h3,
.Cc-small-card p {
  margin: 0;
}

/* ========================================================================== 
   Medium Card Layout
   ========================================================================== */

.Cc-medium-card > a,
.Cc-medium-card > .Cc-card__inner {
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.Cc-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.Cc-medium-card h3,
.Cc-medium-card p {
  margin: 0;
}

/* ========================================================================== 
   Large Card Layout
   ========================================================================== */

.Cc-large-card > a,
.Cc-large-card > .Cc-card__inner {
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.Cc-large-card h3,
.Cc-large-card p {
  margin: 0.5em 0;
}

.Cc-large-card .Cc-card__arrow {
  position: absolute;
  right: 1.25rem;
  bottom: 1.1rem;
  color: var(--Cc-card-arrow-color, currentColor);
}

/* ========================================================================== 
   Shared Content Elements
   ========================================================================== */

.Cc-card h3 {
  font-size: var(--Cc-card-title-size);
  font-weight: var(--Cc-card-title-weight);
  color: var(--Cc-card-title-color);
  background-image: var(--Cc-card-title-bg, none);
  background-clip: text;
  -webkit-background-clip: text;

  transition:
    color var(--Cc-card-transition-duration)
      var(--Cc-card-transition-timing);
}

.Cc-card p {
  font-size: var(--Cc-card-text-size);
  color: var(--Cc-card-text-color);
  background-image: var(--Cc-card-text-bg, none);
  background-clip: text;
  -webkit-background-clip: text;

  transition:
    color var(--Cc-card-transition-duration)
      var(--Cc-card-transition-timing);
}

.Cc-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--Cc-card-icon-size);
  height: var(--Cc-card-icon-size);
  flex: 0 0 auto;
  border-radius: var(--Cc-card-icon-radius);
  background: var(--Cc-card-icon-bg);
  font-size: 1.45rem;

  transition:
    transform var(--Cc-card-transition-duration)
      var(--Cc-card-transition-timing),
    background var(--Cc-card-transition-duration)
      var(--Cc-card-transition-timing);
}

.Cc-card__icon i,
.Cc-card__icon em {
  display: inline-block;
  color: transparent;
  background-image: var(--Cc-card-icon-color);
  background-clip: text;
  -webkit-background-clip: text;
  line-height: 1;

  transition:
    background-image var(--Cc-card-transition-duration)
      var(--Cc-card-transition-timing);
}

.Cc-card__arrow {
  color: var(--Cc-card-arrow-color);

  transition:
    color var(--Cc-card-transition-duration)
      var(--Cc-card-transition-timing),
    transform var(--Cc-card-transition-duration)
      var(--Cc-card-transition-timing);
}

/* ========================================================================== 
   Hover and Preview-Hover States
   ========================================================================== */

.Cc-card:hover,
.Cc-card.cc-preview-hover {
  background: var(--Cc-card-bg-hover);
  box-shadow: var(--Cc-card-shadow-hover);
  transform: var(--Cc-card-transform-hover);
}

.Cc-card:hover::before,
.Cc-card.cc-preview-hover::before {
  padding: var(
    --Cc-card-border-size-hover,
    var(--Cc-card-border-size, 1px)
  );

  background: var(
    --Cc-card-border-hover,
    var(--Cc-card-border)
  );
}

.Cc-card:hover h3,
.Cc-card.cc-preview-hover h3 {
  color: var(
    --Cc-card-title-color-hover,
    var(--Cc-card-title-color)
  );

  background-image: var(
    --Cc-card-title-bg-hover,
    var(--Cc-card-title-bg, none)
  );
}

.Cc-card:hover p,
.Cc-card.cc-preview-hover p {
  color: var(
    --Cc-card-text-color-hover,
    var(--Cc-card-text-color)
  );

  background-image: var(
    --Cc-card-text-bg-hover,
    var(--Cc-card-text-bg, none)
  );
}

.Cc-card:hover .Cc-card__icon,
.Cc-card.cc-preview-hover .Cc-card__icon {
  transform: translateY(-3px);
}

.Cc-card:hover .Cc-card__icon i,
.Cc-card:hover .Cc-card__icon em,
.Cc-card.cc-preview-hover .Cc-card__icon i,
.Cc-card.cc-preview-hover .Cc-card__icon em {
  background-image: var(
    --Cc-card-icon-color-hover,
    var(--Cc-card-icon-color)
  );
}

.Cc-card:hover .Cc-card__arrow,
.Cc-card.cc-preview-hover .Cc-card__arrow {
  color: var(--Cc-card-arrow-color-hover);
  transform: translateX(5px);
}

/* ========================================================================== 
   Temporary Test Preset
   ========================================================================== */

.Cc-dark-stat-card {
  --Cc-card-bg: linear-gradient(
    135deg,
    rgba(9, 24, 45, 0.96) 0%,
    rgba(7, 20, 38, 0.92) 50%,
    rgba(4, 11, 24, 0.96) 100%
  );

  --Cc-card-border: linear-gradient(
    135deg,
    rgba(35, 90, 165, 0.75),
    rgba(200, 38, 165, 0.75),
    rgba(253, 172, 6, 0.55)
  );

  --Cc-card-title-size: 2.5rem;
  --Cc-card-title-color: #ffffff;

  --Cc-card-text-size: 0.95rem;
  --Cc-card-text-color: rgba(255, 255, 255, 0.82);

  --Cc-card-icon-color: linear-gradient(
    135deg,
    rgba(255, 61, 180, 1),
    rgba(253, 172, 6, 1)
  );

  --Cc-card-arrow-color: #235aa5;
  --Cc-card-arrow-color-hover: #fdac06;
}