/**
 * Global Carousel System
 * Reusable carousel component for City Page and future magnets
 * Phase 2: CSS Conflict Cleanup - Single Source of Truth
 * 
 * This file is the ONLY authority for carousel layout when cards are inside .mcp-carousel-track.
 * All conflicting magnet-specific CSS is neutralized via scoped overrides.
 */

/* ===========================================
   GLOBAL VARIABLES
   =========================================== */

:root {
  --mcp-carousel-card-width-desktop: 320px;
  --mcp-carousel-card-width-mobile: 85vw;
  --mcp-carousel-gap: 16px;
}

/* ===========================================
   BASE CAROUSEL CONTAINER
   =========================================== */

.mcp-carousel {
  position: relative;
  width: 100%;
}

/* ===========================================
   TRACK
   =========================================== */

.mcp-carousel-track {
  display: flex;
  gap: var(--mcp-carousel-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}

/* ===========================================
   HIDE SCROLLBAR (NON-DESTRUCTIVE)
   =========================================== */

.mcp-carousel-track::-webkit-scrollbar {
  display: none;
}

.mcp-carousel-track {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* ===========================================
   CARDS
   Apply carousel-card behavior to existing card classes
   (Non-destructive: adds behavior without removing classes)
   =========================================== */

.mcp-carousel-card,
.mcp-carousel-track > .mcp-dashboard-listing-card,
.mcp-carousel-track > .mcp-unit-card,
.mcp-carousel-track > .mcp-event-card,
.mcp-carousel-track > .mcp-poll-card,
.mcp-carousel-track > .mcp-pet-card,
.mcp-carousel-track > .mcpwe-card,
.mcp-carousel-track > .mcp-feed-card,
.mcp-carousel-track > .mcpwe-feed-card,
.mcp-carousel-track .mcp-dashboard-listings-wrapper > .mcp-dashboard-listing-card,
.mcp-carousel-track .mcp-automatic-feed > .mcp-unit-card,
.mcp-carousel-track .mcp-events-grid > .mcp-event-card,
.mcp-carousel-track .mcp-poll-card-grid > .mcp-poll-card,
.mcp-carousel-track .mcp-pets-grid > .mcp-pet-card {
  flex: 0 0 auto !important;
  width: var(--mcp-carousel-card-width-desktop) !important;
  min-width: unset !important;
  max-width: unset !important;
  scroll-snap-align: start;
  background: #ffffff !important; /* Card isolation - always white */
}

/* ===========================================
   NEUTRALIZE CONFLICTING GRID LAYOUTS
   Override grid behavior when inside carousel track
   =========================================== */

.mcp-carousel-track .mcp-dashboard-listings-wrapper,
.mcp-carousel-track .mcp-automatic-feed,
.mcp-carousel-track .mcp-events-grid,
.mcp-carousel-track .mcp-poll-card-grid,
.mcp-carousel-track .mcp-pets-grid {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ===========================================
   MOBILE OVERRIDE
   =========================================== */

@media (max-width: 768px) {
  .mcp-carousel-card,
  .mcp-carousel-track > .mcp-dashboard-listing-card,
  .mcp-carousel-track > .mcp-unit-card,
  .mcp-carousel-track > .mcp-event-card,
  .mcp-carousel-track > .mcp-poll-card,
  .mcp-carousel-track > .mcp-pet-card,
  .mcp-carousel-track > .mcpwe-card,
  .mcp-carousel-track > .mcp-feed-card,
  .mcp-carousel-track > .mcpwe-feed-card,
  .mcp-carousel-track .mcp-dashboard-listings-wrapper > .mcp-dashboard-listing-card,
  .mcp-carousel-track .mcp-automatic-feed > .mcp-unit-card,
  .mcp-carousel-track .mcp-events-grid > .mcp-event-card,
  .mcp-carousel-track .mcp-poll-card-grid > .mcp-poll-card,
  .mcp-carousel-track .mcp-pets-grid > .mcp-pet-card {
    width: var(--mcp-carousel-card-width-mobile) !important;
    min-width: unset !important;
    max-width: unset !important;
  }
}

/* ===========================================
   ARROWS
   Desktop only, hidden by default, show on hover
   Only visible if content overflows
   =========================================== */

.mcp-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  color: #fff;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  font-size: 20px;
  line-height: 1;
  user-select: none;
  transition: background 0.2s ease;
}

.mcp-carousel-arrow.left {
  left: 8px;
}

.mcp-carousel-arrow.right {
  right: 8px;
}

.mcp-carousel-arrow:hover {
  background: rgba(0,0,0,0.6);
}

/* Show arrows on carousel hover (desktop only) */
@media (min-width: 769px) {
  .mcp-carousel:hover .mcp-carousel-arrow.mcp-arrow-visible {
    display: flex;
  }
}

/* ===========================================
   HIDE ARROWS ON MOBILE
   =========================================== */

@media (max-width: 768px) {
  .mcp-carousel-arrow {
    display: none !important;
  }
}