/*
 * Reusable carousel prev/next arrow buttons (global-templates/carousel-nav.php).
 * Plain circular buttons, filled on hover - originally built for
 * #actualitat, now the shared style for every carousel that uses this
 * partial (currently #actualitat and #success-stories) instead of
 * duplicating the same button CSS per component.
 *
 * ".carousel-nav" already sets "align-self: flex-end", matching every
 * current usage (a centered-column header with the nav pinned to the
 * right) - a future section with a different header layout can override
 * it with a more specific selector rather than this file growing variants.
 */

.carousel-nav {
  display: flex;
  gap: 12px;
  align-self: flex-end;
}

/* Hidden on mobile everywhere this component is used: the carousel's own
   "peek" (next card partly visible) already signals there's more to scroll
   to, so the arrows are redundant chrome at that size. */
@media screen and (max-width: 767.98px) {
  .carousel-nav {
    display: none;
  }
}

.carousel-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--color-dark);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.carousel-nav-btn:hover {
  background-color: var(--color-dark);
  color: #fff;
}

.carousel-nav-btn.is-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.carousel-nav-btn :is(i, svg) {
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-nav-btn {
    transition: none;
  }
}