/* FAQ Carousel Section with tears - following character gallery pattern */
.faq-carousel-section.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) {
  .faq-carousel-section.tear-section {
    width: 100svw; /* excludes scrollbar, prevents subtle right shift */
    margin-left: calc(50% - 50svw);
    margin-right: calc(50% - 50svw);
  }
}

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

/* background and minimal padding */
.faq-carousel-shell.section-shell {
  position: relative;
  background: var(--off-white) url('../assets/backgrounds/xJ2UjemaUO2.jpg') repeat;
  background-size: 200px;
  text-align: center;
  margin-bottom: 20px;
  padding-block: clamp(12px, 2vw, 32px);
  z-index: 200;
}

/* Add spacer element to create distance from tear */
/* Swoosh textures */
.faq-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: 1;
  width: clamp(200px, 30vw, 400px); /* Responsive width with limits */
  height: clamp(160px, 24vw, 320px); /* Responsive height with limits */
  max-width: 100%; /* Prevent overflow */
  pointer-events: none; /* Ensure they don't interfere with interactions */
}



.faq-carousel-shell.section-shell::after {
  content: '';
  display: block;
  height: 50px;  /* This creates the extra space above the tear */
  width: 100%;
}

/* Header styles stay */
.faq-carousel-header {
  max-width: 1152px;
  margin: 20px auto 40px auto;
  z-index: 1;
}



.faq-carousel-container {
  position: relative;
  max-width: 1152px;
  margin: 0 auto;
  z-index: 2;
  padding: 0;
}

.faq-carousel-scroll-wrapper {
  display: flex;
  gap: 16px; /* integer gap */
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 10px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  z-index: 3;
  position: relative;
  /* Ensure proper containment to prevent page-wide overflow */
  contain: layout;
  /* Constrain to viewport width */
  max-width: 100%;
}

/* Custom Scrollbar */
.faq-carousel-scroll-wrapper::-webkit-scrollbar { height: 8px; }
.faq-carousel-scroll-wrapper::-webkit-scrollbar-track { background: var(--light-gold); }
.faq-carousel-scroll-wrapper::-webkit-scrollbar-thumb { background: var(--secondary-color); opacity: 0.7; }
.faq-carousel-scroll-wrapper::-webkit-scrollbar-thumb:hover { background: var(--light-gold); opacity: 1; }

.faq-carousel-card {
  flex: 0 0 min(320px, calc(100vw - 60px)); /* Responsive width that respects viewport */
  background-color: var(--light-gold);
  position: relative;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: none;
  z-index: 4;
  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%
  );
}

/* Pixel-snapped frame and padding */
.faq-carousel-card-content {
  margin: 8px;
  --frame-w: 12px; /* whole px */
  border: var(--frame-w) solid transparent;
  border-image: url('../assets/images/filagree-border.svg') 14 / var(--frame-w) stretch;
  padding: 20px; /* whole px */
  display: flex;
  flex-direction: column;
  flex: 1;
  color: var(--secondary-color);
}

/* Quantised heading to avoid fractional flow height */
.faq-carousel-card h3 {
  font-family: var(--font-family-secondary);
  font-size: 20px;        /* whole px */
  line-height: 24px;      /* whole px */
  font-weight: 700;
  color: var(--light-navy);
  margin-bottom: 16px;    /* even px */
  text-align: center;
}

/* Divider line: consistent thickness; centre gap overlay in whole px */
.faq-carousel-divider-line {
  position: relative;
  width: 100%;
  height: 1px;
  margin: 10px 0 10px 0;  /* even px values */
  display: block;
  min-height: 1px;
}
.faq-carousel-divider-line::before {
  content: '';
  position: absolute;
  top: 0;                 /* integer origin */
  left: 50%;
  width: 40px;            /* centre gap total (tighter) */
  height: 1px;          /* same as line height */
  margin-left: -20px;     /* integer offset */
  background-color: var(--light-gold); /* match card background so the gap blends */
  z-index: 1;
}

/* Diamond centred with integer margins (no transform) */
.faq-carousel-separator {
  background-color: var(--light-navy);
  -webkit-mask: url('../assets/images/diamond-2.svg') no-repeat center / contain;
          mask: url('../assets/images/diamond-2.svg') no-repeat center / contain;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -6px;      /* half of 12 */
  margin-left: -6px;     /* half of 16 */
  z-index: 2;
  font-size: 0;
  pointer-events: none;
}

