/* ╔════════════════════════════════════════════════════════════╗
   ║  KENSAI WEB · Mobile + tablet responsive layer              ║
   ║  Stacks all multi-column grids, scales type, hides desktop  ║
   ║  chrome, makes tables horizontally scrollable.              ║
   ╚════════════════════════════════════════════════════════════╝ */

/* ── Tablet (≤1280px): tighten gutters ── */
@media (max-width: 1280px) {
  .wrap, .wrap-wide { padding: 0 22px; }
}

/* ── Phone + tablet (≤1080px) — stacks to mobile layout ── */
@media (max-width: 1080px) {

  html, body {
    font-size: 13px;
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  body > * { max-width: 100vw; }
  .wrap, .wrap-wide { padding: 0 18px; }

  /* Stop horizontal overflow from oversized absolute watermarks / blade */
  section, footer, header { overflow-x: clip; }

  /* ── Top bar: brand + hamburger only ───────────────────────── */
  header[style*="position: sticky"] { height: 48px !important; }
  /* Brand cell: drop right border, expand */
  header[style*="position: sticky"] > div:first-child {
    border-right: none !important;
    padding: 0 16px !important;
    flex: 1;
  }
  /* Hide LIVE chip, desktop nav, search, time, CTAs */
  .kw-topbar-live,
  .kw-topbar-nav,
  .kw-topbar-search,
  .kw-topbar-time,
  .kw-topbar-cta {
    display: none !important;
  }
  /* Show hamburger */
  .kw-hamburger { display: inline-flex !important; }

  /* ── Status strip: become horizontally scrollable ──────────── */
  .strip {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px;
    gap: 18px;
    font-size: 9.5px;
    height: 26px;
  }
  .strip::-webkit-scrollbar { display: none; }

  /* ── Display headlines: scale aggressively ─────────────────── */
  .display-h {
    font-size: clamp(40px, 11vw, 64px) !important;
    line-height: 0.96 !important;
  }

  /* ── Universal grid collapse for multi-column content grids ── */
  /* Only collapse grids whose template is fr-based (content cols) */
  /* Hero · 1fr 1.3fr 1fr */
  [style*="grid-template-columns: 1fr 1.3fr 1fr"],
  /* Stats triple */
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  /* Two-col content */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 0.9fr 1.4fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  /* Repeat fr cols */
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(6, 1fr)"],
  [style*="grid-template-columns: repeat(7, 1fr)"],
  [style*="grid-template-columns: repeat(8, 1fr)"],
  [style*="grid-template-columns: repeat(10, 1fr)"],
  /* Footer 1.4fr repeat(5, 1fr) */
  [style*="grid-template-columns: 1.4fr repeat(5, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* And reduce gap so things don't drift */
  [style*="gap: 32"], [style*="gap:32"] { gap: 22px !important; }
  [style*="gap: 48"], [style*="gap:48"] { gap: 28px !important; }
  [style*="gap: 56"], [style*="gap:56"] { gap: 32px !important; }
  [style*="gap: 64"], [style*="gap:64"] { gap: 36px !important; }

  /* ── Hero specific: stack media + text ─────────────────────── */
  .kw-hero { padding: 0 !important; }
  .kw-hero-grid { display: flex !important; flex-direction: column !important; min-height: 0 !important; }
  .kw-hero-title { font-size: clamp(44px, 12vw, 68px) !important; }
  .kw-hero-blade { max-width: 100%; height: auto; }
  .kw-hero-center,
  .kw-hero-right,
  .kw-hero-left {
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  .kw-hero-center { order: 1; padding-top: 24px !important; padding-bottom: 28px !important; }
  .kw-hero-right { order: 2; border-left: none !important; border-top: 1px solid var(--v4-line) !important; padding-top: 24px !important; padding-bottom: 24px !important; }
  .kw-hero-left { order: 3; border-right: none !important; border-top: 1px solid var(--v4-line) !important; padding-top: 24px !important; padding-bottom: 24px !important; }

  /* ── Hero on mobile: stack center column · blade above headline ── */
  /* Hero is explicit now; class-based mobile stack wins over brittle inline-style matching */
  /* The hero row (blade beside headline) on mobile: stack vertically with blade on top */
  .kw-hero-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .kw-hero-row .kw-hero-headline {
    text-align: center !important;
    font-size: clamp(36px, 11vw, 56px) !important;
  }
  .kw-hero-row .kw-hero-blade-wrap {
    margin-top: 0 !important;
  }
  .kw-hero-row .kw-hero-blade-wrap svg {
    width: 130px !important;
    height: auto !important;
  }
  .kw-hero-feed > div { padding: 10px 0 !important; }
  .kw-hero-feed .disp { font-size: 14px !important; line-height: 1.25 !important; }
  .kw-hero-cta-row {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .kw-hero-cta-row .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Kill huge 剣 watermark on mobile (causes overflow + clutter) */
  section [aria-hidden][style*="font-size: 720"],
  section [aria-hidden][style*="fontSize: 720"] {
    display: none !important;
  }

  /* ── Tables: horizontal scroll wrapper ─────────────────────── */
  .kw-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kw-tablewrap table.k { min-width: 640px; }
  table.k th, table.k td { padding: 10px 12px !important; font-size: 11px !important; }

  /* Plain table without wrapper? still allow scroll */
  table.k { display: block; overflow-x: auto; max-width: 100%; }
  table.k thead, table.k tbody { display: table; min-width: 640px; width: 100%; }

  /* ── KPI / stat number rows: auto-fit smaller ──────────────── */
  .kw-kpi-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1px !important;
  }
  .kw-kpi-row > * { padding: 18px 14px !important; }

  /* ── Logo strip: wrap and shrink ───────────────────────────── */
  .kw-logo-strip {
    height: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .kw-logo-strip > div:first-child {
    border-right: none !important;
    border-bottom: 1px solid var(--v4-line) !important;
    height: auto !important;
    padding: 14px 16px !important;
  }
  .kw-logos {
    flex-wrap: wrap !important;
    gap: 14px 18px !important;
    justify-content: flex-start !important;
    padding: 14px 16px !important;
  }
  .kw-logos > * { font-size: 11px !important; letter-spacing: 0.16em !important; }

  /* ── Cards / panels: tighten padding ───────────────────────── */
  .kw-card, .kw-panel { padding: 20px !important; }

  /* ── Section heads: smaller eyebrow ────────────────────────── */
  .section-head {
    flex-wrap: wrap;
    font-size: 9.5px;
    gap: 12px;
    padding: 10px 0;
  }
  .section-head .desc {
    margin-left: 0;
    flex-basis: 100%;
    font-size: 9px;
  }

  /* ── Footer: stack cols 2x3, then 1x ───────────────────────── */
  .kw-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  .kw-footer-grid > div:first-child {
    grid-column: 1 / -1;
    margin-bottom: 8px;
  }
  footer hr.hairline { margin-top: 32px !important; margin-bottom: 16px !important; }
  .kw-footer-meta {
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
    font-size: 9.5px !important;
  }

  /* ── Pricing: stack cards ──────────────────────────────────── */
  .kw-pricing-grid { grid-template-columns: 1fr !important; }

  /* ── Big SVG figures (asset graph): scroll horizontally ────── */
  .kw-graph-frame {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .kw-graph-frame svg { min-width: 720px; }

  /* ── Languages localized headlines: 1 col ─────────────────── */
  .kw-lang-grid { grid-template-columns: 1fr !important; }

  /* ── Voice / Doctrine 2-col → 1col ─────────────────────────── */
  .kw-voice-grid { grid-template-columns: 1fr !important; }

  /* ── Finale watermark: smaller ─────────────────────────────── */
  .kw-finale-mark { font-size: clamp(180px, 50vw, 320px) !important; }

  /* ── Hide elements marked desktop-only ─────────────────────── */
  .kw-desktop-only { display: none !important; }
  .kw-mobile-only { display: initial !important; }
}

/* ── Phone-only (≤520px) ───────────────────────────────────── */
@media (max-width: 520px) {
  .wrap, .wrap-wide { padding: 0 14px; }
  .display-h { font-size: clamp(34px, 13vw, 52px) !important; }
  .kw-kpi-row { grid-template-columns: 1fr !important; }
  .strip { font-size: 9px; gap: 14px; }
  .kw-footer-grid {
    grid-template-columns: 1fr !important;
  }
  header[style*="position: sticky"] .btn-primary {
    font-size: 9.5px !important;
    padding: 7px 10px !important;
  }
}

/* ── Default: hide mobile-only by default on desktop ───────── */
.kw-mobile-only { display: none; }

/* ── Phone-only (≤520px) ───────────────────────────────────── */