/* ==========================================================================
   layout.css — 共通レイアウトユーティリティ
   ----------------------------------------------------------------------------
   構造を作るためのプリミティブ。コンテンツ装飾は components.css 側で行う。
   ----------------------------------------------------------------------------
   採用パターン:
     - .container        … 横幅制約 + 左右余白
     - .section          … 縦余白の標準化(セクション単位)
     - .stack            … 縦に積み上げる際のリズム(margin-block 自動付与)
     - .cluster          … 横並びで折り返す(ボタン群・タグ等)
     - .grid             … 等分グリッド(モバイル時1カラム)
     - .split            … 2カラム(画像+文章 等)
     - .center           … 中央寄せヘルパ
     - .wrap-narrow      … 文章主体のページ用の狭めラッパー
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.container {
  inline-size: 100%;
  max-inline-size: var(--container-base);
  margin-inline: auto;
  padding-inline: var(--section-pad-x);
}

.container--narrow { max-inline-size: var(--container-narrow); }
.container--wide   { max-inline-size: var(--container-wide); }
.container--full   { max-inline-size: none; }

/* --------------------------------------------------------------------------
   Section
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--section-pad-y);
}

.section--tight    { padding-block: clamp(2rem, 5vw, 4rem); }
.section--loose    { padding-block: clamp(4rem, 12vw, 12rem); }

.section--bg-sub      { background-color: var(--color-bg-sub); }
.section--bg-alt      { background-color: var(--color-bg-alt); }
.section--bg-primary  {
  background-color: var(--color-primary-deep);
  color: var(--color-text-invert);
}

/* --------------------------------------------------------------------------
   Stack — 縦に並ぶ要素の標準リズム
   各子要素間に margin-block-start を自動付与
   -------------------------------------------------------------------------- */
.stack > * + * {
  margin-block-start: var(--stack-gap, var(--sp-4));
}

.stack--xs > * + * { --stack-gap: var(--sp-2); }
.stack--sm > * + * { --stack-gap: var(--sp-3); }
.stack--md > * + * { --stack-gap: var(--sp-6); }
.stack--lg > * + * { --stack-gap: var(--sp-10); }
.stack--xl > * + * { --stack-gap: var(--sp-16); }

/* --------------------------------------------------------------------------
   Cluster — 横並び・折り返しあり
   -------------------------------------------------------------------------- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--sp-4));
}

.cluster--center { justify-content: center; }
.cluster--end    { justify-content: flex-end; }
.cluster--between { justify-content: space-between; }

.cluster--sm { --cluster-gap: var(--sp-2); }
.cluster--lg { --cluster-gap: var(--sp-8); }

/* --------------------------------------------------------------------------
   Grid — 等分グリッド(モバイル時1カラム)
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--sp-6));
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.grid--gap-sm { --grid-gap: var(--sp-3); }
.grid--gap-lg { --grid-gap: var(--sp-10); }

/* オートレスポンシブグリッド(カード並び等) */
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* --------------------------------------------------------------------------
   Split — 2カラム(画像 + 文章 等)
   モバイルは縦積み、md 以上で横並び
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 768px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
  }
  .split--reverse > :first-child { order: 2; }
  .split--3-2 { grid-template-columns: 3fr 2fr; }
  .split--2-3 { grid-template-columns: 2fr 3fr; }
}

/* --------------------------------------------------------------------------
   Center — 中央寄せ
   -------------------------------------------------------------------------- */
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.center-x { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Flow — 文章主体のラッパー(WYSIWYG ライク)
   論理的な縦リズムを自動付与する
   -------------------------------------------------------------------------- */
.flow > * + * {
  margin-block-start: var(--flow-gap, 1em);
}

.flow > h2 { margin-block-start: 2em; }
.flow > h3 { margin-block-start: 1.6em; }

/* --------------------------------------------------------------------------
   Sticky / fixed helpers
   -------------------------------------------------------------------------- */
.sticky-top {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
}

/* --------------------------------------------------------------------------
   Visibility — アクセシビリティ対応
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* スキップリンク表示用(フォーカス時のみ可視) */
.skip-link {
  position: absolute;
  inset-inline-start: var(--sp-4);
  inset-block-start: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  background-color: var(--color-primary-deep);
  color: var(--color-text-invert);
  border-radius: var(--radius-sm);
  z-index: var(--z-toast);
  transform: translateY(-200%);
  transition: transform var(--duration-base) var(--ease-base);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Aspect ratio helpers
   -------------------------------------------------------------------------- */
.ratio-square    { aspect-ratio: 1 / 1; }
.ratio-photo     { aspect-ratio: 4 / 3; }
.ratio-wide      { aspect-ratio: 16 / 9; }
.ratio-portrait  { aspect-ratio: 3 / 4; }
.ratio-cinema    { aspect-ratio: 21 / 9; }

.ratio-square > *,
.ratio-photo > *,
.ratio-wide > *,
.ratio-portrait > *,
.ratio-cinema > * {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}