/**
 * Bengal SSG Default Theme
 * Card Components
 */

/* ============================================
   BASE CARD
   ============================================ */

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all var(--transition-base) var(--ease-out);
}

/* When card is a link, remove underlines */
a.card {
  text-decoration: none;
  color: inherit;
}

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

/* ============================================
   CARD PARTS
   ============================================ */

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
}

.card-body {
  flex: 1;
  padding: var(--space-6);
}

/* Card body text styling (description content) */
.card-body p,
.card-content p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0.5rem 0;
}

.card-body p:first-child,
.card-content p:first-child {
  margin-top: 0;
}

.card-body p:last-child,
.card-content p:last-child {
  margin-bottom: 0;
}

/* List styling in card bodies */
.card-body ul,
.card-body ol {
  padding-left: var(--space-8);
  margin: var(--space-3) 0;
}

.card-body ul {
  list-style-type: disc;
}

.card-body ol {
  list-style-type: decimal;
}

.card-body li {
  margin: var(--space-1) 0;
}

.card-footer {
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--color-border-light);
  background-color: var(--color-bg-secondary);
}

/* ============================================
   CARD CONTENT
   ============================================ */

.card-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  /* Not a semantic heading, just styled text */
  flex: 1;
  /* Ensure text wraps nicely next to icon */
  min-width: 0;
}

.card-title a {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--transition-fast) var(--ease-out);
}

.card-title a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.card-text {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.card-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ============================================
   ARTICLE CARD (Blog Posts)
   ============================================ */

.article-card {
  display: block;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: all var(--transition-base) var(--ease-out);
}

.article-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--color-primary);
}

.article-card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.article-card-content {
  padding: var(--space-6);
}

.article-card-title {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
}

.article-card-excerpt {
  margin: 0 0 var(--space-4) 0;
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.article-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.article-card-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-light);
  background-color: var(--color-bg-secondary);
}

/* ============================================
   CARD VARIANTS
   ============================================ */

.card-flat {
  border: none;
  box-shadow: none;
  background-color: transparent;
}

.card-flat:hover {
  box-shadow: none;
  transform: none;
}

.card-horizontal {
  flex-direction: row;
}

.card-horizontal .card-image {
  width: 200px;
  height: auto;
}

@media (max-width: 767px) {
  .card-horizontal {
    flex-direction: column;
  }

  .card-horizontal .card-image {
    width: 100%;
    height: 200px;
  }
}

/* ============================================
   FEATURE CARD (Icon + Content)
   ============================================ */

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-large);
  box-shadow: var(--elevation-card);
  transition: all var(--transition-base);
  height: 100%;
}

.feature-card:hover {
  box-shadow: var(--elevation-card-hover);
  transform: translateY(-2px);
}

.feature-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--border-radius-medium);
  flex-shrink: 0;
}

[data-theme="dark"] .feature-card__icon {
  background: rgba(33, 150, 243, 0.15);
}

.feature-card__icon svg {
  width: 32px;
  height: 32px;
}

.feature-card__title {
  margin: 0;
  font-size: var(--text-heading-5);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.feature-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.feature-card__title a:hover {
  color: var(--color-primary);
}

.feature-card__description {
  margin: 0;
  font-size: var(--text-body-small);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.feature-card__action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  text-decoration: none;
  transition: all var(--transition-fast);
  margin-top: auto;
}

.feature-card__action:hover {
  color: var(--color-primary-hover);
  gap: 0.625rem;
}

.feature-card__action svg {
  width: 16px;
  height: 16px;
}

/* ============================================
   CALLOUT CARD (Highlighted Information)
   ============================================ */

.callout-card {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--color-bg-secondary);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
  margin: 1.5rem 0;
}

.callout-card__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.callout-card__content {
  flex: 1;
}

