/* =====================================================================
   ZippKart — video in the repair-parts banner
   ---------------------------------------------------------------------
   The banner was one column of text with a lot of empty blue to the
   right. This splits it in two and puts the film in that space. Nothing
   about the banner's colour, padding or type changes — only the layout
   around it.
   ===================================================================== */

.rp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}

/* The copy keeps the width it reads well at, rather than stretching to
   fill whatever the video leaves over. */
.rp-hero__copy { min-width: 0; }
.rp-hero__copy p { max-width: 560px; }

.rp-hero__video {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  overflow: hidden;
  background: #04101F;
  box-shadow: 0 18px 38px rgba(3, 14, 38, .42);
}
.rp-hero__video video {
  display: block;
  width: 100%;
  /* height:auto matters. The <video> tag carries width/height attributes
     so the browser can reserve space before the file loads, and that
     presentational height wins over aspect-ratio unless it is released
     here — without this line the box renders 540px tall. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #04101F;
}

/* A quiet label so it is obvious what the film is before anyone plays it.
   pointer-events:none keeps it out of the way of the player's controls. */
.rp-hero__vtag {
  position: absolute;
  left: 10px; top: 10px;
  pointer-events: none;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 99px;
  background: rgba(6, 18, 43, .58);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: rgba(214, 231, 255, .92);
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}

/* Tablet — the video gives up some width before the copy does. */
@media (max-width: 1000px) {
  .rp-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 22px; }
}

/* Phone — one column, film under the copy. It keeps its place in the
   banner rather than being hidden, but it loads nothing until tapped. */
@media (max-width: 760px) {
  .rp-hero__grid { grid-template-columns: 1fr; gap: 20px; }
  .rp-hero__video { max-width: 520px; }
}