/* ============================================
   HOME additions (2026-10): language switch, results on experience
   cards, Now line, reasons-to-write cards, reply note under the buttons.
   Loaded after styles.css; reuses its colours and tokens.
   ============================================ */

/* --- top bar: section tabs + language switch --- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}

.topbar .tabs { margin-bottom: 0; }
.topbar .lang-switch { margin-left: auto; }

.lang-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(15, 23, 41, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

.lang-switch a {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #94a3b8;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 9px;
  transition: background 0.25s ease, color 0.25s ease;
}

.lang-switch a:hover { color: #e2e8f0; }

.lang-switch a[aria-current="page"] {
  background: rgba(59, 130, 246, 0.22);
  color: #60a5fa;
}

.lang-switch a:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

@media (prefers-color-scheme: light) {
  .lang-switch {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(0, 0, 0, 0.06);
  }
  .lang-switch a { color: #64748b; }
  .lang-switch a:hover { color: #0f172a; }
  .lang-switch a[aria-current="page"] {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
  }
}

/* --- experience cards: result line under the main row --- */
.exp-card { flex-wrap: wrap; align-content: flex-start; }
.exp-card:not(:has(.exp-result)) { align-content: center; }

.exp-result {
  flex: 1 0 100%;
  padding-left: 34px; /* emoji 22px + gap 12px: lines up with the label */
  font-size: 13px;
  line-height: 1.45;
  color: #94a3b8;
  text-wrap: pretty;
}

@media (prefers-color-scheme: light) {
  .exp-result { color: #64748b; }
}

.exp-result .nowrap { white-space: nowrap; }

/* --- Now line: last line of the hero bio, quieter than the bio --- */
.hero-bio .now {
  font-size: 15px;
  line-height: 1.55;
  color: #94a3b8;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-wrap: pretty;
}

@media (prefers-color-scheme: light) {
  .hero-bio .now {
    color: #64748b;
    border-top-color: rgba(15, 23, 42, 0.08);
  }
}

/* --- reasons to write: same card language as "Where I've shipped" --- */
.reasons { margin: 0 0 32px; }

.reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 900px) {
  .reasons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 500px) {
  .reasons-grid { grid-template-columns: minmax(0, 1fr); }
}

.exp-card.reason-card {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
  align-content: start;
  text-align: left;
}

.reason-card .exp-emoji {
  grid-row: 1 / span 2;
  margin-top: 1px;
}

.reason-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: #f1f5f9;
}

.reason-card .reason-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #cbd5e1;
  text-wrap: pretty;
}

@media (prefers-color-scheme: light) {
  .reason-title { color: #0f172a; }
  .reason-card .reason-text { color: #475569; }
}

/* --- one quiet line under the three buttons --- */
.reply-note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: #94a3b8;
}

@media (prefers-color-scheme: light) {
  .reply-note { color: #64748b; }
}

/* --- keep the name on one line ("Anton / Hodge" split in German) --- */
.name-highlight { white-space: nowrap; }

/* --- mobile: the hero column was sized by the photo (420px) and pushed
   text past the card edge; let the single column shrink to the card --- */
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
}