/* Dr. Daniel's credentials under his photo (homepage #about and about.html; founder 2026-10-09: "Add AI Expert to this
   section and make it beautiful"). A neat stack of equal cards, each with a coloured icon tile; AI Expert is the
   featured one, with a turning gradient edge and gradient text. Phones keep hiding the row (phone.css). */
@property --fb-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* One column of equal cards, as wide as the longest one (each stays on one line: hero-clean.css). */
.about-photo-wrap .badge-row { display: grid; grid-template-columns: max-content; justify-content: center; gap: 10px; max-width: 100%; }
.about-photo-wrap .badge {
  position: relative; overflow: hidden; justify-content: flex-start; gap: 12px; padding: 7px 14px 7px 7px;
  font-size: .86rem; font-weight: 600; letter-spacing: .005em; color: var(--text); text-align: left;
  background: linear-gradient(135deg, color-mix(in srgb, var(--fb-c1, #38b6ff) 9%, var(--surface)), var(--surface) 70%);
  border: 1px solid color-mix(in srgb, var(--fb-c1, #38b6ff) 28%, var(--border));
  box-shadow: 0 12px 26px -20px rgba(0, 0, 0, .7);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.about-photo-wrap .badge svg {
  box-sizing: content-box; flex: none; width: 16px; height: 16px; padding: 7px; color: #fff;
  background: linear-gradient(135deg, var(--fb-c1, #38b6ff), var(--fb-c2, #8b5cf6));
  box-shadow: 0 6px 14px -6px var(--fb-c1, #38b6ff);
}
.about-photo-wrap .badge:nth-child(1) { --fb-c1: #6366f1; --fb-c2: #38b6ff; }
.about-photo-wrap .badge-years { --fb-c1: #0ea5e9; --fb-c2: #22d3ee; } /* last in the column (founder 2026-10-09) */
.about-photo-wrap .badge-ai { --fb-c1: #8b5cf6; --fb-c2: #ec4899; }
.about-photo-wrap a.badge { --fb-c1: #10b981; --fb-c2: #38b6ff; }

/* A light sweep across the card on hover. */
.about-photo-wrap .badge::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%);
}
.about-photo-wrap .badge:hover, .about-photo-wrap .badge:focus-visible {
  transform: translateY(-2px); color: var(--text);
  border-color: color-mix(in srgb, var(--fb-c1, #38b6ff) 70%, transparent);
  box-shadow: 0 16px 30px -18px var(--fb-c1, #38b6ff);
}
.about-photo-wrap .badge:hover::after, .about-photo-wrap .badge:focus-visible::after { transform: translateX(120%); transition: transform .9s ease; }

/* AI Expert: a turning gradient edge, gradient text and a soft glow. */
.about-photo-wrap .badge-ai {
  border: 1.5px solid transparent;
  background:
    linear-gradient(135deg, color-mix(in srgb, #8b5cf6 12%, var(--surface)), var(--surface) 75%) padding-box,
    conic-gradient(from var(--fb-a), #38b6ff, #8b5cf6, #ec4899, #f5b82e, #38b6ff) border-box;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .08), 0 14px 32px -18px rgba(139, 92, 246, .9);
  animation: fb-turn 5s linear infinite;
}
.about-photo-wrap .badge-ai svg { background: conic-gradient(from var(--fb-a), #8b5cf6, #ec4899, #f5b82e, #38b6ff, #8b5cf6); animation: fb-turn 5s linear infinite; }
.about-photo-wrap .badge-ai .fb-text {
  font-weight: 800; letter-spacing: .02em; color: #8b5cf6;
  background: linear-gradient(90deg, #6d5dfc, #c026d3, #ec4899, #6d5dfc); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: fb-text 6s linear infinite;
}
:root:not([data-theme="light"]) .about-photo-wrap .badge-ai .fb-text { background-image: linear-gradient(90deg, #a5b4fc, #f0abfc, #f9a8d4, #a5b4fc); }
@keyframes fb-turn { to { --fb-a: 360deg; } }
@keyframes fb-text { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .about-photo-wrap .badge-ai, .about-photo-wrap .badge-ai svg, .about-photo-wrap .badge-ai .fb-text { animation: none; }
  .about-photo-wrap .badge, .about-photo-wrap .badge::after { transition: none; }
}

/* A little to the left of the photo's centre (founder 2026-10-09: "move this box to the left a bit"), where the photo sits
   beside the text (1024px and up); stacked under the photo on narrower screens it stays centred, and phones hide it.
   The photo column clips itself for the turning ring (ai-fx.css, a phone-width fix), which would cut the moved cards, so
   there it lets them show past its edge. */
@media (min-width: 1024px) {
  .about-photo-wrap.has-ai-scan:has(.badge-row) { overflow: visible; }
  .about-photo-wrap .badge-row { transform: translateX(-24px); }
}