/* Force the auto-generated wrapper to fill its parent's width. In normal
   block flow (standalone sections) this matches the default; in grid/flex
   contexts whose alignment is not `stretch` (e.g. multitab's
   `grid-justify-center`) the wrapper would otherwise size to its rail's
   max-content and overflow the track. */
.cms-informative-cards-carousel-wrapper {
  width: 100%;
  min-width: 0;
}

/* Inside multitab on ≤1024px, the parent section adds horizontal gutters
   (see blocks/multitab/multitab.css). Standalone sections cancel them via
   `!p-0` (applied by this block's JS), but inside a multitab there is no
   carousel-owned section to target. Mirror the home-page behavior by
   pulling the wrapper out to the section's content edges so the rail can
   peek to the viewport edge instead of being cut at the gutter. */
@media (max-width: 1024px) {
  .section.multitab-container .cms-informative-cards-carousel-wrapper {
    margin-left: calc(-1 * var(--main-section-div-padding, 16px));
    margin-right: calc(-1 * var(--main-section-div-padding, 16px));
    width: calc(100% + 2 * var(--main-section-div-padding, 16px));
  }
}

/* Default vertical padding for the block.
   Defined here (not as Tailwind utilities in JS) so that section-level
   modifiers like `.section.no-padding-y` can override it via the cascade. */
.cms-informative-cards-carousel.block {
  padding-top: 1.5rem;  /* 24px — equivalent to Tailwind pt-6 */
  padding-bottom: 2rem; /* 32px — equivalent to Tailwind pb-8 */
}

/* Allow the parent section's `no-padding-y` modifier to remove the block's
   default vertical padding. */
.section.no-padding-y .cms-informative-cards-carousel.block {
  padding-top: 0;
  padding-bottom: 0;
}

/* The cards rendered inside the rail have an `outline: 1px solid` (the gray
   border around each card). The rail wrapper uses `overflow-x: auto` for
   horizontal scroll, which the CSS spec promotes to `overflow-y: auto` as
   well — and that clips the outline at the top/bottom of the cards.
   To give the outline (and any future box-shadow) room to render WITHIN the
   rail's clipping context, add a small vertical padding to the rail and
   compensate with a negative margin so the visual height stays the same. */
.cms-informative-cards-carousel-content > .flex.overflow-x-auto {
  padding-top: 4px;
  padding-bottom: 4px;
  margin-top: -4px;
  margin-bottom: -4px;
}

/* The first and last cards' outlines are clipped on the left/right edges by
   overflow-x-auto. Shifting the outline 1px inward keeps it fully visible
   without interfering with the container's responsive horizontal padding. */
.cms-informative-cards-carousel-content .outline-1 {
  outline-offset: -1px;
}