/* === JJ GB – Badges (löv + stor ring) ================================== */
/* Alla badges sätter position på wrappern */
.wp-block-image.jj-badge-leaf,
.wp-block-image.jj-badge-circle { position: relative; overflow: visible; }

/* ---------------- Löv (uppe vänster) ---------------- */
.wp-block-image.jj-badge-leaf[data-jj-leaf]::after{
  content: attr(data-jj-leaf);
  position: absolute;
  top: -14px;
  left: -16px;
  width: 74px;
  height: 86px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  letter-spacing: .3px;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
  background: #c40010;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.25);
  -webkit-mask: url("/wp-content/uploads/2025/09/leaf-mask2.png") no-repeat center / 100% 100%;
          mask: url("/wp-content/uploads/2025/09/leaf-mask2.png") no-repeat center / 100% 100%;
  transform: rotate(-12deg);
  z-index: 5;
  pointer-events: none;
  white-space: pre-line; /* stöd för \A */
}

/* ---------------- Stor ring (nere vänster) ---------------- */
.wp-block-image.jj-badge-circle[data-jj-circle]::before{
  content: attr(data-jj-circle);
  position: absolute;
  right: 10px;       /* nere till höger */
  top: 200px;      /* lite innanför */
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
  padding: 16px;
  box-sizing: border-box;

  font-weight: 800;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  letter-spacing: .2px;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);

  background: radial-gradient(circle at 30% 30%, #d4141f, #a40010);
  border-radius: 9999px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.08), 0 10px 20px rgba(0,0,0,.25);
  z-index: 4;
  pointer-events: none;
  white-space: pre-line;
}

/* <= 900px */
@media (max-width: 900px) {
  .wp-block-image.jj-badge-circle[data-jj-circle]::before{
    width: 100px; height: 100px;
    right: 5px; top: 78px;   /* samma hörn */
    padding: 12px;
    font-size: 12px;
	line-height: 1.4;
  }
}

/* <= 600px */
@media (max-width: 600px) {
  .wp-block-image.jj-badge-circle[data-jj-circle]::before{
    width: 100px; height: 100px;
    right: 8px; top: 155px;    /* samma hörn */
    padding: 10px;
    font-size: 12px;
	line-height: 1.4;
  }
}