:root{
  --sw-gap: 24px;
  --sw-card-radius: 14px;
  --sw-underline: #E3AF64;
  --sw-media-ratio: 4/3;
  --sw-content-width: 1280px;
  --sw-step: 1;
  --sw-zoom-dur: 350ms;
  --sw-underline-dur: 350ms;
}

/* Grid Layout Styles */
.sw-services-grid {
  display: grid;
  gap: 30px;
  width: 100%;
  grid-auto-flow: row;
}

/* Default grid columns when not featured */
.sw-services-grid:not(.sw-services-grid--featured) {
  grid-template-columns: repeat(3, 1fr);
}

/* Featured Layout - Mobile first approach */
.sw-services-grid--featured {
  grid-template-columns: 1fr;
}

/* Tablet featured layout */
@media (min-width: 481px) {
  .sw-services-grid--featured {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Desktop featured layout */
@media (min-width: 768px) {
  .sw-services-grid--featured {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    grid-auto-flow: dense;
  }
  
  /* First featured item takes 3 columns (half width) */
  .sw-services-grid--featured .sw-card--featured:nth-child(1) {
    grid-column: span 3;
  }
  
  /* Second featured item takes 3 columns (half width) */
  .sw-services-grid--featured .sw-card--featured:nth-child(2) {
    grid-column: span 3;
  }
  
  /* All other items take 2 columns each (3 per row) */
  .sw-services-grid--featured .sw-card:not(.sw-card--featured) {
    grid-column: span 2;
  }
}

/* Grid card base styles */
.sw-services-grid .sw-card {
  background: #fff;
  border-radius: var(--sw-card-radius);
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Grid card hover effect */
.sw-services-grid .sw-card:hover {
  transform: translateY(-5px);
}

/* Grid animation on load */
.sw-services-grid .sw-card {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}

.sw-services-grid .sw-card:nth-child(1) { animation-delay: 0ms; }
.sw-services-grid .sw-card:nth-child(2) { animation-delay: 100ms; }
.sw-services-grid .sw-card:nth-child(3) { animation-delay: 200ms; }
.sw-services-grid .sw-card:nth-child(4) { animation-delay: 300ms; }
.sw-services-grid .sw-card:nth-child(5) { animation-delay: 400ms; }
.sw-services-grid .sw-card:nth-child(6) { animation-delay: 500ms; }
.sw-services-grid .sw-card:nth-child(7) { animation-delay: 600ms; }
.sw-services-grid .sw-card:nth-child(8) { animation-delay: 700ms; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive grid adjustments */
@media (max-width: 1024px) {
  .sw-services-grid:not(.sw-services-grid--featured) {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .sw-services-grid:not(.sw-services-grid--featured) {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

.sw-services {
  --sw-visible: 4; /* Default value, overridden by backend setting */
}

.sw-services{ width:100%; overflow-x: hidden; position: relative; }
.sw-services.sw-full-bleed{ 
  position: relative; 
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  transform: translateX(0);
  overflow-x: visible;
}

/* Flickity container - full width with dynamic padding */
.sw-carousel{ 
  width:100%; 
  position: relative;
}

/* When full-bleed is enabled, add padding for initial positioning */
.sw-full-bleed .sw-carousel {
  padding: 0 8vw;
}

/* When not full-bleed, no padding needed - contained within content width */
.sw-services:not(.sw-full-bleed) .sw-carousel {
  padding-left: 0; 
  padding-right: 0;
}

/* Editor mode - display cards horizontally without Flickity */
.sw-editor-mode .sw-carousel {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: var(--sw-gap);
  padding-bottom: 10px;
}

/* Editor mode with full-bleed */
.sw-editor-mode.sw-full-bleed .sw-carousel {
  padding-left: 8vw;
  padding-right: 8vw;
}

.sw-editor-mode .sw-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.sw-editor-mode.sw-full-bleed .sw-card {
  width: calc((100vw - 16vw - (var(--sw-gap) * var(--sw-visible))) / var(--sw-visible));
  min-width: calc((100vw - 16vw - (var(--sw-gap) * var(--sw-visible))) / var(--sw-visible));
}


.sw-editor-mode:not(.sw-full-bleed) .sw-card {
  width: calc((var(--sw-content-width) - (var(--sw-gap) * (var(--sw-visible) - 1))) / var(--sw-visible));
  min-width: calc((var(--sw-content-width) - (var(--sw-gap) * (var(--sw-visible) - 1))) / var(--sw-visible));
}

/* When Flickity is active - let neighboring cells peek */
.sw-carousel .flickity-viewport{ overflow: visible; }
.sw-carousel .flickity-slider{ 
  will-change: transform; 
  display: flex; 
  align-items: flex-start;
}
/* Let Flickity handle all transitions */
.sw-carousel.is-dragging{ cursor: grabbing; user-select:none; }
.sw-carousel.is-draggable{ cursor: grab; }


/* Flickity cells - base margins */
.sw-carousel .carousel-cell,
.sw-carousel .sw-card {
  margin: 0 calc(var(--sw-gap) / 2);  /* Half gap on each side for consistent spacing */
}

.sw-card{
  background:#fff;
  border-radius:var(--sw-card-radius);
  overflow:hidden;
  position:relative;
}

/* Card width calculation based on full-bleed setting */
.sw-full-bleed .sw-card {
  /* Width based on visible count - padding handles edge spacing */
  width: calc(((100vw - 16vw) - (var(--sw-gap) * (var(--sw-visible) - 1))) / var(--sw-visible));
  max-width: calc(((100vw - 16vw) - (var(--sw-gap) * (var(--sw-visible) - 1))) / var(--sw-visible));
}

.sw-services:not(.sw-full-bleed) .sw-card {
  /* Normal: subtract both gutters for contained width */
  width: calc((var(--sw-content-width) - (var(--sw-gap) * (var(--sw-visible) - 1))) / var(--sw-visible));
  max-width: calc((var(--sw-content-width) - (var(--sw-gap) * (var(--sw-visible) - 1))) / var(--sw-visible));
}
.sw-card__link{ display:block; color:inherit; text-decoration:none; height:100%; }
.sw-card__media{ display:block; width:100%; aspect-ratio: var(--sw-media-ratio); overflow:hidden; }
.sw-card__media img{
  display:block; width:100%; height:auto;
  transition: transform var(--sw-zoom-dur) ease;
  width:100%; height:100% !important; object-fit:cover; -webkit-user-drag: none; user-select: none;
}
.sw-card:hover .sw-card__media img{ transform:scale(1.05); }
.sw-services.no-zoom .sw-card:hover .sw-card__media img{ transform:none; }
.sw-services.no-zoom .sw-card__media img{ transition:none; }
.sw-card__content{ padding:20px; }
.sw-card__title{
  display:inline-block;
  position:relative;
  padding-bottom:4px;
  transition: color var(--sw-underline-dur) ease;
}
.sw-card__title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:2px; background:var(--sw-underline);
  transition: width var(--sw-underline-dur) ease;
}
.sw-card:hover .sw-card__title::after{ width:100%; }

/* CTA Link Styling */
.sw-card__cta {
  display: inline-block;
  margin-top: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.sw-card:hover .sw-card__cta {
  transform: translateX(5px);
}

/* Scrollbar styling for editor mode */
.sw-editor-mode .sw-carousel::-webkit-scrollbar {
  height: 8px;
}
.sw-editor-mode .sw-carousel::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);
  border-radius: 10px;
}
.sw-editor-mode .sw-carousel::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.3);
  border-radius: 10px;
}
.sw-editor-mode .sw-carousel::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.5);
}

/* Custom Cursor Styles */
.sw-custom-cursor {
  position: fixed;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(227, 175, 100, 0.9);
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  user-select: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.sw-custom-cursor span {
  display: block;
  text-align: center;
  position: relative;
}

.sw-custom-cursor.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.sw-custom-cursor.is-dragging {
  transform: translate(-50%, -50%) scale(0.85);
  background-color: rgba(227, 175, 100, 1);
}

.sw-custom-cursor.is-dragging span {
  transform: scale(1.1);
}

/* Hide default cursor when custom cursor is enabled */
.sw-carousel.has-custom-cursor {
  cursor: none !important;
}

.sw-carousel.has-custom-cursor * {
  cursor: none !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .sw-services {
    --sw-visible: 2;
  }
}
@media (max-width: 767px) {
  .sw-services {
    --sw-visible: 1;
  }
  /* Hide custom cursor on mobile/touch devices */
  .sw-custom-cursor {
    display: none !important;
  }
}