/**
 * @file
 * Styling for the Scroller SDC component (components/scroller). Layout lives
 * inline in scroller.twig; this file covers the bits CSS-only can do: hiding
 * the native scrollbar and styling the prev/next arrow buttons.
 */

.scroller {
  position: relative;
}

/* Centered heading. Its bottom margin is the configurable heading spacing
   (headingSpacing prop → data-heading-spacing on .scroller). Rendered only when
   a heading is typed, so the spacing only exists when there's a heading. */
.scroller--heading {
  margin: 0 0 var(--scroller-heading-spacing, 1em) 0;
  font-size: 46px;
  line-height: 1.1;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

/* Shrink the heading on phones so it doesn't dwarf the stacked cards. */
@media (max-width: 640px) {
  .scroller--heading {
    font-size: 30px;
  }
}

.scroller[data-heading-spacing="none"] {
  --scroller-heading-spacing: 0;
}
.scroller[data-heading-spacing="small"] {
  --scroller-heading-spacing: 1em;
}
.scroller[data-heading-spacing="medium"] {
  --scroller-heading-spacing: 2em;
}
.scroller[data-heading-spacing="large"] {
  --scroller-heading-spacing: 3em;
}
.scroller[data-heading-spacing="extra-large"] {
  --scroller-heading-spacing: 4em;
}

/* Prev/next arrows: a right-aligned bar sitting directly above the cards with a
   small FIXED gap. Deliberately not affected by the heading spacing — it stays
   glued just above the track. When hidden (few items, no overflow) it is
   display:none and takes no space, so the heading sits straight on the cards. */
.scroller--arrows {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* The display:flex above outranks the [hidden] UA rule, so re-assert it: when
   scroller.js hides the arrows (no overflow), they must take no space. */
.scroller--arrows[hidden] {
  display: none;
}

/* Hide the native scrollbar (WebKit) — Firefox/IE handled inline on the track. */
[data-scroller-track]::-webkit-scrollbar {
  display: none;
}

/* When a Drupal view is placed in the slot, several wrapper divs sit between
   the track and the per-row items — in Canvas the chain is:
     [block-…]  →  .views-element-container  →  .view  →  .view-content  →  item
   Any of these left as a normal block box becomes the track's single flex
   child, collapsing all the cards into one vertical column. display:contents
   removes each wrapper from the layout box tree so the .scroller--item divs
   bubble up to be direct flex children of the track. */
[data-scroller-track] > [id^="block-"],
[data-scroller-track] .views-element-container,
[data-scroller-track] .view,
[data-scroller-track] .view-content {
  display: contents;
}

/* The view's own contextual-links div (admin/Canvas only) is a direct child of
   .view, so once .view collapses it would surface as a stray flex item. Hide
   only that one — the per-card contextual links (.contextual-region > .contextual)
   stay intact so media is still editable in admin. */
[data-scroller-track] .view > .contextual {
  display: none;
}

.scroller--arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
}

.scroller--arrow:hover {
  background: rgba(255, 255, 255, 0.24);
}

.scroller--arrow.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Disable-on-mobile flag (disableOnMobile prop → .scroller--no-mobile-scroll).
   On narrow screens the horizontal track is turned into a centered vertical
   stack: no overflow scrolling, no snap, arrows hidden. The track's layout is
   set inline in scroller.twig, so these overrides need !important to win. The
   .view wrapper-collapsing rule above keeps the cards as direct children, so
   flex-direction: column stacks them as expected. */
@media (max-width: 640px) {
  .scroller--no-mobile-scroll [data-scroller-track] {
    flex-direction: column !important;
    align-items: stretch !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    transform: none !important;
  }

  .scroller--no-mobile-scroll .scroller--arrows {
    display: none !important;
  }
}