/* ===================================================================
 * facility.css — 事業所紹介(block/page/facility.php)
 *
 * 地の並び: ページヒーロー(白 → クリーム)→ 拠点の一覧(クリーム)→ 高齢者(白)→ 子ども(クリーム)→ お問い合わせ(白)。
 * 拠点の一覧: 白い箱に2グループを 5:3 で並べ、拠点名をピル型のページ内リンクにする。ピルの左の丸はカテゴリ色。
 * 拠点のカード: 写真 4 : 文 8。白い地では罫線で区切り、クリームの地では白い箱に入れる(--boxed)。
 *   見出しの直後のカードと3事業所の箱は、上の罫線と余白を持たない(マークアップの pt-0 border-top-0)。
 * 3事業所の箱(--cluster): 上段に共通の写真と所在地・FAX、下段に事業所ごとの箱を3つ。
 * 所在地などの dl は共通の .access__list。
 * =================================================================== */

/* アンカーで着いたときの上の余白(ヘッダーの高さはスクロールの JS が足す)。拠点はカードの上端に着く */
.facility-card,
.facility-unit,
.facility-group {
  scroll-margin-top: var(--space-lg);
}

/* --- 拠点の一覧 --------------------------------------------------- */

.facility-index {
  padding-bottom: var(--space-4xl);
}

.facility-index__title {
  font-size: 1.25rem;
}

.facility-index__groups {
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
  padding-inline: 2.5rem;
}

/* タップ領域を 44px 以上にする */
.facility-index__group-name a {
  padding-block: 10px;
  text-decoration: none;
}

.facility-index__group-name a:hover {
  text-decoration: underline;
}

.facility-index__link {
  min-height: 44px;
  padding-block: 6px;
  border: 1px solid color-mix(in srgb, var(--project-color-text) 20%, transparent);
  font-size: 0.9375rem;
}

.facility-index__link:hover {
  background: var(--project-color-bg-subtle);
}

/* カテゴリ色の丸は飾り。拠点名で区別できるので色だけに頼らない */
.facility-index__link::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--project-color-category-housing);
}

.facility-index__link--nursing::before { background: var(--project-color-category-nursing); }
.facility-index__link--support::before { background: var(--project-color-category-support); }
.facility-index__link--selfpay::before { background: var(--project-color-category-selfpay); }
.facility-index__link--child::before   { background: var(--project-color-category-child); }

/* --- 拠点のカード ------------------------------------------------- */

.facility-card {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 2.5rem;
  padding-block: 2.5rem;
  border-top: 1px solid color-mix(in srgb, var(--project-color-text) 14%, transparent);
}

.facility-card--boxed {
  padding: 2.5rem;
}

.facility-card__visual {
  border-radius: var(--project-radius-lg);
}

.facility-card__name {
  line-height: 1.4;
}

/* テーマ既定の電話リンク(下線)より優先させるため a を付ける */
a.facility-card__tel {
  text-decoration: none;
}

a.facility-card__tel:hover {
  text-decoration: underline;
}

/* ぴっころ: 見出しに含まれる事業所ごとの種別・名前・電話 */
.facility-card__offices li {
  border-bottom: 1px dashed color-mix(in srgb, var(--project-color-text) 20%, transparent);
}

/* --- 3事業所の箱 -------------------------------------------------- */

/* 共通の写真は小さくし、主役は下の3事業所 */
.facility-card--cluster {
  grid-template-columns: 280px minmax(0, 1fr);
}

.facility-card__cluster-label {
  padding-block: 2px;
  font-size: var(--fs-sm);
}

.facility-units {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.facility-unit .facility-card__name {
  font-size: 1.25rem;
}

.facility-unit__catch {
  font-size: 0.9375rem;
}

.facility-unit__tel {
  font-size: var(--fs-lg);
}

.facility-unit__tel-label {
  font-size: 0.9375rem;
}

/* --- 子どものグループの頭の1文 ----------------------------------- */

.facility-group__lead {
  max-width: 40em;
  margin-top: calc(var(--space-lg) * -1);
  margin-bottom: 2.5rem;
}

/* --- 中間幅(lg 未満) --------------------------------------------- */

@media (max-width: 991.98px) {
  .facility-index__groups {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: var(--space-lg);
  }

  .facility-card {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--space-lg);
  }

  .facility-card--cluster {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .facility-units {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- SP(md 未満)------------------------------------------------- */

@media (max-width: 767.98px) {
  .facility-index {
    padding-bottom: 2.5rem;
  }

  .facility-index__title {
    font-size: 1.125rem;
  }

  .facility-index__link {
    font-size: var(--fs-sm);
  }

  .facility-card,
  .facility-card--cluster {
    grid-template-columns: minmax(0, 1fr);
  }

  .facility-card--boxed {
    padding: var(--space-lg);
  }

  /* 縦に長くなりすぎないよう、写真を横長(16:9)にする */
  .facility-card__visual {
    --bs-aspect-ratio: calc(9 / 16 * 100%);
  }

  /* タップ領域を 44px 以上にする */
  a.facility-card__tel {
    display: inline-block;
    padding-block: 10px;
  }

  .facility-unit .facility-card__name {
    font-size: 1.125rem;
  }

  .facility-group__lead {
    margin-top: calc(var(--space-md) * -1);
  }
}