/* The photo hero with a menu card on it, shared by We are Schnitzel and Aktuellt (moved out of oktoberfest.css
   2026-10-15 when Aktuellt got the same hero). */
/* ===== The hero: a photo with a menu card on it (We are Schnitzel hero 2, Dennis 2026-10-15) ===========================
   The photo fades into the dark brown of the scalloped edge below (the page's shared .skal, unchanged), so the edge
   reads as the hero's own border. overflow: hidden keeps the tilted card and the badge from widening the page. */
.ws-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; padding-block: 0;
  /* Exactly the menu hero's height (Dennis 2026-10-15): the same expression as .menytopp-band and .hero-hel in
     pages.css, under the same --sidhero-tak. tools/matt_heroer.mjs keeps the four of them in step. */
  --topp-fall: 5.75rem;
  min-height: min(calc(100svh - var(--topp-h, var(--topp-fall)) - 1px - var(--hero-kant, 0px)), var(--sidhero-tak));
}
@media (min-width: 52rem) { .ws-hero { --topp-fall: 8rem; } }
.ws-hero__foto { position: absolute; inset: 0; }
.ws-hero__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ws-hero__foto::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7rem; pointer-events: none;
  background: linear-gradient(0deg, var(--valnot), transparent);
}
.ws-hero__inre { position: relative; z-index: 2; padding-block: 3rem; }
.ws-hero__kort {
  position: relative; max-width: 34rem; background: #fffdf8; color: var(--valnot); padding: 2rem 2rem 1.8rem;
  border: 2px solid var(--valnot); box-shadow: .6rem .7rem 0 rgba(27, 16, 8, .85); transform: rotate(-1.2deg);
}
.ws-hero__kort::before {
  content: ""; position: absolute; top: -1rem; left: 50%; width: 6.5rem; height: 1.8rem; margin-left: -3.25rem;
  background: rgba(232, 200, 106, .8); transform: rotate(-2deg);
}
.ws-hero__lead { margin: 0; color: var(--valnot); font: italic 500 clamp(1.6rem, 1.1rem + 2vw, 2.6rem)/1.15 var(--f-bok); }
.ws-hero__kort .brod { margin: 1rem 0 0; color: var(--valnot); max-width: none; font-size: var(--t-md); line-height: 1.55; }
.ws-hero__kort .brod:last-of-type { font-weight: 600; }
.ws-hero__kort .knapp-rad { margin: 1.4rem 0 0; }
.ws-hero__knappar { display: flex; flex-wrap: wrap; gap: .7rem; }
/* The card is cream inside a dark band, so the outline button takes the dark ink, not the band's light one. */
.band--valnot .ws-hero__kort .knapp--linje { color: var(--valnot); border-color: var(--valnot); }
.band--valnot .ws-hero__kort .knapp--linje:hover { background: var(--valnot); color: var(--papper); }
.ws-hero__mark {
  position: absolute; right: -3rem; top: -2.6rem; width: clamp(6.5rem, 12vw, 9rem); aspect-ratio: 1;
  transform: rotate(8deg); filter: drop-shadow(0 .4rem .6rem rgba(0, 0, 0, .35)); z-index: 4;
}
.ws-hero__mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 40rem) { .ws-hero__mark { right: -.6rem; top: -3.2rem; width: 5.6rem; } }

/* The eyebrow on the card (Aktuellt): red on the cream card, not the gold the dark band would give it. */
.ws-hero__kort .ogonbryn { display: block; margin-bottom: .5rem; color: var(--rod); }
.ws-hero__kort h1.ws-hero__lead { margin: 0; }

/* Phones: the hero is the screen under the header, like every other hero (see pages.css), and the card is compact
   enough to fit it: a tighter frame, the badge nearer the corner, the two buttons side by side, and the second
   half of the longer paragraphs left to the wider screens. */
@media (max-width: 51.999rem) {
  .ws-hero__inre { padding-block: 2.7rem 1.4rem; }
  .ws-hero__kort { padding: 1.4rem 1.2rem 1.2rem; }
  .ws-hero__lead { font-size: 1.55rem; }
  .ws-hero__kort .brod { margin-top: .7rem; font-size: var(--t-base); line-height: 1.45; }
  .ws-hero__kort .knapp-rad { margin-top: 1rem; }
  .ws-hero__knappar { flex-wrap: nowrap; gap: .5rem; }
  .ws-hero__knappar .knapp { flex: 1 1 0; padding-inline: .5rem; text-align: center; white-space: nowrap; }
  .ws-hero__mark { top: -2.9rem; right: -.5rem; width: 4.4rem; }
  .ws-hero__mer { display: none; }
}

@media (max-width: 37.5rem) { .ws-hero { min-height: calc(100svh - var(--topp-h, var(--topp-fall)) - 1px - var(--hero-kant, 0px)); } }

/* Phones: the text in the card is centred (Dennis 2026-10-16), on We are Schnitzel and Aktuellt. */
@media (max-width: 51.999rem) {
  .ws-hero__kort { text-align: center; }
  .ws-hero__knappar { justify-content: center; }
}

/* Kontakt and Större sällskap: one plain paragraph in the card (not the closing line of two), and links in the card's own
   red instead of the band's gold. */
.ws-hero__kort .brod.ws-hero__vanlig { font-weight: 400; }
.band--valnot .ws-hero__kort a:not(.knapp) { color: var(--rod); }
/* Kontakt on a phone: the closing sentence is left to wider screens, like the second sentences on We are Schnitzel and
   Aktuellt, so the card is as short as theirs. */
@media (max-width: 51.999rem) { .ws-hero__kort .ws-hero__mer { display: none; } }