/* Inner-page phone banners: image + compact heading only. Desktop stays unchanged. */
@media (max-width: 768px) {
  .page-banner.page-banner[data-banner-size],
  .gallery-hero.gallery-hero[data-banner-size] {
    --page-banner-height: clamp(180px, 36vw, 280px);
    position: relative;
    height: var(--page-banner-height);
    min-height: 0;
    margin-top: var(--banner-header);
    padding: 0;
    overflow: hidden;
    color: #fff;
    touch-action: pan-y pinch-zoom;
  }
  .page-banner.page-banner[data-banner-size] .banner-slides,
  .page-banner.page-banner[data-banner-size] .banner-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  .page-banner.page-banner[data-banner-size] .banner-slides { display: block; }
  .page-banner.page-banner[data-banner-size] .banner-slide { display: flex; align-items: center; }
  .page-banner.page-banner[data-banner-size] .banner-bg,
  .gallery-hero.gallery-hero[data-banner-size] .banner-bg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    opacity: 1;
    mask-image: none;
    -webkit-mask-image: none;
    z-index: 0;
  }
  .page-banner.page-banner[data-banner-size] .banner-bg img,
  .gallery-hero.gallery-hero[data-banner-size] .banner-bg img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .page-banner.page-banner[data-banner-size] .banner-mask,
  .gallery-hero.gallery-hero[data-banner-size] .banner-mask {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .08) 80%);
    pointer-events: none;
  }
  .page-banner.page-banner[data-banner-size] .banner-body,
  .gallery-hero.gallery-hero[data-banner-size] > .container {
    position: relative;
    inset: auto;
    z-index: 2;
    padding-top: 0;
    padding-bottom: 0;
    background: transparent;
  }
  .page-banner.page-banner[data-banner-size] .banner-body > :not(.banner-title),
  .gallery-hero.gallery-hero[data-banner-size] .gallery-breadcrumb,
  .gallery-hero.gallery-hero[data-banner-size] p { display: none; }
  .page-banner.page-banner[data-banner-size] .banner-title,
  .gallery-hero.gallery-hero[data-banner-size] h1 {
    max-width: 85%;
    margin: 0;
    font-size: clamp(20px, 3.3vw, 24px);
    line-height: 1.4;
    letter-spacing: 0;
    color: #fff;
    white-space: normal;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
  }
  /* Leave room for controls inside the photo instead of adding a block below it. */
  .page-banner.topic-banner[data-banner-size] .banner-body { padding-bottom: 36px; }
  .page-banner.page-banner[data-banner-size] .banner-ui { bottom: 10px; z-index: 3; }
  .page-banner.page-banner[data-banner-size] .banner-arrows button { width: 36px; height: 36px; }
  .page-banner.page-banner[data-banner-size] .banner-dots button { height: 4px; }
}