/* ===================================================================
   Hero Section - Two-Column Grid Layout
   =================================================================== */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  gap: var(--spacing-2xl);
  min-height: 70vh;
  padding-top: calc(var(--navbar-height) + var(--spacing-xl));
  padding-bottom: var(--spacing-2xl);

  /* Mobile: single column, text-first for conversion */
  grid-template-areas:
    "content"
    "visual";
  grid-template-columns: 1fr;
}

/* Tablet: two columns, equal width */
@media (min-width: 768px) {
  .hero {
    grid-template-areas: "content visual";
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
  }
}

/* Desktop: wider visual column */
@media (min-width: 1024px) {
  .hero {
    grid-template-columns: 5fr 6fr;
  }
}

/* Content Column */
.hero__content {
  grid-area: content;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Visual Column */
.hero__visual {
  grid-area: visual;
  z-index: 1;
}

/* Headline */
.hero__headline {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.2;
  /* min-height set dynamically by typing-effect.js to match tallest phrase */
  margin: 0;
}

@media (min-width: 768px) {
  .hero__headline {
    font-size: var(--font-size-4xl);
  }
}

/* Subheadline */
.hero__subheadline {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 45ch;
  line-height: 1.6;
  margin: 0;
}

/* CTA Button - Enhanced Hero Version */
.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md) var(--spacing-2xl);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-lg);
  align-self: flex-start;
}

@media (min-width: 768px) {
  .hero__cta {
    padding: var(--spacing-lg) var(--spacing-2xl);
    font-size: var(--font-size-xl);
  }
}