/* =============================================================
   Facilities & Breakfast（館内設備 & 朝食）共通
   対象: /service や館内設備・朝食セクション
   ============================================================= */

/* -------------------------------------------------------------
 * 1) 館内設備ギャラリー（fs-gallery）
 *    PC: 3カラム / タブレット: 2 / SP: 1
 *    ※ 画像の比率や角丸は trend-utility.css の
 *       .ratio-16x10 / .br-12 を利用
 * ---------------------------------------------------------- */

.fs-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 10px 0 20px;
}

.fs-gallery .fs-card {
  margin: 0;
  flex: 0 0 calc((100% - 28px) / 3);
  max-width: calc((100% - 28px) / 3);
}

/* タブレット以下: 2カラム */
@media (max-width: 1023.98px) {
  .fs-gallery .fs-card {
    flex-basis: calc((100% - 14px) / 2);
    max-width: calc((100% - 14px) / 2);
  }
}

/* スマホ: 1カラム */
@media (max-width: 639.98px) {
  .fs-gallery {
    gap: 12px;
  }
  .fs-gallery .fs-card {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* -------------------------------------------------------------
 * 2) 朝食ブロック（bf-split / bf-gallery）
 * ---------------------------------------------------------- */

/* メインの分割レイアウト（画像＋テキスト） */
#service .bf-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 12px 0 20px;
}

@media (min-width: 960px) {
  #service .bf-split {
    grid-template-columns: minmax(340px, 520px) 1fr;
    gap: 18px 22px;
    align-items: start;
  }
}

.bf-split .bf-media {
  margin: 0;
  align-self: start;
}

.bf-split .bf-text {
  align-self: start;
  line-height: 1.9;
}

/* bf-text 内の最初／最後の余白調整 */
.bf-text > :first-child {
  margin-top: 0 !important;
}
.bf-text > :last-child {
  margin-bottom: 0;
}

.bf-text > h1:first-child,
.bf-text > h2:first-child,
.bf-text > h3:first-child,
.bf-text > p:first-child,
.bf-text > ul:first-child,
.bf-text > ol:first-child {
  margin-top: 0 !important;
}

/* 空の <p> は消す（SCF起因の空行対策） */
.bf-text p:empty {
  display: none;
}

/* 汎用マージン */
#service .mt-12 {
  margin-top: 12px;
}

/* 朝食ギャラリー：SP=1列 / PC=3列 */
#service .bf-gallery {
  display: grid;
  grid-template-columns: 1fr; /* SP: 1列 */
  gap: 12px;
  margin: 12px 0 8px;
}

@media (min-width: 960px) {
  #service .bf-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

/* 画像：比率・角丸は .ratio-16x10 / .br-12 側で制御 */
#service .bf-media img,
#service .bf-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -------------------------------------------------------------
 * 3) 朝食テキスト & 基本情報（余白調整）
 * ---------------------------------------------------------- */

.breakfast-text {
  margin-top: 14px;
}

.breakfast-text p {
  margin: 10px 0;
  line-height: 1.8;
}

.breakfast-text .note {
  color: #666;
  font-size: 14px;
}

.breakfast-text .price {
  font-weight: 700;
  font-size: 18px;
  margin-top: 12px;
}

/* 基本情報（/service 内の「所在地」「チェックイン」など） */
.basic-info .info-section {
  margin: 16px 0;
}

/* アメニティ補足テキスト */
.amenity-note {
  margin: 10px 0 20px;
  line-height: 1.7;
}

/* Bの「画像→本文」の間隔を明示的にコントロール */
#service .bf-gallery {
  margin-bottom: 0;          /* もともとの 8px を消す */
}

/* Bだけ：ギャラリー直後の本文ブロック */
#service .bf-gallery + .bf-text{
  margin-top: 0;       /* 相殺の事故を避ける */
  padding-top: 2px;    /* PCはこのくらい */
}

@media (max-width: 639.98px){
  #service .bf-gallery + .bf-text{
    padding-top: 20px; /* SPは広め */
  }
}

/* Bの本文ブロックの下に余白が欲しいならこれ（Bだけ） */
#service .bf-gallery + .bf-text {
  margin-bottom: 20px;       /* 必要なら */
}


/* /service（このページだけ）で bf ブロックを確実に効かせる */
body.page-id-15 .bf-split{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin:12px 0 20px;
}

body.page-id-15 .bf-split .bf-text{
  line-height:1.9;
  font-size:16px;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* 本文内に見出しが混ざっても暴れないように */
body.page-id-15 .bf-text h1,
body.page-id-15 .bf-text h2,
body.page-id-15 .bf-text h3{
  font-size:18px;
  line-height:1.4;
  margin:0 0 10px;
}

body.page-id-15 .bf-text p{ margin:10px 0; }
body.page-id-15 .bf-text > :first-child{ margin-top:0; }
body.page-id-15 .bf-text > :last-child{ margin-bottom:0; }


/* =========================
   Amenity / Service Chips 共通
   - /room/・/service/ の .chip-list / .chip 用
========================= */

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;                 /* チップ同士のすき間 */
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

/* チップのすぐ後ろにセクション見出しが来る場合だけ、少し空ける */
.chip-list + .section-title {
  margin-top: 30px;
}

/* li自体をチップにする */
.chip-list li,
.chip-list .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.8em;
  border-radius: 8px;
  border: 1px solid #cfd4d9;
  background: #fff;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #333;
  white-space: normal;
  word-break: break-word;
}

/* 保険：.chip 単独で使っていても同じ見た目に */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.8em;
  border-radius: 8px;
  border: 1px solid #cfd4d9;
  background: #fff;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #333;
}