/* /labs/ — the only rules website-v3's own stylesheet does not already carry.
   Everything else on this page is .wrap / .section / .eyebrow / h1.display /
   .panel / .card / .chip / .faq / .notch-list / .btn, unchanged. */

/* The rotating mosaic, which is the Labs page's own idea and worth keeping:
   nine tiles, each cycling three frames of the product in use. Rebuilt as a
   grid that reflows instead of nine fixed cards, and it holds its shape with
   no script at all — the script only advances the frame. */
/* The v3 display heading sets its accent phrase nowrap so a short phrase stays
   intact in body-scale headings. In a hero the phrase is a whole line, and at
   480px "Shape Tomorrow's Workflows" ran off the side of the page. */
.labs-hero h1.display em{white-space:normal}

.labs-mosaic{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;
  gap:10px;margin-top:clamp(28px,4vw,44px);
}
.labs-tile{
  position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--r-lg);background:var(--se-deep);
  border:1px solid rgba(var(--se-border-teal-rgb),.18);
}
/* The first tile takes a 2x2 block, so nine tiles fill a 4x3 grid exactly and
   the mosaic reads as composed rather than as a uniform contact sheet. Sized
   in whole columns: an auto-fill track left five tiles on one row and four on
   the next, and squeezed every caption into its picture. */
.labs-mosaic .labs-tile:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.labs-tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease-settle);
}
.labs-tile img.on{opacity:1}
.labs-tile figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:40px 13px 12px;
  background:linear-gradient(to top,rgba(10,12,14,.94) 42%,transparent);
  display:grid;
}
/* every caption is in the markup; they stack in one grid cell and only the
   active one is painted, so the text is there with the script switched off */
.labs-tile .cap{grid-area:1/1;opacity:0;transition:opacity .5s var(--ease-settle);
  pointer-events:none}
.labs-tile .cap.on{opacity:1}
.labs-tile .cap b{
  display:block;font-size:13px;font-weight:700;line-height:1.25;
  color:var(--se-text-white);text-wrap:balance;
}
.labs-tile .cap > span{
  display:block;margin-top:3px;font-family:var(--font-secondary);
  font-size:11px;line-height:1.35;letter-spacing:.03em;color:var(--se-text-caption);
}
.labs-mosaic .labs-tile:first-child .cap b{font-size:17px}
.labs-mosaic .labs-tile:first-child .cap > span{font-size:12.5px}
@media(max-width:720px){
  /* two columns, and rows size to their own tiles: keeping grid-auto-rows:1fr
     stretched every row to the tallest and opened a hole under the mosaic */
  .labs-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
  .labs-mosaic .labs-tile:first-child{grid-column:span 2;grid-row:span 1;aspect-ratio:16/9}
}

/* A release panel: picture on top, then the copy. .card-media carries the
   aspect; this only keeps the picture from sitting flush to the frame. */
.labs-release .panel-body{display:flex;flex-direction:column;gap:14px}
.labs-release .shot{
  display:block;width:100%;height:auto;border-radius:var(--r-md);
  background:var(--se-deep);
}
.labs-release p{font-size:15px;color:var(--se-text-dim);line-height:1.65;margin:0}
.labs-release .btn{align-self:flex-start;margin-top:2px}

/* Panel copy keeps a reading measure; the panel itself is a full-width
   surface, and prose set to 1032px is not readable. */
.panel-body > p.note,.panel-body > h3{max-width:72ch}


/* FAQ answers arrive as rich copy; .faq .a sets the frame, this sets the run. */
.faq .a p{margin:0 0 12px}
.faq .a p:last-child{margin-bottom:0}
.faq .a ul{margin:0 0 12px;padding-left:20px}
.faq .a li{margin:0 0 6px}
.faq .a strong,.faq .a b{color:var(--se-text-white);font-weight:600}

@media(prefers-reduced-motion:reduce){
  .labs-tile img{transition:none}
}

/* ── The Labs logotype ───────────────────────────────────────
   The page's own brand asset, carried over as inline SVG. Its gradient and
   filter ids are namespaced on extraction so they cannot collide with the
   site's defs. */
.labs-logo{display:block;width:min(100%,420px);height:auto;margin:0 0 26px}

/* A FAQ aside — the source calls these Tip, Best Practice and Note. */
.faq .a .callout{border-left:2px solid rgba(var(--accent-rgb),.55);
  background:rgba(var(--accent-rgb),.05);padding:12px 14px;border-radius:0 var(--r-md) var(--r-md) 0;
  margin:14px 0 0}
.faq .a .callout strong{color:var(--accent)}

/* the hero tile carries the page's own short film */
.labs-tile video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .9s var(--ease-settle)}
.labs-tile video.on{opacity:1}

/* the section title's accented word, matching h1.display em */
.h-section em{font-style:normal;color:var(--accent)}

/* The application and requirements panels hold a lot of copy and controls;
   the shared .panel-body padding is tuned for a compact readout. */
.se-form,.panel-body > .notch-list,.panel-body > .lf-grid{margin-inline:auto}
#apply .panel-body,#requirements .panel-body{padding:clamp(22px,3vw,34px)}

/* a tile whose film plays on hover says so on focus */
.labs-tile:focus-visible{outline:2px solid var(--se-focus);outline-offset:2px}