/**
 * Series Cards Component
 * Extends base .card styles with series-specific features
 * Episode bubbles, series badges, and series grid layouts
 *
 * @package LearningByHart
 * @since 1.0.0
 */

/* ========================================
   Series Section
   ======================================== */

.featured-series-section {
  margin: var(--space-2xl) 0 var(--space-3xl);
  padding: 0;
}

.featured-series-section h2 {
  margin: 0 0 var(--space-xl);
  font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-3xl));
  font-family: var(--font-serif);
  font-weight: 700;
  text-align: center;
  color: var(--color-primary);
}

/* Mobile: Single column, stacked */
.featured-series-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  margin-bottom: var(--space-2xl);
}

/* ========================================
   Series Card Specific Styles
   Base .card and .card--series styles from cards.css
   ======================================== */

/* Title and Badge Wrapper - Second grid column */
.series-card__title-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%; /* Fill full height of grid cell */
}

/* Series Status Badge - Top-center of title wrapper */
.series-card__status-badge {
  padding: clamp(0.25rem, 0.75vw, var(--space-xs)) clamp(0.375rem, 1vw, var(--space-sm));
  color: #fff;
  font-family: var(--font-sans);
  font-size: clamp(0.625rem, 1.2vw, 0.6875rem); /* 10px - 11px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  white-space: nowrap; /* Prevent wrapping on narrow viewports */
  margin-bottom: clamp(0.25rem, 1vw, 0.5rem); /* Fluid spacing: 4px min, 8px max */
  align-self: center; /* Center in flex container */
}

/* Coming Soon - Orange/amber */
.series-card__status-badge--coming-soon {
  background: linear-gradient(135deg, #f0ad4e 0%, #ec971f 100%);
}

/* Partial Series - Blue */
.series-card__status-badge--partial {
  background: linear-gradient(135deg, #5bc0de 0%, #46b8da 100%);
}

/* Full Series - Green */
.series-card__status-badge--full {
  background: linear-gradient(135deg, #5cb85c 0%, #449d44 100%);
}


/* Coming Soon card styling adjustments */
.series-card--coming-soon {
  opacity: 0.95;
}

/* ========================================
   Episode Bubbles
   ======================================== */

/* Series card footer - contain bubbles properly */
.card--series .card__footer {
  overflow: hidden; /* Contain bubbles within card */
}

.series-card__bubbles {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align to start for horizontal scroll */
  gap: clamp(0.25rem, 1vw, var(--space-xs));
  flex-wrap: nowrap;
  width: 100%; /* Constrain to footer width */
  padding: var(--space-xs) 0; /* Vertical padding only */
  margin: 0 clamp(var(--space-md), 2.5vw, var(--space-lg)); /* Horizontal margin for spacing */
  overflow-x: auto; /* Enable horizontal scroll when needed */
  overflow-y: visible; /* Allow hover effects to overflow */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
}

/* Hide scrollbar for webkit browsers */
.series-card__bubbles::-webkit-scrollbar {
  display: none;
}

/* Articles Label - Filled button style, non-clickable */
.series-card__bubbles-label.wp-block-button {
  flex-shrink: 0; /* Never squish the Articles label */
}

.series-card__bubbles-label.wp-block-button .wp-block-button__link {
  padding: clamp(0.25rem, 1vw, var(--space-xs)) clamp(0.5rem, 1.5vw, var(--space-sm));
  font-size: clamp(0.65rem, 1.2vw, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: default;
  pointer-events: none;
  white-space: nowrap; /* Prevent text wrapping */
}

/* Individual Episode Bubble - Circular shape extending WordPress button classes */
.series-card__bubble.wp-block-button {
  flex-shrink: 0; /* Never squish the bubbles */
}

.series-card__bubble.wp-block-button .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(24px, 4vw, 32px);
  height: clamp(24px, 4vw, 32px);
  border-radius: 50%;
  padding: 0;
  font-size: clamp(0.65rem, 1.2vw, 0.75rem);
}

.series-card__bubble.wp-block-button .wp-block-button__link:hover {
  transform: scale(1.05);
}

/* Coming Soon bubble - greyed out (checks post's Coming Soon meta field) */
.series-card__bubble--coming-soon {
  opacity: 0.3;
}

/* Only disable clicking on non-link coming-soon bubbles (missing posts) */
.series-card__bubble--coming-soon span.wp-block-button__link {
  cursor: not-allowed;
  pointer-events: none;
}

/* Coming-soon bubbles with links are still clickable (published stubs) */
.series-card__bubble--coming-soon a.wp-block-button__link {
  cursor: pointer;
  pointer-events: auto;
}