/**
 * Image Pin Block — Frontend shell CSS(SVG Scene Renderer移行後)。
 *
 * Main Image・丸Pin・Marker・Label・Bubble・PC PopoverのVisualは、すべて
 * svg-renderer.jsがJSで直接SVG要素へ属性・styleを設定する(単一Renderer原則。
 * 21節)。このファイルに残るのは、JSが実際に生成・操作するSVGの外側にある
 * shell UI(Scene mount host自体のレイアウト・拡大表示ボタン・Mobile Description
 * Panelという別UI・Lightboxの外枠)だけであり、Pin/Marker/Label/Popoverの見た目に
 * 関するCSSルールは(縁取り・背景色のCSSカスタムプロパティ変換ルールを含めて)
 * 一切持たない。
 */

.image-pin-block {
	position: relative;
}

/* Scene(SVG)のmount host。svg-renderer.jsが生成する<svg>を直接の子として持つ。
   高さは明示せず、SVGルート自身のintrinsic aspect ratio(viewBoxから決まる。
   <img width:100%;height:auto>と同じ挙動)に任せる(レスポンシブ表示。旧
   .image-pin-block__image{width:100%;height:auto}と同じ考え方)。 */
.image-pin-block__scene-host {
	display: block;
	width: 100%;
}

.image-pin-block__zoom-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 0;
	cursor: pointer;
	z-index: 5;
}

.image-pin-block__zoom-btn:hover,
.image-pin-block__zoom-btn:focus-visible {
	background: rgba(0, 0, 0, 0.75);
}

/* 説明文中のジャンプ用リンク。PC Popover側(SVG内の本物の<a>。class="ipb-popover-link"、
   svg-renderer.js参照)・Mobile Panel側(通常のHTML<a>、class="image-pin-block__desc-link"、
   view.js参照)の両方に、同じ最小限の見た目(下線・pointerで示すカーソル)だけを与える。
   文字色自体はPopover/Mobile Panelそれぞれの文字色設定にfillまたはcolorとして
   すでに反映されているため、ここでは上書きしない。 */
.image-pin-block__desc-link,
.ipb-popover-link {
	cursor: pointer;
}

.image-pin-block__desc-link {
	color: inherit;
	text-decoration: underline;
	display: block;
}

.ipb-popover-link {
	text-decoration: underline;
}

/* 説明文の手動改行(Textareaで入力した\n)をそのまま見た目に反映する。Mobile Panel専用
  (PC Popover側の折り返し・改行はscene-text.jsが行レベルで確定させ、SVG<text>/<tspan>へ
   1行ずつ描画するため、このCSSは関与しない)。長い単語・URL等で極端にはみ出さないよう、
   単語境界に関わらず折り返す。保存データ自体は普通の文字列のまま(<br>等のHTMLは
   一切挿入しない)。 */
.image-pin-block__desc-body {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* Mobile Description Panel(Scene-external HTML。SVG Sceneの内側ではなく、常に
   この独立したHTML要素として表示する別UI。29節)。背景色・文字色・縁取りは
   view.js(applyMobilePanelStyle)がAttributesから直接inline styleとして設定する
   (旧実装のCSSカスタムプロパティ経由の変換はPHPが値を計算しなくなったため廃止。
   フォールバック自体は従来と同じ#f9f9f9・テーマの文字色継承のまま変更していない)。
   デスクトップでは常にdisplay:noneのまま(下のmedia query内でのみ表示され得る。
   常時desktop非表示は既存仕様どおり)。 */
.image-pin-block__mobile-panel {
	display: none;
	margin-top: 12px;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
}

.image-pin-block__mobile-panel[hidden] {
	display: none;
}

/* 600px は view.js の MOBILE_BREAKPOINT と必ず一致させること。 */
@media (max-width: 600px) {
	/* PC Popoverはmobile viewportでは開かれない(view.jsのisMobileViewport()ガードが
	   先に働くため、通常この状態にはならない)。JS未実行/読み込み前の一瞬・想定外の
	   状態への保険として、SVG内のPopover Groupも念のため隠す(data-role="popover"は
	   svg-renderer.jsが常に付与する属性)。 */
	.image-pin-block__scene-host [data-role="popover"] {
		display: none !important;
	}

	.image-pin-block__mobile-panel:not([hidden]) {
		display: block;
	}
}

/* ─── 拡大表示(Lightbox)。自前実装、テーマのLightboxには依存しない ───
   cloneNode()によるDOM複製は廃止し、Frontend本体と同じAttributes・
   同じRenderer(svg-renderer.js)を、独立したCamera/RenderStateで新しいhostへ
   mountするだけ(view.js参照)。Visual DOM自体は複製しない。 */

body.image-pin-block__zoom-open {
	overflow: hidden;
}

.image-pin-block__zoom-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	z-index: 100000;
	overflow: hidden;
}

.image-pin-block__zoom-stage {
	position: absolute;
	inset: 0;
	cursor: grab;
	touch-action: none;
}

.image-pin-block__zoom-stage:active {
	cursor: grabbing;
}

.image-pin-block__zoom-scene-host {
	display: block;
	width: 100%;
	height: 100%;
}

/* ブラウザ標準の画像ドラッグ(持ち出し)と、Lightbox自身の1本指ドラッグ操作が
   競合しないようにする。 */
.image-pin-block__zoom-scene-host img {
	-webkit-user-drag: none;
	user-select: none;
}

/* Lightbox内のMobile Panelは、Frontend本体と異なりCamera(Pan/Zoom)の対象では
   ないため、Pan位置に関わらず操作できるよう画面下端に固定表示する。 */
.image-pin-block__zoom-overlay .image-pin-block__mobile-panel {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	margin: 0;
	max-height: 40vh;
	overflow-y: auto;
	border-radius: 0;
	z-index: 100001;
}

.image-pin-block__zoom-controls {
	position: fixed;
	top: 16px;
	right: 16px;
	display: flex;
	gap: 8px;
	z-index: 100002;
}

.image-pin-block__zoom-control {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	font-size: 20px;
	line-height: 1;
}

.image-pin-block__zoom-control:hover,
.image-pin-block__zoom-control:focus-visible {
	background: rgba(0, 0, 0, 0.85);
}