/* Pagina carousel — title + page cards as Swiper slides. */

.page-carousel {
  --page-carousel-gap: 1.5rem;
  --page-carousel-card-width: 20.5rem; /* 328px */
  --page-carousel-card-height: 24.375rem; /* 390px */
  --page-carousel-accent-width: 22.125rem; /* 354px — Figma indicator */
  --swiper-scrollbar-sides-offset: 0;
  color: var(--color-primary);
}

.page-carousel-swiper {
  overflow: hidden;
  inline-size: 100%;
}

.page-carousel-swiper .swiper-wrapper {
  transition-timing-function: linear;
}

.page-carousel-item {
  inline-size: min(var(--page-carousel-card-width), 85vw);
  block-size: var(--page-carousel-card-height);
  height: var(--page-carousel-card-height);
}

.page-carousel-item-title {
  display: flex;
  align-items: center;
}

.page-carousel-heading {
  margin: 0;
}

/* Swipe track: round first / last card only (not shared tile utilities). */
.page-carousel-item-first .tile {
  border-start-start-radius: var(--radius-lg);
}

.page-carousel-item-last .tile {
  border-end-end-radius: var(--radius-lg);
}

/* Below the slides — static flow + top margin (Figma). */
.page-carousel-rule,
.page-carousel-rule.swiper-scrollbar-horizontal {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  inset: auto;
  z-index: 2;
  display: block !important;
  overflow: hidden;
  inline-size: 100%;
  width: 100%;
  block-size: 0.625rem;
  height: 0.625rem;
  margin-block-start: 3rem;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}

.page-carousel-rule::before {
  content: "";
  position: absolute;
  inset: 0;
  block-size: 0.125rem;
  inset-block-start: calc(50% - 0.0625rem);
  background: var(--color-primary);
  pointer-events: none;
}

.page-carousel-rule-accent,
.page-carousel-rule .page-carousel-rule-accent {
  position: relative;
  left: 0;
  top: 0;
  block-size: 100%;
  height: 100%;
  inline-size: var(--page-carousel-accent-width);
  width: var(--page-carousel-accent-width);
  max-inline-size: 100%;
  background: var(--color-primary);
  border-radius: 0;
  cursor: grab;
  transition-timing-function: linear;
}

.page-carousel-rule-accent:active {
  cursor: grabbing;
}