/* =======================================
   Layout
   - コンテナ
   - セクション
   - グリッド・フレックス
   - レスポンシブ補助
   ----------------------------------------
   サイト全体のベースとなるレイアウト設定です。
   コンテナ、セクション、グリッド構成などを定義。
======================================= */

/* -------------------------
   Container
   ----------------------------------------
   サイトの基本となる横幅制限コンテナです。
   max-width と内側のpaddingでレイアウトを整えます。
------------------------- */
.container {
  width: min(var(--container-width), 100% - var(--container-padding) * 2);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* -------------------------
   Section
   ----------------------------------------
   セクションごとの上下余白用
   u-py-section などと併用すると効果的です。
------------------------- */
.section {
  padding: var(--space-xl) 0;
}

.section--narrow {
  padding: var(--space-lg) 0;
}

/* -------------------------
   Grid
   ----------------------------------------
   グリッドレイアウトの基本
   自動で横に並び、レスポンシブで折り返します。
------------------------- */
.grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* -------------------------
   Flex (汎用フレックス)
   ----------------------------------------
   シンプルなフレックスボックス
   gridが合わないケースで使用します。
------------------------- */
.flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* -------------------------
   Columns (手動カラム指定)
   ----------------------------------------
   カラム数が決まっている場合に使用します。
   Responsive対応はメディアクエリ側で実施。
------------------------- */
.columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.column {
  flex: 1 1 0;
  min-width: 300px;
}

/* -------------------------
   Responsive helper
   ----------------------------------------
   一時的に画面サイズ別で非表示にする場合
------------------------- */
.u-hide-pc {
  display: none !important;
}

@media (max-width: var(--bp-md)) {
  .u-hide-tab {
    display: none !important;
  }
  .u-hide-pc {
    display: initial !important;
  }
}

@media (max-width: var(--bp-xs)) {
  .u-hide-sp {
    display: none !important;
  }
}