/* ==========================================================================
   Texium Solutions — Services Carousel widget
   Consumes design tokens from theme.css only. Cards reuse the existing
   .texium-card system (surface, border, shine-sweep) — only the parts
   specific to this card layout (accent bar, eyebrow, tags) and the
   carousel mechanics (viewport, track, arrows, dots) are declared here.
   ========================================================================== */

.texium-carousel {
  --texium-carousel-per-view: 3;
  --texium-carousel-offset: 0%;
  position: relative;
}

.texium-carousel__viewport {
  overflow: hidden;
}

.texium-carousel__track {
  display: flex;
  align-items: stretch;
  transform: translateX(var(--texium-carousel-offset));
  transition: transform var(--texium-transition-slow) var(--texium-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .texium-carousel__track {
    transition: none;
  }
}

.texium-carousel__slide {
  flex: 0 0 calc(100% / var(--texium-carousel-per-view));
  min-width: 0;
  padding-inline: var(--texium-space-xs);
  box-sizing: border-box;
  display: flex;
}

/* Card: no hover offset — .texium-card's default translateY(-4px) lift
   is intentionally cancelled here; the shine-sweep and shadow already
   provide hover feedback without any positional movement. */

.texium-carousel__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  text-align: left;
  text-decoration: none;
  gap: 0;
  box-shadow: none;
}

/* No hover offset, shadow, or border change — .texium-card's default
   lift + shadow-lg + border-strong are intentionally cancelled here.
   The shine-sweep (::before, from theme.css) and the gradient wash
   below already provide hover feedback without any of that. */
.texium-carousel__card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--texium-megacard-border);
}

.texium-carousel__accent-bar {
  display: block;
  height: 8px;
  background: var(--texium-x-gradient);
}

.texium-carousel--no-accent-bar .texium-carousel__accent-bar {
  display: none;
}

.texium-carousel__card-body {
  position: relative;
  padding: var(--texium-space-md) var(--texium-space-md) var(--texium-space-sm);
  /* Fixed, not flex-grown: the footer's top divider needs to start at
     the same height on every card in a row, so the body's own height
     must come from a consistent reserved space (eyebrow row + up to
     ~2 lines of description) rather than from however much text that
     particular card happens to have. */
  flex: 0 0 auto;
  min-height: 92px;
}

/* Light gradient wash on hover — subtle, brand-toned (blue/cyan, not
   purple). Painted on its own ::before layer, not the card body
   element itself, so fading it in/out never affects the real
   headline/description text sitting in the same box. */
.texium-carousel__card-body::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(160deg, var(--texium-megacard-soft-blue), transparent 65%);
  opacity: 0;
  transition: opacity var(--texium-transition-normal);
}

.texium-carousel__card:hover .texium-carousel__card-body::before {
  opacity: 1;
}

.texium-carousel__card-body > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .texium-carousel__card-body::before {
    transition: none;
  }
}

.texium-carousel__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--texium-space-xs);
  margin-bottom: var(--texium-space-sm);
}

.texium-carousel__eyebrow {
  font-family: var(--texium-font-body);
  font-size: var(--texium-font-size-xs);
  font-weight: var(--texium-weight-semibold);
  letter-spacing: var(--texium-tracking-wide);
  text-transform: uppercase;
  color: var(--texium-megacard-blue);
}

.texium-carousel__corner-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--texium-accent);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity var(--texium-transition-fast), transform var(--texium-transition-fast);
}

.texium-carousel__card:hover .texium-carousel__corner-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.texium-carousel__corner-arrow svg {
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .texium-carousel__corner-arrow {
    transition: none;
  }
}

.texium-carousel__headline {
  margin: 0 0 var(--texium-space-sm);
  font-family: var(--texium-font-heading);
  font-size: var(--texium-font-size-lg);
  font-weight: var(--texium-weight-bold);
  line-height: var(--texium-leading-heading);
  color: var(--texium-megacard-navy);
}

.texium-carousel__desc {
  margin: 0;
  font-size: var(--texium-font-size-sm);
  line-height: 1.55;
  color: var(--texium-megacard-desc);
}

/* Footer: tag chips (and any future footer content) sit below a
   border that separates them from the card body. */

.texium-carousel__footer {
  /* The footer itself (border + tags start) stays right after the card
     body, not pinned to the bottom — tags are top-aligned so a card
     with fewer sub-services shows empty space below its tags instead
     of the tags themselves floating down to meet a pinned footer.
     Only the "Explore Services" link (margin-top: auto below) is
     pinned to the bottom, so it lines up across every card in the row
     regardless of how many tags came before it. */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--texium-space-sm) var(--texium-space-md) var(--texium-space-md);
  border-top: 1px solid var(--texium-megacard-border);
}

