/* ==========================================================================
   Layout — l-*
   ========================================================================== */

.l-container {
  width: 100%;
  max-width: calc(var(--layout-container-max) + var(--layout-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.l-main {
  display: block;
}

/* ---- セクション（上下余白と、見出し → 本文の間隔） ----
   Figma: sec-services / sec-experts / sec-content-hub（PC: 上下 80px・要素間 64px / SP: 上下 64px・要素間 32px） */
.l-section {
  padding-block: var(--space-80);
}

.l-section--subtle {
  background-color: var(--color-bg-subtle);
}

.l-section__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  width: 100%;
  max-width: calc(var(--layout-container-max) + var(--layout-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.l-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.l-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

@media (max-width: 1023px) {

  .l-section {
    padding-block: var(--space-64);
  }

  .l-section__inner {
    gap: var(--space-32);
    padding-inline: var(--space-16); /* Figma SP: 左右 16px */
  }

  .l-section__body {
    gap: var(--space-24);
  }

  /* SP のセクションのリードは 16px / Medium / 行間 24px（静的HTML の p-section__lead・p-top-section-lead と同じ） */
  .l-section__lead {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    line-height: calc(24 / 16);
  }

  /* トップの「上場準備クラウド×専門家による実行支援」（サービスカードの節）だけ Bold / 行間 28px（静的HTML: .p-top-services__head） */
  .l-section:has(.c-card-service) .l-section__lead {
    font-weight: var(--font-weight-bold);
    line-height: calc(28 / 16);
  }
}

/* ---- グリッド（カード 3 列 → SP 1 列） ---- */
.l-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
}

@media (max-width: 1023px) {

  .l-grid-3 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
  }
}

/* ---- 横に並ぶ画像付きカード（c-card-column / event / case / news）の行を揃える（PC のみ。SP は 1 列のため可変のまま）
   同じ行のカードのタイトルの高さを一番長いものに合わせ、その下のメタ情報・タグの位置を揃える。
   li とカードを親のグリッドの 4 行（サムネイル・タイトル・メタ情報・タグ）に重ねる（subgrid）。
   空の行（タグなし等）で余白が出ないよう、行の間隔は gap ではなく各要素の margin-top で取る ---- */
@media (min-width: 1024px) {

  :is(.l-grid-3, .p-column-list__articles) > li:has(> :is(.c-card-column, .c-card-event, .c-card-case, .c-card-news)),
  :is(.l-grid-3, .p-column-list__articles) > li > :is(.c-card-column, .c-card-event, .c-card-case, .c-card-news) {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  :is(.l-grid-3, .p-column-list__articles) > li > * > :is(.c-card-column__body, .c-card-event__body, .c-card-case__body, .c-card-news__body) {
    display: contents;
  }

  /* 行を固定する（メタ情報が無いカードでもタグはタグの行に置く）。短いタイトルは行の上に寄せる */
  :is(.l-grid-3, .p-column-list__articles) > li > * > * > :is(.c-card-column__title, .c-card-event__title, .c-card-case__title, .c-card-news__title) {
    grid-row: 2;
    align-self: start;
    margin-top: var(--space-8); /* サムネイル → タイトル（カードの gap と同じ） */
  }

  :is(.l-grid-3, .p-column-list__articles) > li > * > * > .c-card-news__title {
    margin-top: var(--space-16); /* Card/News はサムネイル → 本文が 16px */
  }

  :is(.l-grid-3, .p-column-list__articles) > li > * > * > :is(.c-card-column__meta, .c-card-event__meta, .c-card-case__meta, .c-card-news__meta) {
    grid-row: 3;
    align-self: start;
    margin-top: var(--space-8); /* 本文の gap と同じ */
  }

  :is(.l-grid-3, .p-column-list__articles) > li > :is(.c-card-column, .c-card-event, .c-card-case, .c-card-news) > * > .c-tag-list {
    grid-row: 4;
    align-self: start;
    margin-top: var(--space-8);
  }
}

/* ---- セクション内の見出し + コンテンツのまとまり（複数並ぶとき）
   Figma: sec-content-hub / sec-cases（PC: 見出し → 本文 64px / SP: 32px） */
.l-section__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

@media (max-width: 1023px) {

  .l-section__group {
    gap: var(--space-32);
  }
}