/* ======================
   PRINCIPLES WRAPPER + GROUP
   ====================== */

.principles-section .principles {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  text-align: left;
  color: #333f5b;
  font-family: 'Avenir Next', sans-serif;
  gap: 98px;
  font-size: 16px;
  max-width: 1680px;
  margin: 0 auto;
}

/* ===============================
   MOBILE & TABLET RESPONSIVE LAYOUT (1024px and below)
   Including ALL iPad devices (Pro, Mini, Air)
   =============================== */
@media (max-width: 1024px) {
  .principles-section .principles {
    gap: clamp(32px, 6vw, 60px);
    font-size: clamp(13px, 2vw, 16px);
  }

  .principles-section .principlesGroup {
    display: flex;
    flex-direction: row;
    gap: clamp(16px, 3vw, 24px);
    font-size: clamp(22px, 4vw, 32px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 16px;
    align-items: stretch;
    width: 100%;
    min-height: clamp(320px, 35vw, 400px);
    font-family: 'P22 Mackinac Pro', serif;
  }
  
  .principles-section .principlesGroup::-webkit-scrollbar {
    display: none;
  }
  
  /* Ensure cards maintain proper width in slider */
  .principles-section .principlesGroup > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: clamp(280px, 70vw, 380px);
    max-width: clamp(320px, 80vw, 400px);
  }

  .principles-section .courseColorBand,
  .principles-section .courseColorOrange {
    display: none;
  }

  .principles-section .sliderSpacer {
    width: clamp(16px, 3vw, 24px);
    min-width: clamp(16px, 3vw, 24px);
    height: 100%;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
  }
}

/* iPad Pro specific adjustments (including 11" and 12.9") */
@media (min-width: 834px) and (max-width: 1024px) and (min-height: 1194px) {
  .principles-section .principlesGroup {
    gap: clamp(24px, 3.5vw, 32px);
    font-size: clamp(30px, 4.5vw, 38px);
    min-height: clamp(420px, 45vw, 480px);
  }

  .principles-section .principlesGroup > * {
    min-width: clamp(380px, 80vw, 450px);
    max-width: clamp(420px, 90vw, 500px);
  }

  .principles-section .sliderSpacer {
    width: clamp(24px, 4vw, 36px);
    min-width: clamp(24px, 4vw, 36px);
  }
}

/* iPad Air and standard iPad adjustments (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .principles-section .principlesGroup {
    gap: clamp(20px, 3vw, 28px);
    font-size: clamp(28px, 4vw, 35px);
    min-height: clamp(380px, 40vw, 450px);
  }

  .principles-section .principlesGroup > * {
    min-width: clamp(320px, 75vw, 420px);
    max-width: clamp(360px, 85vw, 460px);
  }

  .principles-section .sliderSpacer {
    width: clamp(20px, 4vw, 32px);
    min-width: clamp(20px, 4vw, 32px);
  }
}

/* iPad Mini adjustments (768px - 820px) */
@media (min-width: 768px) and (max-width: 820px) {
  .principles-section .principlesGroup {
    gap: clamp(18px, 3vw, 24px);
    font-size: clamp(26px, 4vw, 32px);
    min-height: clamp(360px, 38vw, 420px);
  }

  .principles-section .principlesGroup > * {
    min-width: clamp(300px, 72vw, 380px);
    max-width: clamp(340px, 82vw, 420px);
  }

  .principles-section .sliderSpacer {
    width: clamp(18px, 3.5vw, 28px);
    min-width: clamp(18px, 3.5vw, 28px);
  }
}

/* Small mobile adjustments (under 768px) */
@media (max-width: 767px) {
  .principles-section .principlesGroup {
    gap: 16px;
    font-size: clamp(20px, 5vw, 26px);
    min-height: 320px;
  }

  .principles-section .principlesGroup > * {
    min-width: clamp(260px, 75vw, 320px);
    max-width: clamp(300px, 85vw, 350px);
  }

  .principles-section .sliderSpacer {
    width: clamp(16px, 4vw, 20px);
    min-width: clamp(16px, 4vw, 20px);
  }
}

