/* A banner (reeks B, visuele herwerking fase 5 and 11): the image whole in a box of its place, and under it in one
   frame the label, the title, the line and the buttons (partials/banner.html). Loaded by the shop (base.html) and by
   the form of a banner in the back office, so its preview is the banner of the start page. Wide or narrow follows the
   room of the frame (a container query), never the screen: the frame of 390 px in the back office is a phone.
   Only the shop tokens (tests/test_design_rules.py). */

.banner-frame {
  container-type: inline-size;
}

.container > .banner-frame:first-child {
  margin-top: var(--space-5);
}

/* One frame: a thin line, radius 16, the image on top, the text under it. */
.banner {
  display: grid;
  gap: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
  background: var(--wit);
  color: var(--inkt);
  font-family: var(--letter);
}

.banner__box {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--vlak);
}

.banner--home_top .banner__box--wide {
  aspect-ratio: 3 / 1;
}

.banner--home_strip .banner__box--wide {
  aspect-ratio: 6 / 1;
}

.banner__box--narrow {
  display: none;
}

.banner--home_top .banner__box--narrow {
  aspect-ratio: 1;
}

.banner--home_strip .banner__box--narrow {
  aspect-ratio: 2 / 1;
}

.banner__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Universes Beyond: the image exactly as it is, so the frame has no rounded corners either. */
.banner--ub {
  border-radius: 0;
}

.banner__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding: 18px 20px 20px;
}

.banner__label {
  margin: 0 0 var(--space-1);
  color: var(--status-preorder);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.banner .banner__title {
  margin: 0;
  font-family: var(--letter);
  font-size: var(--t-sectie);
  font-weight: 600;
  line-height: var(--t-sectie-lijn);
}

.banner__line {
  margin: 2px 0 0;
  color: var(--gedempt);
  font-size: 14px;
}

.banner__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* The buttons of the shop (DESIGN.md onderdeel 6, Knoppen), also inside the back office. */
.banner .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--r-rond);
  background: var(--action);
  color: var(--wit);
  font-family: var(--letter);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.banner .btn:hover {
  background: var(--action-hover);
}

.banner .btn--line {
  background: var(--wit);
  color: var(--action);
  box-shadow: inset 0 0 0 1.5px var(--action);
}

.banner .btn--line:hover {
  background: var(--tint);
}

.banner__more {
  color: var(--action);
  font-weight: 600;
}

/* A narrow frame (a phone): the narrow image when there is one, the text and the buttons under each other. */
@container (max-width: 520px) {
  .banner__text {
    padding: 14px 16px 16px;
  }

  .banner__text > div,
  .banner__buttons {
    flex-basis: 100%;
  }

  .banner__buttons .btn {
    flex: 1;
  }

  .banner__box--wide[data-has-narrow] {
    display: none;
  }

  /* Without a narrow image: the wide one, smaller in proportion, in a box of its own shape. */
  .banner__box--wide:not([data-has-narrow]) {
    aspect-ratio: auto;
  }

  .banner__box--narrow {
    display: grid;
  }
}