/* Cosmixon Carousel Showcase — shared shell (header/tabs/layout).
   Per-type carousel mechanics live in types/<slug>.css — this file stays
   type-agnostic so a new carousel pattern can be added without touching layout. */

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

:root {
  --shell-bg: #0a0c14;
  --shell-text: #e6ebf5;
  --shell-dim: #6b7688;
  --shell-border: rgba(255,255,255,.08);
  --shell-accent: #00cfff;
}

html { scroll-behavior: smooth; }

body {
  background: var(--shell-bg);
  color: var(--shell-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; }

/* ── Header ───────────────────────────────────────────────────────────── */
.shell-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--shell-border);
  position: sticky; top: 0; z-index: 20;
  background: rgba(10,12,20,.86);
  backdrop-filter: blur(10px);
}
.shell-title { display: flex; align-items: baseline; gap: 10px; }
.shell-title h1 { font-size: 17px; font-weight: 800; letter-spacing: .3px; }
.shell-title span { font-size: 12px; color: var(--shell-dim); }

/* Inline Hub link pill — Cosmixon Hub Interconnect Standard (never fixed/floating) */
.hub-link {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 40px; box-sizing: border-box;
  padding: 9px 13px; border-radius: 9px; font-size: 12px;
  color: var(--shell-dim); background: rgba(127,127,127,.12);
  border: 1px solid rgba(127,127,127,.22); text-decoration: none;
  white-space: nowrap;
  transition: .2s;
}
.hub-link:hover { color: var(--shell-accent); border-color: rgba(0,207,255,.5); box-shadow: 0 0 14px rgba(0,207,255,.25); }

.back-link {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 40px; box-sizing: border-box;
  padding: 9px 13px; border-radius: 9px; font-size: 12px;
  color: var(--shell-dim); background: rgba(127,127,127,.12);
  border: 1px solid rgba(127,127,127,.22); text-decoration: none;
  white-space: nowrap;
  transition: .2s;
}
.back-link:hover { color: var(--shell-accent); border-color: rgba(0,207,255,.5); }

/* ── Tab bar ──────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex; gap: 8px; padding: 14px 22px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--shell-border);
  position: sticky; top: 61px; z-index: 19;
  background: rgba(10,12,20,.86);
  backdrop-filter: blur(10px);
}
.tab-bar::-webkit-scrollbar { height: 0; }
.tab-btn {
  flex: 0 0 auto;
  padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 700;
  background: rgba(255,255,255,.05); color: var(--shell-dim);
  border: 1px solid var(--shell-border); cursor: pointer;
  transition: .18s;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--shell-text); border-color: rgba(255,255,255,.22); }
.tab-btn.active {
  background: var(--shell-accent); color: #041018; border-color: var(--shell-accent);
  box-shadow: 0 0 18px rgba(0,207,255,.35);
}

/* ── Type panel (layout only — carousel mechanics are per-type) ─────────── */
.type-panel { padding: 34px 22px 70px; min-height: 60vh; }
.type-panel[hidden] { display: none; }

.panel-head { max-width: 720px; margin: 0 auto 30px; text-align: center; }
.panel-head h2 { font-size: 26px; font-weight: 900; margin-bottom: 8px; }
.panel-head .panel-desc { font-size: 14px; opacity: .85; line-height: 1.6; }

/* ── Slide content (shared "fake photo" look — gradient + digit/emoji) ──── */
.slide-face {
  container-type: inline-size;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 6px;
  color: #fff; font-weight: 900; user-select: none;
}
.slide-face .num { font-size: clamp(20px, 22cqi, 56px); opacity: .55; letter-spacing: -2px; text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.slide-face .cap { font-size: clamp(10px, 6cqi, 15px); font-weight: 700; opacity: .95; letter-spacing: .5px; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.slide-face.mini .cap { display: none; }
.slide-face.mini .num { font-size: clamp(14px, 24cqi, 22px); opacity: .7; }

/* AI-generated photos (real, one per Thai slide name) — dark bottom-fade keeps
   the num/cap overlay text legible over a busy photo instead of a flat gradient. */
.slide-1 { background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.6) 100%), url('images/slide-1.jpg') center/cover no-repeat; }
.slide-2 { background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.6) 100%), url('images/slide-2.jpg') center/cover no-repeat; }
.slide-3 { background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.6) 100%), url('images/slide-3.jpg') center/cover no-repeat; }
.slide-4 { background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.6) 100%), url('images/slide-4.jpg') center/cover no-repeat; }
.slide-5 { background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.6) 100%), url('images/slide-5.jpg') center/cover no-repeat; }
.slide-6 { background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.6) 100%), url('images/slide-6.jpg') center/cover no-repeat; }

/* ── Shared arrow button ──────────────────────────────────────────────── */
.car-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: var(--shell-text);
  border: 1px solid var(--shell-border); cursor: pointer;
  font-size: 16px; transition: .18s; flex: 0 0 auto;
}
.car-arrow:hover { background: var(--shell-accent); color: #041018; border-color: var(--shell-accent); box-shadow: 0 0 14px rgba(0,207,255,.35); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .shell-header { padding: 14px 16px; }
  .tab-bar { padding: 12px 16px; top: 57px; }
  .type-panel { padding: 24px 16px 56px; }
  .panel-head h2 { font-size: 21px; }
}