/**
 * Horizontal Cards Component Styles
 * Matches CodeSignal Design System
 */

:root {
  /* Horizontal Cards Variables */
  --Colors-Horizontal-Cards-Card-Background: var(--Colors-Backgrounds-Main-Top);
  --Colors-Horizontal-Cards-Card-Shadow: rgba(76, 90, 123, 0.09);
  --Colors-Horizontal-Cards-Nav-Button-Background: var(--Colors-Backgrounds-Main-Top);
  --Colors-Horizontal-Cards-Nav-Button-Border: var(--Colors-Stroke-Default);
  --Colors-Horizontal-Cards-Nav-Button-Hover-Border: var(--Colors-Stroke-Strong);
  --Colors-Horizontal-Cards-Nav-Button-Icon: var(--Colors-Icon-Default);
  --Colors-Horizontal-Cards-Nav-Button-Disabled: var(--Colors-Base-Neutral-300);
  --Colors-Horizontal-Cards-Fade-Gradient: rgba(255, 255, 255, 0);
  --Colors-Shadow-Medium-Soft: rgba(22, 44, 96, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --Colors-Horizontal-Cards-Card-Background: var(--Colors-Backgrounds-Main-Medium);
    --Colors-Horizontal-Cards-Card-Shadow: rgba(13, 21, 40, 0.32);
    --Colors-Horizontal-Cards-Nav-Button-Background: var(--Colors-Backgrounds-Main-Medium);
    --Colors-Horizontal-Cards-Nav-Button-Border: rgba(45, 56, 85, 0.00);
    --Colors-Horizontal-Cards-Nav-Button-Hover-Border: var(--Colors-Stroke-Strong);
    --Colors-Horizontal-Cards-Nav-Button-Icon: var(--Colors-Icon-Default);
    --Colors-Horizontal-Cards-Nav-Button-Disabled: var(--Colors-Base-Neutral-1100);
    --Colors-Horizontal-Cards-Fade-Gradient: rgba(20, 28, 48, 0);
    --Colors-Shadow-Medium-Soft: rgba(13, 21, 40, 0.4);
  }
}

/* Container */
.horizontal-cards-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--UI-Spacing-spacing-mxs);
}

/* Scrollable Cards Wrapper */
.horizontal-cards-scroll {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  /* Hide scrollbar for Chrome, Safari and Opera */
  scrollbar-width: none;
}

.horizontal-cards-scroll::-webkit-scrollbar {
  display: none;
}

/* Cards Track */
.horizontal-cards-track {
  display: flex;
  gap: var(--UI-Spacing-spacing-mxl);
  padding: var(--UI-Spacing-spacing-mxs) 0;
  width: max-content;
  min-width: 100%;
  position: relative;
  z-index: 0;
}

/* Individual Card */
.horizontal-cards-card {
  flex-shrink: 0;
  width: 480px;
  min-width: 480px;
  min-height: 320px;
  background: var(--Colors-Horizontal-Cards-Card-Background);
  border-radius: var(--UI-Radius-radius-ml);
  padding: var(--UI-Spacing-spacing-ms);
  box-shadow: 0 3px 2px 0 var(--Colors-Horizontal-Cards-Card-Shadow);
  display: flex;
  flex-direction: column;
  gap: var(--UI-Spacing-spacing-none);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.horizontal-cards-card:not(.horizontal-cards-card-active) {
  opacity: 0.5;
}

/* Card Content */
.horizontal-cards-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--UI-Spacing-spacing-xl);
  flex: 1 0 0;
  padding: var(--UI-Spacing-spacing-xl) var(--UI-Spacing-spacing-mxl);
  min-height: 0;
}

.horizontal-cards-card-description {
  flex: 1 0 0;
  min-height: 0;
}

.horizontal-cards-card-title {
  /* Uses .heading-small and .strong classes from typography.css */
  color: var(--Colors-Text-Body-Strong);
  margin: 0;
}

.horizontal-cards-card-description {
  /* Uses .body-medium class from typography.css */
  color: var(--Colors-Text-Body-Default);
  margin: 0;
}

.horizontal-cards-card-action {
  border: 1.5px dashed var(--Colors-Stroke-Default);
  border-radius: var(--UI-Radius-radius-s);
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--UI-Spacing-spacing-s);
  background: transparent;
}

.horizontal-cards-card-action-placeholder {
  font-family: var(--body-family);
  font-size: var(--Fonts-Body-Default-xxs);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.13px;
  color: var(--Colors-Text-Body-Light);
  text-align: center;
}

/* Navigation Buttons */
.horizontal-cards-nav {
  display: flex;
  gap: var(--UI-Spacing-spacing-xs);
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--UI-Spacing-spacing-mxs);
  width: 100%;
}

.horizontal-cards-nav-button {
  width: 32px;
  height: 32px;
  background: var(--Colors-Horizontal-Cards-Nav-Button-Background);
  border: 1.5px solid var(--Colors-Horizontal-Cards-Nav-Button-Border);
  border-radius: var(--UI-Radius-radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  padding: 0;
  box-shadow: 0px 2px 3px 0px var(--Colors-Shadow-Medium-Soft);
}

.horizontal-cards-nav-button:last-child {
  margin-right: var(--UI-Spacing-spacing-mxl);
}

.horizontal-cards-nav-button:hover:not(:disabled) {
  border-color: var(--Colors-Horizontal-Cards-Nav-Button-Hover-Border);
}

.horizontal-cards-nav-button:focus {
  outline: 2px solid var(--Colors-Primary-Medium);
  outline-offset: 2px;
}

.horizontal-cards-nav-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  border-color: var(--Colors-Horizontal-Cards-Nav-Button-Disabled);
}

.horizontal-cards-nav-button-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--Colors-Horizontal-Cards-Nav-Button-Icon);
}

.horizontal-cards-nav-button:disabled .horizontal-cards-nav-button-icon {
  color: var(--Colors-Horizontal-Cards-Nav-Button-Disabled);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .horizontal-cards-card {
    width: 320px;
    min-width: 320px;
  }
  
  .horizontal-cards-track {
    padding: var(--UI-Spacing-spacing-mxs) var(--UI-Spacing-spacing-ms);
  }
}