html, body {
  overflow-x: hidden;
}

/* ==========================================================================
   Scope Box-Sizing for the Carousel to Avoid WP Theme Pollution
   ========================================================================== */
.about-gallery-carousel-wrapper,
.about-gallery-carousel-wrapper * {
  box-sizing: border-box;
}

/* ==========================================================================
   About Gallery Carousel Section
   ========================================================================== */
.about-gallery-carousel-wrapper {
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  z-index: 5;
}

.about-gallery-carousel-wrapper.wave-gallery-full-width {
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
}

.about-gallery-carousel-wrapper .portfolio-carousel-container {
  height: calc(var(--card-odd-height, 340px) + 100px);
  overflow-x: auto;
  scroll-behavior: auto !important; /* Force instant jumps on warp */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.about-gallery-carousel-wrapper .portfolio-carousel-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.about-gallery-carousel-wrapper .portfolio-carousel-track {
  display: flex;
  gap: var(--card-gap, 16px);
  align-items: center;
  width: max-content;
}

.about-gallery-carousel-wrapper .portfolio-carousel-card {
  width: var(--card-width, 240px);
  border-radius: var(--card-radius, 20px);
  overflow: hidden;
  border: var(--card-border-width, 0px) solid var(--card-border-color, transparent);
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.6s ease-in-out, border 0.6s ease-in-out;
  position: relative;
  flex-shrink: 0;
  cursor: grab;
  box-shadow: var(--card-shadow, 0 4px 20px rgba(0, 0, 0, 0.3));
  transform: translateZ(0); /* Hardware acceleration fix for Safari corners, safe for Chrome */
}

.about-gallery-carousel-wrapper .portfolio-carousel-container.active .portfolio-carousel-card {
  cursor: grabbing;
}

.about-gallery-carousel-wrapper .portfolio-carousel-card:hover::after {
  background-color: var(--hover-overlay-color, #00c285);
  opacity: var(--hover-overlay-opacity, 0.15);
}

/* Hover effect on cards */
.about-gallery-carousel-wrapper .portfolio-carousel-card:hover {
  transform: translateY(var(--card-hover-lift, -10px)) translateZ(0);
  box-shadow: var(--card-hover-shadow, 0 20px 40px rgba(0, 194, 133, 0.25));
}

/* ==========================================================================
   Image Styles
   ========================================================================== */
.about-gallery-carousel-wrapper .portfolio-carousel-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
  border-radius: inherit;
}

.about-gallery-carousel-wrapper .portfolio-carousel-card:hover img {
  transform: scale(var(--card-hover-scale, 1.08));
}



/* ==========================================================================
   No Transition Utility (prevents layout jumps during warping)
   ========================================================================== */
.no-transition,
.no-transition * {
  transition: none !important;
}

/* ==========================================================================
   EVEN / ODD CARD STYLING & TRANSITIONS (WAVE EFFECT)
   ========================================================================== */

/* Default/Initial heights for cards (alternating wave pattern) */
.about-gallery-carousel-wrapper .portfolio-carousel-card.card-odd {
  height: var(--card-odd-height, 340px);
}

.about-gallery-carousel-wrapper .portfolio-carousel-card.card-even {
  height: var(--card-even-height, 275px);
}

/* Even card active state (even cards grow to active height, odd cards shrink to even height) */
.about-carousel-container.even-active .portfolio-carousel-card.card-even {
  height: var(--card-odd-height, 340px);
}

.about-carousel-container.even-active .portfolio-carousel-card.card-odd {
  height: var(--card-even-height, 275px);
}

.about-carousel-container.even-active .portfolio-carousel-card.active-slide {
  height: var(--card-odd-height, 340px);
  box-shadow: var(--card-active-shadow, 0 15px 35px rgba(0, 155, 229, 0.35));
  border: var(--card-active-border-width, 1px) solid var(--card-active-border-color, rgba(0, 155, 229, 0.3));
}

/* Odd card active state (odd cards grow to active height, even cards shrink to even height) */
.about-carousel-container.odd-active .portfolio-carousel-card.card-odd {
  height: var(--card-odd-height, 340px);
}

.about-carousel-container.odd-active .portfolio-carousel-card.card-even {
  height: var(--card-even-height, 275px);
}

.about-carousel-container.odd-active .portfolio-carousel-card.active-slide {
  height: var(--card-odd-height, 340px);
  box-shadow: var(--card-active-shadow, 0 15px 35px rgba(0, 194, 133, 0.35));
  border: var(--card-active-border-width, 1px) solid var(--card-active-border-color, rgba(0, 194, 133, 0.3));
}