/*
  写真ギャラリー
  一覧: 1枚目を大きく、残りを3列（狭い幅では2列）。枚数が3〜12枚のどれでも最後の行に穴が空かないよう、
  枚数を :has() で数えて、1枚目・2枚目・最後の1枚の大きさを変える。
  1段の高さは幅に合わせて変わるが、広い段組みに置いても大きくなりすぎないよう 240px で止める
  （変えたいときは --fhp-gallery-row-max）。
  拡大: <dialog> を画面いっぱいに開く。暗い地は --fhp-shade。
*/
.fhp-gallery { container-type: inline-size; }
.fhp-gallery-grid {
  --gap: 6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: min(calc((100cqi - var(--gap)) / 2 * .72), var(--fhp-gallery-row-max, 240px));
  grid-auto-flow: dense;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fhp-gallery-grid > li { min-width: 0; }
.fhp-gallery-grid > li:first-child { grid-column: span 2; grid-row: span 2; }
/* 2列のとき、枚数が偶数だと最後に1マス空くので最後の1枚を横長にする */
.fhp-gallery-grid:has(> li:nth-child(2n):last-child) > li:last-child { grid-column: span 2; }

@container (min-width: 560px) {
  .fhp-gallery-grid {
    --gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: min(calc((100cqi - 2 * var(--gap)) / 3 * .72), var(--fhp-gallery-row-max, 240px));
  }
  .fhp-gallery-grid:has(> li:nth-child(2n):last-child) > li:last-child { grid-column: auto; }
  /* 3で割って1余る枚数: 1枚目を横いっぱいにする */
  .fhp-gallery-grid:has(> li:nth-child(3n+1):last-child) > li:first-child { grid-column: span 3; }
  /* 3で割って2余る枚数: 2枚目を縦長にする */
  .fhp-gallery-grid:has(> li:nth-child(3n+2):last-child) > li:nth-child(2) { grid-row: span 2; }
}

.fhp-gallery-item {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--fhp-radius-s);
  overflow: hidden;
  background: none;
  cursor: zoom-in;
}
.fhp-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fhp-gallery-item:focus-visible { outline: 3px solid var(--fhp-accent); outline-offset: 2px; }
.fhp-gallery-hint { margin: .7rem 0 0; color: var(--fhp-muted); font-size: .88rem; line-height: 1.6; }

/* 拡大表示 */
.fhp-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--fhp-shade);
  color: #FFFFFF;
  overscroll-behavior: contain;
}
.fhp-lightbox::backdrop { background: var(--fhp-shade); }
.fhp-lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.fhp-lb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px clamp(12px, 3vw, 28px);
}
.fhp-lb-count { margin: 0; font-variant-numeric: tabular-nums; font-size: .95rem; letter-spacing: .06em; }
.fhp-lb-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 clamp(0px, 3vw, 28px);
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  cursor: zoom-out;
}
.fhp-lb-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: default;
  user-select: none;
  -webkit-user-drag: none;
}
.fhp-lb-img.is-shown { animation: fhp-lb-in .18s ease-out; }
@keyframes fhp-lb-in { from { opacity: 0; } to { opacity: 1; } }
.fhp-lb-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 20px;
  padding: 12px clamp(12px, 3vw, 28px) max(14px, env(safe-area-inset-bottom));
}
.fhp-lb-caption { margin: 0; font-size: .95rem; line-height: 1.6; }
.fhp-lb-nav { display: flex; gap: 8px; }
.fhp-lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  min-width: 48px;
  min-height: 48px;
  padding: 0 .9em;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--fhp-radius-s);
  background: transparent;
  color: #FFFFFF;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.fhp-lb-btn:hover { border-color: #FFFFFF; }
.fhp-lb-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.fhp-lb-btn svg { width: 22px; height: 22px; }
:root.fhp-lb-lock { overflow: hidden; }

@media (max-width: 559px) {
  .fhp-lb-foot { grid-template-columns: minmax(0, 1fr); }
  .fhp-lb-nav { justify-content: space-between; }
  .fhp-lb-nav .fhp-lb-btn { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fhp-lb-img.is-shown { animation: none; }
}