/*
 * Component: Numbered Section (FLOW) — thai-massage (hydrogen からハードコピー / CLAUDE.md ルール7)
 * Spec:      DESIGN.md §6-4
 *
 * about-service の「施術の流れ」。01〜04 の番号付きセクション
 * (media + text の 2 カラム、交互ジグザグ)。data-bg="alt" で交互背景。
 */

.numbered-section {
  text-align: center;
  padding: var(--section-padding-y) var(--container-padding-x);
  background: var(--color-bg-main);
}

.numbered-section[data-bg="alt"] {
  background: var(--color-bg-section-alt);
}

.numbered-section__inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.numbered-section__icon {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: var(--gap-md);
  opacity: 0.7;
}

.numbered-section__brand {
  font-family: var(--font-display);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-text);
  margin: 0 0 var(--gap-xs);
}

.numbered-section__number {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: 300;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
  margin: var(--gap-sm) 0 var(--gap-lg);
}

.numbered-section__media {
  display: block;
  max-width: 800px;
  width: 100%;
  margin: 0 auto var(--gap-xl);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg-section-alt);
}

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

.numbered-section__main-title {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-heading-xl);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--color-text);
  max-width: 800px;
  margin: 0 auto var(--gap-md);
}

.numbered-section__sub-title {
  font-size: var(--fs-heading-md);
  color: var(--color-text-secondary);
  font-weight: 400;
  margin: 0 0 var(--gap-lg);
}

.numbered-section__body {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
  line-height: var(--lh-body);
  color: var(--color-text);
  font-size: var(--fs-body);
}

@media (max-width: 768px) {
  .numbered-section {
    padding: var(--section-padding-y-mobile) var(--container-padding-x-mobile);
  }
  .numbered-section__number {
    font-size: var(--fs-display-lg);
  }
  .numbered-section__main-title {
    font-size: var(--fs-heading-lg);
  }
  .numbered-section__media {
    margin-bottom: var(--gap-lg);
  }
}

/*
 * media + text の 2 カラムレイアウト (1024px 以上)。
 * HTML 側で <div class="numbered-section__text"> wrapper を挿入し、
 * inner 直下を media + text の 2 要素に圧縮することで段組み感を排除。
 */
.numbered-section__text {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .numbered-section__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-2xl);
    align-items: center;
    text-align: left;
    max-width: 1200px;
  }

  /* media / text を row1 に固定し、列入替 (alt) でも常に同一行 2 カラムを保つ */
  .numbered-section__media {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    max-width: 100%;
  }

  .numbered-section__text {
    grid-column: 1;
    grid-row: 1;
  }

  /* alt (偶数 step) は media を左、text を右に入替してジグザグに */
  .numbered-section[data-bg="alt"] .numbered-section__media {
    grid-column: 1;
  }
  .numbered-section[data-bg="alt"] .numbered-section__text {
    grid-column: 2;
  }

  .numbered-section__number {
    font-size: var(--fs-display-lg);
    margin: 0 0 var(--gap-md);
  }
}