/* ======================
   SECTION REMOVE RIGHT SIDE SPACE - BASED ON SECTION COMPONENT
   Same as Section component but without right-side padding
   ====================== */

/* Base Section - Mobile First */
.section-without-right-side-space.section {
  width: 100%;
  position: relative;
  box-sizing: border-box;

  /* Performance optimizations */
  contain: layout;
  will-change: auto;

  /* Base responsive design */
  overflow: hidden;
  /* Prevent horizontal scroll */
}

/* Allow overflow for hero sections to show ellipse effects */
.section-without-right-side-space.section.variant-hero {
  overflow: visible;
}

/* ======================
   CONTAINER SYSTEM - Fluid & Responsive (NO RIGHT PADDING)
   ====================== */
.section-without-right-side-space .container {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  max-width: min(1680px + clamp(20px, 4vw, 120px), 100vw);


  /* Mobile-first: Only left padding, no right padding */
  /* padding-left: clamp(16px, 4vw, 24px);
  padding-right: 0;  */
  padding: clamp(16px, 2vw, 24px) 0 clamp(16px, 2vw, 24px) clamp(20px, 4vw, 120px);


  /* Default max-width for readability */
  /* max-width: min(1680px, 100vw); */
}

.section-without-right-side-space .content {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* ======================
   CONTAINER VARIANTS (NO RIGHT PADDING)
   ====================== */

/* Narrow container for content-focused sections */
.section-without-right-side-space.container-narrow .container {
  max-width: min(900px, 100vw);
  padding-left: clamp(16px, 4vw, 40px);
  padding-right: 0;
  /* REMOVED RIGHT PADDING */
}

/* Wide container for feature-rich sections */
.section-without-right-side-space.container-wide .container {
  max-width: min(1920px, 100vw);
  padding-left: clamp(20px, 5vw, 80px);
  padding-right: 0;
  /* REMOVED RIGHT PADDING */
}

/* Full-width container (edge to edge) */
.section-without-right-side-space.container-full .container {
  max-width: 100vw;
  padding-left: 0;
  padding-right: 0;
}

/* ======================
   SPACING VARIANTS
   ====================== */

/* Default spacing */
.section-without-right-side-space.spacing-default {
  padding-top: clamp(20px, 3vw, 32px);
  padding-bottom: clamp(20px, 3vw, 32px);
}

/* Compact spacing for tighter sections */
.section-without-right-side-space.spacing-compact {
  padding-top: clamp(12px, 2vw, 16px);
  padding-bottom: clamp(12px, 2vw, 16px);
}

/* Large spacing for hero sections */
.section-without-right-side-space.spacing-large {
  padding-top: clamp(16px, 2vw, 24px);
  padding-bottom: clamp(16px, 2vw, 24px);
}

/* No vertical spacing */
.section-without-right-side-space.spacing-none {
  padding-top: 0;
  padding-bottom: 0;
}

/* ======================
   SECTION VARIANTS
   ====================== */

/* Default section */
.section-without-right-side-space.variant-default {
  display: block;
}

/* Full viewport height section */
.section-without-right-side-space.variant-full {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.section-without-right-side-space.variant-full .container {
  display: flex;
  align-items: center;
  min-height: inherit;
}

.section-without-right-side-space.variant-full .content {
  width: 100%;
}

/* Hero section with enhanced styling */
.section-without-right-side-space.variant-hero {
  display: flex;
  align-items: center;
  position: relative;
  overflow: visible;
  /* Allow ellipse effects to extend outside */
}

.section-without-right-side-space.variant-hero .container {
  display: flex;
  align-items: center;
  min-height: inherit;
}

/* Compact section for cards/features */
.section-without-right-side-space.variant-compact {
  display: block;
}

.section-without-right-side-space.variant-default .container {
  margin: 0 auto;
  max-width: min(1680px, 100vw);
  width: 100%;
  padding: clamp(16px, 2vw, 24px) 0 clamp(16px, 2vw, 24px) clamp(20px, 4vw, 120px);
  box-sizing: border-box;
}

/* Mobile-only right space removal variant */
.section-without-right-side-space.variant-mobileRightRemove {
  position: relative;
  overflow-x: hidden;
  /* min-height: 100vh; */
}

/* Override container padding for mobileRightRemove variant - desktop has normal padding */
.section-without-right-side-space.variant-mobileRightRemove .container {
  padding-left: clamp(16px, 4vw, 24px);
  padding-right: clamp(16px, 4vw, 24px);
  /* Normal right padding on desktop */
}

.section-without-right-side-space.variant-mobileRightRemove .container {
  /* padding-right: 0;
  margin-right: 0;
  max-width: none;
  width: 100%; */
  /* padding-right: 0; */
  /* margin-right: 0; */
  margin: 0 auto;
  max-width: min(1680px, 100vw);
  width: 100%;
  padding: clamp(16px, 2vw, 24px) 0 clamp(16px, 2vw, 24px) clamp(20px, 4vw, 120px);
  box-sizing: border-box;
}

.section-without-right-side-space.variant-mobileRightRemove .content {
  padding-right: 0;
  margin-right: 0;
  position: relative;
  z-index: 1;
}

/* Remove right padding only on mobile for this variant */
@media (max-width: 767px) {
  /* .variant-mobileRightRemove .container {
    padding-left: clamp(16px, 6.1vw, 24px);
    padding-right: 0;
  } */
}

/* iPad responsive adjustments for mobileRightRemove */
@media (min-width: 768px) and (max-width: 1023px) {
  /* .variant-mobileRightRemove .container {
    padding-left: clamp(24px, 4vw, 48px);
    padding-right: clamp(24px, 4vw, 48px);
  } */
}

/* Tablet: maintain normal padding */
@media (min-width: 481px) and (max-width: 1024px) {
  /* .variant-mobileRightRemove .container {
    padding-left: clamp(20px, 4vw, 32px);
    padding-right: 0;
  } */
}

/* Desktop: maintain normal padding */
@media (min-width: 1025px) {
  /* .variant-mobileRightRemove .container {
    padding-left: clamp(32px, 5vw, 60px);
    padding-right: clamp(32px, 5vw, 60px); 
  } */
}

/* Large Desktop: maintain normal padding */
@media (min-width: 1367px) {
  /* .variant-mobileRightRemove .container {
    padding-left: clamp(60px, 11vw, 200px);
    padding-right: clamp(60px, 6vw, 100px); 
  } */
}

@media (min-width: 1921px) {
  /* .variant-mobileRightRemove .container {
    padding-left: 120px;
    padding-right: 120px;
  } */
}

/* ======================
   BACKGROUND VARIANTS
   ====================== */

/* Default background */
.section-without-right-side-space.background-default {
  background-color: var(--background, #FCF9F8);
  color: var(--foreground, #333f5b);
}

/* Muted background */
.section-without-right-side-space.background-muted {
  background-color: var(--muted, #f8fafc);
  color: var(--foreground, #333f5b);
}

/* Primary background */
.section-without-right-side-space.background-primary {
  background-color: var(--primary, #333f5b);
  color: var(--primary-foreground, #ffffff);
}

/* Accent background */
.section-without-right-side-space.background-accent {
  background-color: #3495ff;
  color: #ffffff;
}

/* Transparent background */
.section-without-right-side-space.background-transparent {
  background-color: transparent;
  color: var(--foreground, #333f5b);
}

/* White background */
.section-without-right-side-space.background-white {
  background-color: #ffffff;
  color: var(--foreground, #333f5b);
}

/* Dark background */
.section-without-right-side-space.background-dark {
  background-color: #1a1a1a;
  color: #ffffff;
}

/* No background */
.section-without-right-side-space.background-none {
  background: none !important;
  background-color: transparent !important;
}

/* ======================
   RESPONSIVE BREAKPOINTS (NO RIGHT PADDING)
   ====================== */

/* Tablet: 481px – 1024px */
@media (min-width: 481px) and (max-width: 1024px) {
  /* .container {
    padding-left: clamp(20px, 4vw, 32px);
    padding-right: 0;
  } */

  .section-without-right-side-space.spacing-default {
    padding-top: clamp(24px, 4vw, 40px);
    padding-bottom: clamp(24px, 4vw, 40px);
  }

  .section-without-right-side-space.spacing-large {
    padding-top: clamp(32px, 5vw, 48px);
    padding-bottom: clamp(32px, 5vw, 48px);
  }
}

/* Laptop: 1025px – 1366px */
@media (min-width: 1025px) and (max-width: 1366px) {
  /* .container {
    padding-left: clamp(32px, 5vw, 60px);
    padding-right: 0;
  } */

  .section-without-right-side-space.spacing-default {
    padding-top: clamp(40px, 6vw, 60px);
    padding-bottom: clamp(40px, 6vw, 60px);
  }

  .section-without-right-side-space.spacing-large {
    padding-top: clamp(20px, 3vw, 32px);
    padding-bottom: clamp(20px, 3vw, 32px);
  }
}

/* Desktop: 1367px – 1920px */
@media (min-width: 1367px) and (max-width: 1920px) {
  /* .container {
    padding-left: clamp(60px, 6vw, 100px);
    padding-right: 0; 
  } */

  .section-without-right-side-space.spacing-default {
    padding-top: clamp(60px, 7vw, 80px);
    padding-bottom: clamp(60px, 7vw, 80px);
  }

  .section-without-right-side-space.spacing-large {
    padding-top: clamp(24px, 3vw, 40px);
    padding-bottom: clamp(24px, 3vw, 40px);
  }
}


/* Large Desktop: 1921px+ */
@media (min-width: 1921px) {
  .section-without-right-side-space .container {
    max-width: 1680px;
    /* padding-left: 120px;
    padding-right: 0; */
  }

  .section-without-right-side-space.spacing-default {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .section-without-right-side-space.spacing-large {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* ======================
   ACCESSIBILITY & PERFORMANCE
   ====================== */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .section-without-right-side-space.section {
    scroll-behavior: auto;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .section-without-right-side-space.section {
    border: 2px solid;
  }

  .section-without-right-side-space.background-primary,
  .section-without-right-side-space.background-accent {
    border-color: currentColor;
  }
}

/* Print styles */
@media print {
  .section-without-right-side-space.section {
    background: white !important;
    color: black !important;
    break-inside: avoid;
  }
}