/* gateway/frontend/styles.css */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/fraunces-400.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/fraunces-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/inter-tight-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/inter-tight-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/inter-tight-600.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/jetbrains-mono-400.woff2") format("woff2");
}

:root {
  /* ink scale */
  --ink-950: #0A0A0A;
  --ink-800: #1F1F1F;
  --ink-500: #6B6B6B;
  --ink-300: #C8C8C8;
  --ink-100: #EEEEEE;
  --paper:      #FAFAF7;
  --paper-card: #FFFFFF;
  --accent:     #2D5CFF;
  --accent-soft:#E5EBFF;
  --danger:     #C8321C;
  --success:    #2F7D4F;

  /* type */
  --ff-display: "Fraunces", "Source Han Serif SC", Georgia, serif;
  --ff-sans:    "Inter Tight", "PingFang SC", "Source Han Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-display: 44px;
  --fs-h1: 28px;
  --fs-h2: 20px;
  --fs-body: 15px;
  --fs-ui: 14px;
  --fs-micro: 11px;

  /* radius */
  --r-sm: 2px;
  --r-md: 2px;

  /* motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t-fast: 120ms var(--ease);
  --t-base: 180ms var(--ease);
}

*, *::before, *::after { box-sizing: border-box; }

html, body, #root { height: 100%; margin: 0; }

body {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-800);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 600; margin: 0; color: var(--ink-950); letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); line-height: 1.15; }
h2 { font-size: var(--fs-h2); line-height: 1.25; }

a { color: var(--ink-950); text-decoration: none; border-bottom: 1px solid var(--ink-300); transition: border-color var(--t-fast); }
a:hover { border-color: var(--ink-950); }

code, pre, .mono { font-family: var(--ff-mono); }

/* utility: section heading micro-label */
.micro {
  font-size: var(--fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-500);
}

/* utility: 1px divider */
.rule { height: 1px; background: var(--ink-100); border: 0; margin: 0; }

/* layout helpers used in pages */
.stack > * + * { margin-top: var(--gap, 16px); }
.row { display: flex; align-items: center; gap: 12px; }

/* tabular numbers */
.tnum { font-variant-numeric: tabular-nums; font-family: var(--ff-mono); }

/* button base — atomic <Button> reuses */
.btn {
  appearance: none;
  border: 1px solid var(--ink-950);
  background: var(--ink-950);
  color: #fff;
  padding: 12px 20px;
  font-family: var(--ff-sans);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  border-radius: 0;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  min-height: 44px;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--ink-950); }
.btn--ghost:hover:not(:disabled) { background: var(--ink-950); color: #fff; }
.btn--danger { background: transparent; color: var(--danger); border-color: var(--ink-300); }
.btn--danger:hover:not(:disabled) { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn--sm { min-height: 32px; padding: 6px 12px; font-size: 13px; }

/* input base */
.input {
  appearance: none;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--ink-300);
  background: transparent;
  padding: 10px 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  color: var(--ink-950);
  border-radius: 0;
  transition: border-color var(--t-fast);
}
.input:focus { outline: none; border-bottom-color: var(--ink-950); border-bottom-width: 2px; padding-bottom: 9px; }
.input::placeholder { color: var(--ink-500); }

/* table base */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--ink-100); }
.table th { font-size: var(--fs-micro); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-500); padding-top: 8px; padding-bottom: 8px; white-space: nowrap; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--ink-100); }
.table .nowrap { white-space: nowrap; }
.table .col-actions { white-space: nowrap; text-align: right; }

/* badge */
.badge {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border: 1px solid var(--ink-300);
  color: var(--ink-800);
  border-radius: var(--r-sm);
}
.badge--accent { color: var(--accent); border-color: var(--accent); }
.badge--muted  { color: var(--ink-500); border-color: var(--ink-300); }
.badge--danger { color: var(--danger); border-color: var(--danger); }

/* page entrance */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fadeUp 320ms var(--ease) both; }

.cursor-block {
  display: inline-block;
  width: 4px;
  height: 14px;
  background: var(--ink-950);
  vertical-align: -2px;
  margin-left: 2px;
  animation: blink 800ms infinite;
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  50.1%, 100% { opacity: 0.2; }
}

/* print utilities */
@media print {
  .no-print { display: none !important; }
  .printable { border: 0 !important; padding: 0 !important; background: transparent !important; }
}

/* admin sidebar: separator above the dev-console link (desktop only — mobile
   nav wraps to a horizontal bar where a top border would look like a divider). */
.admin-shell .admin-nav-dev-link {
  margin-top: 24px;
  border-top: 1px solid var(--ink-200);
  padding-top: 18px !important;
}

/* Hamburger button: hidden on desktop; shown when sidebar collapses to a top bar */
.admin-hamburger {
  display: none;
  background: transparent;
  border: 0;
  padding: 6px;
  margin: 0;
  color: var(--ink-700);
  cursor: pointer;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
}
.admin-hamburger:hover { color: var(--ink-950); background: var(--ink-100); }

