/**
 * ゆうかなう共通UI基盤 / Layout Primitives
 * 意味を持たず、配置能力だけを提供する。
 */
.yk-layout-surface {
  width: min(100%, var(--yk-width-surface));
  margin-inline: auto;
}
.yk-layout-page {
  width: min(100%, var(--yk-width-page));
  margin-inline: auto;
}
/*
 * 読字段。呼び出し側が --yk-layout-reading-width を与えた場合だけ、
 * その文脈の読字段幅へ置き換える。意味やページ種別は持たない。
 */
.yk-layout-reading {
  width: min(100%, var(--yk-layout-reading-width, var(--yk-width-reading)));
  margin-inline: auto;
}
.yk-layout-reading--narrow {
  width: min(100%, var(--yk-width-reading-narrow));
  margin-inline: auto;
}
.yk-stack {
  display: flex;
  flex-direction: column;
  gap: var(--yk-stack-gap, var(--yk-gap-stack));
}
.yk-grid {
  display: grid;
  gap: var(--yk-grid-gap, var(--yk-gap-grid));
}
.yk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* WordPress側のauto margin等に影響されず、各子要素を割り当てられたGridトラック幅へ揃える。 */
.yk-grid--fill-items > * {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  box-sizing: border-box;
}

/* 同一行の中だけ高さを揃える。別の行まで同じ高さには固定しない。 */
.yk-grid--equal-row { align-items: stretch; }
.yk-grid--equal-row > * {
  min-width: 0;
  align-self: stretch;
  height: 100%;
}

.yk-row {
  display: flex;
  align-items: var(--yk-row-align, stretch);
  gap: var(--yk-row-gap, var(--yk-gap-grid));
}
.yk-row--between { justify-content: space-between; }
.yk-row--center { align-items: center; }

@media (max-width: 900px) {
  .yk-grid--3,
  .yk-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .yk-grid--2,
  .yk-grid--3,
  .yk-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
  .yk-row { flex-direction: column; }
}