/*
  banner.css: the section banner, shared by every screen in the department.

  Every "section" page on the live site (Banken, Markedet, Oppnaelser) opens
  with a wide illustration and the page title laid OVER it on a white chip, and
  the working surface starts underneath. That is the model the bots department
  follows too (owner, 2026-08-19): top bar, then illustration with the section
  name, then the screen itself.

  The pattern is style/public/pages/sticker.css: one grid cell, image and h2
  both in 1/1/2/2, chip left at 4-5%, uppercase, #af1116, 4px white border,
  radius 10.

  The artwork slot is 800x160 on desktop and 546x182 on phones, the exact sizes
  of res/img/<section>-full and -mini. THE ATTIC ILLUSTRATION IS NOT DRAWN YET:
  `.banner-art` is a CSS stand-in (beams, round window, dust, floorboards) at
  those aspect ratios, so dropping the real file in and swapping .banner-art for
  an <img> is the whole change and nothing reflows.
*/

/*
  .banner-slot: a plain block box around the banner, and it is NOT optional.
  Both page containers are grids (.scroll on Loftet, .play on the game screen),
  and a grid track sized `auto` measures its item intrinsically. An item whose
  height comes from a ratio over a stretched width measures as ZERO there: the
  banner painted at full height but its row was 4px, so the title chip lay on
  top of whatever followed. One block box between the grid and the banner moves
  the measurement into normal block layout, where the ratio is honoured. Any
  new screen in the department needs this wrapper too.
*/
.banner-slot { display: block; }

.page-banner {
  position: relative;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  margin-bottom: 4px;
  border-radius: var(--radius-md);
  overflow: hidden;
  /* The banner carries the crop's ratio ITSELF, it does not inherit it from
     the artwork inside. A grid parent (.scroll on Loftet, .play on the game
     screen) sizes an auto row from its item's intrinsic height, and an item
     whose only height came from a percentage-width aspect-ratio child
     contributes zero: the banner collapsed to a sliver and the title chip
     spilled over whatever sat underneath. Ratios are the live section
     banners': 546x182 mini, 800x160 full. */
  aspect-ratio: 546 / 182;
}

@media screen and (width >= 920px) {
  .page-banner { aspect-ratio: 800 / 160; }
}

.page-banner > img,
.page-banner > .banner-art {
  grid-area: 1/1/2/2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-banner > h2 {
  grid-area: 1/1/2/2;
  z-index: 10;
  align-self: center;
  justify-self: left;
  margin: 0 0 0 4%;
  padding: 7px 12px;
  background: #fff;
  border: solid 4px #fff;
  border-radius: 10px;
  box-shadow: 0 0 8px #958f8f8a;
  text-transform: uppercase;
  font-size: 19px;
  max-width: 55%;
  color: var(--red);
}

@media screen and (width >= 920px) {
  .page-banner > h2 {
    padding: 8px 18px;
    margin: 0 0 0 5%;
    font-size: 32px;
    max-width: 64%;
    letter-spacing: 1px;
  }
}

/* --- placeholder artwork, replaced by the illustration ------------------- */
/* 546x182 (mini) on phones, 800x160 (full) from 920px, matching the live
   section banners exactly. */
.banner-art {
  position: relative;
  aspect-ratio: 546 / 182;
  background: linear-gradient(to bottom, #4c3b52 0%, #5d4a63 55%, #6d5a73 100%);
}
@media screen and (width >= 920px) {
  .banner-art { aspect-ratio: 800 / 160; }
}
.banner-art .beam-l,
.banner-art .beam-r {
  position: absolute;
  top: 26%;
  width: 64%;
  height: 8%;
  min-height: 9px;
  background: #3f3044;
  border-radius: 7px;
}
.banner-art .beam-l { left: -9%; transform: rotate(14deg); }
.banner-art .beam-r { right: -9%; transform: rotate(-14deg); }
.banner-art .window {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe9b0 0 40%, #ffcd6b 70%, #c99b3f 100%);
  border: 4px solid #3f3044;
  box-shadow: 0 0 26px 8px rgba(255, 205, 107, .45);
}
.banner-art .window::before {
  content: "";
  position: absolute;
  left: 50%; top: 4%; bottom: 4%;
  width: 4px;
  background: #3f3044;
  transform: translateX(-50%);
}
.banner-art .window::after {
  content: "";
  position: absolute;
  top: 50%; left: 4%; right: 4%;
  height: 4px;
  background: #3f3044;
  transform: translateY(-50%);
}
.banner-art .floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14%;
  background: repeating-linear-gradient(90deg, #7a6580 0 44px, #6d5a73 44px 46px);
}
.banner-art .dust i {
  position: absolute;
  color: #ffe9b0;
  font-size: 9px;
  opacity: .85;
  font-style: normal;
}