/* ScreenQube SHOWCASE — loaded only by the industry and solution pages; extends existing components and redeclares nothing. */

/* Breadcrumb */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2);
  font-size:var(--t-xs); color:var(--ink-3);
}
.crumbs a{
  display:inline-flex; align-items:center; min-height:32px;
  color:var(--ink-2); text-decoration:underline;
  text-decoration-color:var(--line-2); text-underline-offset:.2em;
}
.crumbs a:hover{ color:var(--red); text-decoration-color:currentColor }
.crumbs span[aria-current]{ color:var(--ink-3) }
.crumbs i{ font-style:normal; color:var(--ink-4) }

/* Showcase hero — copy left, the screen right */
/* Not .hero: that one owns a whole viewport and is wired to the scroll engine. This is a masthead with a picture beside it. */
/* clip, not hidden: the glow below sits at right:-6% and scrolled every showcase page sideways, but the section must still let vertical content bleed */
.sc-hero{ position:relative; overflow-x:clip; padding-block:var(--s8) var(--s7) }
.sc-hero::before{
  content:""; position:absolute; top:-32%; right:-6%;
  width:min(760px,86vw); height:520px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(217,39,63,.13),rgba(217,39,63,0) 72%);
  pointer-events:none;
}
.sc-hero > *{ position:relative }
.sc-hero__grid{ display:grid; gap:var(--s7); align-items:center }
@media (min-width:960px){
  .sc-hero__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.06fr); gap:var(--s8) }
}
.sc-hero__in{ max-width:52ch }
.sc-hero__in .d1{ font-size:clamp(2.2rem,4.4vw,3.6rem); margin:var(--s4) 0 var(--s5) }
.sc-hero .crumbs{ margin-bottom:var(--s4) }

/* The masthead reuses the home page's own .screen component — one piece of hardware across the site — sized for a masthead column and without the portrait companion. */
.sc-hero__screen{ margin:0; max-width:660px }
/* `margin-inline:0 0 0 auto` was four values on a two-value property, so the whole declaration was dropped and the caption laid out from the wrong edge. */
@media (min-width:960px){ .sc-hero__screen{ margin-left:auto; margin-right:0 } }
.sc-hero__screen .screen__caption{ margin:var(--s5) 0 0; max-width:52ch }

/* The flat bezel, still used by the venue band lower down */
/* A bezel, not .screen: no video, no spill, no glow. It only has to say "this is on a wall". */
.artframe{ position:relative; margin:0 }
.artframe__panel{
  position:relative;
  border-radius:var(--r-lg);
  padding:10px;
  background:var(--ink);
  box-shadow:var(--sh-4);
}
/* <picture> is inline, and the bezel now holds a photograph or a clip as often as a drawing. */
.artframe__panel picture{ display:block }
.artframe__panel img,.artframe__panel video{
  width:100%; display:block;
  border-radius:var(--r-xs);
  aspect-ratio:1000 / 562; object-fit:cover;
}
.artframe--portrait .artframe__panel img,
.artframe--portrait .artframe__panel video{ aspect-ratio:9 / 16 }
/* A portrait bezel at full column width is a two-metre-tall phone. Cap it. */
@media (min-width:960px){ .artframe--portrait{ max-width:420px; margin-inline:auto } }
.artframe figcaption{
  margin-top:var(--s4);
  font-size:var(--t-xs); color:var(--ink-3); max-width:52ch;
  line-height:1.6;
}
.artframe figcaption b{ color:var(--ink-2); font-weight:700 }

/* The illustration, demoted from hero to supporting figure */
/* It says what PLAYS on a screen; it cannot answer "is this real?", which is what a masthead has to do. */
.artshot{
  margin:0 0 var(--s7);
  max-width:760px;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:var(--sh-2);
  background:var(--ink);
}
.artshot img{ width:100%; display:block }
.artshot figcaption{
  padding:var(--s3) var(--s5);
  background:var(--white);
  border-top:1px solid var(--line);
  font-size:var(--t-xs); color:var(--ink-3);
}

/* Simple column grids */
.grid-2,.grid-3{ display:grid; gap:var(--s4); grid-template-columns:1fr }
@media (min-width:680px){ .grid-2,.grid-3{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1040px){ .grid-3{ grid-template-columns:repeat(3,1fr) } }

/* Problem / answer pairs */
/* The problem is the quiet half and the answer the loud one, so a skim reads the answers. A <dl>, because that is what this is. */
.answers{ display:grid; gap:var(--s4); counter-reset:ans }
.answers__row{
  display:grid; gap:var(--s3) var(--s6); align-items:start;
  background:var(--white);
  border:1px solid var(--line);
  border-left:3px solid var(--red);
  border-radius:var(--r);
  box-shadow:var(--sh-1);
  padding:var(--s5) var(--s6);
}
@media (min-width:860px){ .answers__row{ grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) } }
.answers dt{
  font-size:var(--t-sm); font-weight:700; color:var(--ink-3);
  line-height:1.5; max-width:44ch;
}
.answers dd{ margin:0; font-size:var(--t-sm); color:var(--ink); line-height:1.6; max-width:52ch }

