/* Videos — the Videos page's own layer.
   The library itself — its tab set, its grid and its card — is styled by
   assets/css/video-library.css, which travels with the component to every page
   that prints one, so nothing about a card is stated here any more. What is left
   is what belongs to this page alone: the technical-support block the library
   ends on. Every value comes from assets/css/tokens.css, and the .section,
   .split, .panel, .actions and .btn blocks this page is built from are the
   shared ones, so no global class and no other page's class is touched. */

/* ---------------------------------------------------- Technical support -- */
/* Two columns, the argument on the left and the questions the team answers on
   the right. The shared .split centres its two columns, which is right for a
   picture beside a paragraph and wrong for a list beside a heading: the list is
   read from its own top edge, so the pair is aligned there instead. */
.split.video-support{
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(32px,4vw,64px);
  align-items:start;
}

.video-support__lede{
  margin:0 0 var(--space-3);
  max-width:52ch;
  font-size:16px;
  line-height:1.6;
  color:var(--color-muted);
}

/* The list of what the team answers on. It is the one thing in this block with
   no shared block behind it: seven short lines that read as a list of work
   rather than as prose, in two columns on a desktop and one on a phone. The
   marker is the site's own sun colour drawn in CSS rather than a bullet glyph,
   so it stays crisp at any size and no icon is loaded for it. */
.video-support__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-2) var(--space-3);
  margin:0;
  padding:0;
  list-style:none;
}

.video-support__list li{
  position:relative;
  padding-left:var(--space-3);
  font-size:15px;
  line-height:1.5;
  color:var(--color-heading);
}

.video-support__list li::before{
  content:"";
  position:absolute;
  top:.55em;
  left:0;
  width:8px;
  height:8px;
  border-radius:2px;
  background:var(--color-sun);
}

/* ---------------------------------------------------------- Responsive -- */
/* The two columns become one under 900px, argument first, which is the order
   they are read in. */
@media (max-width:900px){
  .split.video-support{grid-template-columns:minmax(0,1fr);gap:28px}
}

@media (max-width:520px){
  .video-support__list{grid-template-columns:minmax(0,1fr)}
}