/* ---------------------------------------------------------------------------
   Redesign overrides — loaded ONLY by app/(redesign)/layout.tsx, after
   supplement.css. The clone (/) never loads this file and stays frozen.

   Add redesign-specific deviations from the real design system here.
--------------------------------------------------------------------------- */

/* Larger rounded corners on the cards.

   The design system derives all card rounding from the --border-radius-md
   token (default 5px), which is ALSO used by inputs, modals, the hero
   image, etc. So instead of changing the global token, we redefine it
   locally on the card containers. Because the per-corner rules on the
   inner pieces (.topic-block-image/-content, .illustration-card-img,
   .card-news img) — including the responsive stacked variants — all
   resolve `var(--border-radius-md)`, scoping the override to the
   containers cascades to every card corner while leaving non-card UI
   untouched. */
.card,
.topic-block,
.illustration-card {
  --border-radius-md: 12px;
}

/* Sticky header — plain, no scroll effects. Opaque background so page
   content doesn't show through. The design system already sets
   position:relative on the active search / mega-menu states, which
   correctly overrides this while an overlay is open. */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--color-background);
}

/* Hero — image removed (in the redesign page markup); the headline now
   spans full width, is centered, and a bit bigger. These rules are loaded
   after main.css so they override the design system's split-layout hero,
   including its responsive variants (clamp() handles sizing, so no media
   queries needed). */
/* The .left wrapper is removed in the redesign markup; neutralise the
   design system's flex split-layout and centre the headline directly. */
.index-hero .flex-row {
  display: block;
}

.index-hero .hero-text {
  max-width: 900px;
  margin: var(--spacing-11) auto;
  padding: 0 var(--spacing-7);
  text-align: center;
  font-size: clamp(1.75rem, 1rem + 1.8vw, 2.5rem);
  line-height: 1.15;
  text-wrap: balance;
}

/* The design system pulls this card row up by half its height to overlap
   the hero image. With no image, that yanks the cards into the hero text —
   neutralise it so they flow normally below the headline. */
.index-hero .grid {
  transform: none;
}

/* Without the negative transform the section that follows the hero
   ("Tips og rettigheter") loses the slack the overlap used to leave.
   Give that single transition a deliberate, comfortable gap. */
.index-hero + .container {
  margin-top: var(--spacing-12);
}