/* p-locations — 事業所一覧セクション（Figma 3191:24496 実測値・全てトークン参照）
   縦レールは p-feature / p-flow と同じ「回転テキスト + 縦罫線」パターン。
   カード本体（p-locations__item）は cards.css 担当。 */

.p-locations {
  padding-top: var(--space-120);
  /* TODO: Figma実測は 102px（8の倍数でもトークンにも無い off-grid 値）。
     現状は最も近い --space-104 で実装。Figma修正 or トークン追加の判断待ち。 */
  padding-bottom: var(--space-104);
  background: var(--color-bg-beige); /* #FFF + #A89990 10%（Figma変数） */
  color: var(--color-text);
}

.p-locations__inner {
  display: flex;
  gap: var(--space-80);
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-40);
}
.p-locations__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

.p-locations__heading {
  margin: 0;
  font-size: var(--font-size-h2-lead); /* 25.6px */
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
}

/* 件数が3未満でもカード幅を1/3に保つため、flexではなく3カラム固定のグリッド */
.p-locations__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: var(--space-40);
}

.p-locations__list > * {
  min-width: 0;
}

/* --- SP（767px以下・inferred: SPフレーム未提供のため縦積みのみ） --- */

/* 縦レールは共通の .c-rail（base.css）。gapのみFigma実測に合わせる */
.p-locations .c-rail {
  gap: var(--space-40);
}

@media (max-width: 767px) {
  .p-locations {
    padding-block: var(--space-40) var(--space-64); /* SP共通のセクション上下余白 */
  }

  .p-locations__inner {
    position: relative; /* レール（c-rail）の基準 */
    flex-direction: column;
    gap: var(--space-32);
    padding-inline: var(--space-48) var(--space-24);
  }

  /* p-content と同じ扱い: レールはフローから外し、縦罫線の中心を左から24に合わせる */
  .p-locations .c-rail {
    position: absolute;
    left: var(--space-24);
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    gap: var(--space-16);
  }
  .p-locations__content {
    gap: var(--space-32);
  }

  .p-locations__list {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: var(--space-24);
  }
}