/* ═══════════════════════════════════════════════════════════════
   components.css — All UI component styles
   Depends on: variables.css, layout.css
   Sections:
     6.  Buttons
     7.  Navigation (header, nav links, theme toggle, hamburger, mobile menu)
     8.  Hero
     9.  About (copy, detail list, tech stack, stats)
     10. Projects (featured card, grid, secondary cards)
     11. Contact (grid, lead copy, contact links)
     12. Experience cards
     13. Footer
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   6. BUTTONS
   Three variants: primary (filled), ghost (bordered),
   outline (subtle). All share base sizing/motion.
───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  white-space: nowrap;
}

/* Primary — filled ink background, lifts on hover */
.btn--primary {
  background: var(--color-ink);
  color: var(--color-bg);
  border: 1.5px solid var(--color-ink);
}
.btn--primary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(184, 64, 48, 0.25);
}

/* Ghost — transparent with subtle border */
.btn--ghost {
  background: transparent;
  color: var(--color-ink-2);
  border: 1.5px solid var(--color-border);
}
.btn--ghost:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
  transform: translateY(-2px);
}

/* Outline — used in project card footers */
.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border: 1.5px solid var(--color-border);
  font-size: 0.8125rem;
  padding: 0.6rem 1.25rem;
}
.btn--outline:hover {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}

/* ─────────────────────────────────────────
   7. NAVIGATION
   Fixed header with blur backdrop.
   Compact class applied by JS on scroll.
───────────────────────────────────────── */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 500;
  height: var(--nav-height);
}

/* Blur backdrop — light and dark variants */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: var(--container-pad);
  max-width: var(--container-max);
  margin-inline: auto;
  background: rgba(245, 242, 236, 0.8);
  backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--color-border-soft);
  transition: background 0.4s, border-color 0.4s, padding 0.3s;
}
[data-theme="dark"] .nav {
  background: rgba(17, 16, 9, 0.85);
}

/* Nav shrinks slightly after scrolling past hero */
.nav.is-compact {
  height: 56px;
}

/* Logo */
.nav__logo {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  transition: color 0.2s;
}
.nav__logo:hover { color: var(--color-accent); }

/* Desktop nav links */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
}

/* Individual link — animated underline on hover/active.
   .is-active is toggled by NavigationManager in main.js
   as the user scrolls through sections. */
.nav__link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-ink-2);
  letter-spacing: 0.01em;
  position: relative;
  transition: color 0.2s;
}
.nav__link::after {
  content: '';
  position: absolute;
  inset-block-end: -3px;
  inset-inline-start: 0;
  width: 0;
  height: 1.5px;
  background: var(--color-accent);
  transition: width 0.3s var(--ease-out);
}
.nav__link:hover               { color: var(--color-ink); }
.nav__link:hover::after,
.nav__link.is-active::after    { width: 100%; }
.nav__link.is-active           { color: var(--color-ink); }

/* Right-side nav actions container */
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ── Theme toggle ── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-ink-2);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.theme-toggle:hover {
  background: var(--color-surface);
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.theme-toggle__icon { width: 16px; height: 16px; }
/* Sun shown in light mode, moon in dark mode */
.theme-toggle__icon--moon { display: none; }
[data-theme="dark"] .theme-toggle__icon--sun  { display: none; }
[data-theme="dark"] .theme-toggle__icon--moon { display: block; }

/* ── Hamburger ── */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 32px;
  height: 36px;
}
.nav__hamburger-line {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-ink);
  border-radius: 1px;
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
}
/* Animated X when menu is open */
.nav__hamburger[aria-expanded="true"] .nav__hamburger-line:first-child {
  transform: rotate(45deg) translate(3px, 5px);
}
.nav__hamburger[aria-expanded="true"] .nav__hamburger-line:last-child {
  transform: rotate(-45deg) translate(3px, -5px);
}

/* ── Mobile menu overlay ── */
.mobile-menu {
  position: fixed;
  inset-block-start: var(--nav-height);
  inset-inline: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-6) var(--container-pad);
  z-index: 400;
  animation: slideDown 0.3s var(--ease-out);
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mobile-menu[hidden] { display: none; }

