/* Phone-first refinements (iPhone safe areas, fitted media, bigger tap targets) */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  -webkit-tap-highlight-color: transparent;
}

@supports (padding: env(safe-area-inset-left)) {
  .bp-safe-x {
    padding-left: max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
  }
  .bp-safe-bottom {
    padding-bottom: max(3.5rem, env(safe-area-inset-bottom));
  }
}

@media (max-width: 760px) {
  /* Hero: fit the phone screen instead of forcing a tall viewport block */
  .bp-halo {
    min-height: 84svh !important;
  }
  .bp-halo__content {
    width: 100% !important;
    padding: 28px 24px 0 !important;
  }
  .bp-halo__art {
    width: min(74vw, 320px) !important;
    height: min(74vw, 320px) !important;
    right: 50% !important;
    bottom: 14px;
    top: auto;
    margin: 0 !important;
    translate: 50% 0;
  }

  /* Wide banners: show the whole artwork, never a cropped middle */
  .bp-carousel__viewport {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1920 / 800 !important;
    background: #182b3b;
  }
  .bp-carousel__slide img {
    object-fit: contain !important;
  }

  /* Adverts keep their 4:5 shape and full width */
  .campaign-stage {
    height: auto !important;
    width: 100% !important;
  }
  .campaign-hero {
    min-height: 0 !important;
    padding-block: 104px 28px !important;
  }
  .campaign-page {
    padding: 0 max(20px, env(safe-area-inset-left)) 0 max(20px, env(safe-area-inset-right)) !important;
  }

  .bp-field,
  .bp-clarity {
    min-height: 0 !important;
  }
  .bp-field__stage {
    height: 40svh !important;
  }

  .bp-marquee__track > div {
    font-size: 54px;
    letter-spacing: -2px;
  }

  /* Comfortable tap targets */
  .campaign-controls button {
    width: 44px;
    height: 44px;
  }
  .campaign-effectbar button {
    min-height: 44px;
    padding: 12px 16px;
  }
  .bp-process__tab {
    min-height: 92px;
  }
  .bp-carousel__dots button {
    min-width: 28px;
    min-height: 28px;
  }
}

/* Stardust trail is pointer-only; never on touch screens */
@media (hover: none) {
  canvas.bp-cursor-dust {
    display: none !important;
  }
}