/* ===============================
   DESKTOP STYLES (1025px and above)
   =============================== */
@media (min-width: 1025px) {
  .principles-section .principles {
    gap: 98px;
    font-size: 16px;
  }

  .principles-section .principlesGroup {
    display: flex;
    align-items: stretch;
    gap: clamp(24px, 2.5vw, 32px);
    font-size: clamp(32px, 3vw, 38px);
    justify-content: space-between;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
    width: 100%;
    min-height: 400px;
    font-family: 'P22 Mackinac Pro', serif;
  }

  .principles-section .principlesGroup > * {
    flex: 1;
    scroll-snap-align: none;
    min-width: auto;
    max-width: none;
  }

  .principles-section .courseColorBand,
  .principles-section .courseColorOrange {
    display: block;
  }

  .principles-section .sliderSpacer {
    display: none;
  }
}

/* Base Principles Group styles */
.principles-section .principlesGroup {
  display: flex;
  align-items: stretch;
  z-index: 2;
  width: 100%;
  max-width: 1680px;
  min-height: 400px;
  gap: 32px;
  font-size: 38px;
  font-family: 'P22 Mackinac Pro', serif;
}

/* Background color elements */
.principles-section .courseColorBand {
  width: clamp(100px, 50vw, 450px);
  height: 480px;
  position: absolute;
  top: -280px;
  right: -50px;
  filter: blur(clamp(50px, 10vw, 180px));
  border-radius: 50%;
  background: radial-gradient(ellipse, #3495ff 0%, #3495ff 25%, rgba(52, 149, 255, 0.7) 50%, rgba(52, 149, 255, 0.3) 100%);
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}

.principles-section .courseColorOrange {
  width: clamp(100px, 22vw, 350px);
  height: 480px;
  position: absolute;
  top: -100px;
  right: -240px;
  filter: blur(clamp(50px, 10vw, 120px));
  border-radius: 50%;
  background: radial-gradient(ellipse, #f8d194 0%, #f8d194 30%, rgba(248, 209, 148, 0.8) 60%, rgba(248, 209, 148, 0.3) 100%);
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 767px) {
  .principles-section .principlesGroup {
    width: 100%;
    gap: 16px;
    font-size: 22px;
    overflow-x: auto;
    padding-bottom: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-height: 320px;
    align-items: stretch;
  }

  .principles-section .principlesGroup::-webkit-scrollbar {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .principles-section .principlesGroup {
    width: 100%;
    gap: clamp(20px, 3vw, 32px);
    font-size: clamp(30px, 4vw, 38px);
    /* Remove flex-wrap and justify-content for slider */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 16px;
  }
}

@media (min-width: 1025px) and (max-width: 1600px) {
  .principles-section .principlesGroup {
    width: 100%;
    gap: clamp(24px, 2.5vw, 32px);
    justify-content: space-between;
    padding-right: 36px;
  }
}

/* Ensure mobile styles apply to iPad portrait as well */
@media (max-width: 1023px) {
  .principles-section .courseColorBand,
  .principles-section .courseColorOrange {
    /* Adjust color bands for tablet/mobile */
    width: 100%;
    right: 0;
  }
}

@media (max-width: 1024px) {
  .principles-section .courseColorBand { display: none; }
  .principles-section .courseColorOrange { display: none; }
}

@media (max-width: 767px) {
  .principles-section .sliderSpacer {
    /* Horizontal spacer for proper last slide viewing */
    width: clamp(19px, 3vw, 400px);
    height: 100%; /* Match the height of principle cards */
    flex-shrink: 0;
    /* Remove the spacer visibility but keep the space */
    opacity: 0;
    pointer-events: none;
  }
}

@media (min-width: 768px) and (max-width: 1020px) {
  .principles-section .sliderSpacer {
  /* Horizontal spacer for proper last slide viewing */
  width: clamp(19px, 3vw, 400px);
  min-width: clamp(19px, 3vw, 400px);
  height: 100%; /* Match the height of principle cards */
  flex-shrink: 0;
  /* Remove the spacer visibility but keep the space */
  opacity: 0;
  pointer-events: none;
}
}


/* principles heading */

/* ======================
   HEADER (Eyebrow + H2)
   ====================== */

.principles-section .header {
  width: 100%;
  max-width: 1680px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 1;

  /* Desktop gap */
  gap: 64px;
}

@media (max-width: 767px) {
  .principles-section .header {
    gap: 28px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .principles-section .header {
    gap: clamp(40px, 8vw, 64px);
  }
}

/* Eyebrow Badge */
.principles-section .eyebrow {
  border-radius: 50px;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 24px;
}

.principles-section .eyebrowBlur {
  width: 100%;
  position: absolute;
  height: 100%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  left: 0%;
  filter: blur(10px);
  border-radius: 50px;
  background: linear-gradient(95.49deg, rgba(52, 148, 253, 0.3), rgba(243, 127, 84, 0.3));
  z-index: 0;
}

.principles-section .subheadingWrapper {
  border-radius: 50px;
  background-color: #fcf9f8;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;

  /* Desktop padding */
  padding: 16px 24px;
}

@media (max-width: 767px) {
  .principles-section .subheadingWrapper {
    padding: 14px 20px;
  }
}

.principles-section .subheading {
  position: relative;
  line-height: 150%;
  color: #333f5b;
}

/* Main Heading */
.principles-section .heading {
  position: relative;
  letter-spacing: -0.03em;
  font-weight: 500;
  font-family: 'P22 Mackinac Pro', serif;
  margin: 0;

  /* Desktop styles */
  max-width: 597px;
  font-size: clamp(48px, 4.2vw, 80px);
  line-height: 110%;
}

@media (min-width: 1024px) and (max-width: 1600px) {
  .principles-section .heading {
    max-width: 500px;
  }   
}

@media (max-width: 767px) {
  .principles-section .heading {
    align-self: stretch;
    width: auto;
    font-size: clamp(24px, 7.6vw, 30px);
    line-height: 120%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .principles-section .heading {
    width: auto;
    max-width: 600px;
    font-size: clamp(40px, 8vw, 60px);
  }
}


/* principles heading */



/* ======================
   principles SINGLE CARD + CONTENT
   ====================== */

.principles-section .principleCard {
  border-radius: 24px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  box-sizing: border-box;

  /* Desktop styles - flexible width */
  max-width: 540px;
  min-width: 300px;
  padding: 48px;
  gap: 48px;
}

/* ===============================
   MOBILE & TABLET RESPONSIVE (1024px and below)
   Including ALL iPad devices
   =============================== */
@media (max-width: 1024px) {
  .principles-section .principleCard {
    flex-shrink: 0;
    border-radius: clamp(16px, 2.5vw, 24px);
    padding: clamp(24px, 4vw, 36px);
    gap: clamp(24px, 4vw, 36px);
    width: clamp(280px, 70vw, 400px);
    min-width: clamp(280px, 70vw, 400px);
    max-width: clamp(320px, 80vw, 450px);
  }
}

/* iPad Pro specific adjustments (11" and 12.9") */
@media (min-width: 834px) and (max-width: 1024px) and (min-height: 1194px) {
  .principles-section .principleCard {
    padding: clamp(32px, 4.5vw, 48px);
    gap: clamp(32px, 4.5vw, 48px);
    width: clamp(380px, 80vw, 450px);
    min-width: clamp(380px, 80vw, 450px);
    max-width: clamp(420px, 90vw, 500px);
    border-radius: 24px;
  }

  .principles-section .principleTitle {
    font-size: clamp(28px, 4.5vw, 36px);
    line-height: 125%;
  }

  .principles-section .principleDescription {
    width: 100%;
    font-size: clamp(17px, 2.5vw, 20px);
    max-width: none;
  }
}

/* iPad Air and standard iPad adjustments */
@media (min-width: 768px) and (max-width: 1024px) and (max-height: 1193px) {
  .principles-section .principleCard {
    padding: clamp(28px, 4vw, 40px);
    gap: clamp(28px, 4vw, 40px);
    width: clamp(320px, 75vw, 420px);
    min-width: clamp(320px, 75vw, 420px);
    max-width: clamp(360px, 85vw, 460px);
    border-radius: clamp(18px, 2.5vw, 22px);
  }

  .principles-section .principleTitle {
    font-size: clamp(24px, 4vw, 32px);
    line-height: 125%;
  }

  .principles-section .principleDescription {
    width: 100%;
    font-size: clamp(16px, 2.2vw, 18px);
    max-width: none;
  }
}

/* iPad Mini specific adjustments */
@media (min-width: 768px) and (max-width: 820px) {
  .principles-section .principleCard {
    padding: clamp(26px, 3.8vw, 34px);
    gap: clamp(26px, 3.8vw, 34px);
    width: clamp(300px, 72vw, 380px);
    min-width: clamp(300px, 72vw, 380px);
    max-width: clamp(340px, 82vw, 420px);
    border-radius: 20px;
  }

  .principles-section .principleTitle {
    font-size: clamp(22px, 3.8vw, 28px);
    line-height: 120%;
  }

  .principles-section .principleDescription {
    width: 100%;
    font-size: clamp(15px, 2.1vw, 17px);
    max-width: none;
  }
}

/* Small mobile adjustments (under 768px) */
@media (max-width: 767px) {
  .principles-section .principleCard {
    width: clamp(260px, 70vw, 320px);
    min-width: clamp(260px, 70vw, 320px);
    max-width: clamp(300px, 85vw, 350px);
    flex-shrink: 0;
    border-radius: 20px;
    padding: 24px 24px 28px;
    gap: 24px;
  }

  .principles-section .principleTitle {
    font-size: 22px;
    line-height: 120%;
  }

  .principles-section .principleDescription {
    align-self: stretch;
    width: 100%;
    font-size: 15px;
    max-width: none;
  }
}

/* Desktop styles - 1025px and above */
@media (min-width: 1025px) {
  .principles-section .principleCard {
    max-width: 540px;
    min-width: 300px;
    padding: 48px;
    gap: 48px;
    width: auto;
    flex: 1;
  }

  .principles-section .principleTitle {
    font-size: 38px;
    line-height: 130%;
  }

  .principles-section .principleDescription {
    width: 359px;
    font-size: 18px;
    max-width: 359px;
  }
}

@media (min-width: 1025px) and (max-width: 1600px) {
  .principles-section .principleCard {
    max-width: 480px;
    padding: 36px;
    gap: 36px;
  }

  .principles-section .principleDescription {
    width: 100%;
    font-size: 18px;
    max-width: 400px;
  }
}

/* Card Backgrounds */
.principles-section .cardBackgroundCustom {
  width: 100%;
  position: absolute;
  height: 100%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  left: 0%;
  z-index: 0;
}

/* Icon Container */
.principles-section .iconContainer {
  border-radius: 50px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;

  /* Desktop gap */
  gap: 10px;
}

@media (max-width: 767px) {
  .principles-section .iconContainer {
    border-radius: 38.89px;
    gap: 7.8px;
  }
}

.principles-section .iconBlur {
  position: absolute;
  filter: blur(10px);
  border-radius: 500px;
  background: linear-gradient(95.49deg, rgba(52, 148, 253, 0.3), rgba(243, 127, 84, 0.3));
  z-index: 0;

  /* Desktop size */
  width: 72px;
  height: 72px;
  top: calc(50% - 36px);
  left: calc(50% - 36px);
}

@media (max-width: 767px) {
  .principles-section .iconBlur {
    width: 56px;
    height: 56px;
    top: calc(50% - 28px);
    left: calc(50% - 28px);
    filter: blur(7.78px);
    border-radius: 388.89px;
  }
}

.principles-section .principleIcon {
  border-radius: 500px;
  max-height: 100%;
  z-index: 1;

  /* Desktop size */
  width: 72px;
  height: 72px;
}

@media (max-width: 767px) {
  .principles-section .principleIcon {
    width: 56px;
    height: 56px;
    border-radius: 388.89px;
  }
}

/* Card Content */
.principles-section .cardContent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-grow: 1;
  z-index: 2;

  /* Desktop gap */
  gap: 48px;
}

@media (min-width: 1024px) and (max-width: 1600px) {
  .principles-section .cardContent {
    gap: 0;
  }  
}

@media (max-width: 767px) {
  .principles-section .cardContent {
    gap: 24px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .principles-section .cardContent {
    gap: clamp(24px, 4vw, 48px);
  }
}

.principles-section .cardHeader {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.principles-section .principleTitle {
  align-self: stretch;
  position: relative;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 0;
  font-family: 'P22 Mackinac Pro', serif;

  /* Desktop styles */
  font-size: 38px;
  line-height: 130%;
}

@media (max-width: 767px) {
  .principles-section .principleTitle {
    font-size: 22px;
    line-height: 120%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .principles-section .principleTitle {
    font-size: clamp(26px, 4vw, 32px);
    line-height: 125%;
  }
}

.principles-section .titleLine {
  display: block;
}

@media (min-width: 1601px) and (max-width: 1757px) {
  .principles-section .titleLine {
    font-size: 24px; 
    line-height: 130%;   
  }
}

@media (min-width: 1024px) and (max-width: 1600px) {
  .principles-section .titleLine {
    font-size: 24px; 
    line-height: 130%;   
  }
}


@media (min-width: 768px) and (max-width: 1023px) {
  .principles-section .titleLine {
    font-size: clamp(17px, 4vw, 19px);
    line-height: 120%;
  }
  
}

.principles-section .principleDescription {
  position: relative;
  letter-spacing: -0.02em;
  line-height: 150%;
  font-weight: 500;
  font-family: 'Avenir Next', sans-serif;
  color: #6d717b;
  margin: 0;
  margin-top: auto; /* Push to bottom baseline */
  z-index: 3;

  /* Desktop styles */
  width: 359px;
  font-size: 18px;
}

@media (min-width: 1024px) and (max-width: 1600px) {
  .principles-section .principleDescription {
    width: 100%;
    font-size: 18px;
    max-width: 400px;
  }
}

@media (max-width: 767px) {
  .principles-section .principleDescription {
    align-self: stretch;
    width: 100%;
    font-size: 15px;
    max-width: none;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .principles-section .principleDescription {
    width: 225px;
    font-size: clamp(16px, 2vw, 18px);
  }
}

/* Icon adjustments for all iPad devices */
@media (max-width: 1024px) {
  .principles-section .iconContainer {
    border-radius: clamp(32px, 4vw, 50px);
    gap: clamp(6px, 1.5vw, 10px);
  }

  .principles-section .iconBlur {
    width: clamp(56px, 8vw, 72px);
    height: clamp(56px, 8vw, 72px);
    top: calc(50% - clamp(28px, 4vw, 36px));
    left: calc(50% - clamp(28px, 4vw, 36px));
    filter: blur(clamp(7px, 1.5vw, 10px));
  }

  .principles-section .principleIcon {
    width: clamp(56px, 8vw, 72px);
    height: clamp(56px, 8vw, 72px);
    border-radius: 500px;
  }
}


/* ======================
   principles SINGLE CARD + CONTENT
   ====================== */