/*
 * Component: Concept Section — thai-massage (hydrogen からハードコピー / CLAUDE.md ルール7)
 * Spec:      DESIGN.md §6 (index / about Concept)
 *
 * 参照 about: 中央スクリプト見出し（section-header--script）の下に、
 * 画像 + 本文を 2 段組で交互(zig-zag)配置する行（.concept-section__row）を積む。
 * 装飾英字リードは section-header 側、各行は和文見出し + 本文 + 写真で構成。
 *
 * 1 行のみの構成でも成立し、行を増やすだけで zig-zag が連続するよう
 * :nth-of-type(even) で画像/本文の左右を入れ替える。
 */

.concept-section__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-3xl);
  align-items: center;
  max-width: var(--container-max-width);
  margin: 0 auto;
}

/* 行が複数になった場合の縦間隔（単一行では効かない）。 */
.concept-section__row + .concept-section__row {
  margin-top: var(--gap-3xl);
}

/* zig-zag: 偶数行は本文を右、画像を左に入れ替える。 */
.concept-section__row:nth-of-type(even) .concept-section__body {
  order: 2;
}
.concept-section__row:nth-of-type(even) .concept-section__media {
  order: 1;
}

.concept-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.concept-section__lead {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-tertiary);
  margin: 0;
}

.concept-section__headline {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-heading-xl);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin: 0;
  /* 編集者がヒアリングで入れた改行を反映（既定 normal だと改行が空白に潰れる）。 */
  white-space: pre-line;
}

.concept-section__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
  margin: 0;
  white-space: pre-line;
}

.concept-section__media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* 画像の角に控えめな丸み（6px・CTA / カード / バナーと統一・宮田指示）。
     overflow:hidden（hover-zoom 共通）のため zoom する img も丸角にクリップされる。 */
  border-radius: 6px;
}

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

@media (max-width: 1024px) {
  .concept-section__row {
    gap: var(--gap-2xl);
  }
  .concept-section__row + .concept-section__row {
    margin-top: var(--gap-2xl);
  }
}

@media (max-width: 768px) {
  .concept-section__row {
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
  }
  .concept-section__row + .concept-section__row {
    margin-top: var(--gap-xl);
  }
  /* モバイルは常に画像が先・本文が後（zig-zag を解除して縦積み）。 */
  .concept-section__row:nth-of-type(even) .concept-section__body,
  .concept-section__row:nth-of-type(even) .concept-section__media {
    order: 0;
  }
  .concept-section__media {
    aspect-ratio: 4 / 3;
    order: -1;
  }
  .concept-section__headline {
    font-size: var(--fs-heading-lg);
  }
}