/* 06-components/_site-hero.css — .c-site-hero: the top of every public page. A mono eyebrow (the module
   name), one title, one lede, an actions cluster with at most one pine button, and the lead screenshot
   in a frame below. --home is the landing page's larger form; --plain (Frågor, Kontakt, Integritet)
   has no image. The image frame is the same rule-and-radius frame as c-feature__frame so that every
   screenshot on the site sits in the same mount. */
.c-site-hero { display: flex; flex-direction: column; gap: var(--space-xl); padding-block: var(--space-2xl) 0; }
.c-site-hero__text { display: flex; flex-direction: column; gap: var(--space-md); max-width: 44rem; }
.c-site-hero__eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent-ink); }
.c-site-hero__title { font-size: var(--text-3xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: -0.01em; color: var(--ink); }
.c-site-hero__lede { font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--ink-muted); max-width: var(--measure-prose); }
.c-site-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); padding-top: var(--space-xs); }
.c-site-hero__more { color: var(--link); font-weight: var(--weight-medium); }
.c-site-hero__frame { position: relative; overflow: hidden; background: var(--surface-sunken); border: var(--stroke) solid var(--rule); border-radius: var(--radius-md); box-shadow: var(--shadow-menu); }
.c-site-hero__frame picture, .c-site-hero__frame img { display: block; width: 100%; height: auto; }
.c-site-hero--home { padding-block: var(--space-3xl) 0; }
.c-site-hero--home .c-site-hero__title { font-size: clamp(var(--text-3xl), 4.2vw, 3.25rem); }
.c-site-hero--plain .c-site-hero__frame { display: none; }
@media (max-width: 56.24rem) {
  .c-site-hero { padding-block: var(--space-xl) 0; gap: var(--space-lg); }
  .c-site-hero--home { padding-block: var(--space-xl) 0; }
  .c-site-hero__title { font-size: var(--text-2xl); }
  .c-site-hero--home .c-site-hero__title { font-size: clamp(var(--text-2xl), 6vw, var(--text-3xl)); }
  .c-site-hero__lede { font-size: var(--text-base); }
}
@media (pointer: coarse) { .c-site-hero__more { display: inline-flex; align-items: center; min-height: var(--height-control); } }