/* About-section repeaters — Education, Experience, Certificates, Features (Task 1) */

.sp-about-repeater{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:18px;
  margin-top:20px;
}

.sp-about-card{
  display:flex;
  gap:14px;
  background:var(--surface-container-lowest, #fff);
  border:1px solid var(--outline-variant, #C7C6D0);
  border-radius:var(--radius-md, 16px);
  padding:16px;
}

.sp-about-card-logo{
  flex-shrink:0;
  width:52px;
  height:52px;
  border-radius:var(--radius-sm, 12px);
  overflow:hidden;
  background:var(--surface-container, #EEEEF5);
  display:flex;
  align-items:center;
  justify-content:center;
}

.sp-about-card-logo img{ width:100%; height:100%; object-fit:cover; }

.sp-about-card-icon .icon{
  width:1.6em;
  height:1.6em;
  color:var(--primary, #4C5FD5);
}

.sp-about-card-body{ flex:1; min-width:0; }

.sp-about-card-body h4{
  margin:0 0 2px;
  font-family:var(--font-display, inherit);
  font-size:1rem;
  color:var(--on-surface, #1B1B23);
}

.sp-about-card-sub{
  margin:0;
  font-size:.88rem;
  font-weight:600;
  color:var(--primary, #4C5FD5);
}

.sp-about-card-duration{
  margin:2px 0 0;
  font-size:.78rem;
  color:var(--outline, #777780);
}

.sp-about-card-desc{
  margin:6px 0 0;
  font-size:.88rem;
  line-height:1.5;
  color:var(--on-surface-variant, #46464F);
}

.sp-about-card-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:8px;
  font-size:.85rem;
  font-weight:600;
  color:var(--primary, #4C5FD5);
  text-decoration:none;
}

.sp-about-card-link .icon{ width:.9em; height:.9em; }

.sp-about-card-credential{
  margin:4px 0 0;
  font-size:.75rem;
  color:var(--outline, #777780);
}

/* Features list reads better as a tighter grid of smaller cards */
.sp-about-feature-list{
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}

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

/* Extra styling for the upgraded Education/Experience/Certificate timeline
   entries (now supports logos, descriptions, links, credential IDs) —
   additive only, existing simple entries render exactly as before. */

.detail-item-with-logo{ display:flex; gap:10px; align-items:flex-start; }
.detail-item-logo{ width:36px; height:36px; border-radius:8px; object-fit:cover; flex-shrink:0; margin-top:2px; }
.detail-desc{ margin:4px 0 0; font-size:.85rem; color:var(--on-surface-variant, #46464F); }
.detail-link{ display:inline-flex; align-items:center; gap:4px; margin-top:4px; font-size:.82rem; font-weight:600; color:var(--primary, #4C5FD5); text-decoration:none; }
.detail-link .icon{ width:.85em; height:.85em; }

.cert-chip-full{
  display:flex; gap:10px; align-items:flex-start; text-align:left;
  padding:12px; border-radius:var(--radius-sm, 12px);
  background:var(--surface-container-lowest, #fff);
  border:1px solid var(--outline-variant, #C7C6D0);
}
.cert-chip-logo{ width:40px; height:40px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.cert-chip-body strong{ display:block; font-size:.9rem; }
.cert-chip-body p{ margin:4px 0 0; font-size:.82rem; color:var(--on-surface-variant, #46464F); }
.cert-chip-body a{ display:inline-flex; align-items:center; gap:4px; margin-top:4px; font-size:.8rem; font-weight:600; color:var(--primary, #4C5FD5); text-decoration:none; }
.cert-chip-body a .icon{ width:.8em; height:.8em; }

/* Profile Card upgrades — real photo, cover image, subtitle, extra CTAs
   (Task 1). Additive only; falls back to the original letter-avatar look
   automatically when no image is set in Klixy → Settings. */

.profile-avatar-img{ object-fit:cover; }
.profile-card[style*="background-image"]{ border-radius:var(--radius-lg, 24px); padding-top:28px; }
.profile-card[style*="background-image"] .profile-name,
.profile-card[style*="background-image"] .profile-role,
.profile-card[style*="background-image"] .profile-subtitle{ color:#fff; }
.profile-subtitle{ font-size:.82rem; color:var(--on-surface-variant, #46464F); margin:-8px 0 12px; }
.profile-cta-row{ display:flex; flex-direction:column; gap:8px; }
.profile-cta-btn{ width:100%; justify-content:center; }