/* General responsive front-end fixes. */

/* ===== Hero header clearance =====
   .site-header is position:fixed (85px desktop / 65px <=1119), so the vertically
   centred .cnc-hero content sat too close to / under it. Reserve top space that
   clears the header with comfortable breathing room, per size. The admin-bar
   term keeps it correct for logged-in editors. */
.cnc-hero {
  padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 120px) !important;
}
@media (max-width: 1119px) {
  .cnc-hero {
    padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 88px) !important;
  }
}
@media (max-width: 767px) {
  .cnc-hero {
    padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 65px) !important;
  }
}

/* ===== Cases carousel ===== */

/* Replace the SVG corner-mask (img-mask.svg, ~2:1) with an aspect-independent
   border-radius reproducing the same asymmetric-corner motif. The SVG distorts
   whenever the card is not ~2:1 (portrait mobile, and the 1024-1119 breakpoint).
   Applied at all sizes; identical look where the card is ~2:1. */
.bce-carousel-slide {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  border-radius: 20px 0 20px 0;
}

/* Card title weight */
.autogenerated-bce-cardcarousel-2-240 .bce-carousel-panel h3 {
  font-weight: 500 !important;
}

/* Tablet 1024-1119px: this breakpoint had anomalous portrait 320x380 cards.
   Make them landscape, consistent with the 768-1023 range (440x220). */
@media (min-width: 1024px) and (max-width: 1119px) {
  .autogenerated-bce-cardcarousel-2-240 .bce-carousel-slide {
    flex-basis: 440px !important;
    height: 220px !important;
  }
}

/* Mobile (<=767): shorter card + more peek of the next slide. */
@media (max-width: 767px) {
  .autogenerated-bce-cardcarousel-2-240 .bce-carousel-slide {
    height: 320px !important;
    flex-basis: 85% !important;
  }
}

/* CNC section: tighter side padding on stacked (<=1023) layout. */
@media (max-width: 1023px) {
  .cnc-sec__content {
    grid-column-start: 1;
    padding-top: 32px;
    padding-right: 1.5rem !important;
    padding-bottom: 48px;
    padding-left: 1.5rem !important;
  }
}

/* CNC section CTA: left-align the (wrapping) button label, keep the arrow right. */
@media (max-width: 767px) {
  .cnc-sec .button-atom--primary {
    justify-content: space-between !important;
    text-align: left !important;
  }
}

/* Service page process timeline: horizontal scroll only up to 1377px viewport
   width. Above that the 5 steps fit within the section's 1380px container, so
   disable the scrollbar/scroll-snap affordance entirely (Oxygen has no
   built-in breakpoint at 1377, hence this hand-written override). */
@media (min-width: 1378px) {
  .svchub-process__scroll {
    overflow-x: hidden !important;
  }
}

/* Downloads filter: on desktop the Reset button was position:absolute (top/right)
   and overlapped the wrapping filter chips. Put it back in flow, right-aligned,
   as its own row above the chips. (It is already static <=767px.) */
@media (min-width: 768px) {
  .downloads-filter__reset-icon {
    position: static !important;
    top: auto !important;
    right: auto !important;
    align-self: flex-end;
    margin-left: auto;
    width: fit-content;
  }
  /* pull-up only in the roomy (unpinned) state; the pinned bar is compact, where
     -30px made the button poke above the box. */
  .downloads-filter:not(.is-pinned) .downloads-filter__reset-icon {
    margin-top: -30px;
  }
}