/* ---------- HERO ---------- */

.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--text);
}

/* Background (decorative) */
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/hero/background-code.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.14;
  filter: grayscale(10%);
  z-index: 0;
}

/* Inner grid: text + portrait */
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 2rem;
  align-items: center;
  width: 100%;
  padding: 10rem 0;
}

/* Left column */
.hero-left {
  max-width: 760px;
  padding-left: 1rem;
}

/* Outline / name */
.hero-outline {
  font-size: 7.2rem;
  margin: 0;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
  letter-spacing: 8px;
  line-height: 0.85;
}

.excl { color: var(--accent); -webkit-text-stroke: 0; margin-left: 8px; }

.hero-name { font-size: 4rem; margin: .6rem 0 0; }
.name-accent { color: var(--text); font-weight: 800; }
.hero-sub { color: var(--muted); margin: .4rem 0 1rem; }

.hero-actions { display:flex; gap:1rem; align-items:center; }
.social-row { display:flex; gap:.6rem; }
.social img { width:28px; height:28px; filter: invert(1) brightness(1.2) saturate(0.9); }

/* Right column (portrait) - responsive and scalable */
.hero-right {
  display: block;               /* ensure visible by default */
  align-self: center;
  justify-self: center;
}

.portrait {
  width: 100%;
  max-width: 420px;            /* original max */
  height: auto;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  object-fit: cover;
  display: block;
}

/* Scroll indicator */
.hero-scroll-indicator {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 28px;
  color: var(--muted);
  font-size: 20px;
}

/* ---------- Responsive breakpoints ---------- */

/* Medium screens: keep portrait but slightly smaller */
@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr 360px; }
  .hero-outline { font-size: 5.2rem; }
  .portrait { max-width: 360px; }
}

/* Tablet / small-laptop: KEEP portrait visible, reduce portrait width */
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr 320px; /* keep two columns on tablets */
    padding: 1.6rem 0;
  }
  .hero-outline { font-size: 4.2rem; letter-spacing:6px; }
  .hero-name { font-size: 2rem; }
  .portrait { max-width: 320px; }
}

@media (max-width: 700px) { /* small tablets and large phones */
  .hero-inner {
    grid-template-columns: 1fr;
    padding: 1.2rem 0;
  }
  .hero-right {
    display: block; /* portrait visible on small phones */
    align-self: center;
    justify-self: center;
  }
  .hero-outline { font-size: 3.8rem; }
  .hero-name { font-size: 1.2rem; }
  .portrait { max-width: 280px; margin: 1rem auto 0; }
}

/* Smallest screens */
@media (max-width: 480px) {
  .hero-outline { font-size: 3rem; letter-spacing: 4px; }
  .hero-name { font-size: 1.05rem; }
}