/*
 * 2026-11-03 東京UBA：記事まわりのブラッシュアップ（保管庫 東京UBA/02_作業/2026-11-03 全体のブラッシュアップ提案（3巡目）.md）
 * ① 写真ギャラリー（Modula）：マウスを乗せたときの黒い影 → ロゴの青がうっすら乗る
 * ② 写真を押して大きく出る画面（fancybox）：黒い背景 → 深い青
 * ③ 活動レポートの記事の下「ほかの記録も読む」（uba/article.php）
 * 色は 東京UBA/東京UBAのブランドカラー.md（--uba-brand* は style.css の最後）
 */

/* ① ギャラリーの影 */
/* Modula がギャラリーの要素に style="--modula-hover-overlay-tint:#000000; …" を直接書くので、!important で上書きする */
.modula.modula-gallery { --modula-hover-overlay-tint: #3876BC !important; --modula-hover-dim-active-opacity: .24 !important; }

/* ② 大きく出る画面 */
/* Modula の lightbox の CSS はあとから読み込まれる（同じ強さだと負ける）ので !important */
.modula-fancybox-container { --fancybox-bg: #2D5E95 !important; --fancybox-backdrop-bg: #2D5E95 !important; }
.modula-fancybox-container .fancybox__backdrop { background: #2D5E95 !important; }

/* ③ ほかの記録も読む */
.uba4-arel { max-width: 1200px; margin: 72px auto 0; padding: 0 5vw; box-sizing: content-box; }
.uba4-arel__title { margin: 0 0 20px; padding: 0 0 0 14px; border-left: 3px solid var(--uba-brand, #3876BC); font-size: 20px; line-height: 1.5; font-weight: 700; color: var(--uba-brand-ink, #1c2b3d); }
.uba4-arel__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.uba4-arel__list li { margin: 0; padding: 0; }
.uba4-arel__list li::before { content: none; }
.uba4-arel__list a { display: grid; gap: 8px; color: var(--uba-brand-ink, #1c2b3d); text-decoration: none; }
.uba4-arel__img { display: block; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background: var(--uba-brand-pale, #EBF2F9); }
.uba4-arel__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.uba4-arel time { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--uba-brand, #3876BC); }
.uba4-arel strong { font-size: 15px; line-height: 1.6; font-weight: 700; transition: color .2s ease; }
@media (hover: hover) {
  .uba4-arel__list a:hover img { transform: scale(1.05); }
  .uba4-arel__list a:hover strong { color: var(--uba-brand, #3876BC); }
}
@media (max-width: 1000px) {
  .uba4-arel { margin-top: 56px; padding: 0 20px; }
  .uba4-arel__title { font-size: 18px; }
  .uba4-arel__list { grid-template-columns: 1fr; gap: 14px; }
  .uba4-arel__list a { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: start; }
  .uba4-arel__img { grid-row: 1 / span 2; }
  .uba4-arel strong { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .uba4-arel__img img { transition: none; }
}