/* ==================================================
  ROLE : monolith-card-sleever / card-sleever.css (patched)
--------------------------------------------------
  Works on:
  - Gutenberg Image block wrapper (figure) with class "monolith-card-sleever"
  - Or direct <img class="monolith-card-sleever">

  Policy (A):
  - Wrapper should fit to image size (avoid full-row acrylic)
  - Gloss must be clipped to the card area (no stretching / no “間延び”)
================================================== */

:root{
  --mcs-color: #ffffff;
  --mcs-gloss: .75;     /* 0.0 - 1.0 (injected) */
  --mcs-radius: 16px;   /* px (injected) */
}

/* ==================================================
  0) Base: sleeve container (shared)
================================================== */

.monolith-card-sleever{
  position: relative;
  z-index: 1;

  display: block;

  margin: 1.2em 0;
  padding: 8px;
  border-radius: var(--mcs-radius);

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--mcs-color) 30%, #ffffff),
      color-mix(in srgb, var(--mcs-color) 10%, transparent)
    );

  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);

  box-shadow:
    0 10px 24px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.26);

  filter: brightness(1.02) contrast(0.98) saturate(1.02);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    filter .18s ease;
}

/* Direct IMG usage */
img.monolith-card-sleever{
  width: 100%;
  height: auto;
  display: block;
}

/* ==================================================
  1) Gutenberg figure wrapper (A案: fit-content)
================================================== */

/* figure にクラスが付く前提（Gutenberg拡張で付与される） */
figure.monolith-card-sleever{
  display: inline-block;
  width: fit-content;
  max-width: 90%;
  vertical-align: top;

  /* 重要：艶/ミストを角丸内に閉じ込める（カード範囲限定） */
  overflow: hidden;

  /* 背景がはみ出して見える事故を抑える */
  background-clip: padding-box;

  /* blockの余白に引っ張られた時の見えを安定 */
  margin-left: auto;
  margin-right: auto;
}

/* figure内imgは「引き伸ばさない」(fit) */
figure.monolith-card-sleever > img{
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;

  /* スリーブ内の画像角丸 */
  border-radius: calc(var(--mcs-radius) - 4px);
}

/* ==================================================
  2) Mist layer (card surface fog)
================================================== */

.monolith-card-sleever::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: var(--mcs-radius);
  pointer-events:none;
  z-index: 2;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.22),
      rgba(255,255,255,.06) 45%,
      rgba(255,255,255,0)
    ),
    radial-gradient(
      80% 60% at 20% 10%,
      rgba(255,255,255,.18),
      rgba(255,255,255,0) 60%
    );

  opacity: .65;
  transition: opacity .18s ease;
}

/* ==================================================
  3) Gloss sweep (Steam-card like)
  - MUST be confined to card area:
    -> inset:0 + (figure overflow:hidden)
================================================== */
.monolith-card-sleever::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--mcs-radius);
  pointer-events:none;
  z-index:3;

  /* まず“全体薄膜”を常在させる */
  background:
    linear-gradient(180deg,
      rgba(255,255,255, calc(.01 * var(--mcs-gloss))),
      rgba(255,255,255,0) 55%,
      rgba(255,255,255, calc(.01 * var(--mcs-gloss)))
    ),

    /* 次に“移動する強い帯”だけを別レイヤーで作る */
    linear-gradient(
      120deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 44%,
      rgba(255,255,255,calc(.95 * var(--mcs-gloss))) 50%,
      rgba(255,255,255,.14) 56%,
      rgba(255,255,255,0) 64%,
      rgba(255,255,255,0) 100%
    );

  /* 縦方向ボカシ（上の薄膜と併用で“乗せた感”が消える） */
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0,0,0,.95),
    rgba(0,0,0,.85) 55%,
    rgba(0,0,0,.55) 78%,
    rgba(0,0,0,.40)
  );
  mask-image: linear-gradient(
    180deg,
    rgba(0,0,0,.95),
    rgba(0,0,0,.85) 55%,
    rgba(0,0,0,.55) 78%,
    rgba(0,0,0,.40)
  );

  opacity: .22;                 /* 常在分のベース */
  transform: translateX(-70%);
  transition: opacity .16s ease, transform .55s ease;
}

.monolith-card-sleever:hover::after{
  opacity: calc(.28 + (.70 * var(--mcs-gloss)));
  transform: translateX(70%);
}


/* ==================================================
  4) Hover
================================================== */

.monolith-card-sleever:hover{
  transform: translateY(-5px);

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--mcs-color) 34%, #ffffff),
      color-mix(in srgb, var(--mcs-color) 12%, transparent)
    );

  box-shadow:
    0 16px 40px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.34);

  filter: brightness(1.03) contrast(0.99) saturate(1.04);
}

.monolith-card-sleever:hover::before{
  opacity: .72;
}

.monolith-card-sleever:hover::after{
  opacity: calc(.25 + (.70 * var(--mcs-gloss)));
  transform: translateX(70%);
}

.monolith-card-sleever:focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 6px;
}

/* ==================================================
  5) Alignwide/full exceptions (optional)
  - wide/full で “横長スリーブ” にしたい場合だけ有効化
  - 今はOFF（必要ならコメント解除）
================================================== */
/*
figure.monolith-card-sleever.alignwide,
figure.monolith-card-sleever.alignfull{
  display:block;
  width:100%;
}

figure.monolith-card-sleever.alignwide > img,
figure.monolith-card-sleever.alignfull > img{
  width:100%;
}
*/

/* ==================================================
  6) Reduced motion
================================================== */

@media (prefers-reduced-motion: reduce){
  .monolith-card-sleever,
  .monolith-card-sleever::before,
  .monolith-card-sleever::after{
    transition:none;
  }
}

/* ==================================================
  7) Admin helpers (preview)
================================================== */

.mcs-preview-wrap{ max-width: 420px; }
.mcs-section-title code{ font-size: .9em; }