/*-- -------------------------- -->
<---            Steps           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #steps-277 {
    padding: var(--sectionPadding);
  }

  #steps-277 .cs-container {
    width: 100%;
    max-width: var(--containerMobileMax);
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--headerGap);
  }

  #steps-277 .cs-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #steps-277 .cs-title {
    max-width: 20ch;
  }

  #steps-277 .cs-card-group {
    max-width: 25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    position: relative;
  }

  #steps-277 .cs-item {
    text-align: left;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    /* Added relative positioning so the line anchors to the item */
    position: relative; 
  }

  /* 
    NEW: This draws the vertical line from the center of the current 
    number down to the center of the next number, automatically 
    matching the item's height no matter how much the text wraps. 
  */
  #steps-277 .cs-item:not(:last-child):before {
    content: "";
    width: 1px;
    background: var(--headerColor);
    opacity: 0.2;
    position: absolute;
    display: block;
    /* Starts at the vertical center of the circle */
    top: clamp(1.25rem, 2.55vw, 1.625rem); 
    /* Stretches exactly 100% of the item height PLUS the 1.5rem gap */
    height: calc(100% + 1.5rem);
    left: 3.5rem;
  }

  #steps-277 .cs-number {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 700;
    margin-right: 2.75rem;
    width: clamp(2.5rem, 5.1vw, 3.25rem);
    height: clamp(2.5rem, 5.1vw, 3.25rem);
    border-radius: 50%;
    color: var(--bodyTextColorWhite);
    background-color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
    position: relative;
  }

  #steps-277 .cs-number:before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    background: var(--headerColor);
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 50%;
    right: -1.25rem;
    transform: translateY(-50%);
  }

  #steps-277 .cs-item-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin-bottom: 0.5rem;
  }

  #steps-277 .cs-item-text {
    font-size: clamp(0.875rem, 2vw, 1rem);
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #steps-277 .cs-container {
    max-width: var(--containerMaxWidth);
  }

  #steps-277 .cs-card-group {
    max-width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    column-gap: 2em;
  }

  /* NEW: Turns off the vertical mobile lines */
  #steps-277 .cs-item:not(:last-child):before {
    display: none;
  }

  /* NEW: Recreates the single horizontal line for desktop */
  #steps-277 .cs-card-group:before {
    content: "";
    background: var(--headerColor);
    opacity: 0.2;
    position: absolute;
    display: block;
    width: auto;
    height: 1px;
    top: clamp(3.75rem, 7.5vw, 4.75rem);
    left: 6.875rem;
    right: 6.875rem;
  }

  #steps-277 .cs-item {
    text-align: center;
    width: 13.625rem;
    flex-direction: column;
    align-items: center;
  }

  #steps-277 .cs-number {
    margin: 0 0 clamp(2.5rem, 6vw, 3.75rem) 0;
  }

  #steps-277 .cs-number:before {
    top: auto;
    left: 50%;
    bottom: calc(clamp(1.5rem, 2.9vw, 1.75rem) * -1);
    transform: translateX(-50%);
  }
}

/*-- -------------------------- -->
<---       Class Cards          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #class-cards {
    padding: var(--sectionPadding);
    padding-top: 0;
  }

  #class-cards .cs-container {
    width: 100%;
    max-width: var(--containerMaxWidth);
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Uses your global clamp for consistent spacing between header and cards */
    gap: var(--headerGap); 
  }

  #class-cards .cs-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #class-cards .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--gridGap);
  }

  #class-cards .cs-item {
    list-style: none;
    width: 100%;
    box-sizing: border-box;
    /* Soft background from your variables */
    background-color: var(--bgLight);
    padding: 2rem 1.5rem;
    /* Subtle brand color accent on top */
    border-top: 4px solid var(--primary);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  #class-cards .cs-h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
  }

  #class-cards .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #class-cards .cs-card-group {
    /* Snaps to a 2x2 grid */
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #class-cards .cs-card-group {
    /* Spreads into 4 across */
    grid-template-columns: repeat(4, 1fr);
  }
}