/* 
 * Features Section CSS
 * Organized by: 
 * 1. Section Container & Layout 
 * 2. Section Header 
 * 3. Card Grid & Cards
 * 4. Feature Gallery Components
 * 5. Decorative Elements
 * 6. Media Queries
 */

/* --------------------
 * 1. Section Container & Layout
 * -------------------- */

/* Features Section with tears - following character gallery pattern */
.features-shell.tear-section {
  position: relative;
  width: 100%;
  /* Cancel the global full-bleed negative margins for this section to avoid 100vw scrollbar skew */
  margin-left: 0;
  margin-right: 0;
  overflow: visible;   /* let the tear overlap */
  z-index: 200;
  padding: 0;          /* no vertical padding here; globals handle seam gaps */
}

/* If safe viewport units are supported, re-enable full-bleed without shift */
@supports (width: 100svw) {
  .features-shell.tear-section {
    width: 100svw; /* excludes scrollbar, prevents subtle right shift */
    margin-left: calc(50% - 50svw);
    margin-right: calc(50% - 50svw);
  }
}

/* Custom z-index for features tear to prevent clip path interference */
.features-shell.tear-section .tear--top {
  z-index: 2; /* Lower than container but higher than most other elements */
}

/* container stays */
.features-shell { 
  position: relative; 
  z-index: 5;

}

/* make this the shell, keep background, drop TOP padding */
.features-section.section-shell {
  position: relative;
  width: 100%;
  background: var(--off-white) url('../assets/backgrounds/xJ2UjemaUO2.jpg') repeat;
  background-size: 200px;
  z-index: 200;
}

/* Card grid layout */
.card-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr; /* Single column by default - mobile */
  gap: 2rem;
  width: 100%;  /* Use full available width within container */
  max-width: 1152px;  /* Explicit max-width for consistency */
  margin: 0 auto;
  justify-content: center;
  align-items: stretch;
}

