/* ---------------------------------------------------------------------------
   Split Content: a Carousel on one side, eyebrow / heading / text on the other,
   over a page-coloured section with an optional colour band across the top.

   Layout (by the section's own width, container queries):
     768px and wider   two columns (desktop and tablet share this layout)
     767px and below   one column, carousel on top

   Colours read the site variables (they inherit into the shadow root) with
   hex fallbacks:
     Default     band --navy, heading --navy, accent --soil
     Christmas   band --evergreen, heading and accent --gold
     both        background --cream, text --night

   Spacing can be overridden from a parent with these variables:
     --split-pad-top (4rem)   --split-pad-bottom (8rem, 4rem on mobile)
     --split-band-overlap (how far the band reaches below the top padding)
     --split-max-width (75rem)   --split-gutter (2.5rem, 1rem on mobile)
   ------------------------------------------------------------------------- */
:host {
  display: block;
}

.SpplO8o701ZmtlWywwX7 {
  container: split / inline-size;
  width: 100%;
}

._EtFXplMO2StzAhAOLAO {
  --bg: var(--cream, #f6f7f2);
  --text: var(--night, #24313c);
  --band: var(--navy, #3b5158);
  --heading: var(--navy, #3b5158);
  --accent: var(--soil, #966844);
  --pad-top: var(--split-pad-top, 4rem);
  --pad-bottom: var(--split-pad-bottom, 8rem);
  --band-overlap: var(--split-band-overlap, 5.5rem);
  --gutter: var(--split-gutter, 2.5rem);
  --gap: 5rem;

  position: relative;
  box-sizing: border-box;
  padding: var(--pad-top) 0 var(--pad-bottom);
  background-color: var(--bg);
  color: var(--text);
}

._EtFXplMO2StzAhAOLAO[data-style='christmas'] {
  --band: var(--evergreen, #1f3d2f);
  --heading: var(--gold, #c9a14a);
  --accent: var(--gold, #c9a14a);
}

/* Full-width colour band behind the top of the carousel. */
.Xo8AyPjD3pXv4jFVE3sZ {
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--pad-top) + var(--band-overlap));
  background-color: var(--band);
}

.ueKKHh8WPSwZmn1smS8g {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: center;
  width: min(100% - 2 * var(--gutter), var(--split-max-width, 75rem));
  margin-inline: auto;
}

._EtFXplMO2StzAhAOLAO[data-media='right'] .k1N5UYGTGC6fdUMOReRl {
  order: 2;
}

.k1N5UYGTGC6fdUMOReRl {
  min-width: 0;
}

.whR66s_R7Haqmb3ViApi {
  min-width: 0;
}

/* With the band on, the carousel stays at the top so the band always sits
   behind it, and equal padding keeps the text centred on the carousel while
   starting below the band, even when the text is taller than the carousel. */
._EtFXplMO2StzAhAOLAO[data-band] .k1N5UYGTGC6fdUMOReRl {
  align-self: start;
}

._EtFXplMO2StzAhAOLAO[data-band] .whR66s_R7Haqmb3ViApi {
  padding-block: calc(var(--band-overlap) + 1rem);
}

.rDEpKhArk1t9gkLJ0myU {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text);
}

.qmwwFT7Jw8hOe0rl6cLd {
  margin: 0;
  font-family: inherit;
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--heading);
}

.wCfuype1pXuHFX2OinvF {
  font-weight: 300;
  color: var(--accent);
}

.oK4hY2kajm239ibUMv9t {
  height: 0;
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
}

.SoWfl8735VcaU2V2pq0c {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--text);
}

.SoWfl8735VcaU2V2pq0c > :first-child {
  margin-top: 0;
}

.SoWfl8735VcaU2V2pq0c > :last-child {
  margin-bottom: 0;
}

.qtdKMMMwuIrQlYY_QlUv {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

/* Tablet: same two-column layout, scaled down to fit. */
@container split (max-width: 991px) {
  ._EtFXplMO2StzAhAOLAO {
    --gap: 3rem;
  }

  .qmwwFT7Jw8hOe0rl6cLd {
    font-size: 2.5rem;
  }

  .SoWfl8735VcaU2V2pq0c {
    font-size: 1.125rem;
  }
}

/* Mobile: one column, carousel first whichever side it is on desktop. */
@container split (max-width: 767px) {
  ._EtFXplMO2StzAhAOLAO {
    --pad-bottom: var(--split-pad-bottom, 4rem);
    --band-overlap: var(--split-band-overlap, 4rem);
    --gutter: var(--split-gutter, 1rem);
    --gap: 2.5rem;
  }

  .ueKKHh8WPSwZmn1smS8g {
    grid-template-columns: minmax(0, 1fr);
  }

  ._EtFXplMO2StzAhAOLAO[data-media='right'] .k1N5UYGTGC6fdUMOReRl {
    order: 0;
  }

  ._EtFXplMO2StzAhAOLAO[data-band] .whR66s_R7Haqmb3ViApi {
    padding-block: 0;
  }

  .qmwwFT7Jw8hOe0rl6cLd {
    font-size: 2.25rem;
  }

  .SoWfl8735VcaU2V2pq0c {
    font-size: 1rem;
    line-height: 1.5;
  }
}