/*
 * Card Components
 * Card containers and variants
 * Uses CSS nesting and component-level custom properties
 */

@layer components {
  /* Base card with customizable properties */
  .card {
    --card-bg: var(--color-white);
    --card-border-color: var(--color-gray-medium);
    --card-border-size: 0;
    --card-padding: var(--block-space);

    background-color: var(--card-bg);
    border: var(--card-border-size) solid var(--card-border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;

    @media (min-width: 640px) {
      --card-padding: var(--block-space-double);
    }
  }

  /* Soft card (gray bg, no border, generous radius) */
  .card--soft {
    --card-bg: var(--color-gray-lightest);
    --card-border-size: 0;
    --card-padding: var(--block-space-double);
  }

  /* Clickable card (whole card is a link) */
  .card--link {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  /* Card with border and hover effect */
  .card--bordered {
    --card-border-size: 0.5px;
    --card-border-color: var(--color-gray-medium);
    box-shadow: var(--shadow);
  }

  /* Featured card (premium/flagship highlight) */
  .card--featured {
    --card-border-size: 2px;
    --card-border-color: var(--color-purple);
    box-shadow:
      0 0 0 1px oklch(var(--lch-purple) / 8%),
      0 0.2em 0.2em oklch(var(--lch-purple) / 8%),
      0 0.4em 0.4em oklch(var(--lch-purple) / 8%),
      0 0.8em 0.8em oklch(var(--lch-purple) / 8%);
  }

  /* Sticky card */
  @media (min-width: 1280px) {
    .card--sticky {
      position: sticky;
      top: var(--block-space-double);
    }
  }

  /* Card body padding variants */
  .card__body {
    padding: var(--card-padding);
  }

  .card__body--lg {
    padding: var(--block-space-double);

    @media (min-width: 640px) {
      padding: calc(var(--block-space) * 3);
    }

    @media (min-width: 1280px) {
      padding: calc(var(--block-space) * 4);
    }
  }

  /* Card header */
  .card__header {
    padding: var(--block-space) var(--block-space-double);
    border-bottom: var(--border-subtle);
  }

  /* Card footer */
  .card__footer {
    padding: var(--block-space) var(--block-space-double);
    border-top: var(--border-subtle);
    background-color: var(--color-gray-lightest);
  }

  /* Card title */
  .card__title {
    color: var(--color-gray-darker);
    margin-bottom: var(--block-space-half);
    font-size: var(--text-medium)
  }

  /* Testimonial card */
  .card--testimonial {
    padding: var(--block-space-double);

    & .card__video {
      margin: calc(-1 * var(--block-space-double)) calc(-1 * var(--block-space-double)) var(--block-space);

      & .video-lightbox__poster {
        border-radius: 0;
      }
    }

    & .card__quote {
      font-size: var(--text-normal);
      /* font-style: italic; */
      color: var(--color-gray-darker);
      margin-bottom: var(--block-space);
    }

    & .card__name {
      font-size: var(--text-normal);
      color: var(--color-gray);
    }

    & .card__role {
      font-size: var(--text-normal);
      color: var(--color-gray-dark);
    }
  }

  /* Danger card (destructive actions) */
  .card--danger {
    --card-bg: var(--color-negative-light);
    --card-border-color: var(--color-red);
    --card-border-size: 1px;
  }

  /* Admin link card */
  .admin-link-card {
    display: block;
    padding: var(--block-space);
    background-color: var(--color-gray-lighter);
    border-radius: var(--radius);

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-gray-light);
      }
    }
  }

  /* ─── Chip variant (compact dark card for lesson lists) ─── */

  .card--chip {
    --card-bg: var(--color-gray-lightest);
    --card-border-size: 1px;
    --card-border-color: var(--color-gray-light);
    --card-padding: var(--block-space-3quarter) var(--block-space);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--block-space);
    padding: var(--card-padding);
    border-radius: var(--radius);

    @media (min-width: 640px) {
      --card-padding: var(--block-space-3quarter) var(--block-space);
    }

    & .card__label {
      font-size: var(--text-x-small);
      color: var(--color-gray);
    }

    & .card__title {
      font-size: var(--text-small);
      font-weight: 600;
      line-height: var(--leading-snug);
      color: var(--color-gray-darker);
      margin-bottom: 0;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    & .card__badge {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: var(--inline-space-half);
      background-color: var(--color-gray-lighter);
      color: var(--color-gray-dark);
      font-size: var(--text-x-small);
      padding: var(--block-space-quarter) var(--block-space-half);
      border-radius: var(--radius-full);
      white-space: nowrap;
    }
  }

  .card-chip-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--block-space-half);

    @media (min-width: 640px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .card-chip-section {
    border-top: var(--border-subtle);
    padding-top: var(--block-space-double);
    margin-top: var(--block-space);
  }

  /* Admin-density overrides */
  body.full .card--bordered {
    border-radius: var(--radius);
    box-shadow: none;

    &:hover {
      box-shadow: none;
    }
  }
}