/* ============================================================
   goen2026 layout — コンテナ・セクション・グリッド
   ============================================================ */

.wrap        { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow{ max-width: var(--wrap-narrow); }
.wrap--wide  { max-width: var(--wrap-wide); }

.section { padding-block: var(--section-y); }
.section--alt    { background: var(--bg-alt); }
.section--mist   { background: var(--bg-section); }
.section--navy   { background: var(--c-navy-800); color: var(--footer-text); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.section--tight  { padding-block: var(--space-5); }

.stack > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-4); }

/* レスポンシブ 2〜4カラム
   grid-template-columns は `1fr`（= minmax(auto,1fr)）ではなく `minmax(0,1fr)` を使う。
   iOS Safari は `1fr` トラックの auto 最小値を、トラック内の画像の固有幅
   （例: width="1600"）まで広げてしまい、レイアウトがビューポートを超える
   （その分は overflow-x:clip で隠れ、見出し・本文・ボタンが右で見切れる）。
   併せて子要素に min-width:0 を与え、内容の固有サイズより縮められるようにする。 */
.grid { display: grid; gap: var(--gutter); }
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* 画像 + テキストの交互ブロック */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(1.5rem, 0.5rem + 4vw, 4rem);
}
.feature > * { min-width: 0; }
.feature--reverse .feature__media { order: 2; }
.feature__media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-md); aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 820px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature--reverse .feature__media { order: 0; }
}
/* セクション内のアクション（ボタン + テキストリンク） */
.feature__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-1); }
.feature__actions .btn { max-width: 100%; }
@media (max-width: 480px) {
  .feature__actions { gap: var(--space-2); }
  .feature__actions .btn { width: 100%; text-align: center; }
}

/* フルブリード画像 */
.bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.bleed img { width: 100%; max-height: 72vh; object-fit: cover; }

.center { text-align: center; }
.measure { max-width: var(--wrap-narrow); margin-inline: auto; }

/* 縦横比ユーティリティ */
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x3  { aspect-ratio: 4 / 3; }
.ratio-3x4  { aspect-ratio: 3 / 4; }
.cover { width: 100%; height: 100%; object-fit: cover; }

/* 本文（固定ページの自由入力部）*/
.entry-content > * + * { margin-top: var(--space-3); }
.entry-content h2 { margin-top: var(--space-5); }
.entry-content h3 { margin-top: var(--space-4); }
.entry-content img { border-radius: var(--radius); }