/* =====================================================================
 * ns-bgvideos.css  (旧テーマの子テーマ)
 *  スマホ時 動画(上) → 文字(下) 縦表示版（タイト配置）
 *
 *  識別子・公開クラス（変更禁止）：
 *    ショートコード [ns_bgvideos]
 *    ハンドル ns-bgvideos
 *    .ns-bgvideos / .ns-bgvideos__inner / .ns-cell
 *    .ns-cell__video / .ns-cell__count / .ns-cell__title
 *    .ns-cell__desc / .ns-cell__overlay / .ns-cell__body
 *    data-ns-index
 * ===================================================================== */

.ns-bgvideos {
  position: relative;
  width: 100%;
  background: #0b1626;
  color: #ffffff;
  contain: layout paint;
}

.ns-bgvideos__inner {
  display: grid;
  gap: 0;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* minmax(0,…): セルの自動最小で列が広がらないように */
}

/* ---------- 共通セル ---------- */
.ns-cell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
  background-color: #0b1626;
  background-image: var(--cell-bg);
  background-size: cover;
  background-position: center center;
  /* ★ 2026-10-01: 以前は aspect-ratio:4/5 + min-height:280px で、説明文が長いと
     セルの下へはみ出して白地に白文字になっていた（幅 1006〜1100px で実測）。
     「最低 4:5、中身が長ければ伸びる」にするため、縦横比は ::before の padding-top:125% で作り、
     本文（.ns-cell__body）と同じグリッドの区画に重ねる。セルの高さ＝どちらか高いほう。
     aspect-ratio を使わないので、同じ段のセルは普通のグリッドどおり高さがそろう。
     （aspect-ratio のまま伸ばすと、高さに引っ張られて幅まで広がった。overflow:clip でも同じ） */
  display: grid;
  transition: transform .5s ease, box-shadow .5s ease;
}
.ns-cell::before { content: ""; grid-area: 1 / 1; padding-top: 125%; }
.ns-cell > .ns-cell__body { grid-area: 1 / 1; }
.ns-cell.is-active {
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.85);
  z-index: 1;
}

.ns-cell__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
  transition: opacity .5s ease, transform .6s ease;
  transform: scale(1.02);
}
.ns-cell.is-visible .ns-cell__video,
.ns-cell.is-active  .ns-cell__video {
  opacity: 1;
  transform: scale(1.05);
}

.ns-cell__overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
              rgba(0,0,0,0.15) 0%,
              rgba(0,30,70,0.55) 100%);
  transition: opacity .4s ease;
}
.ns-cell.is-active .ns-cell__overlay { opacity: .8; }

/* ---------- テキスト ---------- */
.ns-cell__body {
  position: relative;
  height: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(16px, 4vw, 48px);
  padding-top:    clamp(80px, 14vw, 120px);
  padding-bottom: clamp(20px, 4vw, 36px);
  white-space: normal;
}

.ns-cell__count {
  font: 500 14px/1 "Inter","Helvetica Neue","Hiragino Sans",sans-serif;
  letter-spacing: .08em;
  opacity: .85;
  margin: 0 0 10px;
  cursor: pointer;
  display: inline-block;
  width: max-content;
  padding: 2px 0;
  transition: opacity .25s ease, letter-spacing .25s ease;
}
.ns-cell__count em { font-style: normal; opacity: .6; margin-left: 6px; }
.ns-cell.is-active .ns-cell__count,
.ns-cell.is-visible .ns-cell__count { opacity: 1; letter-spacing: .12em; }

.ns-cell__title {
  font-size: clamp(20px, 6vw, 38px);
  font-weight: 700;
  letter-spacing: .04em;
  margin: 0 0 10px;
  line-height: 1.3;
  overflow: visible;
  text-overflow: clip;
}

.ns-cell__desc {
  font-size: clamp(12px, 3.5vw, 16px);
  line-height: 1.7;
  opacity: .92;
  margin: 0;
  overflow: visible;
  word-break: break-word;
}

/* ---------- リンク（2026-10-01・M7） ----------
   セル全体が加工技術ページの各区画へのリンク（inc/videos.php で <a class="ns-cell">）。
   ★ 以前の演出は「クリックで is-active（JS）」だけで、:hover は無かった。
     同じ見た目（白い内枠・動画の拡大・重ね色を濃く・番号の字間）を、マウスを載せたとき／キーボードで選んだときに当てる。 */
