/*-- -------------------------- -->
<---      Ethics / Privacy       -->
<--- -------------------------- -*/

/* Full-bleed photo / dark text-panel split, same shape as the
   reference "Reciprocity" section -- image fills half, a solid dark
   panel (site's --secondary ink) carries a serif title + a short
   paragraph in cream. Two of these sit back to back with the image
   side alternating (`.cs-split-reverse` flips the row on desktop). */
@media only screen and (min-width: 0rem) {
  .cs-split {
    width: 100%;
  }
  .cs-split .cs-container {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .cs-split .cs-image-group {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .cs-split .cs-image-group img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .cs-split .cs-content {
    width: 100%;
    background-color: var(--secondary);
    color: var(--cream);
    padding: 3.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .cs-split .cs-title {
    font-family: var(--headingFont);
    font-weight: 400;
    font-size: 2rem;
    color: var(--cream);
    margin: 0 0 1.25rem;
  }
  .cs-split .cs-text {
    font-family: var(--bodyFont);
    font-size: 1rem;
    line-height: 1.65em;
    color: var(--cream);
    opacity: 0.85;
    margin: 0;
    max-width: 32rem;
  }

  /* First split section (Code of Ethics) -- panel background swapped to
     the requested warm cream, with text darkened to stay legible on it. */
  #ethics .cs-content {
    background-color: #f2ecdc;
  }
  #ethics .cs-title,
  #ethics .cs-text {
    color: var(--navy);
  }
  #ethics .cs-text {
    opacity: 1;
  }

  /* Second split section (Privacy Commitment) -- panel background swapped
     to its own SVG texture, same treatment as the What to Expect section. */
  #privacy .cs-content {
    background-image: url("../images/PRIVACYCOMMITMENTBACKGROUND.svg");
    background-size: cover;
    background-position: center;
  }
}

/* Desktop - 64rem: side-by-side row, image and panel each take half;
   .cs-split-reverse mirrors it so the second section alternates sides */
@media only screen and (min-width: 64rem) {
  .cs-split .cs-container {
    flex-direction: row;
    align-items: stretch;
  }
  .cs-split.cs-split-reverse .cs-container {
    flex-direction: row-reverse;
  }
  .cs-split .cs-image-group {
    flex: 0 0 50%;
    aspect-ratio: auto;
  }
  .cs-split .cs-content {
    flex: 0 0 50%;
    padding: 4rem clamp(3rem, 6vw, 7rem);
  }
  .cs-split .cs-title {
    font-size: 2.5rem;
  }
}