.faq-carousel-card p {
  font-family: var(--font-family);
  font-size: 16px;        /* whole px */
  line-height: 24px;      /* whole px, matches baseline grid */
  color: var(--light-navy);
  margin-bottom: 12px;
  flex-grow: 1;
  text-align: center;
}
.faq-carousel-card p:last-child { margin-bottom: 0; }

/* Decorative Accent Line, snapped */
.faq-carousel-accent-line {
  position: absolute;
  right: 0;              /* no negative offset */
  top: 0;
  bottom: 0;
  width: 2px;            /* even width for crisp edge */
  background-color: var(--light-navy);
  pointer-events: none;
  box-shadow: -4px 0px 8px rgba(250, 212, 159, 0.766);
  z-index: 5;
}

.faq-swoosh-1 {
  top: 10%;
  left: min(75%, calc(100% - clamp(200px, 30vw, 400px))); /* Prevent extending beyond container */
  transform: translateX(-10%);
}

.faq-swoosh-2 {
  top: 30%;
  left: max(20%, 0%); /* Ensure it doesn't go off the left edge */
  transform: translateX(-60%) scaleY(-1);
}

/* Responsive Design */

/* Large desktop adjustments to prevent layout issues */
@media (min-width: 1600px) {
  .faq-swoosh {
    width: clamp(200px, 20vw, 350px); /* Smaller relative size on very large screens */
    height: clamp(160px, 16vw, 280px);
  }
  
  .faq-swoosh-1 {
    left: min(70%, calc(100% - 350px)); /* More conservative positioning */
  }
  
  .faq-swoosh-2 {
    left: max(15%, 0%);
  }
}

@media (max-width: 768px) {
  /* Reduce swoosh visibility on mobile */
  .faq-swoosh {
    opacity: 0.05;
    width: clamp(150px, 25vw, 200px);
    height: clamp(120px, 20vw, 160px);
  }
  
  .faq-carousel-section { padding: 40px 0 20px 0; }
  .faq-carousel-section h2 { font-size: 1.4rem; margin-bottom: 20px; }

  /* Reduce header spacing on mobile */
  .faq-carousel-header { margin: 15px auto 25px auto; }

  /* Reduce the extra space above tear on mobile */
  .faq-carousel-shell.section-shell::after { height: 20px; }

  /* Reduce bottom padding on the shell */
  .faq-carousel-shell.section-shell { padding-block: 12px 8px; }

  /* Hide all FAQ cards except "More Questions?" (last card) on mobile */
  .faq-carousel-card { display: none; }
  .faq-carousel-card:nth-child(10) { display: flex; flex: 0 0 280px; min-height: 260px; }

  /* Center the single visible card */
  .faq-carousel-scroll-wrapper { justify-content: center; }

  .faq-carousel-card-content { --frame-w: 10px; padding: 18px; }

  .faq-carousel-card h3 { font-size: 17px; line-height: 24px; margin-bottom: 16px; }
  .faq-carousel-card p  { font-size: 14px; line-height: 22px; }

  .faq-carousel-accent-line { display: none; }
}

@media (max-width: 480px) {
  .faq-carousel-container { padding: 0 15px; }

  /* Reduce h2 size further for small mobile to match video-elevator.css */
  .faq-carousel-section h2 { font-size: 1.2rem; margin-bottom: 15px; }

  /* Reduce header spacing further on small mobile */
  .faq-carousel-header { margin: 10px auto 20px auto; }

  /* Reduce the extra space above tear further on small mobile */
  .faq-carousel-shell.section-shell::after { height: 10px; }

  /* Reduce bottom padding further on the shell */
  .faq-carousel-shell.section-shell { padding-block: 10px 5px; }

  /* Reduce section padding further on small mobile */
  .faq-carousel-section { padding: 30px 0 15px 0; }

  /* Hide all FAQ cards except "More Questions?" (last card) on small mobile */
  .faq-carousel-card { display: none; }
  .faq-carousel-card:nth-child(10) { 
    display: flex;
    flex: 0 0 min(260px, calc(100vw - 80px)); /* Ensure cards fit on very small screens */
    min-height: 240px; 
  }
  .faq-carousel-card-content { --frame-w: 8px; padding: 16px; }

  .faq-carousel-scroll-wrapper { 
    gap: 16px; 
    /* Ensure wrapper doesn't extend beyond screen */
    max-width: calc(100vw - 30px);
    /* Center the single visible card */
    justify-content: center;
  }
}