/* sections/station.css — 施設一覧＋全幅ビジュアル帯
   Figma: Frame 4349 (node 1180:8649) = p-station + p-top_visual__img */

/* ==========================================================================
   p-station — 施設一覧
   ========================================================================== */
.p-station {
  position: relative;
  isolation: isolate; /* ::before(z:-1) を自身の背景より前・コンテンツより後ろに閉じ込める */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: var(--space-80);
  padding-bottom: var(--space-200); /* Figma: 200px（下のビジュアル帯が80px重なる分を含む）*/
  /* Figma: 白い面は左上120pxの角丸。ノッチからは前セクションのベージュが覗く
     （トップ＝p-service、下層＝p-about-usage。いずれも tertiary-20）。
     ボックス自体をベージュ地にし、白い角丸面は ::before で重ねる。 */
  background: var(--color-tertiary-20);
}

.p-station::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-start-start-radius: var(--radius-2xl); /* Figma: 左上120px */
  background: var(--color-white);
}

.p-station__inner {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-80);
  align-items: center;
}

/* Figma: コンテンツはパディング無しの960px幅（1200pxのinner内で中央寄せ）。
   バッジ左端はコンテンツ列（960px）の左端に揃う。 */
.p-station__content {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 60rem; /* Figma: 960px */
}

/* --- 施設アイテム ------------------------------------------------------- */
.p-station__item {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-48);
  align-items: center;
  justify-content: center;
  overflow: clip;
  width: 100%;
  border-radius: var(--radius-10); /* Figma: 10px */
}

.p-station__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--space-32);
  align-items: flex-start;
  min-width: 0;
}

.p-station__head {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-16);
  align-items: flex-start;
  width: 100%;
}

/* エリアのピルバッジ（モーヴ）*/
.p-station__area {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-24);
  border-radius: var(--radius-full);
  background: var(--color-mauve);
  color: var(--color-white);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}

.p-station__name {
  width: 100%;
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-wide);
}

/* Figma: 施設名の一部（「内併設」「（元気…）」）は Bold で組む */
.p-station__name-sub { font-weight: var(--font-weight-bold); }

.p-station__detail {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-24);
  align-items: flex-start;
  width: 100%;
}

.p-station__address {
  width: 100%;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
}

/* 詳細リンク（アウトラインのピル＋外部リンクアイコン）*/
.p-station__link {
  display: inline-flex;
  flex-shrink: 0;
  gap: var(--space-16);
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-24);
  border: var(--border-width) solid var(--color-ink);
  border-radius: var(--radius-full);
  color: var(--color-gray-20);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}
.p-station__link { transition: background-color var(--transition-fast) ease; }
.p-station__link:hover { text-decoration: none; background: var(--color-gray-light); }

.p-station__link-icon {
  flex-shrink: 0;
  width: 0.889rem;  /* Figma: 14.22px */
  height: 0.883rem; /* Figma: 14.129px */
}

/* 施設写真（Figma: アーチ型のベクターマスクに写真フィル。
   マスク形状は書き出し画像（白背景に合成済み）に焼き込み。CSS側で角丸は付けない。
   ※セクション背景が白である前提。背景色を変える場合は画像の再書き出しが必要。 */
.p-station__img {
  flex-shrink: 0;
  width: 20.4375rem;  /* Figma: 327px */
  height: 16.773rem;  /* Figma: 268.361px */
}

.p-station__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   p-top_visual — 全幅の写真帯（上角を120pxで丸める）
   ========================================================================== */
.p-top-visual {
  position: relative;
  /* Figma: p-station に80px重ねる（帯が無い下層ページに影響しないよう、負マージンは帯側に持つ）*/
  margin-top: calc(var(--space-80) * -1);
  width: 100%;
  height: 40rem; /* Figma: 640px */
  overflow: clip;
  border-start-start-radius: var(--radius-2xl);
  border-start-end-radius: var(--radius-2xl);
}

.p-top-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-top-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}

/* ==========================================================================
   SP（767px以下）— 施設アイテムを写真上・テキスト下の縦積みに
   ========================================================================== */
@media (max-width: 767px) {
  /* p-about と同じ上余白に揃える（角丸は共通トークン --radius-2xl のまま）。
     下は下層ページ（帯なし）は --space-64。
     トップページはビジュアル帯が80px重なるため --space-240 を確保する */
  .p-station {
    padding-top: var(--space-120);
    padding-bottom: var(--space-64);
  }

  .p-station--with-visual {
    padding-bottom: var(--space-240);
  }

  .p-station__inner {
    gap: var(--space-24);
    width: 100%;
  }

  .p-station__item {
    flex-direction: column-reverse; /* DOMは本文→写真の順。表示は写真を上に */
    gap: var(--space-24);
  }

  .p-station__img {
    width: 100%; /* コンテンツ幅いっぱい */
    height: auto;
    aspect-ratio: 327 / 268.361;
  }

  .p-station__body {
    gap: var(--space-8);
    width: 100%; /* コンテンツ幅いっぱい */
  }

  .p-station__head { gap: var(--space-8); }

  /* タップしやすい高さに拡張し、中央揃えに */
  .p-station__link {
    align-self: center;
    padding: var(--space-12) var(--space-32);
  }

  /* エリアバッジは小さく */
  .p-station__area {
    padding: var(--space-2) var(--space-16);
    font-size: var(--font-size-h6);
  }

  /* 施設名は「…NIIZA 内併設」までが1行に収まるサイズへ */
  .p-station__name { font-size: var(--font-size-h3-lg); }

  .p-top-visual { height: 20rem; }
}