.mobile-menu__links { list-style: none; }
.mobile-menu__link {
  display: block;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-ink-2);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border-soft);
  transition: color 0.2s, padding-inline-start 0.2s;
}
.mobile-menu__link:hover {
  color: var(--color-accent);
  padding-inline-start: var(--space-2);
}

/* ─────────────────────────────────────────
   8. HERO
   Full-viewport height section with CSS-only
   grain texture and animated name reveal.
───────────────────────────────────────── */
.hero {
  min-height: 100svh;
  padding-block-start: calc(var(--nav-height) + clamp(3rem, 8vw, 6rem));
  padding-block-end: clamp(4rem, 8vw, 6rem);
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
}

/* CSS-only grain texture — SVG fractalNoise rendered as data URI.
   pointer-events: none ensures it doesn't intercept clicks. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}
.hero__inner {
  position: relative;
  z-index: 1; /* sits above grain layer */
}

/* Kicker line — "Software Engineer · Germany" */
.hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-6);
  opacity: 0;
  animation: riseIn 0.7s 0.05s var(--ease-out) forwards;
}
.hero__kicker-line {
  display: inline-block;
  width: 28px;
  height: 1.5px;
  background: var(--color-accent);
}

/* Large display name — each span is a .js-reveal element
   so they stagger in independently */
.hero__name {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--color-ink);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.hero__name em { font-style: italic; color: var(--color-accent); }
.hero__name-first,
.hero__name-mid,
.hero__name-last { display: block; }

.hero__meta    { max-width: 560px; }
.hero__tagline {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: var(--color-ink-2);
  line-height: 1.75;
  font-weight: 300;
  margin-bottom: var(--space-8);
}
.hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Scroll indicator — decorative vertical line + rotated label */
.hero__scroll-indicator {
  position: absolute;
  inset-block-end: 2.5rem;
  inset-inline-end: var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  animation: riseIn 0.6s 1s var(--ease-out) forwards;
}
.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1);    opacity: 0.6; }
  50%       { transform: scaleY(1.25); opacity: 1;   }
}
.hero__scroll-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  writing-mode: vertical-rl;
}

/* Shared rise animation — used by kicker, scroll indicator,
   and .js-reveal (via CSS class, not this keyframe). */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────
   9. ABOUT
───────────────────────────────────────── */
.about { background: var(--color-bg-alt); }

/* Two-column layout: copy left, tech stack right */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(2.5rem, 6vw, 5rem);
  margin-bottom: clamp(3rem, 8vw, 5rem);
}

.about__copy {
  font-size: 1.0625rem;
  line-height: 1.8;
  font-weight: 300;
}

/* Definition list — Location / Languages / Education */
.about__details {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
}
.about__detail-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-4);
  font-size: 0.875rem;
}
.about__detail-row dt {
  font-weight: 600;
  color: var(--color-ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  padding-top: 0.1rem;
}
.about__detail-row dd { color: var(--color-ink-2); }

/* ── Tech stack ── */
.about__stack-title {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-4);
}
.stack-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}
/* Base pill — surface card with hover state */
.stack-item {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-ink-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0.35rem 0.875rem;
  border-radius: var(--radius-sm);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.stack-item:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-mid);
  color: var(--color-accent);
}
/* Accent variant highlights simulation/AI skills */
.stack-item--accent {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-mid);
  color: var(--color-accent);
}

/* ── Stats row (9,000+ experiments / 3yr+ / 2 degrees) ── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px; /* hairline dividers via gap on white surface */
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat {
  background: var(--color-surface);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: background 0.2s;
}
.stat:hover { background: var(--color-bg); }
.stat__number {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: -0.04em;
  line-height: 1;
}
.stat__label {
  font-size: 0.8125rem;
  color: var(--color-ink-3);
  font-weight: 400;
}

/* ─────────────────────────────────────────
   10. PROJECTS
───────────────────────────────────────── */
.projects { background: var(--color-bg); }

/* Featured card — wider, accent left-border */
.project-card--featured {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  border-left: 4px solid var(--color-accent);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: var(--space-6);
  transition: box-shadow 0.3s, transform 0.3s;
}
.project-card--featured:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* 2-up grid for secondary project cards */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

/* Shared card base */
.project-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
}
.project-card:not(.project-card--featured):hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: rgba(26, 25, 22, 0.18);
}
[data-theme="dark"] .project-card:not(.project-card--featured):hover {
  border-color: rgba(240, 236, 227, 0.18);
}

