/* The Lynx page's video and module tour. Loaded by products/lynx.html only.
   Without JavaScript every panel shows, stacked. lynx-tour.js adds .is-tabbed to the tour,
   which reveals the tab row and shows one panel at a time. */

/* ---- the demo video ----------------------------------------------------- */
.lt-video video{aspect-ratio:16/9;background:var(--navy-deep);object-fit:contain;}

/* ---- the tour ------------------------------------------------------------ */
.lt-head{max-width:68ch;}
.lt-head h2{margin:.5rem 0 0;}
.lt-head .lead{margin-top:1rem;}

.lt-tabs{display:none;}
.lt.is-tabbed .lt-tabs{
  display:flex;gap:0;margin-top:clamp(22px,2.6vw,36px);position:relative;
  border-bottom:1px solid var(--line-strong);
  overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
.lt-tab{
  flex:none;appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  margin-bottom:-1px;padding:12px 16px;cursor:pointer;white-space:nowrap;
  font:600 .74rem/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--taupe-2);
  transition:color .2s,border-color .2s;
}
.lt-tab:hover{color:var(--navy);}
.lt-tab[aria-selected="true"]{color:var(--navy-deep);border-bottom-color:var(--navy);}
.lt-tab:focus-visible{outline:2px solid var(--navy);outline-offset:-2px;}

.lt-panel{
  display:grid;grid-template-columns:1fr;gap:clamp(18px,2.4vw,36px);align-items:start;
  padding-block:clamp(26px,3vw,40px);border-top:1px solid var(--line);
}
.lt-panel:first-of-type{border-top:0;}
.lt.is-tabbed .lt-panel{border-top:0;}
.lt.is-tabbed .lt-panel[hidden]{display:none;}
.lt-panel:focus-visible{outline:2px solid var(--navy);outline-offset:4px;}
/* The screenshot takes the full content width and the text sits beneath it: at a third/two-thirds split
   the image shrank to about 780px and its labels could not be read. */
.lt-media{order:-1;}
@media(min-width:980px){
  .lt-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);column-gap:clamp(24px,3.4vw,56px);align-items:start;grid-auto-flow:row dense;}
  .lt-body > *{grid-column:1;}
  .lt-body p,.lt-body .shot-cap,.lt-body .warn{grid-column:2;}
  .lt-body p:first-of-type{margin-top:.2rem;}
}
.lt-media img{cursor:zoom-in;}

/* Click-to-enlarge: the screenshot opens at full screen; Escape, a click or the close button dismisses it. */
.lt-zoom{position:fixed;inset:0;z-index:1000;background:rgba(14,28,46,.92);display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px);cursor:zoom-out;}
.lt-zoom[hidden]{display:none;}
.lt-zoom img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 30px 80px rgba(0,0,0,.45);background:#fff;}
.lt-zoom button{position:absolute;top:14px;right:18px;background:none;border:0;color:#fff;font:400 34px/1 var(--font);cursor:pointer;}
.lt-body h3{font-size:clamp(22px,2.3vw,30px);line-height:1.15;margin:.55rem 0 0;color:var(--navy-deep);letter-spacing:-.01em;}
.lt-body p{margin:.8rem 0 0;color:var(--ink);line-height:1.65;}
.lt-media{min-width:0;}

/* Two caveats, not three: a two-up strip rather than a three-up with a hole in it. */
@media(min-width:820px){.tri.tri--two{grid-template-columns:repeat(2,1fr);}}

/* On a narrow screen the tab row scrolls sideways; the fade at the right edge says there is more. */
@media(max-width:979px){
  .lt.is-tabbed .lt-tabs{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent);}
}