/* =========================================
   Prime Gear：スマホ枠（画像・動画ブロック）
   4種：灰 / 黒 / 灰ノッチなし / 黒ノッチなし
   - 14Pro 形状前提
   - 幅はPC/SPとも最大237pxで統一
   - 変数（--smartphone-width 等）はJSが注入
========================================= */


/* -------------------------------------------------
   0) 変数と色
------------------------------------------------- */
.is-style-smartphone-gray,
.is-style-smartphone-black,
.is-style-smartphone-gray-nocam,
.is-style-smartphone-black-nocam{
  --frame-color:#ced1d5;
  --smartphone-width:0;
  --border-rd:0;
  --camera-width:0;
  --camera-height:0;
}

/* 枠色：黒 */
.is-style-smartphone-black,
.is-style-smartphone-black-nocam{
  --frame-color:#3c3c3c;
}


/* -------------------------------------------------
   1) ブロック幅を最大237pxで統一（画像・動画）
------------------------------------------------- */
.wp-block-image.is-style-smartphone-gray,
.wp-block-image.is-style-smartphone-black,
.wp-block-image.is-style-smartphone-gray-nocam,
.wp-block-image.is-style-smartphone-black-nocam,
.wp-block-video.is-style-smartphone-gray,
.wp-block-video.is-style-smartphone-black,
.wp-block-video.is-style-smartphone-gray-nocam,
.wp-block-video.is-style-smartphone-black-nocam{
  width:100%;
  max-width:237px;
  margin-left:auto;
  margin-right:auto;
}


/* -------------------------------------------------
   2) 外枠（画像・動画 共通）
------------------------------------------------- */
.is-style-smartphone-gray,
.is-style-smartphone-black,
.is-style-smartphone-gray-nocam,
.is-style-smartphone-black-nocam{
  border:solid calc(var(--smartphone-width) * .015) var(--frame-color);
  width:fit-content;
  background:var(--frame-color);
  position:relative;
  border-radius:var(--border-rd);
  box-shadow:0 12px 24px -2px rgb(0 0 0 / 25%);
  margin:0 auto 3em;
}

/* 画像/動画ブロック内 figure の下余白を消す */
.is-style-smartphone-gray figure,
.is-style-smartphone-black figure,
.is-style-smartphone-gray-nocam figure,
.is-style-smartphone-black-nocam figure{
  margin-bottom:0 !important;
}


/* -------------------------------------------------
   3) 中身：画像
   - clip-path で整える（2px内側に切る）
------------------------------------------------- */
.is-style-smartphone-gray img,
.is-style-smartphone-black img,
.is-style-smartphone-gray-nocam img,
.is-style-smartphone-black-nocam img{
  width:100%;
  height:auto;
  display:block;
  box-shadow:0 2px 24px -2px rgb(0 0 0 / 25%);
  clip-path:inset(2px round calc(var(--border-rd) * .85));
}


/* -------------------------------------------------
   4) 中身：動画
   - 下枠が痩せる問題の最終対策として wrapper に padding を確保
   - video 側は clip-path を 0（切らない）
------------------------------------------------- */
.wp-block-video.is-style-smartphone-gray,
.wp-block-video.is-style-smartphone-black,
.wp-block-video.is-style-smartphone-gray-nocam,
.wp-block-video.is-style-smartphone-black-nocam{
  padding:2px;
  line-height:0; /* ベースライン由来の余白を排除 */
}

.is-style-smartphone-gray video,
.is-style-smartphone-black video,
.is-style-smartphone-gray-nocam video,
.is-style-smartphone-black-nocam video{
  width:100%;
  height:auto;
  display:block;
  margin:0 !important;
  vertical-align:top;
  box-shadow:0 2px 24px -2px rgb(0 0 0 / 25%);
  clip-path:inset(0 round calc(var(--border-rd) * .85));
}


/* -------------------------------------------------
   5) ノッチ（14Pro位置固定）
   - JSが wrap 直下に <p> を1個だけ追加
------------------------------------------------- */
.is-style-smartphone-gray p,
.is-style-smartphone-black p,
.is-style-smartphone-gray-nocam p,
.is-style-smartphone-black-nocam p{
  width:calc(var(--camera-width) * .8);
  height:var(--camera-height);
  position:absolute;
  top:calc(var(--border-rd) * .5);
  left:calc(var(--smartphone-width) / 2);
  transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  background:var(--frame-color);
  border-radius:calc(var(--camera-width) / 3.4);

  /* エディタ側のp余白の影響を完全に排除 */
  margin:0 !important;
  padding:0 !important;
  line-height:0 !important;
  font-size:0 !important;
  letter-spacing:0 !important;
  display:block;
  pointer-events:none;
}