/* Two paragraphs in a split ran together — nothing had ever put two there before. */
.split__copy .body + .body{ margin-top:var(--s4) }

/* Evidence line */
/* Where a claim came from, on the page rather than in a footnote — the mirror of .notice. */
.evidence{
  display:block; max-width:80ch;
  margin-bottom:var(--s6);
  padding:var(--s4) var(--s5);
  background:var(--mist);
  border-left:3px solid var(--ink-4);
  border-radius:0 var(--r-xs) var(--r-xs) 0;
  font-size:var(--t-sm); color:var(--ink-2); line-height:1.6;
}
/* Its own class, not `.evidence b`: the copy uses <b> for a control's real name, and the label treatment made every one read as a second heading. */
.evidence__lab{
  display:inline-block; margin-right:var(--s2);
  font-size:var(--t-lab); font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}
.evidence b{ color:var(--ink); font-weight:700 }
.evidence .mono{
  font-family:var(--f-mono); font-size:.92em;
  background:var(--white); border:1px solid var(--line-2);
  border-radius:var(--r-xs); padding:1px 6px;
}

/* Where the screens go */
.places{ display:grid; gap:var(--s4); grid-template-columns:1fr; padding:0; list-style:none }
@media (min-width:680px){ .places{ grid-template-columns:repeat(2,1fr) } }
.place{ position:relative; padding-left:var(--s7) }
.place__n{
  position:absolute; left:0; top:2px;
  width:34px; height:34px; border-radius:var(--r-xs);
  display:grid; place-items:center;
  background:var(--red-wash); color:var(--red);
  font-size:var(--t-xs); font-weight:800;
  font-variant-numeric:tabular-nums;
}
.place h3{ font-size:var(--t-h2); font-weight:700; letter-spacing:-.025em; margin-bottom:var(--s2) }

/* A real venue photograph beside the copy */
/* Not .reelbig: that crops to 16/9 and overlays its caption, turning a 620x1102 portrait into a wide slice with two captions colliding. */
.venue{ display:grid; gap:var(--s5) var(--s7); align-items:center; margin-top:var(--s8) }
@media (min-width:860px){ .venue{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) } }
.venue__pic{
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:var(--sh-3);
  background:var(--ink);
}
/* <picture> is inline by default, so it needs the block treatment as much as the <img> inside it does. */
.venue__pic picture{ display:block }
.venue__pic img,.venue__pic video{ width:100%; display:block }
/* A 620x1102 still in a half-width column leaves a column of nothing beside it; give the portrait its own narrow track. */
@media (min-width:860px){ .venue--portrait{ grid-template-columns:330px minmax(0,1fr) } }
.venue figcaption{ font-size:var(--t-sm); color:var(--ink-2); line-height:1.6; max-width:44ch }
.venue figcaption b{ display:block; color:var(--ink); margin-bottom:var(--s2) }
.venue figcaption .xs{ display:block; margin-top:var(--s3) }

/* Four steps, not three */
/* .steps is a 3-column grid, which leaves a four-item list as three and a widow. Two by two is the honest shape. */
@media (min-width:1040px){ .steps--four{ grid-template-columns:repeat(2,1fr) } }

/* Cross-link cards */
.xcards{ display:grid; gap:var(--s3); grid-template-columns:1fr }
@media (min-width:680px){ .xcards{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1040px){ .xcards{ grid-template-columns:repeat(4,1fr) } }
.xcard{
  display:flex; align-items:center; gap:var(--s3);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--sh-1);
  padding:var(--s4);
  text-decoration:none; color:var(--ink);
  transition:transform var(--dur) var(--e), box-shadow var(--dur) var(--e);
}
.xcard:hover{ transform:translateY(-3px); box-shadow:var(--sh-3); color:var(--ink) }
.xcard b{ flex:1; font-size:var(--t-sm); font-weight:700; letter-spacing:-.02em }
.xcard .chip{ width:36px; height:36px; border-radius:var(--r-xs) }
.xcard .chip .icon{ width:18px; height:18px }
.xcard svg.xcard__go{
  width:16px; height:16px; flex:none; color:var(--red);
  stroke:currentColor; stroke-width:2.2; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  transition:translate var(--dur) var(--e);
}
.xcard:hover svg.xcard__go{ translate:3px 0 }

/* Hub grid — one card per industry or solution */
.sector + .sector{ margin-top:var(--s8) }
.sector__hd{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s3);
  margin-bottom:var(--s5); padding-bottom:var(--s3);
  border-bottom:1px solid var(--line-2);
}
.sector__hd h2{ font-size:var(--t-h1); font-weight:700; letter-spacing:-.03em }

/* The card itself now lives in components.css - the home page uses it too. */

/* Jump strip on the hub */
.jump{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s5) }
.jump a{
  display:inline-flex; align-items:center; min-height:40px;
  padding:8px var(--s4); border-radius:var(--r-pill);
  background:var(--white); border:1px solid var(--line-2);
  box-shadow:var(--sh-1);
  font-size:var(--t-xs); font-weight:700; color:var(--ink-2);
  text-decoration:none;
  transition:color var(--dur-fast) var(--e), border-color var(--dur-fast) var(--e);
}
.jump a:hover{ color:var(--red); border-color:var(--red-soft) }