/* MAD FM Stage 07.1A UAT02: mobile carousel presentation only. */
@media (max-width: 625px) {
  /* Main Camera slide: captions overlay the reserved left artwork area. */
  .slider .camera_wrap { container-type: inline-size; }
  .slider .camera_wrap .camera_caption {
    position: absolute !important;
    top: auto !important;
    bottom: 13% !important;
    left: 4% !important;
    width: 46% !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: left !important;
  }
  .slider .camera_caption > .container,
  .slider .camera_caption .span7 {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: transparent !important;
  }
  .slider .camera_caption h2 {
    font-size: 6cqw !important;
    line-height: .95 !important;
    overflow-wrap: anywhere;
  }
  .slider .camera_caption h3 {
    font-size: 3.7cqw !important;
    line-height: 1.05 !important;
    margin-top: 1.5cqw !important;
    overflow-wrap: anywhere;
  }
  .slider .camera_caption p {
    font-size: 2.9cqw !important;
    line-height: 1.1 !important;
    padding-top: 1.5cqw !important;
    overflow-wrap: anywhere;
  }
  /* UAT07: reserve space below the main Camera slider for paired controls. */
  .slider .camera_wrap { margin-bottom: 27px !important; }
  /* Camera controls below artwork, paired on the right. */
  .slider .camera_prev,
  .slider .camera_next {
    top: auto !important;
    bottom: -21px !important;
    width: 16px !important;
    height: 16px !important;
    background-size: 32px 16px !important;
    background-repeat: no-repeat !important;
  }
  .slider .camera_prev { left: auto !important; right: 21px !important; background-position: left top !important; }
  .slider .camera_next { right: 0 !important; left: auto !important; background-position: right top !important; }
  /* Programme carousel: reserve a footer below the complete card for controls. */
  .carousel-box > .inner {
    padding-bottom: 23px !important;
  }
  .carousel-box > .inner > a.prev,
  .carousel-box > .inner > a.next {
    top: auto !important;
    bottom: 2px !important;
    width: 16px !important;
    height: 16px !important;
    background-size: 26px 16px !important;
    background-repeat: no-repeat !important;
  }
  .carousel-box > .inner > a.prev {
    left: auto !important;
    right: 21px !important;
    background-position: left top !important;
  }
  .carousel-box > .inner > a.next {
    left: auto !important;
    right: 0 !important;
    background-position: right top !important;
  }
}
/* Stage 07.1A UAT03: preserve full image; height is controlled by Camera options. */
@media (max-width: 625px) {
  .slider .camera_wrap .camera_caption {
    bottom: 14% !important;
  }

}
/* Stage 07.1A UAT04: second carousel only, preserve 270:199 artwork ratio. */
@media (max-width: 625px) {
  .carousel-box .carousel.main li img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 270 / 199;
    object-fit: contain;
  }
}

/* Stage 07.1A: remove decorative arrow, retain dark programme details panel. */
@media (max-width: 625px) {
  div.carousel-box ul li div {
    background: #1b1a22;
  }
}

/* Stage 07.1A UAT08: mobile-only refinements. */
@media (max-width: 625px) {
  /* Reclaim 18px above the programme artwork, retaining the carousel controls. */
  .carousel-box > .inner {
    padding-top: 12px !important;
  }

  /* Our DJs: smaller paired controls, retaining their position beside the heading. */
  #myCarousel > a.carousel-control.left,
  #myCarousel > a.carousel-control.right {
    width: 16px !important;
    height: 16px !important;
    top: -40px !important;
    background-size: 12px 16px !important;
    background-repeat: no-repeat !important;
  }
  #myCarousel > a.carousel-control.left {
    left: auto !important;
    right: 21px !important;
  }
  #myCarousel > a.carousel-control.right {
    left: auto !important;
    right: 0 !important;
  }
}

/* Stage 07.1A UAT09: reduce visible artwork of secondary carousel arrows.
   Keep 16px click targets and existing positions unchanged. */
@media (max-width: 625px) {
  .carousel-box > .inner > a.prev,
  .carousel-box > .inner > a.next {
    background-size: 20px 12px !important;
  }

  #myCarousel > a.carousel-control.left,
  #myCarousel > a.carousel-control.right {
    background-size: 9px 12px !important;
  }
}

/* Stage 07.1A UAT10: remove programme navigation sprite bleed.
   Draw one small chevron per control without changing its hit area or position. */
@media (max-width: 625px) {
  .carousel-box > .inner > a.prev,
  .carousel-box > .inner > a.next {
    background-image: none !important;
    position: absolute;
  }
  .carousel-box > .inner > a.prev::after,
  .carousel-box > .inner > a.next::after {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 5px;
    width: 6px;
    height: 6px;
    border-top: 1px solid #a8a8b0;
    border-right: 1px solid #a8a8b0;
  }
  .carousel-box > .inner > a.prev::after {
    transform: rotate(-135deg);
  }
  .carousel-box > .inner > a.next::after {
    transform: rotate(45deg);
    left: 3px;
  }
}

/* Stage 07.1A UAT11: reduce empty space above Schedule on narrow mobile.
   Shift Schedule and the following content up together by 25px.
   No changes to navigation, carousel artwork or controls. */
@media (max-width: 481px) {
  header > .container:first-child > .row {
    min-height: 155px;
  }
  header .top_right {
    top: 98px;
  }
}

/* Stage 07.1A UAT12: reclaim a further 12px above Schedule on narrow mobile.
   Preserve the relative spacing below Schedule and all accepted carousel styling. */
@media (max-width: 481px) {
  header > .container:first-child > .row { min-height: 143px; }
  header .top_right { top: 86px; }
}

/* Stage 07.1A UAT13: visually balance mobile section spacing.
   Give the main slider a little more space below MENU, and bring the
   programme carousel closer to the main slider. No artwork or control changes. */
@media (max-width: 625px) {
  /* Extra breathing room below MENU before the Camera slider. */
  .slider { margin-top: 12px !important; }

  /* Reduce the gap above programme carousel without moving its controls
     relative to its artwork or changing the accepted image proportions. */
  .carousel-box > .inner { padding-top: 0 !important; }
}