/* ノッチなし */
.is-style-smartphone-gray-nocam p,
.is-style-smartphone-black-nocam p{
  display:none;
}


/* =================================================
   6) エディタ専用：カラム内でも237px固定を必ず効かせる
   - コア Columns（.wp-block-columns）
   - SWELL リッチカラム（.swell-block-columns）
================================================= */

/* --- 6-1) コア Columns 対応 --- */
.editor-styles-wrapper .wp-block-columns
  .wp-block-image.is-style-smartphone-gray,
.editor-styles-wrapper .wp-block-columns
  .wp-block-image.is-style-smartphone-black,
.editor-styles-wrapper .wp-block-columns
  .wp-block-image.is-style-smartphone-gray-nocam,
.editor-styles-wrapper .wp-block-columns
  .wp-block-image.is-style-smartphone-black-nocam,
.editor-styles-wrapper .wp-block-columns
  .wp-block-video.is-style-smartphone-gray,
.editor-styles-wrapper .wp-block-columns
  .wp-block-video.is-style-smartphone-black,
.editor-styles-wrapper .wp-block-columns
  .wp-block-video.is-style-smartphone-gray-nocam,
.editor-styles-wrapper .wp-block-columns
  .wp-block-video.is-style-smartphone-black-nocam{
  max-width:237px !important;
  width:100% !important;
  flex:0 0 auto;
  align-self:center;
  margin-left:auto !important;
  margin-right:auto !important;
}

.editor-styles-wrapper .wp-block-columns
  .wp-block-image.is-style-smartphone-gray img,
.editor-styles-wrapper .wp-block-columns
  .wp-block-image.is-style-smartphone-black img,
.editor-styles-wrapper .wp-block-columns
  .wp-block-image.is-style-smartphone-gray-nocam img,
.editor-styles-wrapper .wp-block-columns
  .wp-block-image.is-style-smartphone-black-nocam img,
.editor-styles-wrapper .wp-block-columns
  .wp-block-video.is-style-smartphone-gray video,
.editor-styles-wrapper .wp-block-columns
  .wp-block-video.is-style-smartphone-black video,
.editor-styles-wrapper .wp-block-columns
  .wp-block-video.is-style-smartphone-gray-nocam video,
.editor-styles-wrapper .wp-block-columns
  .wp-block-video.is-style-smartphone-black-nocam video{
  width:100% !important;
  height:auto !important;
  display:block;
}

/* --- 6-2) SWELL リッチカラム対応（本命） --- */
.editor-styles-wrapper .swell-block-columns
  .wp-block-image.is-style-smartphone-gray,
.editor-styles-wrapper .swell-block-columns
  .wp-block-image.is-style-smartphone-black,
.editor-styles-wrapper .swell-block-columns
  .wp-block-image.is-style-smartphone-gray-nocam,
.editor-styles-wrapper .swell-block-columns
  .wp-block-image.is-style-smartphone-black-nocam,
.editor-styles-wrapper .swell-block-columns
  .wp-block-video.is-style-smartphone-gray,
.editor-styles-wrapper .swell-block-columns
  .wp-block-video.is-style-smartphone-black,
.editor-styles-wrapper .swell-block-columns
  .wp-block-video.is-style-smartphone-gray-nocam,
.editor-styles-wrapper .swell-block-columns
  .wp-block-video.is-style-smartphone-black-nocam{
  max-width:237px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  justify-self:center;
  align-self:center;
}

.editor-styles-wrapper .swell-block-columns
  .wp-block-image.is-style-smartphone-gray img,
.editor-styles-wrapper .swell-block-columns
  .wp-block-image.is-style-smartphone-black img,
.editor-styles-wrapper .swell-block-columns
  .wp-block-image.is-style-smartphone-gray-nocam img,
.editor-styles-wrapper .swell-block-columns
  .wp-block-image.is-style-smartphone-black-nocam img,
.editor-styles-wrapper .swell-block-columns
  .wp-block-video.is-style-smartphone-gray video,
.editor-styles-wrapper .swell-block-columns
  .wp-block-video.is-style-smartphone-black video,
.editor-styles-wrapper .swell-block-columns
  .wp-block-video.is-style-smartphone-gray-nocam video,
.editor-styles-wrapper .swell-block-columns
  .wp-block-video.is-style-smartphone-black-nocam video{
  width:100% !important;
  height:auto !important;
  display:block;
}