/* ============================================================== a faction card

   Landscape, like the folder it stands for: the triangular artwork the cards use, a darkened
   banner with the name and the three slashes, a window for the text, and a darker border.

   Everything is in percentages or millimetres of the card, so the same markup is one card on
   the faction page and one slot on the print sheet.
   ========================================================================== */

.faction-card {
  position: relative;
  /* the slot's ratio, turned: 44 : 67 */
  aspect-ratio: 67 / 44;
  width: 100%;
  height: auto;
  /*
   * NOT clipped. The faction's symbol is drawn large and hung a quarter of its size past
   * the corner, the way the folder does it -- and `overflow: hidden` here was cutting that
   * overhang off, which is why the mark could never look like the folder's.
   */
  border-radius: 3mm;
  background: #0c0e11;
  color: var(--paper);
}

/* the artwork fills the card and is clipped by its rounded corners */
.faction-card__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.faction-card__art canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* the darker border, inset so the artwork shows at its edge */
.faction-card__edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.8mm solid rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 0 1.4mm rgba(0, 0, 0, 0.45);
  pointer-events: none;
  /* over everything, so the frame is the last thing drawn */
  z-index: 4;
}

/* the banner: a darkened band carrying the name, with the slashes to its left */
.faction-card__banner {
  position: absolute;
  top: 7%;
  left: 4%;
  right: 4%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 3.2%;
  /* equal above and below, and a wider inset before the stripes */
  padding: 2.4% 2.4% 2.4% 4.4%;
  border-radius: 1.6mm;
  background: rgba(8, 10, 13, 0.62);
}

.faction-card__slashes {
  display: flex;
  gap: 0.9mm;
  flex: none;
  /* the stripes lead the banner, with the name filling the rest */
  margin-left: 0;
}
.faction-card__slashes i {
  width: 2.4mm;
  height: 6.4mm;
  border-radius: 0.5mm;
  /* the cards' rule: the first stripe is the main colour, the last the secondary */
  background: var(--face-a, #939598);
  transform: skewX(-18deg);
}
.faction-card__slashes i:nth-child(2) {
  /* one colour halfway between the two, not a gradient down the stripe */
  background: color-mix(in srgb, var(--face-a, #939598) 50%, var(--face-b, #f7941d));
}
.faction-card__slashes i:nth-child(3) {
  background: var(--face-b, #f7941d);
}

.faction-card__name {
  flex: 1;
  margin: 0;
  font-family: 'Orbitron', 'Bungee', var(--font);
  font-size: 6.2mm;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: right;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0.3mm 0.5mm rgba(0, 0, 0, 0.7);
}

/* the faction's mark, bottom right */
/*
 * The mark's crop: the card's bounds and radius, so the part that hangs outside is cut off
 * exactly as the folder crops its own overhang.
 */
.faction-card__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  /* above the artwork, below the window and the frame */
  z-index: 1;
}

/*
 * The faction's symbol, large, in its main colour, at the bottom left.
 *
 * It is the faction's identity, so it is drawn big and undarkened behind everything else --
 * the window sits below and to its right rather than over it.
 */
.faction-card__mark {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  /*
   * The folder's own rule, moved to the card.
   *
   * In folder.js the mark is sized as a share of the folder's height and set a share of its
   * own size past the left and bottom edges, so it straddles the corner rather than sitting
   * inside the card. This is the same: 64% of the card, a quarter of it out on each axis.
   */
  width: 75%;
  height: 75%;
  transform: translate(-25%, 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--face-a, #939598);
  filter: none;
}
/*
 * `factionMark` writes its size inline -- 40px, the width and height and font-size. Inline
 * beats a stylesheet, which is why the symbol stayed tiny however large its box was set.
 * `!important` is the only way to hand the size back to the layout here.
 */
.faction-card__mark .faction-mark {
  width: 100% !important;
  height: 100% !important;
  font-size: 100% !important;
}

/*
 * A Font Awesome glyph is sized by `font-size`, not by its box.
 *
 * The mark's box is 75% of a 57.8 mm card, so its font-size is 43.4 mm -- an SVG fills the box
 * and a glyph takes this, which is what makes the two kinds land on the same size.
 */
.faction-card__mark .faction-mark {
  font-size: 43.4mm !important;
}
.faction-card__mark .faction-mark i {
  font-size: 100%;
  line-height: 1;
}

/* the window: the effect on the front, the comment on the back */
.faction-card__panel {
  position: absolute;
  /* below the symbol and to its right, so the two never overlap */
  left: 34%;
  top: 34%;
  width: 62%;
  height: 60%;
  /* over the symbol, under the frame */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.6% 2%;
  overflow: hidden;
  border-radius: 1.2mm;
  font-size: 7.6pt;
  line-height: 1.35;
  text-align: center;
}

.faction-card__panel.is-dark {
  background: rgba(6, 8, 11, 0.52);
  color: var(--paper);
}

.faction-card__panel.is-light {
  background: rgba(255, 255, 255, 0.66);
  color: #4a4f57;
  font-weight: 600;
}

/*
 * The card window keeps the line breaks the words were written with.
 *
 * Both panels are written in a multiline field -- the front is the faction's rule, the back
 * is its comment -- and the breaks are part of what was written: a comment listing
 * `<SHIELD>` and `<LANE>` on separate lines is a list, not a sentence. Without this the
 * lines collapsed into one and the card grew the only paragraph it could fit.
 */
.faction-card__panel .rich-text {
  white-space: pre-wrap;
}

.faction-card .tag {
  --tag-h: 1.6em;
}

/*
 * The symbol in its main colour.
 *
 * factionMark paints the artwork with the faction's gradient; forcing the fill to the card's
 * main colour makes it read as one shape, which is what the card wants.
 */
.faction-card__mark .faction-mark svg,
.faction-card__mark .faction-mark svg * {
  fill: var(--face-a, #939598) !important;
}
.faction-card__mark .faction-mark i {
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: var(--face-a, #939598) !important;
  color: var(--face-a, #939598) !important;
}