/* =====================================================================
   XIRAIYA — The Lab (showcase)
   ===================================================================== */

.lab-hero .display { font-size: clamp(64px, 14vw, 210px); }
.lab-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 18px; }
.lab-index a {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(var(--fx),.02); font-weight: 600; font-size: 15px;
  transition: border-color .3s, background .3s, transform .4s var(--ease-out);
}
.lab-index a span { font: 500 11px/1 var(--font-mono); color: var(--red); }
.lab-index a .ic { font-size: 18px; color: var(--ink-2); }
.lab-index a:hover { border-color: var(--red); background: rgba(224,68,46,.06); transform: translateY(-3px); }

/* sticky chapter nav */
.lab-nav { position: sticky; top: var(--header-h); z-index: 60; background: rgba(var(--bg-rgb),.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-block: 1px solid var(--line); transition: top .6s var(--ease-out); }
body:has(.site-header.is-hidden) .lab-nav { top: 0; }
.lab-nav-inner { display: flex; gap: 4px; padding: 8px var(--gutter); overflow-x: auto; scrollbar-width: none; max-width: 1480px; margin-inline: auto; }
.lab-nav-inner::-webkit-scrollbar { display: none; }
.lab-nav a { flex: none; height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 13.5px; color: var(--ink-3); transition: color .3s, background .3s; }
.lab-nav a:hover { color: var(--ink); }
.lab-nav a.is-on { color: #fff; background: var(--red); }
.lab-nav-bar { height: 2px; background: transparent; }
.lab-nav-bar i { display: block; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* sections */
.lab-sec { position: relative; padding-block: clamp(70px, 9vw, 130px); border-top: 1px solid var(--line); scroll-margin-top: 110px; }
.lab-sec:nth-of-type(even) { background: linear-gradient(180deg, rgba(var(--fx),.012), transparent); }
.lab-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.lab-grid.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.lab-grid.flip .lab-info { order: 2; }
.lab-grid.lab-wide { grid-template-columns: 1fr; }
.lab-wide .lab-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 60px; align-items: start; }
.lab-wide .lab-info > .lab-num, .lab-wide .lab-info > h2 { grid-column: 1; }
.lab-wide .lab-info > .lead { grid-column: 1; }
.lab-wide .lab-info > .lab-feats, .lab-wide .lab-info > .lab-row { grid-column: 2; }
.lab-wide .lab-info > .lab-feats { grid-row: 1 / 4; align-self: end; }
.lab-info { display: grid; gap: 20px; align-content: start; }
.lab-info .h2 { font-size: clamp(30px, 4vw, 58px); }
.lab-info code { font: 500 .9em var(--font-mono); padding: 2px 6px; border-radius: 6px; background: rgba(var(--fx),.07); color: var(--ink); }
.lab-info .lead b { color: var(--ink); }
.lab-num { display: flex; align-items: center; gap: 14px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.lab-num .hanko { width: auto; min-width: 44px; padding: 0 6px; }
.lab-feats { display: grid; gap: 2px; }
.lab-feats li { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; color: var(--ink-2); }
.lab-feats .ic { flex: none; margin-top: 4px; color: var(--red); stroke-width: 2.4; }
.lab-feats.cols { grid-template-columns: 1fr 1fr; column-gap: 20px; }
.lab-price { display: flex; gap: 28px; padding: 14px 20px; width: fit-content; border: 1px solid var(--line); border-radius: 14px; background: rgba(var(--fx),.02); }
.lab-price small { display: block; margin-bottom: 4px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.lab-price b { font: 800 21px/1.1 var(--font-display); }
.lab-ctas, .lab-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.lab-stage { position: relative; min-width: 0; }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } }

.lab-end { border-top: 1px solid var(--line); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .lab-grid, .lab-grid.flip, .lab-wide .lab-info { grid-template-columns: minmax(0, 1fr); }
  .lab-grid.flip .lab-info { order: 0; }
  .lab-wide .lab-info > * { grid-column: 1 !important; grid-row: auto !important; }
}
@media (max-width: 600px) {
  .lab-feats.cols { grid-template-columns: 1fr; }
  .lab-price { gap: 18px; padding: 12px 16px; }
}

/* stages size to their own column, not the viewport: with the chapter sidebar
   on wide screens a stage can be ~450px, so each one lays itself out with
   container queries against its window (see lab-craft.css, lab-craft2.css) */
.lab-win { container-type: inline-size; }