/*
 * tsugumi-theme Child — 追加スタイル
 * 新規セクション（.scRoomLayoutLink）専用の CSS。
 * 2026-07-22: RL-B（facility ページ→room-layout 導線 CTA）
 * 2026-07-22 v2: フォント不一致・画像・レイアウトずれの修正（ボス指摘反映）
 * 2026-07-22 v3: ボス再指摘反映（れいやレビュー指摘も含め全ブレークポイントで追随）
 *   - 見出し(h3)は「施設概要」と完全に同じ見た目にするため、
 *     ★親テーマ css/style.css 側を直接編集し★ .scOverview の見出しルール
 *     （基本・768px+・1025px+・320px以下の4箇所すべて）に合流させた。
 *     このファイルでは背景色 #8EC030 の緑のみ独自維持。
 *     → 親テーマ変更差分は theme-archive/css/style.css で追跡・本番反映時は
 *       .scRoomLayoutLink を含む行を該当箇所に手動反映すること。
 *   - 本文 p のフォントサイズを「施設概要」住所テキスト（.scOverview .txt table td）と
 *     同じ 1.6rem に変更。1441px+ で 2.2rem に追随するメディアクエリも追加
 *   - .txt 幅を 1025px+ で 45%（.scOverview と同じ）に変更し pill 幅を完全一致させた
 *   - 画像は円形クロップをやめ、通常の角丸矩形画像に統一（全ブレークポイント共通）
 * 2026-07-22 v4: ボス再指摘4点対応
 *   - HTMLのマークアップ順序を txt→img に変更（モバイルで見出しが画像より上に来るように）
 *   - 独自のカード背景（薄緑・角丸・パディング）を完全撤去
 *   - ボタン(.normalLink)の中央寄せ不具合を修正
 *   - 画像に aspect-ratio + object-fit:cover を指定し縦長すぎを解消
 * 2026-07-22 v5: 余白調整（モバイルの画像上マージン・PCのセクション下マージン拡大）
 * 2026-07-22 v6: ボス指摘反映
 *   - モバイルで「見出し→説明文→画像→ボタン」の順にしたいとの指示に伴い、
 *     ボタン(.normalLink)を .txt の外に出し、CSS Grid で全ブレークポイントの
 *     配置を明示的に制御する方式に変更（flex+orderでは button だけを .txt から
 *     視覚的に分離しつつ画像を挟むレイアウトが困難なため）
 */

/* ==========================================================
   scRoomLayoutLink — facility ページ「ご利用料金」直下の導線
   見出し(h3)のサイズ・形は親テーマ css/style.css 側で
   .scOverview の見出しルールに合流させて完全一致させている。
   ========================================================== */

/* --- モバイル（既定）: 見出し→説明文→画像→ボタン の縦積み --- */
.facilityDetail .scRoomLayoutLink {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "txt"
    "img"
    "link";
  row-gap: 24px;
  margin: 0 0 50px 0;
}

.facilityDetail .scRoomLayoutLink .txt {
  grid-area: txt;
}

.facilityDetail .scRoomLayoutLink .img {
  grid-area: img;
}

.facilityDetail .scRoomLayoutLink .normalLink {
  grid-area: link;
}

/* --- 本文（「施設概要」の住所テキストと同じ 1.6rem に統一） --- */
.facilityDetail .scRoomLayoutLink .txt > p {
  margin: 0 0 24px 0;
  font-size: 1.6rem;
  font-weight: bold;
  color: #646464;
  line-height: 1.7;
  letter-spacing: .06em;
}

.facilityDetail .scRoomLayoutLink .normalLink {
  margin: 0 auto;
}

/* --- 画像（円形クロップなし・通常の角丸矩形。縦長すぎないよう比率を固定） --- */
.facilityDetail .scRoomLayoutLink .img {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
}

.facilityDetail .scRoomLayoutLink .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

/* ==========================================================
   デスクトップ（768px〜）: 左カラムに見出し+説明+ボタン、
   右カラムに画像（4:3固定・v7でGrid行高への追従をやめ復元）を
   配置する2×2グリッド。
   ========================================================== */