/* Tablet and up - 2x2 grid */
@media (min-width: 769px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

/* --------------------
 * 2. Section Header
 * -------------------- */
.features-header-container {
  position: relative;
  max-width: 1152px;
  height: 80px;
  margin: 0 auto 0 auto;
}




/* --------------------
 * 3. Card Grid & Cards
 * -------------------- */
/* outer card box – no ornate border here */
.card-content {
  background-color: rgb(255, 241, 217);
  box-shadow: 0 8px 8px -4px rgba(79, 62, 33, 0.223);
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Random jagged edge effect on all four sides */
  clip-path: polygon(
  /* Top edge */
  0% 0%,
  2% 0%,
  6% 0.3%,
  7% 0.5%,
  7.5% 0.8%,
  8% 0.5%,
  10% 0.3%,
  12.5% 0.6%,
  15% 0.4%,
  17.5% 0.7%,
  20% 0.4%,
  22% 0.4%,
  22.5% 0.8%,
  23% 0.3%,
  25% 0.2%,
  27.5% 0.6%,
  30% 0.3%,
  32.5% 0.6%,
  35% 0.4%,
  37.5% 0.6%,
  40% 0.4%,
  42% 0.4%,
  42.5% 0.8%,
  43.5% 0.4%,
  45% 0.4%,
  47.5% 0.6%,
  50% 0.3%,
  52.5% 0.6%,
  55% 0.4%,
  57.5% 0.5%,
  60% 0.2%,
  62.5% 0.6%,
  65% 0.4%,
  67% 0.4%,
  67.5% 0.8%,
  68% 0.3%,
  70% 0.3%,
  72.5% 0.5%,
  75% 0.3%,
  77.5% 0.6%,
  80% 0.4%,
  82% 0.4%,
  82.5% 0.5%,
  83.5% 0.4%,
  85% 0.4%,
  87% 0.3%,
  87.5% 0.8%,
  88% 0.4%,
  90% 0.3%,
  92.5% 0.6%,
  95% 0.3%,
  98% 0%,
  100% 0%,

  /* Right edge */
  100% 0%,
  100% 2%,
  99.7% 3.5%,
  99.5% 5%,
  99.7% 7%,
  99.5% 7.5%,
  99.2% 8%,
  99.5% 10%,
  99.6% 12.5%,
  99.4% 15%,
  99.6% 17.5%,
  99.3% 20%,
  99.5% 22%,
  99.5% 22.5%,
  99.2% 23%,
  99.7% 25%,
  99.7% 27.5%,
  99.3% 30%,
  99.6% 32.5%,
  99.4% 35%,
  99.6% 37.5%,
  99.3% 40%,
  99.5% 42%,
  99.5% 42.5%,
  99.2% 43.5%,
  99.5% 45%,
  99.5% 47.5%,
  99.4% 50%,
  99.6% 52.5%,
  99.3% 55%,
  99.5% 57.5%,
  99.4% 60%,
  99.7% 62.5%,
  99.4% 65%,
  99.6% 67%,
  99.5% 67.5%,
  99.2% 68%,
  99.7% 70%,
  99.7% 72.5%,
  99.5% 75%,
  99.6% 77.5%,
  99.4% 80%,
  99.6% 82%,
  99.6% 82.5%,
  99.4% 83.5%,
  99.5% 85%,
  99.5% 87%,
  99.2% 87.5%,
  99.7% 88%,
  99.5% 90%,
  99.6% 92.5%,
  99.4% 95%,
  100% 98%,
  100% 100%,
  /* Bottom edge (mirrored top) */
  98% 100%,
  95% 99.7%,
  92.5% 99.4%,
  90% 99.6%,
  88% 99.5%,
  87.5% 99.2%,
  87% 99.7%,
  85% 99.5%,
  83.5% 99.5%,
  82.5% 99.4%,
  82% 99.6%,
  80% 99.6%,
  77.5% 99.4%,
  75% 99.6%,
  72.5% 99.5%,
  70% 99.7%,
  68% 99.7%,
  67.5% 99.2%,
  67% 99.5%,
  65% 99.6%,
  62.5% 99.4%,
  60% 99.7%,
  57.5% 99.4%,
  55% 99.5%,
  52.5% 99.3%,
  50% 99.6%,
  47.5% 99.4%,
  45% 99.5%,
  43.5% 99.5%,
  42.5% 99.2%,
  42% 99.5%,
  40% 99.5%,
  37.5% 99.3%,
  35% 99.6%,
  32.5% 99.4%,
  30% 99.6%,
  27.5% 99.3%,
  25% 99.7%,
  23% 99.7%,
  22.5% 99.2%,
  22% 99.5%,
  20% 99.5%,
  17.5% 99.3%,
  15% 99.6%,
  12.5% 99.4%,
  10% 99.6%,
  8% 99.5%,
  7.5% 99.2%,
  7% 99.5%,
  6% 99.7%,
  2% 100%,
  0% 100%,

  /* Left edge */
  0% 98%,
  0.3% 95%,
  0.6% 92.5%,
  0.3% 90%,
  0.4% 88%,
  0.8% 87.5%,
  0.3% 87%,
  0.4% 85%,
  0.4% 83.5%,
  0.5% 82.5%,
  0.4% 82%,
  0.4% 80%,
  0.6% 77.5%,
  0.3% 75%,
  0.5% 72.5%,
  0.3% 70%,
  0.3% 68%,
  0.8% 67.5%,
  0.4% 67%,
  0.4% 65%,
  0.6% 62.5%,
  0.2% 60%,
  0.5% 57.5%,
  0.4% 55%,
  0.6% 52.5%,
  0.3% 50%,
  0.6% 47.5%,
  0.4% 45%,
  0.4% 43.5%,
  0.8% 42.5%,
  0.4% 42%,
  0.4% 40%,
  0.6% 37.5%,
  0.4% 35%,
  0.6% 32.5%,
  0.3% 30%,
  0.4% 27.5%,
  0.2% 25%,
  0.3% 23%,
  0.8% 22.5%,
  0.4% 22%,
  0.7% 20%,
  0.4% 17.5%,
  0.2% 15%,
  0.4% 12.5%,
  0.3% 10%,
  0.3% 8%,
  0.8% 7.5%,
  0.4% 7%,
  0.2% 5%,
  0% 2%,
  0% 0%
  );
}

/* draws the border and insets it away from the edges */
.card-inner {
  margin: 10px;
  border: clamp(8px, 2vw, 12px) solid transparent;
  border-image: url('../assets/images/filagree-border.svg')
                14 / clamp(8px, 2vw, 12px);
  border-image-repeat: stretch;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-bottom: 20px;
  transform: translate3d(0, 0, 0); /* Force hardware acceleration */
  backface-visibility: hidden;

}

.card h3 {
  text-align: center;
  font-family: var(--font-family-secondary);
  letter-spacing: 2px;
  font-weight: 800;
  font-size: 28px;
  margin: 0;
  color: var(--light-navy);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  position: relative;
  /* Additional fixes for font rendering */
  -webkit-text-stroke: 0.01em transparent;
  text-transform: uppercase;
  padding-bottom: 10px;

}

.card p {
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  font-family: var(--font-family);
  font-size: clamp(0.8rem, 1.5vw, 0.9rem);
  line-height: 1.5;
  margin: 0 0.5vw;
  padding: 0 1.5vw;
  color: var(--light-navy);
  flex-grow: 1;
}

/* --------------------
 * 4. Feature Gallery Components
 * -------------------- */
.feature-gallery {
  position: relative;
  width: 100%;
  margin: 0 auto;
  height: auto;
  overflow: hidden;
  padding-bottom: 50px;  /* Space for the nav below the image */
}



.feature-gallery-container {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  transition: transform 0.3s ease-in-out;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y pinch-zoom;
  /* Let JavaScript handle positioning */
}



.feature-gallery img {
  width: 100%;
  height: auto;
  flex-shrink: 0;
}

.feature-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 241, 217, 1);
  color: #333;
  padding: 0;
  cursor: pointer;
  border: none;
  width: 20px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.feature-gallery:hover .feature-gallery-nav {
  opacity: 1;
}

