/* ==========================================================================
KOWA 写真の構図 ― 表示の正本
--------------------------------------------------------------------------
保存値（X / Y / 拡大率）から見た目を作るのは、このファイルだけ。
公開画面・編集画面のキャンバス・トリミング画面の3つが同じこれを読む。
■ 名前
外側フレーム 枠そのもの。テーマのレイアウトが決める。写真機能は広げない。
写真viewport 外側フレームから白フチ（--kowa-photo-inset）を引いた内側。
![]()
の箱がこれ。外側フレームより必ず小さいか同じ。
cover後画像 写真viewportを object-fit:cover で埋めたときの画像の大きさ。
viewport からはみ出した部分は「切り落とされている」。
■ いちばん大事なこと（3.34.52 はここを間違えた）
object-fit:cover のはみ出しは、箱の外に存在しない。切り取られている。
だから transform:translate で ![]()
を動かしても、
隠れた部分が出てくるのではなく、枠の地色が現れるだけになる。
cover のはみ出しを動かせるのは object-position だけ。
■ 計算（2つを同じ X / Y で動かす）
1. cover のはみ出し object-position: X*100% Y*100%
X=0 左端 ／ X=0.5 中央 ／ X=1 右端
Y=0 上端 ／ Y=0.5 中央 ／ Y=1 下端
はみ出しが無い向きへは、指定しても動かない（それが正しい）。
2. 拡大のぶんのはみ出し scale(z) で箱ごと大きくし、
translate((0.5-X)*(z-1)*100%, (0.5-Y)*(z-1)*100%) でその中を動かす。
％は ![]()
の箱（＝viewport）に対して解決される。
この2つは同じ X で直線的に動くので、合成しても直線になる。
X=0 → 写真の左端が viewport の左端にぴったり
X=1 → 写真の右端が viewport の右端にぴったり
X=0.5 → 中央
全体の移動量は「cover後画像 × 拡大率 − viewport」に一致する。
■ 決めごと
・transform-origin は 50% 50% 固定。位置と拡大の支点を兼用しない。
・translate は scale の外側なので、ずれ量が拡大率に引きずられない。
・白フチは外側フレームを広げない。内側の viewport を縮める。
縮めた viewport に対して cover と object-position が働くので、
白フチのぶんの計算はブラウザ側が自動で正しくする。
・画像の縦横比も枠の縦横比も要らない。実測もJavaScriptも要らない。
・未設定なら X=Y=0.5 / 拡大1 → object-position 50% 50% / 変形なし。
これまでの本文は見た目が1pxも変わらない。
========================================================================== */
.kowa-photo-display,
.kowa-photo-frame{
--kowa-photo-x:.5;
--kowa-photo-y:.5;
--kowa-photo-zoom:1;
--kowa-photo-inset:0px;
--kowa-frame-aspect:1;
/* 拡大でできるはみ出し（箱の1倍を超えたぶん） */
--kowa-zoom-over:calc(var(--kowa-photo-zoom) - 1);
--kowa-dx:calc((.5 - var(--kowa-photo-x)) * var(--kowa-zoom-over) * 100%);
--kowa-dy:calc((.5 - var(--kowa-photo-y)) * var(--kowa-zoom-over) * 100%);
/* 写真viewportで切り取る形（3.34.102）。使う場所だけが --kowa-photo-clip に入れる（下の「白フチ」）。
clip-path は変形（translate・scale）の前の座標で効くので、変形後に
「写真viewport（![]()
の元の箱）」と重なる範囲を、変形前の座標へ戻して切る。
上 = 50% − (50% + dy) / 倍率 下 = 50% − (50% − dy) / 倍率（左右も同じ。dx）
拡大1・移動なしなら 0（何も切らない）。 */
--kowa-photo-scale:calc(var(--kowa-photo-zoom) * var(--kowa-photo-hover-zoom,1));
--kowa-photo-clip-viewport:inset(
calc(50% - (50% + var(--kowa-dy)) / var(--kowa-photo-scale))
calc(50% - (50% - var(--kowa-dx)) / var(--kowa-photo-scale))
calc(50% - (50% - var(--kowa-dy)) / var(--kowa-photo-scale))
calc(50% - (50% + var(--kowa-dx)) / var(--kowa-photo-scale)));
}
/* 比率を選んだ場合、その比率がそのまま外側フレームの比率になる。 */
.kowa-photo-ratio-3-2{--kowa-frame-aspect:1.5}
.kowa-photo-ratio-4-3{--kowa-frame-aspect:1.33333}
.kowa-photo-ratio-1-1{--kowa-frame-aspect:1}
.kowa-photo-ratio-4-5{--kowa-frame-aspect:.8}
/* 3.34.116：横 5:4（横の六つ切り。12年アルバムで使う。縦の六つ切りは 4:5） */
.kowa-photo-ratio-5-4{--kowa-frame-aspect:1.25}
.kowa-photo-ratio-2-3{--kowa-frame-aspect:.66667}
/* -------------------------------------------------------------- 外側フレーム */
.wp-block-cover.kowa-photo-display,
.wp-block-image.kowa-photo-display .kowa-photo-crop-media,
.wp-block-image.kowa-photo-display.kowa-photo-nospan,
.kowa-photo-frame{
position:relative;
overflow:hidden;
box-sizing:border-box;
}
.wp-block-image.kowa-photo-display .kowa-photo-crop-media,
.kowa-photo-frame{
display:block;
max-width:100%;
}
/* 写真がリンクで囲まれている場合（figure > a > img）。
リンクは行内要素なので、枠の中では箱として扱う。
キャンペーンのカード写真がこの形。 */
.wp-block-image.kowa-photo-display a,
.wp-block-image.kowa-photo-display .kowa-photo-crop-media{
display:block;
}
/* -------------------------------------------------------------------- 写真
4つのセレクタは同じ1つの宣言を共有する（公開・編集キャンバス・モーダル）。
![]()
は置換要素なので width:auto と inset では伸びない。大きさを明示する。 */
.wp-block-cover.kowa-photo-display > .wp-block-cover__image-background,
.wp-block-image.kowa-photo-display .kowa-photo-crop-media > img,
.wp-block-image.kowa-photo-display.kowa-photo-nospan img,
.kowa-photo-frame > img{
display:block;
position:absolute;
top:var(--kowa-photo-inset);
left:var(--kowa-photo-inset);
right:auto;
bottom:auto;
width:calc(100% - 2 * var(--kowa-photo-inset))!important;
height:calc(100% - 2 * var(--kowa-photo-inset))!important;
max-width:none!important;
margin:0;
object-fit:cover;
/* Cover は WordPress が style 属性へ object-position を書き込むので、
ここで必ず勝つようにする。位置はこの1行だけが決める。 */
object-position:calc(var(--kowa-photo-x) * 100%) calc(var(--kowa-photo-y) * 100%)!important;
/* --kowa-photo-hover-zoom：カーソルを合わせたときに掛ける倍率（3.34.80）。
ふだんは未指定なので 1。トップページの撮影メニューなどが、ホバーのときだけ
写真を囲む枠にこの値（例 1.04）を置く。位置（translate）は変えず、拡大率だけを
「トリミングの拡大率×この倍率」にする。
以前は各所のホバーが transform:scale(…) でこの行を丸ごと置き換えていたため、
トリミングした写真がホバーの瞬間に元の位置・元の大きさへ戻っていた。
既定値は var() の第2引数に置く。.kowa-photo-display に既定値を書くと、
枠そのものに置いたホバーの値を打ち消してしまう。 */
transform:translate(var(--kowa-dx),var(--kowa-dy)) scale(calc(var(--kowa-photo-zoom) * var(--kowa-photo-hover-zoom,1)));
transform-origin:50% 50%;
/* 白フチ・額のマットがあるときだけ、写真viewportの外を切る（3.34.102）。
外側フレームの overflow:hidden は「枠の外」しか切らないので、拡大した写真が
内側のフチ・マットの上へ広がってしまう。フチの無い写真は今までどおり（none）。 */
clip-path:var(--kowa-photo-clip,none);
}
/* core/image で比率を選んでいないとき
---------------------------------------------------------------------
カバーと違って、画像ブロックの枠には決まった高さがない。
そこへ写真を敷き詰めると枠の高さが 0 になり、写真が消える。
この場合だけ、写真そのものが枠の高さを決める（流し込み）。
・cover のはみ出しは元々0なので、X/Y は拡大したときだけ効く（正しい）
・白フチは padding で内側を縮める（絶対配置ではないため）
トリミング画面（.kowa-photo-frame）は枠の大きさが決まっているので対象外。 */
.wp-block-image.kowa-photo-display:not([class*="kowa-photo-ratio-"]) .kowa-photo-crop-media,
.wp-block-image.kowa-photo-display.kowa-photo-nospan:not([class*="kowa-photo-ratio-"]){
padding:var(--kowa-photo-inset);
}
.wp-block-image.kowa-photo-display:not([class*="kowa-photo-ratio-"]) .kowa-photo-crop-media > img,
.wp-block-image.kowa-photo-display.kowa-photo-nospan:not([class*="kowa-photo-ratio-"]) img{
position:static;
width:100%!important;
height:auto!important;
}
/* 外側フレームの比率。テンプレート既定のときは何も指定しない（レイアウトに従う）。 */
.wp-block-cover.kowa-photo-display.kowa-photo-ratio-3-2,
.wp-block-cover.kowa-photo-display.kowa-photo-ratio-4-3,
.wp-block-cover.kowa-photo-display.kowa-photo-ratio-1-1,
.wp-block-cover.kowa-photo-display.kowa-photo-ratio-4-5,
.wp-block-cover.kowa-photo-display.kowa-photo-ratio-5-4,
.wp-block-cover.kowa-photo-display.kowa-photo-ratio-2-3{
aspect-ratio:var(--kowa-frame-aspect)!important;
min-height:0!important;
}
.wp-block-image.kowa-photo-display.kowa-photo-ratio-3-2 .kowa-photo-crop-media,
.wp-block-image.kowa-photo-display.kowa-photo-ratio-4-3 .kowa-photo-crop-media,
.wp-block-image.kowa-photo-display.kowa-photo-ratio-1-1 .kowa-photo-crop-media,
.wp-block-image.kowa-photo-display.kowa-photo-ratio-4-5 .kowa-photo-crop-media,
.wp-block-image.kowa-photo-display.kowa-photo-ratio-5-4 .kowa-photo-crop-media,
.wp-block-image.kowa-photo-display.kowa-photo-ratio-2-3 .kowa-photo-crop-media,
.wp-block-image.kowa-photo-display.kowa-photo-nospan.kowa-photo-ratio-3-2,
.wp-block-image.kowa-photo-display.kowa-photo-nospan.kowa-photo-ratio-4-3,
.wp-block-image.kowa-photo-display.kowa-photo-nospan.kowa-photo-ratio-1-1,
.wp-block-image.kowa-photo-display.kowa-photo-nospan.kowa-photo-ratio-4-5,
.wp-block-image.kowa-photo-display.kowa-photo-nospan.kowa-photo-ratio-5-4,
.wp-block-image.kowa-photo-display.kowa-photo-nospan.kowa-photo-ratio-2-3,
.kowa-photo-frame{
aspect-ratio:var(--kowa-frame-aspect);
}
/* 元画像のまま：枠もトリミングも拡大もしない（core/image だけ）
写真は絶対配置をやめて、元の大きさのまま流し込む。
3つの画面すべてに当てること。公開画面の書き方だけにすると、
編集画面のキャンバスとトリミング画面で枠の高さが 0 になり、写真が消える。 */
.wp-block-image.kowa-photo-display.kowa-photo-ratio-natural .kowa-photo-crop-media,
.wp-block-image.kowa-photo-display.kowa-photo-nospan.kowa-photo-ratio-natural,
.kowa-photo-frame.kowa-photo-ratio-natural{
display:inline-block;width:auto;max-width:100%;height:auto;
aspect-ratio:auto;overflow:visible;background:none;border:0;
}
.wp-block-image.kowa-photo-display.kowa-photo-ratio-natural .kowa-photo-crop-media > img,
.wp-block-image.kowa-photo-display.kowa-photo-nospan.kowa-photo-ratio-natural img,
.kowa-photo-frame.kowa-photo-ratio-natural > img{
position:static;width:auto!important;max-width:100%!important;height:auto!important;
object-fit:contain!important;object-position:50% 50%!important;transform:none!important;
clip-path:none!important;
}
/* 写真全体を表示（切り取らない） */
.wp-block-cover.kowa-photo-display.kowa-photo-fit-contain > .wp-block-cover__image-background,
.wp-block-image.kowa-photo-display.kowa-photo-fit-contain .kowa-photo-crop-media > img,
.wp-block-image.kowa-photo-display.kowa-photo-fit-contain.kowa-photo-nospan > img{
object-fit:contain!important;object-position:50% 50%!important;
background:#fff;transform:none!important;clip-path:none!important;
}
/* ------------------------------------------------------------------ 白フチ
外側フレーム（カードの外形・グリッド幅・高さ）は変えない。
内側の viewport を縮めるだけ。Cover の画像は position:absolute なので
padding では縮まない。そのため inset で直接縮め、線は枠自身に引く。 */
.kowa-photo-frame-thin{--kowa-photo-inset:5px}
.kowa-photo-frame-standard{--kowa-photo-inset:11px}
/* 拡大した写真がフチの上へ広がらないよう、写真viewportで切る（3.34.102） */
.kowa-photo-frame-thin,
.kowa-photo-frame-standard{--kowa-photo-clip:var(--kowa-photo-clip-viewport)}
.kowa-photo-display.kowa-photo-frame-thin,
.kowa-photo-display.kowa-photo-frame-standard,
.kowa-photo-frame.kowa-photo-frame-thin,
.kowa-photo-frame.kowa-photo-frame-standard,
.wp-block-image.kowa-photo-display.kowa-photo-frame-thin .kowa-photo-crop-media,
.wp-block-image.kowa-photo-display.kowa-photo-frame-standard .kowa-photo-crop-media{
background:#fff;
border:1px solid rgba(58,52,47,.30);
box-sizing:border-box!important;
}
/* HOMEヒーロー固定枠補正：写真は独立scaleで拡大し、保存済み白フチは動かさない。
このマスクも写真viewportの正本へ置き、フチ幅の定義を重複させない。 */
/* 保存済みの白フチは固定。拡大する写真がフチへ重なるのを覆う。
3.34.108：全体表示以外の写真も、写真だけを拡大するようになったので、対象をトップの写真すべてへ広げた。 */
.kowa-home-hero-media>.wp-block-cover.kowa-home-hero-slide.kowa-hero-whole>.kowa-hero-frame.kowa-photo-frame-thin::after,
.kowa-home-hero-media>.wp-block-cover.kowa-home-hero-slide.kowa-hero-whole>.kowa-hero-frame.kowa-photo-frame-standard::after,
.kowa-home-hero-media>.wp-block-cover.kowa-home-hero-slide.kowa-photo-frame-thin::after,
.kowa-home-hero-media>.wp-block-cover.kowa-home-hero-slide.kowa-photo-frame-standard::after{
content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
box-shadow:inset 0 0 0 var(--kowa-photo-inset) #fff;
}
/* 自由レイアウトの写真も、ここだけの構図式を使う。元画像表示・未調整の写真にも固定した窓を適用する。
公開画面と編集キャンバスは同じ指定。未選択の区画には当たらない。 */
.kowa-free:not(.kowa-free-album) .kowa-free-item img{display:block!important;position:absolute!important;
top:var(--kowa-photo-inset,0px)!important;left:var(--kowa-photo-inset,0px)!important;
width:calc(100% - 2 * var(--kowa-photo-inset,0px))!important;
height:calc(100% - 2 * var(--kowa-photo-inset,0px))!important;max-width:none!important;max-height:none!important;
aspect-ratio:auto!important;object-fit:cover!important;
object-position:calc(var(--kowa-photo-x,.5)*100%) calc(var(--kowa-photo-y,.5)*100%)!important;
transform:translate(var(--kowa-dx,0px),var(--kowa-dy,0px)) scale(var(--kowa-photo-scale,1))!important;
transform-origin:50% 50%;clip-path:var(--kowa-photo-clip,none)!important}