/* ==========================================================================
   demo/b1-about.css — グローカルとは
   --------------------------------------------------------------------------
   この節は拾い読みの対象ではなく、読ませる文章。
   課題セクション（b1-issues.css）が「並べて見比べる」組み方なのに対し、
   こちらは「順に読ませる」組み方にする。

   原稿の構造：
     宣言（見出し）→ 問い → 反論の受け止め → しかし → 定義

   ★問いを左に大きく置き、答えを右に流す。
     「中小企業に、戦略は必要なのか。」は読み手自身の疑いを言葉にしたもの。
     本文と同じ大きさで流すと、ただの導入文に見えて受け止めが効かない。
     先に大きく掲げてから答えることで、反論に正面から答える形になる。
   ========================================================================== */

/* 白の節が続いたあとなので、薄い紺の面で区切る。
   装飾ではなく、話題が変わったことを示すための面。 */
.about {
  background-color: var(--color-bg-tint);
  padding-block-start: clamp(3rem, 4vw, 5rem);
}

.about__body {
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-12));
  margin-top: clamp(var(--space-4), 2vw, var(--space-6));
}

@media (min-width: 900px) {
  .about__body {
    /*
      ★右の列をコラージュの幅ちょうどにして、余りを左へ渡す（三嶋指示）。

      以前は 5fr / 6fr（480 / 576px）で、コラージュ 460px との差 116px が
      右カラムの中に空きとして残り、左のテキストが窮屈に見えていた。
      右を minmax(0, 28.75rem) で頭打ちにすれば、余った 116px は
      1fr の左が吸う。1440px で 596 / 460px。
      本文 1 行の文字数は 28 → 35 文字になる（和文の適正 30〜40 の範囲）。
    */
    grid-template-columns: minmax(0, 1fr) minmax(0, 28.75rem);
    gap: clamp(5rem, 7vw, 7.5rem);
    align-items: center;
  }
}

/*
  問い。
  ★見出し（--text-4xl）より一段小さくしている。
    同じ大きさにすると見出しと張り合い、どちらが節の主題か分からなくなる。
    主題は宣言（見出し）で、問いはその中の一場面。
*/
.about__question {
  color: var(--color-text-strong);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

/* ★問いと本文の間に余白（三嶋指示）。
   問いは «受け止め»、本文は «答え» で役割が違うので、
   段落間（--space-6）より明確に広く取って段を分ける。 */
.about__text {
  margin-top: clamp(var(--space-6), 2.5vw, var(--space-8));
}

.about__text > p {
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--lh-body);
}

/* 段落の間。行間より明確に広く取らないと、3 段落が 1 かたまりに見える */
.about__text > p + p {
  margin-top: var(--space-6);
}

/* 問いのあとに答えが続く、という順序を登場でも作る */
.about__text {
  transition-delay: 160ms;
}

/* ==========================================================================
   右側の写真コラージュ（案A のヒーローと同じ 4 枚・同じ構成）
   --------------------------------------------------------------------------
   ★角丸 22px と影は案A から持ち込んだ値。
     B-1 の他の要素（紺のラベル・細い罫・楕円の輪）は角を立てているので、
     ここだけ丸い。案A の見え方をそのまま移すという指示なのでこうしているが、
     B-1 の調子に寄せるなら角を落とす選択もある。

   ★段差は 1 回だけ。ばらけさせるとギミックになる（案A と同じ判断）。
   ========================================================================== */
/* ★幅を絞る（三嶋指示）。
   カラム幅いっぱい（576px）だと全体が 709px になり、
   テキスト側（543px）より 166px 高くて重心が右に寄っていた。
   460px にすると 566px まで下がり、テキストとほぼ釣り合う。
   タイルの寸法はここに連動するので、触るのはこの 1 値だけでよい。

   右端はコンテナに揃える。中央寄せにすると左右の空きが
   不揃いになり、見出しや本文の右端とも合わなくなる。 */
.about__collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1rem, 1.5vw, 1.5rem);
  align-items: start;
  /* 幅の上限は列（.about__body の 2 列目）が持つようになったので、
     ここでは列いっぱいに広げるだけでよい。
     ★以前ここで max-width ＋ justify-self: end としたときは、
       幅が内容依存になって 1fr の列が min-content まで潰れ、
       タイルが 0px になった。幅は必ず確定させること。 */
  width: 100%;
}

.about__col {
  display: grid;
  gap: clamp(var(--space-3), 1.5vw, var(--space-5));
}

/* 右列だけ下げる。2 カラムが成立する幅でのみ */
@media (min-width: 900px) {
  .about__col--offset {
    margin-block-start: clamp(var(--space-6), 3vw, var(--space-10));
  }
}

.about__tile {
  /* ★案A の実寸指定（トークンの上限 8px 超え）。トークンには昇格させない */
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.about__tile--portrait {
  aspect-ratio: 3 / 4;
}

.about__tile--square {
  aspect-ratio: 1.3 / 1;
}

.about__tile--landscape {
  aspect-ratio: 4 / 3;
}

.about__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}