a.ns-cell { color: #fff; text-decoration: none; }
a.ns-cell:hover, a.ns-cell:focus-visible { box-shadow: inset 0 0 0 4px rgba(255,255,255,.85); z-index: 1; outline: none; }
a.ns-cell:hover .ns-cell__video, a.ns-cell:focus-visible .ns-cell__video { opacity: 1; transform: scale(1.05); }
a.ns-cell:hover .ns-cell__overlay, a.ns-cell:focus-visible .ns-cell__overlay { opacity: .8; }
a.ns-cell:hover .ns-cell__count, a.ns-cell:focus-visible .ns-cell__count { opacity: 1; letter-spacing: .12em; }

/* ---------- 題名の位置を3セルでそろえる（2026-10-01・M7・601px 以上） ----------
   ★ 以前は文のかたまりを下端にそろえていたので、説明文の行数で題名の位置が動いた
     （実測: PC 54.3px / tb 81.6px ずれ）。
   subgrid で「番号／題名／説明文」の3段を3セルで共有する。題名・説明文の段は一番長いセルの高さに
   そろい、余りは1段目（番号の上）が吸う＝文のかたまりは下寄せのまま。
   最低 4:5 は ::before の詰め物が3段をまたいで受け持つ（M4 の直しはそのまま）。
   SP（≤600px）は縦並びのままなので対象外。 */
@media (min-width: 601px) {
  .ns-bgvideos__inner { grid-template-rows: 1fr auto auto; }
  .ns-cell { grid-row: span 3; grid-template-rows: subgrid; }
  .ns-cell::before { grid-row: 1 / -1; grid-column: 1; }
  .ns-cell > .ns-cell__body {
    grid-row: 1 / -1; grid-column: 1;
    display: grid; grid-template-rows: subgrid;
    min-height: 0;
  }
  .ns-cell__count { align-self: end; }
  .ns-cell__title, .ns-cell__desc { align-self: start; }
}
/* 2列（601〜900px）は段が2つになるので、2段目も同じ決まり方（余りは番号の上）にする */
@media (min-width: 601px) and (max-width: 900px) {
  .ns-bgvideos__inner { grid-template-rows: 1fr auto auto 1fr auto auto; }
}

/* ---------- タブレット (≤900px) ---------- */
@media (max-width: 900px) {
  .ns-bgvideos__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- スマホ (≤600px) ─ 動画(上) → 文字(下) 縦表示 ---------- */
@media (max-width: 600px) {
  .ns-bgvideos__inner {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ns-cell {
    aspect-ratio: auto !important;
    display: flex !important;
    flex-direction: column;
    height: auto;
    min-height: 0;
    background-image: none !important;
    overflow: hidden;
    isolation: auto;
  }
  .ns-cell.is-active { box-shadow: none; }
  .ns-cell::before { display: none; }   /* 縦横比の詰め物はスマホの縦並びでは使わない */

  /* 動画を「背景 absolute」から「前景 relative・16:9」へ */
  .ns-cell__video {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    z-index: auto;
    transform: none !important;
  }
  .ns-cell.is-visible .ns-cell__video,
  .ns-cell.is-active  .ns-cell__video { opacity: 1 !important; transform: none !important; }

  /* オーバーレイはモバイルでは不要（非表示） */
  .ns-cell__overlay { display: none; }

  /* テキスト部分：動画の直下にタイト配置（末尾にスペース） */
  .ns-cell__body {
    position: relative;
    height: auto;
    min-height: 0;
    flex: none;                          /* ← 伸長を停止 */
    display: block;
    padding: 0 16px 20px;                /* ← 上パディング撤廃 */
    background: #0b1626;
  }
  .ns-cell__count  { margin: 12px 0 6px; }   /* ← 動画との呼吸 (12px) */
  .ns-cell__title  { font-size: clamp(20px, 6vw, 26px); margin: 0 0 8px; line-height: 1.35; }
  .ns-cell__desc   { font-size: clamp(13px, 3.6vw, 15px); line-height: 1.7; }
}

/* ---------- 極小スマホ (≤380px) ---------- */
@media (max-width: 380px) {
  .ns-cell__body  { padding: 0 14px 18px; }
  .ns-cell__count { margin: 10px 0 4px; }
  .ns-cell__title { font-size: 20px; margin: 0 0 6px; }
  .ns-cell__desc  { font-size: 13px; }
}

/* ---------- アクセシビリティ / 省エネ ---------- */
@media (prefers-reduced-motion: reduce) {
  .ns-cell { transition: none; }
}
/* ============================================================
   スマホ・タブレットの余白調整（961px以上＝PCは変更していない）

   考え方は下層4ページと同じ：
     余白は「項目の中」ではなく「項目の切れ目」に置く。
     → カウンターと見出しは近づけ、説明文の後ろを大きく空ける。

   ── なぜ打ち消しが必要か ──────────────────────────
   .ns-cell__title は <h3> で、ショートコードの出力は
   旧エディタ拡張のラッパー の中に入る。そのため 旧エディタ拡張の

     :is(旧エディタ拡張のラッパー, .editor-styles-wrapper) * + h3      { margin-top: 80px }
     @media (max-width:767px){ 同 * + h3                  { margin-top: 50px } }
     :is(旧エディタ拡張のラッパー, .editor-styles-wrapper) h3:has(+ *)  { margin-bottom: 20px }

   が効いてしまう。詳細度は (0,1,1) で、.ns-cell__title の
   (0,1,0) では負ける。.ns-cell を前置きして (0,2,0) にすると
   !important なしで打ち消せる。
   ────────────────────────────────────────────

   ※ 値は下層ページの共通トークン（miki-pages.css の
      @media 内）と揃えている。このファイルは .miki-* の外側で
      読み込まれるためトークンを参照できないので直接書いている。
        6px  = --gap-in-item        （密接につながる要素）
        64px = --gap-between-blocks （大きな項目の切れ目）
   ============================================================ */

/* カウンター → 見出し → 説明文 は「1つの項目の中」なので詰める */
@media (max-width: 960px) {
  .ns-cell .ns-cell__count { margin-bottom: 0; }      /* 上の 12px は据置 */
  .ns-cell .ns-cell__title { margin-top: 6px; margin-bottom: 8px; }
  .ns-cell .ns-cell__desc  { margin-top: 0; margin-bottom: 0; }
}

/* 縦積みになる幅でのみ、余白を項目の切れ目へ移す */
@media (max-width: 600px) {
  .ns-bgvideos__inner { gap: 0; }
  .ns-cell .ns-cell__body { padding-bottom: 64px; }
}