@import url("../05/variant.css");

body[data-variant="01"] { overflow-x: hidden; }
body[data-variant="01"] .lab-screen { display: flex; min-height: min(100vh, 900px); flex-direction: column; padding-top: clamp(30px, 4.4vh, 42px); padding-bottom: 0; }

.editorial-selector { grid-template-columns: minmax(500px, .88fr) minmax(620px, 1.12fr); }
.editorial-tabs { grid-template-rows: minmax(190px, .92fr) minmax(250px, 1.08fr); background: var(--lab-soft); }
.flagship-slot { min-height: 0; }
.flagship-slot .editorial-tab { position: relative; display: flex; height: 100%; flex-direction: column; align-items: flex-start; justify-content: center; padding: 24px 28px; }
.flagship-slot .flagship-label { margin-bottom: 17px; }
.flagship-slot .editorial-tab__title { max-width: 490px; color: var(--lab-bg); font-size: clamp(26px, 2.35vw, 34px); letter-spacing: -.045em; line-height: 1.02; }
.editorial-tab__hint { display: block; max-width: 245px; margin-top: 9px; color: var(--lab-muted); font-size: 11px; line-height: 1.35; }
.flagship-slot .editorial-tab__hint { max-width: 430px; color: var(--lab-line); }
.editorial-tab i { position: absolute; right: 18px; bottom: 17px; color: var(--lab-quiet); font-size: 18px; font-style: normal; }
.editorial-tab--flagship i { color: var(--lab-bg); }

.entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); min-height: 0; }
.entry-grid .editorial-tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 0; padding: 22px 24px; border-right: 1px solid var(--lab-line); }
.entry-grid .editorial-tab:nth-child(even) { border-right: 0; }
@media (min-width: 761px) {
  .entry-grid .editorial-tab:nth-last-child(-n+2) { border-bottom: 0; }
}
.entry-grid .editorial-tab__number { position: absolute; top: 18px; left: 24px; color: var(--lab-accent); font-size: 11px; font-weight: 750; letter-spacing: .08em; }
.entry-grid .editorial-tab__title { max-width: 250px; color: var(--lab-ink); font-size: clamp(18px, 1.45vw, 22px); font-weight: 650; letter-spacing: -.035em; line-height: 1.08; }
.entry-grid .editorial-tab.is-active { background: var(--lab-accent); }
.entry-grid .editorial-tab.is-active .editorial-tab__number, .entry-grid .editorial-tab.is-active .editorial-tab__title, .entry-grid .editorial-tab.is-active .editorial-tab__hint { color: var(--lab-bg); }
.entry-grid .editorial-tab.is-active i { color: var(--lab-bg); }
.editorial-panel--flagship .editorial-panel__lead::after { display: none; }

@media (max-width: 1080px) {
  .editorial-selector { grid-template-columns: minmax(420px, .85fr) minmax(500px, 1.15fr); }
}

@media (max-width: 760px) {
  body[data-variant="01"] .lab-screen { display: block; }
  .editorial-selector { position: relative; }
  .editorial-selector::after { content: "→"; position: absolute; top: 60px; right: 8px; z-index: 4; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--lab-line); background: var(--lab-bg); color: var(--lab-accent); box-shadow: 0 8px 24px color-mix(in srgb, var(--lab-ink) 12%, transparent); font-size: 22px; pointer-events: none; animation: mobile-swipe-cue 1.4s ease-in-out infinite; }
  .editorial-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; border: 0; background: var(--lab-bg); scroll-snap-type: x mandatory; }
  .flagship-slot, .entry-grid { display: contents; }
  .editorial-tab, .flagship-slot .editorial-tab, .entry-grid .editorial-tab { flex: 0 0 100%; width: 100%; min-height: 164px; padding: 18px; border: 1px solid var(--lab-line); scroll-snap-align: start; }
  .entry-grid .editorial-tab__number { top: 16px; left: 18px; }
  .entry-grid .editorial-tab__title, .flagship-slot .editorial-tab__title { font-size: 20px; }
  .editorial-tab i { display: none; }
  .editorial-panel__lead { min-height: 340px; }
}

@keyframes mobile-swipe-cue {
  0%, 100% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-selector::after { animation: none; }
}