/* Hero component styles (non-invasive) */
.hero {
  padding: var(--space-8, 32px) 0;
}

.hero .container.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6, 24px);
  container-type: inline-size;
}

.hero h1 {
  margin: 0 0 var(--space-4, 16px);
  font-size: var(--text-3xl, 36px);
  line-height: 1.1;
}

.hero p {
  margin: 0 0 var(--space-6, 24px);
  font-size: var(--text-md, 16px);
  color: var(--muted);
}

.hero .actions,
.hero .hero__actions {
  display: flex;
  gap: var(--space-3, 12px);
  flex-wrap: wrap;
  align-items: center;
}

/* No layout overrides here to avoid fighting existing inline styles */

/* Component container query: widen to two columns when container is wide enough */
@container (min-width: 700px) {
  .hero .container.hero-grid {
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: var(--space-10, 40px);
  }
  .hero .hero-content {
    text-align: left;
  }
}

.hero-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Desktop: ensure side-by-side layout regardless of container query support */
@media (min-width: 1024px) {
  .hero .container.hero-grid {
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: var(--space-10, 40px);
  }
  .hero .hero-content {
    text-align: left;
  }
}