/* Mobile-only "top strip" carousel toggle.
   Use with: <section class="oa-top-strip oa-top-strip--mobile"> … </section>
   or <section class="pf-end-strip oa-top-strip--mobile"> … </section>
   Hide the replaced desktop carousel on mobile via: .oa-photo-slider--mobile-replaced
*/

.oa-top-strip--mobile {
  display: none;
}

@media (max-width: 739px) {
  .oa-top-strip--mobile {
    display: block;
  }

  .oa-photo-slider--mobile-replaced {
    display: none !important;
  }

  /* Vertical rhythm: one 54px band per carousel block (padding), not padding + margin */
  main.oa-page .pf-end-strip {
    padding: 54px 0;
    margin-top: 0;
  }

  main.oa-page .oa-top-strip--mobile:not(.pf-end-strip) {
    margin: 54px 0 0;
    padding-bottom: 54px;
  }

  main.oa-page .oa-top-strip--mobile.pf-end-strip,
  main.oa-page .pf-end-strip.oa-top-strip--mobile {
    margin-top: 0;
  }

  /* Next block after carousel: pf-end / mobile strip already has padding-bottom 54px */
  main.oa-page .pf-end-strip + section,
  main.oa-page .oa-top-strip--mobile:not(.pf-end-strip) + section,
  main.oa-page .pf-end-strip + .oa-photo-slider--mobile-replaced + section,
  main.oa-page .oa-top-strip--mobile:not(.pf-end-strip) + .oa-photo-slider--mobile-replaced + section {
    margin-top: 0 !important;
  }

  /* Case page + portfolio-style: .pf-section img { height:auto } must not flatten caption chevrons on prod */
  main.oa-page .pf-end-strip .pf-end-caption-row {
    display: flex;
    visibility: visible;
    opacity: 1;
  }

  main.oa-page .pf-end-caption .pf-end-ic {
    display: block !important;
    width: 48px;
    height: 16px;
    max-width: none;
    min-width: 40px;
    min-height: 12px;
    flex-shrink: 0;
    object-fit: contain;
  }

  /* Caption row layout (bottom gap only when parent has no section padding) */
  main.oa-page :where(
    .oa-top-caption-row,
    .pf-end-caption-row,
    .oa-photo-slider-captions
  ) {
    width: 100%;
    max-width: none;
    margin-top: 16px;
    padding: 0;
    justify-content: center;
    gap: 43px;
  }

  main.oa-page .pf-end-strip .pf-end-caption-row {
    margin-bottom: 0;
  }

  main.oa-page :where(
    .oa-top-strip--mobile:not(.pf-end-strip) .oa-top-caption-row,
    .oa-photo-slider:not(.oa-photo-slider--mobile-replaced) .oa-photo-slider-captions
  ) {
    margin-bottom: 0;
  }

  /*
   * Vertical page scroll in carousel zones (homepage uses pan-y on locations-gallery).
   * Case CSS often sets pan-x only, which blocks scrolling the page over sliders.
   */
  main.oa-page :is(
    .oa-photo-slider-viewport,
    .pf-end-viewport,
    .oa-top-viewport
  ),
  [data-pf-end-mobile-native="1"] :is(.pf-end-viewport, .oa-top-viewport) {
    touch-action: pan-x pan-y !important;
    overscroll-behavior-y: auto;
  }

  main.oa-page :is(
    .oa-photo-slider-viewport.is-dragging,
    .pf-end-viewport.pf-end-viewport--drag,
    .oa-top-viewport.oa-top-viewport--dragging
  ),
  .oa-top-strip--dragging .oa-top-viewport {
    touch-action: none !important;
  }
}