/* badge.css — 角に菱形が覗くバッジ
   Figma: p-mv のバッジ (node 1180:8570 他) / p-fv のバッジ (node 999:10586)

   左上に45度回転させた正方形をはみ出させ、overflow: clip で角だけ見せる作り。
   菱形の色は事業ごとに変わるため、モディファイアで切り替える。 */

.c-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-10);
  align-items: center;
  justify-content: center;
  overflow: clip; /* 菱形をバッジの内側だけに見せる */
  padding: var(--space-4) var(--space-24);
  border-radius: var(--radius);
  background: var(--color-gray-light);
  box-shadow: var(--shadow-badge);
}

/* Figma: 88pxの正方形を45度回転し、左上（-78, -82）にはみ出させて角だけ覗かせる。
   下の top/left は、回転後の外接枠（124.451px）から正方形自身の位置を逆算した値。 */
.c-badge::before {
  content: "";
  position: absolute;
  top: -3.986rem;
  left: -3.736rem;
  width: 5.5rem; /* Figma: 88px */
  height: 5.5rem;
  rotate: 45deg;
  background: var(--color-service-care); /* 既定は生活介護の緑 */
}

.c-badge__text {
  position: relative; /* 菱形より前面 */
  flex-shrink: 0;
  min-width: 100%;
  color: var(--color-text);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  text-align: center;
  letter-spacing: var(--letter-spacing-widest);
}

/* --- 事業別の菱形の色 ---------------------------------------------------- */
.c-badge--care::before    { background: var(--color-service-care); }
.c-badge--job::before     { background: var(--color-service-job); }
.c-badge--nursing::before { background: var(--color-service-nursing); }