/*
 * split-content.css
 * Component: Split Content Block
 *
 * Original author: egloo
 * Modified by: Greta Eline Poclen
 *
 * Changes from original (egloo):
 *   - [GEP] Reduced image size (max-height cap, removed absolute positioning on desktop)
 *   - [GEP] Applied DM Sans font family to content area
 *   - [GEP] Changed vertical alignment from center to top (align-items: start)
 */

/* ============================================================
   Import DM Sans from Google Fonts
   [GEP] New: font family required by brand update
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* ============================================================
   Full-page container overrides
   ============================================================ */
.egloo-block.split-content .container.full-page {
  max-width: unset;
  padding-left: 0;
  padding-right: 0;
}

/* ============================================================
   Block-level spacing
   ============================================================ */
.egloo-block.split-content {
  margin-bottom: 6.25rem;
  margin-top: 6.25rem;
}

/* ============================================================
   Inner container width
   ============================================================ */
.egloo-block.split-content .container {
  max-width: calc(var(--site-width) + 4rem);
}

/* ============================================================
   Two-column split grid
   [GEP] Modified: removed min-height (was 26rem) -- the image
         now sets its own height naturally via max-height below.
         align-items: start so both columns anchor at the top.
   ============================================================ */
.egloo-block.split-content .split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1.25rem;

  /* [GEP] Top-align both columns -- image and text start together */
  align-items: start;
}

/* ============================================================
   Image column wrapper
   [GEP] Modified: removed position: relative -- no longer needed
         since the image is in normal flow (not absolute)
   ============================================================ */
.egloo-block.split-content .split .split-el.split-el-img {
  /* position: relative removed by [GEP] -- image is now in flow */
}

/* ============================================================
   Image element
   [GEP] Modified: removed position: absolute, height: 100%.
         The image is now in normal document flow so it can
         size itself. max-height caps it to keep it smaller.
         width: 100% makes it fill its column horizontally.
   ============================================================ */
.egloo-block.split-content .split .split-el.split-el-img .img-bg img {
  display: block;
  width: 100%;
  object-fit: cover;

  /* [GEP] Removed: position: absolute; height: 100% */
  /* [GEP] Cap image height -- keeps image smaller than original */
  max-height: 380px;
  object-position: center top;
}

/* ============================================================
   Content column
   [GEP] Modified align-items: start (was center)
   [GEP] Applied DM Sans font family
   ============================================================ */
.egloo-block.split-content .split .split-el-content {
  display: grid;

  /* [GEP] Top-align the content block within its column */
  align-items: start;

  /* [GEP] Apply DM Sans; fallback chain retained */
  font-family: 'DM Sans', sans-serif;
}

/* ============================================================
   Full-page: content padding when image is on the RIGHT
   ============================================================ */
.egloo-block.split-content.side-right .full-page .split .split-el-content {
  max-width: 653px;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2.6125rem;
}

/* ============================================================
   Full-page: content padding when image is on the LEFT
   ============================================================ */
.egloo-block.split-content.side-left .full-page .split .split-el-content {
  max-width: 653px;
  margin-right: auto;
  padding-right: 2.6125rem;
  padding-left: 2rem;
}

/* ============================================================
   Order overrides for side-right variant
   ============================================================ */
.egloo-block.split-content.side-right .split .split-el-content {
  order: 1;
}

.egloo-block.split-content.side-right .split .split-el-img {
  order: 2;
}

/* ============================================================
   Inner padding tweaks per side (full-page only)
   ============================================================ */
.egloo-block.split-content.side-right .full-page .split .split-el-content > .split-container > .split-content {
  padding-right: 0.625rem;
}

.egloo-block.split-content.side-left .full-page .split .split-el-content > .split-container > .split-content {
  padding-left: 0.625rem;
}

/* ============================================================
   Inner content padding (default, non-full-page)
   ============================================================ */
.egloo-block.split-content .split .split-el-content > .split-container > .split-content {
  padding: 3.3125rem 3.75rem 3.75rem;
}

/* ============================================================
   Heading styles
   ============================================================ */
.egloo-block.split-content .split .split-el-content > .split-container > .split-content .split-title-wrap h2 {
  color: var(--accent);
  font-size: 2rem;
  line-height: 1.3125;
  padding-bottom: 1.25rem;
}

/* ============================================================
   Body text styles
   ============================================================ */
.egloo-block.split-content .split .split-el-content > .split-container > .split-content .split-content-wrap {
  font-size: 1.125rem;
  line-height: 1.77;
  letter-spacing: 0.04em;
}

/* ============================================================
   BREAKPOINT: max-width 767px (mobile)
   ============================================================ */
@media only screen and (max-width: 767px) {

  .egloo-block.split-content {
    margin-bottom: 4rem;
    margin-top: 4rem;
  }

  .egloo-block.split-content .split {
    display: grid;
    grid-template-columns: 1fr;
  }

  /* Image flows naturally on mobile -- no override needed */
  .egloo-block.split-content .split .split-el.split-el-img .img-bg img {
    position: unset;
    /* [GEP] Remove max-height cap on mobile to let image breathe */
    max-height: unset;
  }

  .egloo-block.split-content .split .split-el-content {
    background-color: var(--light-grey);
  }

  .egloo-block.split-content .split .split-el-content > .split-container > .split-content {
    padding: 2rem 1.5rem;
  }

  .egloo-block.split-content .split .split-el-content > .split-container > .split-content .split-title-wrap h2 {
    font-size: 1.7rem;
  }

  .egloo-block.split-content .split .split-el-content > .split-container > .split-content .split-content-wrap {
    font-size: 1rem;
  }

  .egloo-block.split-content.side-right .split .split-el-content {
    order: 2;
  }

  .egloo-block.split-content.side-right .split .split-el-img {
    order: 1;
  }

  .egloo-block.split-content.side-right .full-page .split .split-el-content,
  .egloo-block.split-content.side-left .full-page .split .split-el-content {
    padding: 1rem;
  }
}

/* ============================================================
   BREAKPOINT: min-width 768px (tablet and above)
   [GEP] Modified: align-items changed from center to start.
         position: unset kept -- image already in flow above.
   ============================================================ */
@media only screen and (min-width: 768px) {

  .egloo-block.split-content .split .split-el.split-el-img .img-bg img {
    /* Image already in flow -- no position override needed here */
    height: auto;
  }

  .egloo-block.split-content.side-right .split .split-el-img,
  .egloo-block.split-content.side-left .split .split-el-img {
    display: grid;

    /* [GEP] Changed from center to start -- top alignment */
    align-items: start;
  }
}