/*
 * Team Members Component Styles
 * Team member cards, grids, and section layouts
 */

@layer components {
  /* ==========================================================================
     Team Member Card
     ========================================================================== */

  .team-member-card {
    --card-bg: var(--color-surface);
    --card-padding: var(--space-5);

    background: var(--card-bg);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-md);
    padding: var(--card-padding);
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    transition: all 0.15s ease;

    &:hover {
      transform: translate(-2px, -2px);
      box-shadow: var(--comic-shadow-lg);
    }

    &.inactive {
      opacity: var(--opacity-60);
    }
  }

  /* ==========================================================================
     Avatar
     ========================================================================== */

  .team-member-avatar {
    --avatar-size: 48px;

    flex-shrink: 0;
    inline-size: var(--avatar-size);
    block-size: var(--avatar-size);
    overflow: hidden;
    background: var(--color-border-muted);
    border: var(--border-thick) solid var(--color-comic-border);

    & img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  .team-member-avatar-lg {
    --avatar-size: 64px;

    inline-size: var(--avatar-size);
    block-size: var(--avatar-size);
    overflow: hidden;
    background: var(--color-border-muted);
    border: var(--border-thick) solid var(--color-comic-border);
    flex-shrink: 0;

    & img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }

    & .avatar-placeholder {
      font-size: var(--text-2xl);
    }
  }

  .avatar-placeholder {
    inline-size: 100%;
    block-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-ink-reversed);
    font-weight: var(--font-semibold);
    font-size: var(--text-xl);
  }

  /* ==========================================================================
     Info Section
     ========================================================================== */

  .team-member-info {
    flex: 1;
    min-inline-size: 0;

    & h3 {
      font-size: var(--text-base);
      font-weight: var(--font-semibold);
      display: flex;
      align-items: center;
      gap: var(--space-2);
      flex-wrap: wrap;

      & a {
        color: var(--color-ink);
        text-decoration: none;

        &:hover {
          color: var(--color-link);
        }
      }
    }
  }

  .team-member-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .team-member-email {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    margin-block-start: var(--space-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .team-member-rates {
    font-size: var(--text-sm);
    margin-block-start: var(--space-2);

    & .rate {
      color: var(--color-ink);

      &.cost {
        color: var(--color-ink-muted);
        font-size: var(--text-xs);
      }
    }
  }

  .team-member-capacity {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    margin-block-start: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .team-member-actions {
    flex-shrink: 0;
  }

  /* ==========================================================================
     Team Members Grid
     ========================================================================== */

  .team-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
  }

  /* ==========================================================================
     Team Member Details Grid
     ========================================================================== */

  .team-member-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
  }

  /* ==========================================================================
     Team Sections
     ========================================================================== */

  .team-section {
    margin-block-end: var(--space-8);
  }

  .section-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin-block-end: var(--space-4);
    color: var(--color-ink);
  }

  .section-title-collapsible {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);

    &::before {
      content: ">";
      display: inline-block;
      transition: transform 0.2s ease;
      font-size: var(--text-sm);
    }
  }

  details[open] .section-title-collapsible::before {
    transform: rotate(90deg);
  }

  .archived-section {
    opacity: var(--opacity-80);

    & .team-members-grid {
      margin-block-start: var(--space-4);
    }
  }
}