/* ============================================
   Mujoo Responsive Utilities v1.0
   結構化響應式工具類
   
   基於 Bootstrap 5 斷點體系 + Open Props Token
   所有斷點引用 mujoo-tokens.css 中的變量
   ============================================ */

/* ===== 容器系統 ===== */
.mu-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mu-space-md);
  padding-right: var(--mu-space-md);
}

@media (min-width: 576px)  { .mu-container { max-width: var(--mu-container-sm); } }
@media (min-width: 768px)  { .mu-container { max-width: var(--mu-container-md); } }
@media (min-width: 992px)  { .mu-container { max-width: var(--mu-container-lg); } }
@media (min-width: 1200px) { .mu-container { max-width: var(--mu-container-xl); } }
@media (min-width: 1400px) { .mu-container { max-width: var(--mu-container-xxl); } }

/* 全寬容器（手機端全寬，PC 端有最大寬度） */
.mu-container-fluid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mu-space-md);
  padding-right: var(--mu-space-md);
}

@media (min-width: 992px) {
  .mu-container-fluid {
    max-width: var(--mu-container-xl);
  }
}

/* ===== 網格系統 ===== */
.mu-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--mu-space-sm) * -1);
  margin-right: calc(var(--mu-space-sm) * -1);
}

.mu-row > * {
  flex-shrink: 0;
  width: 100%;
  padding-left: var(--mu-space-sm);
  padding-right: var(--mu-space-sm);
}

/* 列寬：手機端默認全寬 */
.mu-col      { flex: 1 0 0%; }
.mu-col-12   { width: 100%; }
.mu-col-6    { width: 50%; }
.mu-col-4    { width: 33.333333%; }
.mu-col-3    { width: 25%; }

/* 平板端列寬 */
@media (min-width: 768px) {
  .mu-col-md-12 { width: 100%; }
  .mu-col-md-6  { width: 50%; }
  .mu-col-md-4  { width: 33.333333%; }
  .mu-col-md-3  { width: 25%; }
}

/* PC 端列寬 */
@media (min-width: 992px) {
  .mu-col-lg-12 { width: 100%; }
  .mu-col-lg-6  { width: 50%; }
  .mu-col-lg-4  { width: 33.333333%; }
  .mu-col-lg-3  { width: 25%; }
}

/* ===== 自適應網格（CSS Grid） ===== */
.mu-grid {
  display: grid;
  gap: var(--mu-space-md);
}

/* 自動填充網格：根據最小寬度自動換行 */
.mu-grid-auto {
  display: grid;
  gap: var(--mu-space-md);
  grid-template-columns: repeat(auto-fill, minmax(var(--mu-grid-min, 250px), 1fr));
}

/* 預設網格佈局 */
.mu-grid-2 { grid-template-columns: repeat(2, 1fr); }
.mu-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mu-grid-4 { grid-template-columns: repeat(4, 1fr); }

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

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

/* ===== 顯示/隱藏工具類 ===== */
.mu-hide           { display: none !important; }
.mu-show           { display: block !important; }
.mu-show-flex      { display: flex !important; }
.mu-show-grid      { display: grid !important; }

/* 手機端隱藏，平板及以上顯示 */
.mu-hide-mobile    { display: none !important; }
@media (min-width: 768px) {
  .mu-hide-mobile  { display: block !important; }
}
.mu-hide-mobile-flex { display: none !important; }
@media (min-width: 768px) {
  .mu-hide-mobile-flex { display: flex !important; }
}

/* 平板及以上隱藏，手機端顯示 */
.mu-hide-desktop   { display: block !important; }
@media (min-width: 768px) {
  .mu-hide-desktop { display: none !important; }
}

/* 僅 PC 端顯示 */
.mu-show-lg        { display: none !important; }
@media (min-width: 992px) {
  .mu-show-lg      { display: block !important; }
}
.mu-show-lg-flex   { display: none !important; }
@media (min-width: 992px) {
  .mu-show-lg-flex { display: flex !important; }
}

