/* ==========================================================================
   組織と文化  (/recruit/culture/)
   出典(レイアウト): Figma「POTOSITE_FINAL」組織と文化 (node 4172:2194)

   ・フォーマット/レイアウトのみFigmaに準拠。
   ・文字サイズ・色・余白は他のRECRUITページに合わせる(tokens.css / page-recruit.css)。
     RECRUITはゴシック主体・明朝は使わない方針なので、Figmaで明朝だったキャッチも
     ゴシック(H2-San)に寄せている。
   ・page-recruit.css を土台に読み込む(.recruit-page / .rec-section / .rec-cta を使う)。
   ========================================================================== */

/* ---------- 3ブロックの詳細 ---------- */

/*
 * 左にロゴ、右に本文。
 *
 * 右側は「ラベル + 見出し + 文章」と「小項目」の2かたまりに分けてある。
 * ロゴは上のかたまりだけを相手にして、その高さの中央に置く。
 * 右側全体を相手にすると、小項目の写真まで含めた長さの中央になり、
 * ロゴが見出しからかなり下へ落ちてしまう。
 *
 * 縦のすき間は小項目側が自分で持っている(.cul-item の margin と罫線)ので、
 * ここでは横のすき間だけを空ける。
 */
.cul-block {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  column-gap: var(--space-3xl);
  row-gap: 0;
  padding-top: var(--rule-row);
  border-top: 1px solid var(--color-line);
}

.cul-block__aside {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  /*
   * ロゴの周りに確保する余白(アイソレーション)。
   *
   * ロゴは枠にぴったり接すると窮屈に見える。
   * 大きさで調整する(90%にするなど)と左端だけが枠に付いたままになり、
   * 右にだけ空きができて偏る。上下左右に同じだけ空けておけば、
   * どの向きにも同じ距離が保たれる。
   */
  padding: var(--space-md);
}

.cul-block__intro {
  grid-column: 2;
  grid-row: 1;
}

.cul-block__items {
  grid-column: 2;
  grid-row: 2;
}

.cul-block + .cul-block {
  margin-top: var(--rule-row);
}

/* ロゴ。大きさは上のアイソレーションの内側いっぱい */
.cul-block__aside img {
  width: 100%;
  height: auto;
}

/* 番号 + 柱名。瑠璃色の英字ラベル */
.cul-block__eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-ruri);
}

/* 見出し。ゴシック H2-San */
.cul-block__heading {
  /* 英字ラベル → 見出し。全ページ共通の8px */
  margin-top: var(--space-xs);
  font: var(--type-h2-san);
  letter-spacing: var(--ls-heading);
  color: var(--color-ink);
}

.cul-block__lead {
  /* 見出し → 中身。全ページ共通の24px(tokens.css の --rule-head) */
  margin-top: var(--rule-head);
  /* 見出しの下のリード文。全ページ共通で Lead Body(16px) */
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

/* 小項目(賞・研修など)。上に区切り線 */
.cul-item {
  margin-top: var(--rule-row);
  padding-top: var(--rule-row);
  border-top: 1px solid var(--color-line);
}

/*
 * 小項目の見出し。
 *
 * 以前は font: 700 17px の生指定だった。
 * サイト全体は 350 / 400 / 500 の3段階しか使っておらず、
 * 700はここだけ。並べたときに1つだけ声が大きく聞こえるので、
 * 文章の中の小見出しに使う --type-h3-san(500 / 16px)にそろえた。
 * ポリシー各ページの中見出しと同じ扱い。
 */
.cul-item__label {
  font: var(--type-h3-san);
  letter-spacing: var(--ls-heading);
  color: var(--color-ink);
}

.cul-item__body {
  margin-top: var(--space-sm);
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

/*
 * 小項目の写真。2枚を横に並べる。
 * 以前は2枚をつないだ1枚の画像だったので枠は1つでよかったが、
 * 支給データが1枚ずつになったので、こちらで並べる。
 *
 * 間は空けない。もともと1枚の横長写真だったものに戻す形で、
 * 2枚を突き合わせて1枚の帯に見せる。
 */
.cul-item__figure {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: var(--space-md) 0 0;
}

/*
 * 2枚の形をそろえる。写真の元の縦横比はばらつくので、
 * 枠を4:3に決めて切り抜く(object-fit: cover)。
 * そろえないと、高さの違う2枚が段違いに見えてしまう。
 */
.cul-item__photo {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.cul-item__figure img,
.cul-item__figure .placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 枠の高さは .cul-item__photo が決めるので、こちらの比率指定は外す */
  aspect-ratio: auto;
}

/* ---------- スマートフォン ---------- */

@media (max-width: 768px) {
  /* ロゴを上、本文を下に積む */
  /* 狭い画面は縦積み。ロゴ → 導入 → 小項目 の順に並べ直す */
  .cul-block {
    grid-template-columns: 1fr;
    row-gap: var(--space-lg);
  }

  .cul-block__aside,
  .cul-block__intro,
  .cul-block__items {
    grid-column: 1;
    grid-row: auto;
  }

  /*
   * ロゴ。
   *
   * 横並びをやめて縦積みにすると、ロゴの左に本文が来なくなるので
   * 左端に寄っていると据わりが悪い。左右の中央に置く。
   *
   * 大きさは 240px から 300px に。狭い画面では
   * 余白(container の左右 + .cul-block__aside の 24px)に阻まれて
   * 画面幅ぶんまでしか広がらないので、max-width は上限として効く。
   */
  /*
   * 2枚の写真。
   * 狭い画面では、突き合わせた2枚の合計が 16:9 になるようにする。
   * 隙間が無いので1枚あたりの幅は全体の半分。
   * よって1枚の比率は (16 / 2) : 9 = 8 : 9 になる。
   */
  .cul-item__photo {
    aspect-ratio: 8 / 9;
  }

  .cul-block__aside img {
    display: block;
    max-width: 300px;
    margin-inline: auto;
  }
}