/* ==========================================================================
   Self-hosted video

   solutions.css already owns the landscape case: .sl-media / .sl-video is a
   16:9 frame built for the YouTube embed on the Road Condition Survey page.
   This sheet adds the portrait sibling, because the 3D Mapping clip is
   720x1280 (9:16) and would either pillarbox or crop inside a 16:9 box.

   Same radius, same hairline, same slate ground as .sl-video, so portrait and
   landscape media read as one family rather than two components.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Portrait frame

   Sizing is the part that needs care. .pj-wrap caps at 1200px with 32px
   gutters (1136px of content) and .sl-method is 1.15fr 1fr with a 48px gap,
   so the media column lands around 506px. At 9:16 that renders 899px tall --
   absurd beside three paragraphs of prose.

   So the portrait variant pins its own column at 320px (-> 569px tall).
   Pinning the MEDIA column is safe here. The failure recorded at
   solutions.css:263-269 was the opposite case: the prose was pinned at 62ch,
   refused to yield, and the video absorbed the entire shrink down to 349px.
   Here the prose is the flexible column and simply reflows.
   -------------------------------------------------------------------------- */

.sl-method.is-portrait {
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  /* .sl-method aligns to start, which is right when prose and a 16:9 video are
     roughly the same height. A 9:16 clip is 569px against maybe 240px of copy,
     so start-alignment leaves a visible hole under the text. Centring lets the
     video define the row and floats the prose against it. */
  align-items: center;
}

/* .sl-method-body sets prose at .9375rem, which is sized for the Road Condition
   Survey layout where the text column is the wider of the two. Here the column
   is 768px and vertically centred against a tall video, so the same size read
   as undersized against all that height. Scoped to .is-portrait so the
   solutions page is untouched. */
.sl-method.is-portrait .sl-method-body p {
  font-size: 1.0625rem;
  line-height: 1.75;
  margin-bottom: 18px;
}

.sl-method.is-portrait .sl-method-body p:last-child {
  margin-bottom: 0;
}

/* Must out-specify the rule above, which is (0,3,1) and would otherwise flatten
   the role line to the same size as the body copy and lose the hierarchy. */
.sl-method.is-portrait .sl-method-body .sl-who-role {
  font-size: 1.3125rem;
  line-height: 1.35;
  margin-bottom: 20px;
}

.sl-portrait {
  position: relative;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--vd-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--vd-slate);
}

.sl-portrait video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* The native control bar is drawn inside the rounded frame; without this the
   controls sit on square corners that poke past the radius in Chromium. */
.sl-portrait video::-webkit-media-controls-panel {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

/* Fallback line for a browser that cannot play the file at all. It is inside
   the <video>, so it only ever renders when the element is unsupported. */
.sl-portrait a {
  color: var(--vd-paper);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Stacked

   Matches the 900px breakpoint solutions.css already uses for .sl-method. The
   frame keeps its 320px cap and sits left rather than stretching to the full
   column, which at 9:16 would be a full screen of video on a tablet.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 900px) {
  .sl-method.is-portrait {
    grid-template-columns: 1fr;
  }

  .sl-method.is-portrait .sl-media {
    max-width: 320px;
  }
}