.feature-gallery-nav:hover {
  background: rgba(255, 241, 217, 1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.feature-gallery-nav:active {
  transform: translateY(-50%) scale(0.95);
  transition: all 0.1s ease;
}

.feature-gallery-nav.prev {
  left: 0px;
}

.feature-gallery-nav.next {
  right: 0px;
}

.feature-gallery-nav.prev:hover {
  transform: translateY(-50%) translateX(-2px);
}

.feature-gallery-nav.next:hover {
  transform: translateY(-50%) translateX(2px);
}

/* Dedicated arrow divs */
.arrow-left,
.arrow-right {
  width: 8px;
  height: 8px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  transition: all 0.3s ease;
}

.arrow-left {
  transform: rotate(-135deg);
}

.arrow-right {
  transform: rotate(45deg);
}

/* Arrow hover animations */
.feature-gallery-nav:hover .arrow-left {
  transform: rotate(-135deg) translateX(-1px);
  border-color: #222;
}

.feature-gallery-nav:hover .arrow-right {
  transform: rotate(45deg) translateX(1px);
  border-color: #222;
}

/* Diamond navigation - Matches character gallery style */
.diamond-nav {
  position: absolute;
  bottom: 5px;  /* Position above the notch */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

.diamond-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 120px;
  gap: 12px;

  border-radius: 15px;
  backdrop-filter: blur(2px);
  border: none;
}

.diamond-dot {
  width: 12px;
  height: 12px;
  background-color: var(--light-navy);
  -webkit-mask-image: url('../assets/images/diamond-2.svg');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url('../assets/images/diamond-2.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  opacity: 0.5;
  transition: all 0.3s ease;
  cursor: pointer;
}

.diamond-dot.active {
  opacity: 1;
  transform: scale(1.25);
}

/* --------------------
 * 5. Decorative Elements
 * -------------------- */

/* Swoosh textures */
.swoosh {
  position: absolute;
  background-image: url('../assets/images/swoosh.svg');
  mix-blend-mode: multiply;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.1;
  z-index: 0;
  width: clamp(400px, 60vw, 800px); /* Responsive width with limits */
  height: clamp(320px, 48vw, 640px); /* Responsive height with limits */
  max-width: 100%; /* Prevent overflow */
  max-height: 100%; /* Prevent vertical overflow */
  pointer-events: none; /* Ensure they don't interfere with interactions */
  overflow: hidden; /* Clip any content that extends beyond bounds */
}

.features-swoosh-1 {
  top: 5%;
  left: min(70%, calc(100% - clamp(400px, 60vw, 800px))); /* Prevent extending beyond container */
  transform: translateX(-45%);
}

.features-swoosh-2 {
  top: 35%;
  left: min(30%, calc(100% - clamp(400px, 60vw, 800px))); /* Prevent extending beyond container */
  transform: translateX(-55%) scaleY(-1);
}

/* --------------------
 * 6. Media Queries 
 * -------------------- */

/* Large desktop adjustments to prevent layout issues */
@media (min-width: 1600px) {
  .swoosh {
    width: clamp(400px, 40vw, 700px); /* Smaller relative size on very large screens */
    height: clamp(320px, 32vw, 560px);
  }
  
  .features-swoosh-1 {
    left: min(75%, calc(100% - 700px)); /* More conservative positioning */
  }
  
  .features-swoosh-2 {
    left: min(25%, calc(100% - 700px));
  }
}

/* Mobile and Small Mobile adjustments */
@media (max-width: 768px) {
  /* Reduce height of features header container for mobile */
  .features-header-container {
    height: 50px; /* Reduced from 80px */
    margin: 0 auto 0 auto;
  }

  /* Reduce swoosh opacity on mobile to prevent visual clutter */
  .swoosh {
    opacity: 0.05;
    width: clamp(200px, 40vw, 300px);
    height: clamp(160px, 32vw, 240px);
  }
  
  .feature-gallery-nav {
    opacity: 1;
    background: rgba(255, 241, 217, 0.9);
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .feature-gallery-nav.prev {
    left: 0px;
  }

  .feature-gallery-nav.next {
    right: 0px;
  }

  .diamond-indicator {
    height: 25px;
    width: 70px;
    gap: 10px;
  }

  .diamond-dot {
    width: 8px;
    height: 8px;
  }
}

/* Touch device optimizations for feature gallery */
@media (hover: none) {
  .feature-gallery-nav {
    opacity: 1;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  
  .diamond-dot {
    position: relative;
    width: 12px;
    height: 12px;
    /* Larger touch target */
  }
  
  .diamond-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; /* Minimum touch target size */
    height: 44px;
    background: transparent;
  }
}