/**
 * MCF — Division badge on project cards (ADJ-43)
 *
 * Every rule is namespaced under `.mcf-division-badge`. Nothing here targets an
 * Uncode class, so existing project-card styling and behaviour are untouched —
 * the badge is an extra absolutely-positioned element inside the card's media
 * container (`.t-entry-visual-cont`), which Uncode already uses as the
 * positioning context for its own image overlay.
 *
 * Colours match the division palette used across the framework
 * (mcf-finder.css, mcf-public.css, mcf-profile.css) but are declared locally so
 * this file works on any page, whatever else happens to be loaded.
 */

/* ── The corner stack ───────────────────────────────────────────────────────
 * A project can carry more than one division (a whole-home job that was both
 * Kitchen and Electrical), so this wraps one badge per division. It stacks AWAY
 * from its own corner — top-* downward, bottom-* upward — so the first badge
 * always sits hard in the corner and extra ones grow into the image, never off
 * the edge of it. */
.mcf-division-badges {
  position: absolute;
  z-index: 3; /* above Uncode's .t-entry-visual-overlay (z-index: 2) */
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: calc(100% - 24px);
  /* The whole card is a link — the badges must never swallow a click. */
  pointer-events: none;
}

.mcf-division-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

/* ── Corner placement (Settings-controlled) ─────────────────────────────── */
.mcf-division-badges--top-left     { top: 12px;    left: 12px;  align-items: flex-start; }
.mcf-division-badges--top-right    { top: 12px;    right: 12px; align-items: flex-end; }
.mcf-division-badges--bottom-left  { bottom: 12px; left: 12px;  align-items: flex-start; flex-direction: column-reverse; }
.mcf-division-badges--bottom-right { bottom: 12px; right: 12px; align-items: flex-end;   flex-direction: column-reverse; }

/* ── Division colours ───────────────────────────────────────────────────── */
.mcf-division-badge--kitchen    { --mcf-division: #008ca7; }
.mcf-division-badge--plumbing   { --mcf-division: #ff6633; }
.mcf-division-badge--electrical { --mcf-division: #64a70b; }

/* ── Text badge (no division logo uploaded yet) ─────────────────────────── */
.mcf-division-badge--text {
  padding: 5px 11px;
  border-radius: 20px;
  background: var(--mcf-division, #008ca7);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
}

.mcf-division-badge__text {
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Logo badge (Head Office uploaded one) ──────────────────────────────── */
.mcf-division-badge--logo {
  padding: 5px 8px;
  border-radius: 8px;
  /* Neutral plate so a coloured brand logo stays legible on any photo. */
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  max-width: 100%;
}

/* Logo plates are sized from the CARD, not from the artwork.
 *
 * The three division lockups are the same "MASTERCRAFT + division" design but
 * arrive as different files at different sizes — Kitchens is a 1150x157 PNG,
 * Plumbing/Electrical are 271x36 SVGs. Their aspect ratios differ by ~3%, so
 * sizing on HEIGHT gave each plate a different width, which is the mismatch
 * that showed on the cards. Fixing the plate width instead makes all three
 * identical whatever the source file is, and lets height follow the artwork.
 *
 * Uncode's masonry also mixes card sizes wildly (a 559px hero beside 270px
 * tiles), so the plate is proportional with an absolute cap: readable on the
 * hero, not overbearing on a tile. min-width stops it collapsing on a very
 * narrow card. */
.mcf-division-badges--has-logo {
  width: min(44%, 148px);
  min-width: 88px;
  max-width: calc(100% - 20px);
}

.mcf-division-badge--logo {
  width: 100%;
}

/* Specificity note: Uncode ships `.tmb .t-entry-visual img { width: 100% }`
 * (0,2,1) in style-core.css, which beats a single-class selector here. Three
 * classes (0,3,0) wins it cleanly without !important — don't shorten this. */
.mcf-division-badges .mcf-division-badge .mcf-division-badge__logo {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 959px) {
  .mcf-division-badges--top-left     { top: 10px;    left: 10px; }
  .mcf-division-badges--top-right    { top: 10px;    right: 10px; }
  .mcf-division-badges--bottom-left  { bottom: 10px; left: 10px; }
  .mcf-division-badges--bottom-right { bottom: 10px; right: 10px; }

  .mcf-division-badge__logo { height: 20px; max-width: 104px; }
}

@media (max-width: 569px) {
  .mcf-division-badges--top-left     { top: 8px;    left: 8px; }
  .mcf-division-badges--top-right    { top: 8px;    right: 8px; }
  .mcf-division-badges--bottom-left  { bottom: 8px; left: 8px; }
  .mcf-division-badges--bottom-right { bottom: 8px; right: 8px; }

  /* Tighter stack so three divisions still clear a small card's image. */
  .mcf-division-badges { gap: 4px; }

  .mcf-division-badge--text { padding: 4px 9px; }

  .mcf-division-badge__text {
    font-size: 9px;
    letter-spacing: .8px;
  }

  .mcf-division-badge--logo { padding: 5px 7px; }
  .mcf-division-badge__logo { height: 17px; max-width: 88px; }
}

/* Respect reduced-transparency / high-contrast preferences: keep the plate
   fully opaque so the logo never sits on a translucent wash. */
@media (prefers-contrast: more) {
  .mcf-division-badge--logo { background: #fff; }
}