/* Home carousel on small screens. The original desktop hero stays unchanged.
 * .fhero-bg already selects the custom banner, falling back to the drama poster.
 * Show that image sharply instead of leaving only the blurred desktop backdrop.
 */
@media (max-width: 900px) {
  .fhero-slider .swiper-slide { height: auto; }
  .fhero-slider .fhero {
    min-height: 440px;
    height: 100%;
  }
  .fhero-slider .fhero-bg {
    filter: none;
    transform: none;
    opacity: 1;
    object-position: center 20%;
  }
  .fhero-slider .fhero::after {
    /* Keep the upper artwork visible; darken only the area behind the copy. */
    background: linear-gradient(180deg,
      rgba(7, 11, 22, .02) 0%,
      rgba(7, 11, 22, .08) 28%,
      rgba(7, 11, 22, .72) 48%,
      rgba(7, 11, 22, .96) 70%,
      #070b16 100%);
    pointer-events: none;
  }
  .fhero-slider .fhero-in {
    width: 100%;
    max-width: none;
    min-width: 0;
    /* Reserve a clear artwork area, including for long titles and synopses.
     * Bottom spacing keeps the pagination dots clear of the action buttons. */
    padding: 190px 20px 38px;
  }
  .fhero-slider .fhero-title { overflow-wrap: anywhere; }
  .fhero-slider .fhero-act { gap: 10px; }
  .fhero-slider .fhero-act .btn { padding-inline: clamp(16px, 4.5vw, 26px); }
}