/* ─────────────────────────────────────────────
 * MODULE: BADGE
 * Image + text combination with configurable layout and alignment.
 *
 * Class naming (mobile-first):
 *   layout-*           mobile base layout (always present)
 *   layout-desk-*      desktop layout (active inside bp-layout-* @media)
 *   align-h-*          mobile base H alignment
 *   align-h-desk-*     desktop H alignment (active inside bp-align-* @media)
 *   align-v-*          mobile base V alignment
 *   align-v-desk-*     desktop V alignment (active inside bp-align-* @media)
 *   text-align-*       mobile base text alignment
 *   text-align-desk-*  desktop text alignment (active inside bp-text-* @media)
 *   bp-layout-s/m/l/xl breakpoint qualifier for layout change
 *   bp-align-s/m/l/xl  breakpoint qualifier for image alignment change
 *   bp-text-s/m/l/xl   breakpoint qualifier for text alignment change
 *
 * Breakpoints: S (Mobile) / M (Tablet) / L (Desktop) / XL (Wide)
 * ───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
 * WRAPPER
 * ───────────────────────────────────────────── */

.mod-badge {
	display: flex;
	flex-wrap: wrap;
}

/* In the stacked layouts (image on top / bottom) the item heights of a wrapping column are worked out before the
 * image cell is stretched to the column's width, so a photo shown wider than its own pixel width overflowed the
 * cell and covered the text below. A column doesn't need to wrap. */
.mod-badge:is(.layout-img-top, .layout-img-bottom) {
	flex-wrap: nowrap;
}

/* ─────────────────────────────────────────────
 * LAYOUT — mobile base
 * ───────────────────────────────────────────── */

.mod-badge.layout-img-top    { flex-direction: column;         }
.mod-badge.layout-img-bottom { flex-direction: column-reverse; }
.mod-badge.layout-img-left   { flex-direction: row;            }
.mod-badge.layout-img-right  { flex-direction: row-reverse;    }

/* ─────────────────────────────────────────────
 * IMAGE CELL
 *
 * In row layouts (img-left / img-right), the image
 * cell defaults to 50% width when no explicit
 * flex-basis is set via inline style (Cell Width).
 * ───────────────────────────────────────────── */

.mod-badge__image {
	flex-shrink: 0;
	display: flex;
	align-items: flex-start;
}

.mod-badge.layout-img-left  > .mod-badge__image,
.mod-badge.layout-img-right > .mod-badge__image {
	flex-basis: var(--badge-img-basis, 50%);
}

.mod-badge__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* ─────────────────────────────────────────────
 * BODY CELL
 * ───────────────────────────────────────────── */

.mod-badge__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* ─────────────────────────────────────────────
 * IMAGE ALIGNMENT — mobile base
 *
 * Column layouts (img-top / img-bottom):
 *   H = align-self | V = align-items
 * Row layouts (img-left / img-right):
 *   H = justify-content | V = align-self
 * ───────────────────────────────────────────── */

/* Column H — mobile */
.mod-badge.layout-img-top    .mod-badge__image.align-h-left,
.mod-badge.layout-img-bottom .mod-badge__image.align-h-left   { align-self: flex-start; }
.mod-badge.layout-img-top    .mod-badge__image.align-h-center,
.mod-badge.layout-img-bottom .mod-badge__image.align-h-center { align-self: center;     }
.mod-badge.layout-img-top    .mod-badge__image.align-h-right,
.mod-badge.layout-img-bottom .mod-badge__image.align-h-right  { align-self: flex-end;   }

/* Row H — mobile */
.mod-badge.layout-img-left  .mod-badge__image.align-h-left,
.mod-badge.layout-img-right .mod-badge__image.align-h-left   { justify-content: flex-start; }
.mod-badge.layout-img-left  .mod-badge__image.align-h-center,
.mod-badge.layout-img-right .mod-badge__image.align-h-center { justify-content: center;     }
.mod-badge.layout-img-left  .mod-badge__image.align-h-right,
.mod-badge.layout-img-right .mod-badge__image.align-h-right  { justify-content: flex-end;   }

/* Column V — mobile */
.mod-badge.layout-img-top    .mod-badge__image.align-v-top,
.mod-badge.layout-img-bottom .mod-badge__image.align-v-top    { align-items: flex-start; }
.mod-badge.layout-img-top    .mod-badge__image.align-v-middle,
.mod-badge.layout-img-bottom .mod-badge__image.align-v-middle { align-items: center;     }
.mod-badge.layout-img-top    .mod-badge__image.align-v-bottom,
.mod-badge.layout-img-bottom .mod-badge__image.align-v-bottom { align-items: flex-end;   }

/* Row V — mobile */
.mod-badge.layout-img-left  .mod-badge__image.align-v-top,
.mod-badge.layout-img-right .mod-badge__image.align-v-top    { align-self: flex-start; }
.mod-badge.layout-img-left  .mod-badge__image.align-v-middle,
.mod-badge.layout-img-right .mod-badge__image.align-v-middle { align-self: center;     }
.mod-badge.layout-img-left  .mod-badge__image.align-v-bottom,
.mod-badge.layout-img-right .mod-badge__image.align-v-bottom { align-self: flex-end;   }

/* ─────────────────────────────────────────────
 * TEXT ALIGNMENT — mobile base
 * ───────────────────────────────────────────── */

.mod-badge__heading.text-align-left,
.mod-badge__text.text-align-left   { text-align: left;   }
.mod-badge__heading.text-align-center,
.mod-badge__text.text-align-center { text-align: center; }
.mod-badge__heading.text-align-right,
.mod-badge__text.text-align-right  { text-align: right;  }