/* NT2 Hero — split image + headline + CTA. No entrance animations —
   page is static for reliable rendering in the Fluid editor. */

.nt2-hero__section { padding-top: var(--nt2-section-pt); padding-bottom: var(--nt2-section-pb); }

.nt2-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
@media (min-width: 1024px) {
  .nt2-hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-5xl);
  }
}

/* Media renders before content in the DOM, so on mobile it sits on
   top of the headline by default — no `order` override needed. On
   desktop the two-column grid handles placement (media goes in the
   left column regardless of source order). */
.nt2-hero__media { position: relative; }

.nt2-hero__image { width: 100%; }
@media (min-width: 1024px) {
  /* Desktop reverts to a portrait crop — the editorial column shape
     the page was originally designed around. The shared
     `nt2-media-frame--4x3` class paints 4:3 by default; this scoped
     override re-applies the portrait crop only at desktop widths. */
  .nt2-hero__image { aspect-ratio: 4 / 5; }
}

/* Empty-state placeholder fills the media frame and matches the
   image crop so layout is identical whether or not an image is set. */
.nt2-hero__image--placeholder { display: flex; align-items: center; justify-content: center; }
.nt2-hero__image--placeholder .nt2-placeholder__svg { width: 100%; height: 100%; object-fit: cover; }

.nt2-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.nt2-hero__headline {
  font-size: clamp(var(--font-size-5xl), 6.6vw, var(--font-size-7xl));
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-xl);
}
/* Headline content is now a richtext block; the inner heading inherits the
   wrapper's display type and must not add its own margins. */
.nt2-hero__headline > * {
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin: 0;
}
.nt2-hero__subhead {
  max-width: 540px;
  margin: 0 0 var(--space-2xl);
}
.nt2-hero__subhead > * { margin: 0; }
.nt2-hero__subhead > * + * { margin-top: var(--space-md); }