/* ====================================
   Component Styles
   Cards, Pillars, Interactive Elements
   ==================================== */

/* ==================
   Pillar Cards
   ================== */

.pillar-card {
  padding: var(--card-padding);
  background: var(--card-background);
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-border-radius);
  transition: all var(--duration-normal) var(--ease-smooth);
  text-align: center;
}

.pillar-card__icon {
  width: 36px;
  height: 36px;
  color: var(--color-brand-mid);
  margin: 0 auto var(--spacing-md);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 12px rgba(63, 207, 245, 0.3));
  transition: all var(--duration-normal) var(--ease-smooth);
}

.pillar-card__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-sm);
  transition: color var(--duration-normal) var(--ease-smooth);
}

.pillar-card__number {
  font-family: var(--font-heading);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  opacity: 0.4;
  margin-right: 0.75rem;
  letter-spacing: 0.1em;
}

.pillar-card__description {
  font-family: var(--font-body);
  font-size: var(--font-size-body-large);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-loose);
  color: var(--color-text-inverse);
  margin-bottom: var(--spacing-sm);
}

.pillar-card__detail {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-light);
  font-style: italic;
  color: var(--color-text-secondary);
  opacity: 0.6;
  margin-top: var(--spacing-sm);
}

/* Hover Effects - Desktop Only */
@media (min-width: 1024px) {
  .pillar-card:hover {
    border-color: var(--color-brand-mid);
    background: rgba(0, 170, 215, 0.05);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 170, 215, 0.15);
  }

  .pillar-card:hover .pillar-card__icon {
    color: var(--color-brand-light);
    filter: drop-shadow(0 0 16px rgba(63, 207, 245, 0.5));
  }

  .pillar-card:hover .pillar-card__title {
    color: var(--color-brand-mid);
  }

  .pillar-card:hover .pillar-card__detail {
    opacity: 0.8;
    color: var(--color-brand-light);
  }
}

/* Focus State for Accessibility */
.pillar-card:focus-within {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 4px;
}

/* ==================
   Responsive Components
   ================== */

/* Mobile */
@media (max-width: 639px) {
  .pillar-card {
    padding: var(--card-padding-mobile);
  }

  .pillar-card__title {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  }

  .pillar-card__description {
    font-size: var(--font-size-body);
  }
}