/* =====================================================
   responsive helpers — added for tablet/mobile compatibility.
   Strategy: zero-dep, opt-in via class names + a few global
   overrides that only kick in at narrow breakpoints. Desktop
   layout is preserved unchanged.

   Breakpoints:
     >1024  desktop + iPad Pro 横屏: 原样
     ≤1024  iPad 横屏过渡: 仅缩 padding/字号、卡片密度，2-col 保留
     ≤900   iPad 竖屏起步: 2-col 堆叠 / sidebar 改顶部 nav / N-way 改横滚
     ≤640   手机: 抽屉/CTA 满宽/最小卡片
   ===================================================== */

.responsive-page { padding: 0 64px 120px; }
/* 单列布局 — 照片优先，问卷在下方依次回答；
   限制最大宽度避免在大屏上行长过长。 */
.responsive-2col {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.responsive-2col > * { max-width: 920px; width: 100%; margin-left: auto; margin-right: auto; }
.responsive-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* iPad 横屏过渡 (≤1024) ---------------------------------------
   注意：保留 sidebar，仅缩 padding 和字号；
   2-col 堆叠由 ≤1200 段统一处理（见下方）。 */
@media (max-width: 1024px) {
  :root { --fs-display: 38px; }

  .responsive-page { padding: 0 40px 96px; }

  /* hero: 上下留白略收 */
  .session-hero { padding: 56px 0 28px !important; }
  .session-tabs { margin-top: 24px !important; margin-bottom: 24px !important; }

  /* admin shell: 侧边栏窄一点，但仍是侧边栏（不堆叠） */
  .admin-shell { grid-template-columns: 180px 1fr !important; }
  .admin-shell > aside { padding: 24px 16px !important; }
  .admin-shell > main { padding: 32px 32px !important; }


  /* gallery cards: 平板上 180px 比 160 更舒服 */
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; }
}

/* 中等桌面与平板 (≤1200) — 单列已是默认，仅微调间距 */
@media (max-width: 1200px) {
  .responsive-2col { gap: 28px; }
}

/* iPad 竖屏 / 小型平板 (≤900) ----------------------------------
   这是真正的"窄屏"分界：2-col 堆叠、侧边栏改顶部 nav、
   N-way 对比改横向滚动。 */
@media (max-width: 900px) {
  :root { --fs-display: 34px; }

  .responsive-page { padding: 0 28px 96px; }

  /* hero 在竖屏 iPad 收得更紧；硬编码 <br /> 让自然换行 */
  .session-hero { padding: 40px 0 20px !important; }
  .session-hero__title br,
  .session-hero__lede br { display: none; }
  .session-hero__title { max-width: none !important; }
  .session-hero__lede { max-width: none !important; }
  .session-tabs { margin-top: 20px !important; margin-bottom: 20px !important; }

  /* admin shell: 此时侧边栏改成顶部水平导航条（仅留品牌 + 汉堡按钮，
     完整导航通过 Drawer 抽屉展开） */
  .admin-shell { grid-template-columns: 1fr !important; }
  .admin-shell > aside {
    border-right: 0 !important;
    border-bottom: 1px solid var(--ink-300);
    padding: 12px 16px !important;
    flex-direction: row !important;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .admin-shell .admin-brand { margin-bottom: 0 !important; flex: 0 0 auto; }
  .admin-shell .admin-brand .micro { display: none; }
  .admin-shell .admin-brand__title { font-size: 16px !important; }
  /* Hide inline nav + logout — these live in the Drawer on mobile */
  .admin-shell > aside > .admin-nav,
  .admin-shell > aside > .admin-logout-btn { display: none !important; }
  /* Show hamburger on the left, before the brand */
  .admin-shell .admin-hamburger {
    display: inline-flex;
    flex: 0 0 auto;
  }
  .admin-shell > main { padding: 28px 24px !important; }

  /* gallery 在竖屏 iPad 上 170px 比较合适 */
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; }

  /* compare strip: N-way 改横向滚动吸附 */
  .compare-strip {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .compare-strip > * {
    flex: 0 0 60%;
    min-width: 260px;
    scroll-snap-align: start;
  }
}

/* Phone: ≤640px ------------------------------------------- */
@media (max-width: 640px) {
  :root { --fs-display: 30px; --fs-h1: 24px; --fs-h2: 18px; }

  .responsive-page { padding: 0 16px 96px; }
  .responsive-2col { gap: 20px; }

  .session-hero { padding: 28px 0 16px !important; }
  .session-hero__lede { font-size: 15px !important; }
  .session-tabs { margin-top: 16px !important; margin-bottom: 16px !important; }

  /* row helper: allow wrapping on narrow viewports */
  .row { flex-wrap: wrap; }

  /* full-width buttons on phones for the explicit utility class */
  .btn--block-mobile { width: 100%; }

  /* gallery cards: at least two columns when possible */
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }
  .compare-strip > * { flex-basis: 82%; min-width: 220px; }

  /* CTA pinned bottom-right turns into a full-width sticky bar */
  .floating-cta-mobile {
    right: 12px !important;
    left: 12px !important;
    bottom: 12px !important;
    transform: none !important;
  }
  .floating-cta-mobile > * { width: 100%; }

  /* Two-column inline grids that should stack */
  .form-row-2col-mobile {
    grid-template-columns: 1fr !important;
  }

  /* Tighter empty-state padding */
  .table-empty-mobile { padding: 32px 16px !important; }
}