/* 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 beside the text from lg and below it under that. --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.
   The frame is a window onto the top left of the application, not the whole screenshot scaled down: the
   image is cover-cropped from its top left corner, so the topbar and the first rows are legible at the
   size the frame actually gets. Stacked, the frame holds 16:10 for the same reason — a hero capture is
   1280 by up to 1800 CSS pixels, and printed whole it was a page of screenshot before a word was read. */
.c-site-hero { display: grid; 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; aspect-ratio: 16 / 10; 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 { display: block; height: 100%; }
.c-site-hero__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.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; }
/* From lg the frame stands beside the text and is exactly as tall as it: the grid row is sized by the
   text column, and the frame stretches to it rather than carrying a ratio of its own. */
@media (min-width: 72rem) {
  .c-site-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-2xl); align-items: stretch; }
  .c-site-hero__text { justify-content: center; max-width: none; }
  .c-site-hero__frame { aspect-ratio: auto; min-height: 20rem; }
  .c-site-hero--home .c-site-hero__title { font-size: clamp(var(--text-3xl), 3vw, 2.75rem); }
  .c-site-hero--plain { grid-template-columns: minmax(0, 1fr); }
  .c-site-hero--plain .c-site-hero__text { max-width: 44rem; }
}
@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); } }