/* 僅 PC 端隱藏 */
.mu-hide-lg        { display: block !important; }
@media (min-width: 992px) {
  .mu-hide-lg      { display: none !important; }
}

/* ===== 間距工具類 ===== */
.mu-p-0  { padding: 0 !important; }
.mu-p-xs { padding: var(--mu-space-xs) !important; }
.mu-p-sm { padding: var(--mu-space-sm) !important; }
.mu-p-md { padding: var(--mu-space-md) !important; }
.mu-p-lg { padding: var(--mu-space-lg) !important; }
.mu-p-xl { padding: var(--mu-space-xl) !important; }

.mu-px-md { padding-left: var(--mu-space-md) !important; padding-right: var(--mu-space-md) !important; }
.mu-py-md { padding-top: var(--mu-space-md) !important; padding-bottom: var(--mu-space-md) !important; }
.mu-px-lg { padding-left: var(--mu-space-lg) !important; padding-right: var(--mu-space-lg) !important; }
.mu-py-lg { padding-top: var(--mu-space-lg) !important; padding-bottom: var(--mu-space-lg) !important; }

.mu-m-0  { margin: 0 !important; }
.mu-m-sm { margin: var(--mu-space-sm) !important; }
.mu-m-md { margin: var(--mu-space-md) !important; }
.mu-m-lg { margin: var(--mu-space-lg) !important; }
.mu-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mu-mb-md { margin-bottom: var(--mu-space-md) !important; }
.mu-mb-lg { margin-bottom: var(--mu-space-lg) !important; }

/* ===== Flex 工具類 ===== */
.mu-flex       { display: flex !important; }
.mu-flex-col   { flex-direction: column !important; }
.mu-flex-row   { flex-direction: row !important; }
.mu-flex-wrap  { flex-wrap: wrap !important; }
.mu-flex-center { align-items: center !important; justify-content: center !important; }
.mu-items-center { align-items: center !important; }
.mu-justify-between { justify-content: space-between !important; }
.mu-justify-center  { justify-content: center !important; }
.mu-gap-sm { gap: var(--mu-space-sm) !important; }
.mu-gap-md { gap: var(--mu-space-md) !important; }
.mu-gap-lg { gap: var(--mu-space-lg) !important; }

/* ===== 文字工具類 ===== */
.mu-text-center { text-align: center !important; }
.mu-text-left   { text-align: left !important; }
.mu-text-right  { text-align: right !important; }
.mu-text-xs     { font-size: var(--mu-font-size-xs) !important; }
.mu-text-sm     { font-size: var(--mu-font-size-sm) !important; }
.mu-text-md     { font-size: var(--mu-font-size-md) !important; }
.mu-text-lg     { font-size: var(--mu-font-size-lg) !important; }
.mu-text-xl     { font-size: var(--mu-font-size-xl) !important; }
.mu-text-bold   { font-weight: var(--mu-font-weight-bold) !important; }
.mu-text-heavy  { font-weight: var(--mu-font-weight-heavy) !important; }

/* ===== 圓角工具類 ===== */
.mu-rounded-sm   { border-radius: var(--mu-radius-sm) !important; }
.mu-rounded-md   { border-radius: var(--mu-radius-md) !important; }
.mu-rounded-lg   { border-radius: var(--mu-radius-lg) !important; }
.mu-rounded-full { border-radius: var(--mu-radius-full) !important; }
.mu-rounded-pill { border-radius: var(--mu-radius-pill) !important; }

/* ===== 陰影工具類 ===== */
.mu-shadow-sm { box-shadow: var(--mu-shadow-brand-sm) !important; }
.mu-shadow-md { box-shadow: var(--mu-shadow-brand-md) !important; }
.mu-shadow-lg { box-shadow: var(--mu-shadow-brand-lg) !important; }

/* ===== 毛毡玻璃效果 ===== */
.mu-glass {
  background: var(--mu-glass-bg);
  backdrop-filter: blur(var(--mu-glass-blur));
  -webkit-backdrop-filter: blur(var(--mu-glass-blur));
}

/* ===== 過渡動畫 ===== */
.mu-animate {
  transition: var(--mu-transition);
}