/* hero.css — Mein-Bereich Hero (Begruessung + Persona + Action-Buttons)

   Quelle: extrahiert aus mein-bereich.css ("Zone A: Hero"-Block, Paket MB-3 +
   MB-Visualpolish). Inhalt 1:1.

   Konsumenten: web/js/sections/mein-bereich.js — rendert Hero-Card mit
   Avatar+Greeting+Persona links, Action-Buttons rechts.
   ========================================================================== */

.ich-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  margin-bottom: var(--space-4);
}
.ich-hero-greeting { min-width: 0; }
.ich-hero-greeting-line { font-size: var(--font-size-xl); color: var(--color-text); line-height: 1.2; }
.ich-hero-greeting-line strong { font-weight: var(--fw-semibold); }
.ich-hero-date { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.ich-hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* Icon+Label-Button; Label bleibt auf allen Breakpoints sichtbar, damit der Button
   optisch gleichwertig zu Urlaub/Krank ist (auch auf Mobile passt das kurze Wort). */
.ich-hero-btn-label { margin-left: var(--space-1); }

/* "Meine Akte" trägt eine eigene Farbe (Teal), damit die drei Action-Buttons klar
   unterscheidbar sind: Meine Akte=Teal, Urlaub=Brand-Blau, Krank=Danger-Rot. Teal
   liegt farblich zwischen Blau und Grün und belegt keinen Status-Farbcode (Blau=
   Aktion, Rot=Negativ, Grün=Positiv, Gelb=Warnung). Gilt auf allen Breakpoints
   (Modifier-Klasse statt breakpoint-abhängigem ID-Selektor). */
.ich-hero-btn-akte {
  background: var(--action-teal);
  border-color: var(--action-teal);
  color: var(--brand-text-on);
}
.ich-hero-btn-akte:hover {
  background: color-mix(in srgb, var(--action-teal) 80%, #000);
  border-color: color-mix(in srgb, var(--action-teal) 80%, #000);
}
.ich-hero-btn-akte .ui-ico img { filter: brightness(0) invert(1); }
/* Persona-Card = reiner Avatar+Text-Block ohne eigene Box-Optik; Surface+Border
   trägt der Hero-Container. */
.ich-persona-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
}
.ich-persona-avatar { flex-shrink: 0; }
/* Avatar-Sizing kommt vom Avatar-Modul (avatar.js, SIZES.lg = 48px) als Inline-Style
   auf dem inneren .avatar-Element — Wrapper-Regeln hier greifen darauf nicht. */
.ich-persona-text { min-width: 0; }
.ich-persona-name { font-size: var(--font-size-lg); font-weight: var(--fw-semibold); color: var(--color-text); line-height: 1.3; }
.ich-persona-pos { font-size: var(--font-size-base); color: var(--color-text-secondary); margin-top: var(--space-xxs); }
.ich-persona-meta { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-xxs); }

/* ──────────────────────────────────────────────────────────────────────
   Responsive
   ────────────────────────────────────────────────────────────────────── */

/* Tablet (≤999px): Hero vertikal stapeln, Persona kompakter */
@media (max-width: 999px) {
  .ich-persona-card { padding: var(--space-3); }
  .ich-persona-name { font-size: var(--font-size-base); }
  /* Hero: Tablet — vertikal stapeln (Begruessung > Persona > Actions) */
  .ich-hero { grid-template-columns: 1fr; }
  .ich-hero-actions { justify-content: flex-start; }
}

/* Mobile (<600px): Visitenkarten-Style — zentrierter 96px-Avatar, Begrüßung
   darunter, Action-Buttons als 2- oder 3-Spalten-Grid mit gleichmäßiger Breite. */
@media (max-width: 599px) {
  .ich-persona-card {
    padding: var(--space-3);
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
  }
  /* 96px-Avatar im Visitenkarten-Style. !important nötig, weil das Avatar-Modul
     (avatar.js) width/height/font-size als Inline-Style auf das innere .avatar-
     Element setzt — Wrapper-Regeln auf .ich-persona-avatar verlieren sonst gegen
     den Inline-Style. (Architektur-Schwäche des Avatar-Moduls, D4 im Design-Check.) */
  .ich-persona-avatar { width: 96px; height: 96px; }
  .ich-persona-avatar > .avatar {
    width: 96px !important;
    height: 96px !important;
    font-size: var(--font-size-xxl, 28px) !important;
  }
  .ich-hero {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-3);
    max-width: 100%;
    box-sizing: border-box;
  }
  .ich-hero-greeting {
    text-align: center;
    min-width: 0;
  }
  .ich-hero-greeting-line { font-size: var(--font-size-lg); }
  /* Action-Buttons:
       - Default (Mitarbeiter, 3 Buttons): 3-Spalten-Grid auf einer Zeile
       - Azubi (.ich-hero-actions--azubi, 4 Buttons): 2x2-Grid
     Container-Klasse wird von _applyAzubiVisibility() in mein-bereich.js
     gesetzt — das ist der einzige Schalter, kein :has() noetig. */
  .ich-hero-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    justify-content: stretch;
    width: 100%;
  }
  .ich-hero-actions--azubi {
    grid-template-columns: repeat(2, 1fr);
  }
  .ich-hero-actions .btn {
    font-size: var(--font-size-sm);
    min-height: 64px;
    width: 100%;
    height: 100%;
    line-height: 1.2;
    justify-content: center;
  }
}