/**
 * Card Component
 * Unified card system for Clevertech theme
 * 
 * Structure:
 * - Base card styles
 * - Card variants (service, pricing, testimonial, etc.)
 * - Card elements (header, body, footer)
 * - Interactive states
 */

/* ========================================
   Design Tokens
   ======================================== */
:root {
  /* Card Colors */
  --card-bg: #ffffff;
  --card-border: #e1e8ed;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
  --card-overlay: rgba(0, 0, 0, 0.6);
  
  /* Card Spacing */
  --card-padding: 1.5rem;
  --card-padding-sm: 1rem;
  --card-padding-lg: 2rem;
  --card-gap: 1rem;
  --card-radius: 8px;
  
  /* Card Transitions */
  --card-transition: all 0.3s ease;
  --card-transform-hover: translateY(-4px);
  
  /* Service Card Colors */
  --card-ai: #9B59B6;
  --card-cloud: #3498DB;
  --card-automation: #E74C3C;
  --card-data: #1ABC9C;
  --card-security: #34495E;
  --card-webhosting: #F39C12;
}

/* ========================================
   Base Card
   ======================================== */

.card {
  position: relative;
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: var(--card-transition);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: var(--card-transform-hover);
}

/* Card with gradient border effect */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary, #0066cc), var(--color-secondary, #00bfff));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover::before {
  opacity: 1;
}

/* ========================================
   Card Elements
   ======================================== */

/* Card Image */
.card__image {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--color-bg-subtle, #f8f9fa);
}

.card__image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.card:hover .card__image img {
  transform: scale(1.05);
}

/* Card Image Overlay */
.card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--card-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover .card__overlay {
  opacity: 1;
}

/* Card Header */
.card__header {
  padding: var(--card-padding);
  padding-bottom: 0;
}

/* Card Body */
.card__body {
  padding: var(--card-padding);
  flex: 1;
}

/* Card Footer */
.card__footer {
  padding: var(--card-padding);
  padding-top: 0;
  margin-top: auto;
}