@media screen and (min-width: 768px) {
  .facilityDetail .scRoomLayoutLink {
    grid-template-columns: 1fr 0.9fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "txt img"
      "link img";
    column-gap: 5%;
    row-gap: 0;
    align-items: center;
    /* 「施設概要」との間隔が狭かったため下部余白を拡大（ボス指摘・2026-07-22） */
    margin: 0 0 90px 0;
  }

  .facilityDetail .scRoomLayoutLink .txt {
    align-self: end;
  }

  .facilityDetail .scRoomLayoutLink .normalLink {
    align-self: start;
    /* Grid レイアウト内での中央寄せは margin:auto ではなく justify-self:center を使う */
    justify-self: center;
    margin-top: 24px;
  }

  .facilityDetail .scRoomLayoutLink .img {
    width: 100%;
    max-width: 420px;
    /* デスクトップでも 4:3 の比率を維持する（ボス承認済みのサイズに戻す・2026-07-22） */
    aspect-ratio: 4 / 3;
    margin: 0 auto;
    align-self: center;
  }
}

/* ==========================================================
   1025px〜: .scOverview .txt が 45% に狭まるのに合わせて統一
   （れいや指摘・2026-07-22：施設概要とpill幅を完全一致させるため）
   ========================================================== */
@media screen and (min-width: 1025px) {
  .facilityDetail .scRoomLayoutLink {
    grid-template-columns: 0.9fr 1fr;
  }
}

/* ==========================================================
   1441px〜: .scOverview .txt table td が 2.2rem に拡大するのに
   合わせて本文サイズも追随させる（れいや指摘・2026-07-22）
   ========================================================== */
@media screen and (min-width: 1441px) {
  .facilityDetail .scRoomLayoutLink .txt > p {
    font-size: 2.2rem;
  }
}

/* ============================================================
   room-layout ページ「リッチ化」3機能（2026-07-30・れいやレビュー済み設計）
   機能1: GLightbox（写真拡大表示）
   機能2: 設備リスト→対応写真の連動ボタン
   機能3: スクロール表示アニメーション（控えめ・reduced-motion対応）
   ============================================================ */

/* --- 機能1: ギャラリー画像のホバー演出（クリック可能であることを示す） --- */
.roomLayout .galleryItem a.glightbox {
  display: block;
  position: relative;
  cursor: zoom-in;
}

.roomLayout .galleryItem a.glightbox::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  border-radius: 10px;
  transition: background-color .25s ease;
  pointer-events: none;
}

.roomLayout .galleryItem a.glightbox:hover::after,
.roomLayout .galleryItem a.glightbox:focus-visible::after {
  background: rgba(0, 0, 0, .12);
}

/* --- 機能2: 設備リストの「写真を見る」ボタン --- */
.roomLayout .commonFeatures ul li.hasPhotoLink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 6px;
}

.roomLayout .featurePhotoBtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #65a120;
  background: #fff;
  border: 1px solid #8EC030;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
  line-height: 1.8;
  white-space: nowrap;
}

.roomLayout .featurePhotoBtn:hover,
.roomLayout .featurePhotoBtn:focus-visible {
  background: #8EC030;
  color: #fff;
}

.roomLayout .featurePhotoBtnIcon {
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  position: relative;
  flex-shrink: 0;
}

.roomLayout .featurePhotoBtnIcon::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 2px;
  width: 6px;
  height: 3px;
  border: 1.5px solid currentColor;
  border-bottom: none;
  border-radius: 2px 2px 0 0;
}

/* モバイルではボタンを独立した行にして押しやすくする（タップ領域確保） */
@media screen and (max-width: 767px) {
  .roomLayout .commonFeatures ul li.hasPhotoLink {
    padding-bottom: 4px;
  }
  .roomLayout .featurePhotoBtn {
    padding: 6px 14px;
    font-size: 1.3rem;
  }
}

/* --- 機能3: スクロール表示アニメーション --- */
.roomLayout .roomLayoutFadeReady {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}

.roomLayout .roomLayoutFadeIn {
  opacity: 1;
  transform: translateY(0);
}

/* 高齢者家族の閲覧にも配慮し、モーション低減環境では即表示（アニメーションなし） */
@media (prefers-reduced-motion: reduce) {
  .roomLayout .roomLayoutFadeReady {
    opacity: 1;
    transform: none;
    transition: none;
  }
}