/* =========================================
   HERO — hero.css
   ========================================= */

/* ── WRAPPER ─────────────────────────────── */

.hero-wrapper {
  min-height:      calc(100vh - 72px);
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  padding:         0 48px 40px;
  overflow:        hidden;
}

/* ── HERO ────────────────────────────────── */

.hero {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* ── HERO CONTENT ────────────────────────── */

.hero__content {
  width:          100%;
  max-width:      780px;
  display:        flex;
  flex-direction: column;
  gap:            32px;
}

/* ── HERO TITLE ──────────────────────────── */

.hero__title {
  font-size:      clamp(3.2rem, 5.2vw, 6.4rem);
  line-height:    1.08;
  letter-spacing: -0.04em;
  font-weight:    300;
  color:          var(--text-primary);
  max-width:      100%;
}

/* ── TYPEWRITER ──────────────────────────── */

#typewriter {
  color:       var(--blue-light);
  display:     inline;
  font-size:   inherit;
  font-weight: inherit;
}

#typewriter::after {
  content:        "";
  display:        inline-block;
  width:          2px;
  height:         0.75em;
  background:     var(--blue-light);
  border-radius:  2px;
  margin-left:    3px;
  vertical-align: 0.05em;
  animation:      cursorBlink 1.4s ease-in-out infinite;
}

@keyframes cursorBlink {
  0%   { opacity: 1; }
  40%  { opacity: 1; }
  60%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ── META ROW ────────────────────────────── */

.hero__meta {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  font-size:   14px;
  color:       var(--text-muted);
  line-height: 1.6;
}

.hero__meta-item {
  display:     inline-flex;
  align-items: center;
}

.hero__meta-item:not(:last-child)::after {
  content:     "|";
  margin:      0 14px;
  color:       rgba(0,0,0,0.20);
  font-weight: 300;
}

/* ── CHIPS — DESKTOP ─────────────────────── */

.hero__chips {
  display:   flex;
  flex-wrap: wrap;
  gap:       10px;
}

.chip {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         10px 20px;
  border:          1.5px solid rgba(0,0,0,0.12);
  border-radius:   var(--radius-pill);
  background:      rgba(255,255,255,0.65);
  font-size:       12px;
  font-weight:     500;
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  color:           var(--text-secondary);
  backdrop-filter: blur(8px);
  white-space:     nowrap;
  transition:
    background   var(--t-fast) ease,
    border-color var(--t-fast) ease,
    transform    var(--t-fast) ease;
}

.chip:hover {
  background:   rgba(255,255,255,0.95);
  border-color: rgba(26,70,201,0.30);
  color:        var(--blue);
  transform:    translateY(-2px);
}

.chip--accent {
  color:        var(--blue);
  border-color: rgba(26,70,201,0.22);
  background:   rgba(26,70,201,0.04);
}

.chip--accent:hover {
  background: rgba(26,70,201,0.08);
}

/* ── RESPONSIVE — 1024px ─────────────────── */

@media (max-width: 1024px) {

  .hero-wrapper {
    padding: 0 40px 36px;
  }

  .hero__content {
    max-width: 660px;
  }

}

/* ── RESPONSIVE — 768px ──────────────────── */

@media (max-width: 768px) {

  .hero-wrapper {
    min-height:      auto;
    padding:         24px 20px 0;
    gap:             0;
    overflow:        hidden;
    overflow-x:      clip;    /* stronger than hidden on Android */
    width:           100%;
    max-width:       100vw;
    box-sizing:      border-box;
    justify-content: flex-start;
    flex-direction:  column;
  }

  .hero {
    justify-content: flex-start;
    align-items:     flex-start;
    padding-bottom:  28px;
    flex:            none;       /* don't flex-grow on mobile */
  }

  .hero__content {
    max-width: 100%;
    gap:       24px;
  }

  .hero__title {
    font-size:      clamp(3rem, 8vw, 3.4rem);
    line-height:    1.08;
    letter-spacing: -0.04em;   /* reduce from -0.06em — less overflow risk */
    max-width:      100%;
    width:          100%;
    overflow:       hidden;
    overflow-wrap:  break-word;
    word-break:     break-word;
  }

  /* bullet separators */
  .hero__meta {
    gap:       4px 0;
    font-size: 13px;
    color:     var(--text-muted);
  }

  .hero__meta-item:not(:last-child)::after {
    content:     "•" !important;
    margin:      0 8px !important;
    color:       var(--text-muted);
    font-weight: 400;
    opacity:     0.5;
  }

  /* ── CHIPS MOBILE — 2×2 equal height ────── */

  .hero__chips {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows:        56px;
    gap:                   8px;
  }

  .chip {
    /* reset desktop styles */
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    white-space:     normal;
    /* no padding — height controlled by grid-auto-rows */
    padding:         0 10px;
    height:          100%;
    font-size:       11px;
    line-height:     1.3;
  }

}

/* ── RESPONSIVE — 480px ──────────────────── */

@media (max-width: 480px) {

  .hero__title {
    font-size: clamp(3rem, 9vw, 2.4rem);
    letter-spacing: -0.03em;
    overflow-wrap: break-word;
    word-break: break-word;
    overflow: hidden;
    width: 100%;
  }

  .hero__chips {
    grid-auto-rows: 52px;
  }

}