/* ============================================================
   AI WORK — FANUCAiLeadCV
   Three project cards. Flagship cards get accent border + glow.
   The strongest visual section after the hero.
   ============================================================ */

/* ----------------------------------------------------------
   PROJECTS GRID
   2 flagships side-by-side on desktop; supporting card full-width below.
   Mobile: single column.
---------------------------------------------------------- */

.ai-work__grid {
  list-style: none;
  display:    grid;
  gap:        var(--space-6);
  grid-template-columns: repeat(3, 1fr);
}

/* All three cards equal width (user request 2026-06-13) */

@media (max-width: 768px) {
  .ai-work__grid {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------
   PROJECT CARD
---------------------------------------------------------- */

.ai-work__card {
  position:       relative;
  background:     var(--color-surface-1);
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-xl);
  padding:        var(--space-8);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow   var(--duration-base) var(--ease-out),
    transform    var(--duration-base) var(--ease-out);
  overflow: hidden;
}

.ai-work__card:hover {
  transform:  translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* Flagship variant — accent left border + glow */
.ai-work__card--flagship {
  border-color: var(--color-border-accent);
}

.ai-work__card--flagship::before {
  content:       '';
  position:      absolute;
  top:           0;
  left:          0;
  width:         4px;
  height:        100%;
  background:    linear-gradient(
                   to bottom,
                   var(--color-accent),
                   rgba(255, 203, 6, 0.25)
                 );
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}

.ai-work__card--flagship:hover {
  border-color: var(--color-accent);
  box-shadow:   var(--shadow-accent), var(--shadow-lg);
}

/* Corner ambient glow on flagship cards */
.ai-work__card--flagship::after {
  content:        '';
  position:       absolute;
  top:            -80px;
  right:          -80px;
  width:          200px;
  height:         200px;
  background:     radial-gradient(
                    circle,
                    rgba(255, 203, 6, 0.06) 0%,
                    transparent 70%
                  );
  pointer-events: none;
}

/* ----------------------------------------------------------
   CARD META ROW — flagship badge + status
---------------------------------------------------------- */

.ai-work__card-meta {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  flex-wrap:   wrap;
}

.ai-work__flagship-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-1);
  padding:        2px var(--space-3);
  background:     var(--color-accent-dim);
  border:         1px solid var(--color-border-accent);
  border-radius:  var(--radius-full);
  font-size:      var(--text-xs);
  font-weight:    var(--font-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--color-accent);
}

.ai-work__flagship-badge::before {
  content:   '★';
  font-size: 10px;
}

.ai-work__status {
  font-size:      var(--text-xs);
  font-weight:    var(--font-medium);
  color:          var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}

/* ----------------------------------------------------------
   CARD TITLE
---------------------------------------------------------- */

.ai-work__card-title {
  font-size:   var(--text-xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  color:       var(--color-text-primary);
}

/* ----------------------------------------------------------
   CARD TAGLINE — italic accent line
---------------------------------------------------------- */

.ai-work__card-tagline {
  font-size:   var(--text-base);
  font-weight: var(--font-medium);
  font-style:  italic;
  color:       var(--color-text-accent);
  line-height: var(--leading-snug);
}

/* ----------------------------------------------------------
   CARD DESCRIPTION
---------------------------------------------------------- */

.ai-work__card-desc {
  font-size:   var(--text-sm);
  line-height: var(--leading-relaxed);
  color:       var(--color-text-secondary);
  flex:        1;
}

/* ----------------------------------------------------------
   TECH STACK TAGS
---------------------------------------------------------- */

.ai-work__tags {
  list-style:  none;
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--space-2);
  margin-top:  auto;
  padding-top: var(--space-4);
  border-top:  1px solid var(--color-border);
}

.ai-work__tag {
  padding:        2px var(--space-3);
  background:     var(--color-bg-subtle);
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-full);
  font-size:      11px;
  font-weight:    var(--font-medium);
  color:          var(--color-text-secondary);
  font-family:    var(--font-mono);
  white-space:    nowrap;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color     var(--duration-fast) var(--ease-out),
    color            var(--duration-fast) var(--ease-out);
}

.ai-work__card--flagship .ai-work__tag:hover {
  background-color: var(--color-accent-dim-2);
  border-color:     var(--color-border-accent);
  color:            var(--color-accent);
}