/* styles/pages/home.css — page-level layout for home.html only */

.hero {
  position: relative;
  /* Above styles/page-decor.css's fixed DNA/vine margins, so they start out
     hidden behind this banner until it scrolls out of view. */
  z-index: 2;
  min-height: 480px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  /* Muted fallback color shows until a real photo exists at the path below. */
  background-color: #cfd9c8;
  /* True ombre (fading intensity), not a flat tint — strong green at the
     swoosh corner, fading out toward the opposite corner. */
  background-image: linear-gradient(
      135deg,
      rgba(var(--color-primary-rgb), 0.82) 0%,
      rgba(var(--color-primary-rgb), 0.4) 55%,
      rgba(var(--color-primary-rgb), 0.15) 100%
    ),
    url('/assets/images/hero-photo.jpg');
  background-size: cover;
  background-position: center;
}

/* Solid-green "curtain" swoosh sitting on top of the tinted photo, behind the text. */
.hero-swoosh {
  position: absolute;
  inset: 0;
  width: 60%;
  height: 100%;
}

.hero-swoosh path {
  fill: var(--color-primary);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
  padding: var(--space-8) 0 var(--space-8) var(--space-5);
}

/* Sized up now that the subtitle's gone -- it's the only text in the hero,
   so it can afford to be the prominent, deliberate element it is. */
.hero-content h1 {
  color: #fff;
  font-size: 3rem;
  margin-bottom: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Forces "Biological Sciences" / "Student Association" onto two lines once the
   hero centers on mobile (see the max-width: 640px block below) — hidden here so
   it has no effect on how the heading wraps at wider widths. */
.hero-line-break {
  display: none;
}

.presidents-grid {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 640px) {
  .hero-swoosh {
    width: 100%;
  }
  .hero-content {
    max-width: 100%;
    text-align: center;
    /* More horizontal room than the old space-3 gave it -- the title ran
       edge-to-edge with barely any margin. */
    padding: var(--space-6) var(--space-6);
    margin: 0 auto;
  }
  .hero-content h1 {
    font-size: 2.25rem;
  }
  .hero-line-break {
    display: block;
  }
  .presidents-grid {
    grid-template-columns: 1fr;
  }
}