/* Pazhoohan Blog - Minimal Editorial Hero */

.journal-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 340px;
  overflow: hidden;
  color: #142d4c;
  background-color: #f8fafc;
  background-image: url("/assets/blog/minimalist-academic-banner.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.journal-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.82) 28%,
    rgba(255, 255, 255, 0.24) 59%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 1;
}

.journal-hero .hero-layout {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 340px;
  padding-top: 55px;
  padding-bottom: 55px;
}

.journal-hero .hero-content {
  position: relative;
  z-index: 1;
  max-width: 600px;
}

.journal-hero .hero-content h1 {
  margin: 0 0 10px;
  color: #132f50;
  font-family: "Estedad", "Vazirmatn", sans-serif;
  font-size: clamp(36px, 4.5vw, 58px);
  font-weight: 850;
  line-height: 1.5;
  letter-spacing: 0;
}

.journal-hero .hero-lead {
  margin: 0;
  max-width: 550px;
  color: #42617f;
  font-family: "Vazirmatn", sans-serif;
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 550;
  line-height: 2;
}

@media (max-width: 760px) {
  .journal-hero {
    min-height: 280px;
    background-position: 38% center;
  }

  .journal-hero::before {
    background: linear-gradient(
      270deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.92) 55%,
      rgba(255, 255, 255, 0.48) 100%
    );
  }

  .journal-hero .hero-layout {
    min-height: 280px;
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .journal-hero .hero-content h1 {
    font-size: clamp(32px, 7vw, 43px);
  }

  .journal-hero .hero-lead {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .journal-hero,
  .journal-hero .hero-layout {
    min-height: 250px;
  }

  .journal-hero {
    background-position: 32% center;
  }

  .journal-hero .hero-content {
    max-width: 95%;
  }
}