.texium-carousel__tags {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.texium-carousel__explore-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--texium-space-sm);
  font-size: 0.875rem;
  font-weight: var(--texium-weight-semibold);
  color: var(--texium-megacard-blue);
  text-decoration: none;
  transition: color var(--texium-transition-fast), gap var(--texium-transition-fast);
}

.texium-carousel__explore-link:hover,
.texium-carousel__explore-link:focus-visible {
  color: var(--texium-megacard-blue-dark);
  gap: 10px;
}

.texium-carousel__explore-arrow {
  transition: transform var(--texium-transition-fast);
}

@media (prefers-reduced-motion: reduce) {
  .texium-carousel__explore-link,
  .texium-carousel__explore-arrow {
    transition: none;
  }
}

.texium-carousel__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: stretch;
  padding: 0.375rem 0.7rem;
  border-radius: var(--texium-radius-sm);
  background: var(--texium-megacard-soft-blue);
  font-size: 0.8125rem;
  font-weight: var(--texium-weight-medium);
  color: var(--texium-text);
  text-decoration: none;
  transition: background-color var(--texium-transition-fast), color var(--texium-transition-fast);
}

a.texium-carousel__tag:hover,
a.texium-carousel__tag:focus-visible {
  background: var(--texium-megacard-soft-blue);
  color: var(--texium-megacard-blue);
}

.texium-carousel__tag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9rem;
  height: 0.9rem;
  color: var(--texium-megacard-blue);
}

.texium-carousel__tag-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.texium-carousel__tag-icon i {
  font-size: 0.9rem;
  line-height: 1;
}

/* Arrows */

.texium-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--texium-surface);
  border: 1px solid var(--texium-border);
  color: var(--texium-megacard-navy);
  box-shadow: var(--texium-shadow-md);
  cursor: pointer;
  transition: background-color var(--texium-transition-fast), border-color var(--texium-transition-fast),
    color var(--texium-transition-fast);
}

.texium-carousel__arrow:hover {
  background: var(--texium-megacard-blue);
  border-color: var(--texium-megacard-blue);
  color: var(--texium-text-inverse);
}

.texium-carousel__arrow:focus-visible {
  outline: 2px solid var(--texium-accent);
  outline-offset: 2px;
}

.texium-carousel__arrow svg {
  width: 20px;
  height: 20px;
}

.texium-carousel__arrow--prev {
  left: var(--texium-space-md);
}

.texium-carousel__arrow--next {
  right: var(--texium-space-md);
}

.texium-carousel--no-arrows .texium-carousel__arrow {
  display: none;
}

.texium-carousel__arrow:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* Dots */

.texium-carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--texium-space-sm);
  margin-top: var(--texium-space-xl);
}

.texium-carousel--no-dots .texium-carousel__dots {
  display: none;
}

.texium-carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  background: var(--texium-border);
  border: none;
  cursor: pointer;
  transition: background-color var(--texium-transition-fast), transform var(--texium-transition-fast);
}

.texium-carousel__dot:hover {
  background: var(--texium-primary-light);
}

.texium-carousel__dot.is-active {
  background: var(--texium-megacard-blue);
}

.texium-carousel__dot:focus-visible {
  outline: 2px solid var(--texium-accent);
  outline-offset: 2px;
}

@media (max-width: 782px) {
  .texium-carousel__arrow {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* ==========================================================================
   Grid mode
   Same markup, laid out as a wrapping grid instead of a sliding track.
   The carousel mechanics (transform offset, arrows, dots) are neutralised
   rather than removed so the widget's existing settings and JS remain
   harmless — theme.js simply finds no track to move.
   ========================================================================== */

.texium-carousel--grid .texium-carousel__viewport {
  overflow: visible;
}

.texium-carousel--grid .texium-carousel__track {
  display: grid;
  grid-template-columns: repeat(var(--texium-carousel-per-view, 3), minmax(0, 1fr));
  gap: var(--texium-space-md);
  transform: none;
  transition: none;
}

.texium-carousel--grid .texium-carousel__slide {
  flex: none;
  width: auto;
  padding-inline: 0;
}

/* No track to page through, so the controls have nothing to control. */

.texium-carousel--grid .texium-carousel__arrow,
.texium-carousel--grid .texium-carousel__dots {
  display: none;
}

@media (max-width: 1024px) {
  .texium-carousel--grid .texium-carousel__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .texium-carousel--grid .texium-carousel__track {
    grid-template-columns: minmax(0, 1fr);
  }
}