.project-card__header { margin-bottom: var(--space-4); }

/* "Featured Research" badge */
.project-card__badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-mid);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}

.project-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin-bottom: 0.25rem;
}

.project-card__meta {
  font-size: 0.8125rem;
  color: var(--color-accent);
  font-weight: 500;
}

.project-card__desc {
  font-size: 0.9375rem;
  color: var(--color-ink-2);
  line-height: 1.75;
  font-weight: 300;
  margin-bottom: var(--space-4);
  flex: 1; /* pushes footer to bottom of card */
}

/* Pull-quote style finding callout */
.project-card__finding {
  font-size: 0.875rem;
  color: var(--color-ink-2);
  line-height: 1.7;
  background: var(--color-bg-alt);
  border-left: 2px solid var(--color-accent);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--space-6);
}
.project-card__finding strong { color: var(--color-ink); }

/* Technology pill list */
.project-card__tech {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin-bottom: var(--space-6);
}
.project-card__tech li {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-ink-3);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-soft);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-sm);
}

.project-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}

.project-card__supervisor,
.project-card__note {
  font-size: 0.75rem;
  color: var(--color-ink-3);
  font-style: italic;
}

/* ─────────────────────────────────────────
   11. CONTACT
───────────────────────────────────────── */
.contact { background: var(--color-bg-alt); }

/* Two-column: italic lead copy + contact links */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 8vw, 6rem);
  align-items: start;
}

.contact__lead {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 300;
  font-style: italic;
  color: var(--color-ink);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.contact__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-style: normal;
}

/* Individual contact row card — slides right on hover */
.contact-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-6);
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.contact-link:hover {
  border-color: var(--color-accent);
  transform: translateX(6px);
  box-shadow: var(--shadow-md);
}

/* Icon circle */
.contact-link__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-mid);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  color: var(--color-accent);
}
.contact-link__icon svg { width: 18px; height: 18px; }

.contact-link__body { display: flex; flex-direction: column; gap: 2px; }
.contact-link__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.contact-link__value {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-ink);
}
.contact-link__arrow {
  font-size: 1.25rem;
  color: var(--color-ink-3);
  transition: transform 0.2s, color 0.2s;
}
.contact-link:hover .contact-link__arrow {
  transform: translateX(4px);
  color: var(--color-accent);
}

/* ─────────────────────────────────────────
   12. EXPERIENCE CARDS
───────────────────────────────────────── */
.experience { background: var(--color-bg); }

.exp-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.exp-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: box-shadow 0.25s, border-color 0.25s;
}
.exp-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent-mid);
}

/* Top row: role/company on left, date/badge on right */
.exp-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
}

.exp-card__left { flex: 1; min-width: 0; }

.exp-card__role {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  line-height: 1.25;
  margin-bottom: 0.3rem;
}
.exp-card__company {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-accent);
}

.exp-card__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}
.exp-card__date {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink-2);
  white-space: nowrap;
}
.exp-card__badge {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
}

/* Bullet point list — accent dot instead of default list marker */
.exp-card__points {
  list-style: none;
  margin-bottom: var(--space-5);
}
.exp-card__points li {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--color-ink-2);
  line-height: 1.72;
  padding: 0.25rem 0 0.25rem 1.25rem;
}
.exp-card__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.55;
}
.exp-card__points li strong {
  color: var(--color-ink);
  font-weight: 600;
}

/* Tech pills — accent on card hover */
.exp-card__tech {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}
.exp-card__tech li {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-ink-2);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-soft);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-sm);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.exp-card:hover .exp-card__tech li {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-color: var(--color-accent-mid);
}

/* Mobile — stack date/badge below role on narrow screens */
@media (max-width: 640px) {
  .exp-card__top  { flex-direction: column; gap: var(--space-3); }
  .exp-card__right {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

/* ─────────────────────────────────────────
   13. FOOTER
───────────────────────────────────────── */
.site-footer {
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}
.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.site-footer__copy,
.site-footer__built {
  font-size: 0.8125rem;
  color: var(--color-ink-3);
}
.site-footer__built a {
  color: var(--color-accent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.site-footer__built a:hover { border-color: var(--color-accent); }