/* Envana hero — designsystemet: Bagoss display, Hanken body, blush-wash.
   Dubbelklass behövs inte (ingen epdp-kontext på homepage). */
.ehero { background: var(--env-bg-base); font-family: var(--env-font-body); color: var(--env-text-body); }

.ehero__inner {
  display: grid;
  grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
  grid-template-rows: 1fr auto;
  min-height: clamp(560px, 82svh, 780px);
}
.ehero__content { grid-area: 1 / 1; }
.ehero__media { grid-area: 1 / 2; }
.ehero .emarq { grid-area: 2 / 1 / 3 / 3; }

/* Vänster: copy på blush->kräm-wash (hero-gradientens släkting) */
.ehero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 22px;
  padding: 72px clamp(28px, 6vw, 104px);
  background: #FEFAF8; /* plan kräm — godkänd yta, ingen gradient bakom brödtext */
}

/* Stjärnrad: brand-röda stjärnor (aldrig guld), Hanken-metadata */
.ehero__stars { display: flex; align-items: center; gap: 10px; }
.ehero__starrow { display: inline-flex; gap: 0; color: var(--env-action-primary); }
.ehero__starrow svg { margin: 0 -1.5px; }
.ehero__starstext { font-size: 14px; line-height: 20px; letter-spacing: -0.01em; color: var(--env-text-body); }

/* Display-rubrik: Bagoss Regular, större än sidans H1-skala (hero får
   poppa), accentordet i märkesfärg — rakt, aldrig kursivt (kursiv-lagen) */
.ehero__heading {
  margin: 0;
  font-family: var(--env-font-heading);
  font-weight: 400;
  font-size: 64px;
  line-height: 68px;
  letter-spacing: -0.03em;
  color: var(--env-text-heading);
  max-width: 13ch;
}
.ehero__accent { font-style: normal; color: var(--env-action-primary); }

.ehero__sub {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.01em;
  max-width: 44ch;
}

.ehero__actions { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; align-self: stretch; }

/* Primärknapp: köp-CTA => pill 56 + svep enligt svep-lagen */
.ehero__cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  height: 56px;
  padding: 18px 40px;
  background: var(--env-action-primary);
  color: var(--env-text-on-primary);
  font-family: var(--env-font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.ehero__cta::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 36%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-160%) skewX(-20deg);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.ehero__cta:hover { background: var(--env-action-hover); }
.ehero__cta:hover::after { transform: translateX(460%) skewX(-20deg); }

/* Mikrotrust under CTA (Grüns-mönstret): fotnotsnivå med ink-checkar */
.ehero__micro { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.ehero__micro li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 19px; letter-spacing: -0.01em; color: #4E4E4E; }
.ehero__micro svg { color: var(--env-text-heading); flex-shrink: 0; }

/* Höger: bilden kant i kant. Absolut positionerad på desktop så
   kvadratens intrinsic-höjd inte driver radhöjden förbi clamp-taket
   på breda skärmar; overflow klipper settle-zoomen (ingen CLS). */
.ehero__media { position: relative; overflow: hidden; min-height: 100%; }
.ehero__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* Load-reveal: mjuk stagger på copy, långsam settle på bilden */
.ehero__reveal { opacity: 0; transform: translateY(14px); animation: eheroUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: var(--d, 0ms); }
.ehero__media img { animation: eheroImg 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes eheroUp { to { opacity: 1; transform: none; } }
@keyframes eheroImg { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ehero__reveal, .ehero__media img { animation: none; opacity: 1; transform: none; }
  .ehero__cta::after { display: none; }
}

.emarq {
  background: #FEFAF8;
  border-top: 1px solid var(--env-border-subtle);
  border-bottom: 1px solid var(--env-border-subtle);
}
.emarq__viewport { overflow: hidden; }
.emarq__track { display: flex; width: max-content; animation: emarqScroll 42s linear infinite; }
.emarq__track:hover { animation-play-state: paused; }
.emarq__group { display: flex; align-items: center; flex-shrink: 0; }
.emarq__dup { display: flex; align-items: center; flex-shrink: 0; }

/* Caps-etikett: Bagoss Regular +3% (versalregeln), ikoner i ink */
.emarq__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 34px;
  font-family: var(--env-font-heading);
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--env-text-heading);
  white-space: nowrap;
}
.emarq__item svg { flex-shrink: 0; color: var(--env-text-heading); }

@keyframes emarqScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .emarq__track { animation: none; }
}
@media screen and (max-width: 749px) {
  .emarq__item { padding: 12px 22px; font-size: 12px; line-height: 14px; }
}

/* Smal desktop: ett rent steg ner */
@media screen and (min-width: 990px) and (max-width: 1279px) {
  .ehero__heading { font-size: 52px; line-height: 56px; }
}

/* Mobil + tablet: copy overst, marquee, sen bilden */
@media screen and (max-width: 989px) {
  .ehero__inner { display: block; min-height: 0; }
  .ehero__media img { position: static; aspect-ratio: 1 / 1; height: auto; }
  .ehero__content { padding: 32px 20px 44px; gap: 18px; }
  .ehero__stars { gap: 8px; }
  .ehero__starstext { font-size: 13px; }
  .ehero__heading { font-size: 40px; line-height: 45px; }
  .ehero__sub { font-size: 16px; line-height: 24px; }
  .ehero__cta { align-self: stretch; width: 100%; padding: 18px 24px; }
  .ehero__micro { justify-content: flex-start; }
}

/* Tablet-bandet: bredare crop så bilden inte äter hela viewporten */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .ehero__media img { aspect-ratio: 3 / 2; object-position: center 30%; }
}