/* ================================================================
   layouts.css — MobileLayout, MatrixLayout, AuthLayout
   ================================================================ */

/* ── AuthLayout（登入頁專用） ── */
.layout-auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
}

.layout-auth__container {
  width: 100%;
  max-width: 380px;
  position: relative;
  z-index: var(--z-base);
}

/* ── MobileLayout（主應用佈局） ── */
.layout-mobile {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background: var(--color-bg-void);
}

.layout-mobile__header {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  height: 48px;
  border-bottom: 1px solid var(--color-border-subtle);
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}

.layout-mobile__header-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-wider);
  text-shadow: 0 0 10px rgba(255, 0, 60, 0.3);
}

.layout-mobile__content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-4);
  padding-bottom: calc(var(--nav-height) + var(--space-4));
  max-width: var(--content-max-width);
  margin: 0 auto;
  width: 100%;
}

/* ── MatrixLayout（矩陣頁專用，全屏） ── */
.layout-matrix {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--nav-height));
  height: calc(100dvh - var(--nav-height));
  overflow: hidden;
}

/* ── NavBar（底部導覽列） ── */
.nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: rgba(0, 0, 0, 0.95);
  border-top: 1px solid var(--color-border-default);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: var(--z-nav);
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  padding: var(--space-2);
  transition: color var(--duration-fast);
  min-width: 60px;
}

.nav-bar__item--active {
  color: var(--color-blood-red);
  text-shadow: 0 0 10px rgba(255, 0, 60, 0.5);
}

.nav-bar__item:hover {
  color: var(--color-cyber-cyan);
}

.nav-bar__icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* ================================================================
   Responsive — iPad & Tablet 適配
   ================================================================ */

/* ── iPad / Tablet（768px ~ 1024px） ── */
@media (min-width: 769px) {
  .layout-mobile__content {
    max-width: 640px;
    padding: var(--space-6);
    padding-bottom: calc(var(--nav-height-lg) + var(--space-6));
  }

  .layout-mobile__header {
    height: 56px;
    padding: var(--space-3) var(--space-6);
  }

  .layout-mobile__header-title {
    font-size: var(--text-xl);
  }

  .nav-bar {
    height: var(--nav-height-lg);
  }

  .nav-bar__item {
    font-size: var(--text-xs);
    gap: 4px;
    padding: var(--space-3);
    min-width: 80px;
  }

  .nav-bar__icon {
    width: 24px;
    height: 24px;
  }
}

/* ── 大平板 / 桌面（>1024px） ── */
@media (min-width: 1025px) {
  .layout-mobile__content {
    max-width: 720px;
  }
}

/* ── 橫屏適配 ── */
@media (orientation: landscape) and (max-height: 500px) {
  /* 橫屏手機：壓縮導覽列高度 */
  .nav-bar {
    height: 44px;
  }

  .nav-bar__item {
    flex-direction: row;
    gap: var(--space-2);
    font-size: var(--text-2xs);
    padding: var(--space-1) var(--space-3);
  }

  .nav-bar__icon {
    width: 16px;
    height: 16px;
  }

  .layout-mobile__content {
    padding-bottom: calc(44px + var(--space-3));
  }

  .layout-mobile__header {
    height: 40px;
  }
}

/* ── iPad 橫屏（寬螢幕平板） ── */
@media (min-width: 769px) and (orientation: landscape) {
  .layout-mobile__content {
    max-width: 720px;
  }

  .layout-matrix {
    height: calc(100vh - var(--nav-height-lg));
    height: calc(100dvh - var(--nav-height-lg));
  }
}

/* ── iPadLayout 鎖定模式（全螢幕無導覽）── */
.layout-ipad-locked {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg-void);
}

.layout-ipad-locked .nav-bar {
  display: none !important;
}