.callout-card__title {
  margin: 0 0 0.5rem 0;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.callout-card__description {
  margin: 0;
  font-size: var(--text-body-small);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

/* Callout Variants */
.callout-card--info {
  background: var(--color-info-bg);
  border-left-color: var(--color-info-border);
}

.callout-card--info .callout-card__icon {
  color: var(--color-info);
}

.callout-card--success {
  background: var(--color-success-bg);
  border-left-color: var(--color-success-border);
}

.callout-card--success .callout-card__icon {
  color: var(--color-success);
}

.callout-card--warning {
  background: var(--color-warning-bg);
  border-left-color: var(--color-warning-border);
}

.callout-card--warning .callout-card__icon {
  color: var(--color-warning);
}

.callout-card--error {
  background: var(--color-error-bg);
  border-left-color: var(--color-error-border);
}

.callout-card--error .callout-card__icon {
  color: var(--color-error);
}

/* ============================================
   LINK CARD (Entire Card Clickable)
   ============================================ */

.link-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}

.link-card .card {
  transition: all var(--transition-base);
}

.link-card:hover .card {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  box-shadow: var(--elevation-high);
}

/* ============================================
   STAT CARD (Numbers/Statistics)
   ============================================ */

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-large);
  box-shadow: var(--elevation-card);
}

.stat-card__value {
  margin: 0;
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-primary);
}

.stat-card__label {
  margin: 0.5rem 0 0 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.stat-card__description {
  margin: 0.5rem 0 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

/* ============================================
   CARD GRID LAYOUTS (New - from card/cards directives)
   ============================================ */

.card-grid {
  display: grid;
  gap: var(--card-gap, 1.5rem);
  margin: 2rem 0;

  /* Auto-fit: Cards fill available space */
  grid-template-columns: repeat(
    var(--card-columns, auto-fit),
    minmax(min(100%, 280px), 1fr)
  );
}

/* Gap Sizes */
.card-grid[data-gap="small"] { --card-gap: 1rem; }
.card-grid[data-gap="medium"] { --card-gap: 1.5rem; }
.card-grid[data-gap="large"] { --card-gap: 2.5rem; }

/* Fixed Columns */
.card-grid[data-columns="1"] { --card-columns: 1; }
.card-grid[data-columns="2"] { --card-columns: 2; }
.card-grid[data-columns="3"] { --card-columns: 3; }
.card-grid[data-columns="4"] { --card-columns: 4; }
.card-grid[data-columns="5"] { --card-columns: 5; }
.card-grid[data-columns="6"] { --card-columns: 6; }

/* Responsive Columns */
.card-grid[data-columns~="1-2"],
.card-grid[data-columns~="1-2-3"],
.card-grid[data-columns~="1-2-3-4"] {
  --card-columns: 1;
}

@media (min-width: 640px) {
  .card-grid[data-columns~="1-2"],
  .card-grid[data-columns~="1-2-3"],
  .card-grid[data-columns~="1-2-3-4"] {
    --card-columns: 2;
  }
}

@media (min-width: 1024px) {
  .card-grid[data-columns~="1-2-3"],
  .card-grid[data-columns~="1-2-3-4"] {
    --card-columns: 3;
  }
}

@media (min-width: 1280px) {
  .card-grid[data-columns~="1-2-3-4"] {
    --card-columns: 4;
  }
}

/* Card Colors (for accent borders) */
.card-color-blue { border-left: 4px solid #3b82f6; }
.card-color-green { border-left: 4px solid #10b981; }
.card-color-red { border-left: 4px solid #ef4444; }
.card-color-yellow { border-left: 4px solid #f59e0b; }
.card-color-purple { border-left: 4px solid #8b5cf6; }
.card-color-pink { border-left: 4px solid #ec4899; }
.card-color-indigo { border-left: 4px solid #6366f1; }
.card-color-gray { border-left: 4px solid #6b7280; }

/* Card Icon Styling */
.card-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  /* Icon sits side-by-side with title, aligned to top */
  /* Gap is handled by .card-header flex gap */
}

/* Card Content Styling */
.card-content {
  flex: 1;
  margin-top: var(--space-5); /* Space after header/divider */
}

.card-content > *:first-child {
  margin-top: 0;
}

.card-content > *:last-child {
  margin-bottom: 0;
}

/* Legacy class names (keep for backward compat) */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

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

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

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

/* Feature Cards Grid */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

@media (max-width: 640px) {
  .cards-grid,
  .feature-cards {
    grid-template-columns: 1fr;
  }

  .card-grid {
    gap: 1rem;
  }

  .card-icon {
    font-size: 1.5rem;
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
  .card-body,
  .feature-card {
    padding: 1rem;
  }

  .callout-card {
    padding: 1rem;
  }
}