/* Card Title */
.card__title {
  font-size: var(--fs-xl, 1.25rem);
  font-weight: var(--fw-semibold, 600);
  margin-bottom: 0.5rem;
  color: var(--color-heading, #1a1a1a);
}

.card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.card__title a:hover {
  color: var(--color-primary, #0066cc);
}

/* Card Subtitle */
.card__subtitle {
  font-size: var(--fs-sm, 0.875rem);
  color: var(--color-text-muted, #666666);
  margin-bottom: 1rem;
}

/* Card Text */
.card__text {
  font-size: var(--fs-base, 1rem);
  line-height: var(--lh-relaxed, 1.6);
  color: var(--color-text, #333333);
}

/* Card Meta */
.card__meta {
  display: flex;
  gap: 1rem;
  font-size: var(--fs-sm, 0.875rem);
  color: var(--color-text-muted, #666666);
}

/* Card Badge */
.card__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.25rem 0.75rem;
  background: var(--color-primary, #0066cc);
  color: white;
  font-size: var(--fs-xs, 0.75rem);
  font-weight: var(--fw-semibold, 600);
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ========================================
   Card Variants
   ======================================== */

/* Service Card */
.card--service {
  border-top: 4px solid transparent;
  padding-top: var(--card-padding);
}

.card--service::before {
  height: 4px;
  background: var(--card-color, var(--color-primary));
  opacity: 1;
}

.card--service:hover {
  border-top-color: var(--card-color, var(--color-primary));
}

/* Service card color variations */
.card--service.ai { --card-color: var(--card-ai); }
.card--service.cloud { --card-color: var(--card-cloud); }
.card--service.automation { --card-color: var(--card-automation); }
.card--service.data { --card-color: var(--card-data); }
.card--service.security { --card-color: var(--card-security); }
.card--service.webhosting { --card-color: var(--card-webhosting); }

/* Pricing Card */
.card--pricing {
  text-align: center;
  padding: var(--card-padding-lg);
  position: relative;
}

.card--pricing.featured {
  border: 2px solid var(--color-primary, #0066cc);
  transform: scale(1.05);
}

.card--pricing.featured::after {
  content: "POPULAIR";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 1rem;
  background: var(--color-primary, #0066cc);
  color: white;
  font-size: var(--fs-xs, 0.75rem);
  font-weight: var(--fw-bold, 700);
  border-radius: 20px;
}

.card--pricing .price {
  font-size: var(--fs-3xl, 2.5rem);
  font-weight: var(--fw-bold, 700);
  color: var(--color-primary, #0066cc);
  margin: 1rem 0;
}

.card--pricing .price-currency {
  font-size: var(--fs-lg, 1.125rem);
  vertical-align: super;
}

.card--pricing .price-period {
  font-size: var(--fs-base, 1rem);
  color: var(--color-text-muted, #666666);
}

/* Testimonial Card */
.card--testimonial {
  padding: var(--card-padding-lg);
  background: var(--color-bg-subtle, #f8f9fa);
  border: none;
  box-shadow: none;
}

.card--testimonial::before {
  content: """;
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 4rem;
  color: var(--color-primary, #0066cc);
  opacity: 0.1;
  font-weight: var(--fw-bold, 700);
}

.card--testimonial .quote {
  font-style: italic;
  font-size: var(--fs-lg, 1.125rem);
  line-height: var(--lh-loose, 1.8);
  margin-bottom: 1.5rem;
}

.card--testimonial .author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.card--testimonial .author-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}

.card--testimonial .author-name {
  font-weight: var(--fw-semibold, 600);
  color: var(--color-heading, #1a1a1a);
}

.card--testimonial .author-title {
  font-size: var(--fs-sm, 0.875rem);
  color: var(--color-text-muted, #666666);
}

/* Case Study Card */
.card--case-study {
  overflow: hidden;
}

.card--case-study .card__image {
  height: 200px;
  background-size: cover;
  background-position: center;
}

.card--case-study .metrics {
  display: flex;
  gap: 1.5rem;
  padding: 1rem;
  background: var(--color-bg-subtle, #f8f9fa);
  border-top: 1px solid var(--card-border);
}

.card--case-study .metric {
  text-align: center;
  flex: 1;
}

.card--case-study .metric-value {
  font-size: var(--fs-xl, 1.25rem);
  font-weight: var(--fw-bold, 700);
  color: var(--color-primary, #0066cc);
}

.card--case-study .metric-label {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-text-muted, #666666);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Blog Post Card */
.card--blog {
  transition: all 0.3s ease;
}

.card--blog .category {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: var(--color-primary, #0066cc);
  color: white;
  font-size: var(--fs-xs, 0.75rem);
  font-weight: var(--fw-semibold, 600);
  text-transform: uppercase;
  border-radius: 3px;
  margin-bottom: 0.5rem;
}

.card--blog .read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-primary, #0066cc);
  font-weight: var(--fw-semibold, 600);
  text-decoration: none;
  transition: gap 0.2s ease;
}

.card--blog .read-more:hover {
  gap: 0.75rem;
}

.card--blog .read-more::after {
  content: "→";
  transition: transform 0.2s ease;
}

.card--blog:hover .read-more::after {
  transform: translateX(3px);
}

/* Feature Card */
.card--feature {
  text-align: center;
  padding: var(--card-padding-lg);
  border: 1px solid var(--card-border);
  box-shadow: none;
}

.card--feature:hover {
  border-color: var(--color-primary, #0066cc);
  box-shadow: var(--card-shadow);
}

.card--feature .icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary, #0066cc);
  color: white;
  border-radius: 50%;
  font-size: 1.5rem;
}

/* ========================================
   Card Sizes
   ======================================== */

.card--sm {
  padding: var(--card-padding-sm);
}

.card--sm .card__body {
  padding: var(--card-padding-sm);
}

.card--lg {
  padding: var(--card-padding-lg);
}

.card--lg .card__body {
  padding: var(--card-padding-lg);
}

/* ========================================
   Card Grid
   ======================================== */

.card-grid {
  display: grid;
  gap: var(--gap-lg, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.card-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* ========================================
   WordPress Compatibility
   ======================================== */

/* WordPress Block Compatibility */
.wp-block-column .card {
  height: 100%;
}

.wp-block-group.card {
  /* Inherits card styles */
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
  
  .card--pricing.featured {
    transform: none;
  }
  
  .card__meta {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* ========================================
   Migration Helpers
   ======================================== */

/* Map old card classes during migration */
.service-card,
.pricing-card,
.testimonial-card,
.case-study-card,
.blog-post-card,
.feature-card,
.result-card,
.resource-card,
.job-card,
.tech-partner-card,
.industry-card,
.metric-card {
  /* Will inherit from .card with appropriate variant */
}