/* ============================================================
   EDUCATION — FANUCAiLeadCV
   Two cards side-by-side desktop / stacked mobile.
   MSc card has a FANUC Yellow annotation tag.
   ============================================================ */

/* ----------------------------------------------------------
   CARDS GRID
---------------------------------------------------------- */

.education__cards {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-6);
  max-width:             900px;
  margin-inline:         auto;
}

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

/* ----------------------------------------------------------
   EDUCATION CARD
---------------------------------------------------------- */

.education__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-4);
  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;
}

.education__card:hover {
  border-color: var(--color-border-strong);
  box-shadow:   var(--shadow-md);
  transform:    translateY(-2px);
}

/* Annotated variant (MSc card) */
.education__card--annotated {
  border-color: var(--color-border-accent);
}

.education__card--annotated:hover {
  border-color: var(--color-accent);
  box-shadow:   var(--shadow-accent), var(--shadow-md);
}

/* Accent top stripe on annotated card */
.education__card--annotated::before {
  content:       '';
  position:      absolute;
  top:           0;
  left:          0;
  right:         0;
  height:        3px;
  background:    var(--color-accent);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* ----------------------------------------------------------
   CARD CONTENT
---------------------------------------------------------- */

.education__card-body {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  flex:           1;
}

/* Degree label e.g. "Master of Science" */
.education__degree {
  font-size:   var(--text-xl);
  font-weight: var(--font-bold);
  color:       var(--color-text-primary);
  line-height: var(--leading-snug);
}

/* Field of study */
.education__field {
  font-size:   var(--text-base);
  font-weight: var(--font-medium);
  color:       var(--color-text-accent);
  line-height: var(--leading-snug);
}

/* Institution name */
.education__institution {
  font-size:   var(--text-sm);
  font-weight: var(--font-semibold);
  color:       var(--color-text-secondary);
}

/* Period */
.education__period {
  font-size:      var(--text-xs);
  color:          var(--color-text-muted);
  font-family:    var(--font-mono);
  letter-spacing: var(--tracking-wide);
}

/* Notes */
.education__notes {
  font-size:   var(--text-sm);
  line-height: var(--leading-relaxed);
  color:       var(--color-text-secondary);
  margin-top:  var(--space-2);
}

/* ----------------------------------------------------------
   ANNOTATION TAG — "Relevant to AI Leadership"
   Displayed in FANUC Yellow at the bottom of the MSc card.
---------------------------------------------------------- */

.education__annotation {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-2);
  padding:        var(--space-2) var(--space-4);
  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);
  align-self:     flex-start;
  margin-top:     auto;
}

.education__annotation::before {
  content:   '✦';
  font-size: 10px;
}