/* ==========================================================================
   Acquisitions Grid — design/whoweare.pen  node: fBAk5
   All dimensions in REM (base 16 px). No pixel values.

   Desktop/tablet: 3 independent flex columns so hovering one card only
   affects that column; other columns stay completely still.
   Mobile: full-width scroll-snap slider with dot pagination.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
.sg-acquisitions {
  --sg-blue:           #23479b;
  --sg-gold:           #f7b93a;
  --sg-gold-light:     rgba(247, 185, 58, 0.10);
  --sg-dark:           #23272e;
  --sg-body:           #555555;
  --sg-divider:        #e4e7ea;
  --sg-card-bg:        #ffffff;

  --sg-card-radius:    0.625rem;
  --sg-card-shadow:    0 4.25rem 1.25rem -3.5rem rgba(0, 0, 0, 0.18);
  --sg-border-top:     0.125rem solid var(--sg-gold);

  --sg-pad-y:          0.75rem;
  --sg-pad-x:          1rem;
  --sg-gap-col:        2rem;      /* gap between columns */
  --sg-gap-card:       2rem;      /* gap between cards within a column */

  --sg-desc-transition: max-height 0.35s ease, opacity 0.35s ease, padding-top 0.35s ease;
  --sg-desc-max-height: 12.5rem;

  --sg-dot-size:       0.5rem;
  --sg-dot-gap:        0.5rem;
  --sg-dot-active:     #ffffff;
  --sg-dot-inactive:   rgba(255, 255, 255, 0.4);

  /* Logo band height: 3.125rem (= 50px at 16px root); beats Elementor img { height: auto }. */
  --sg-logo-height: 3.125rem;
}


/* --------------------------------------------------------------------------
   Section wrapper
   -------------------------------------------------------------------------- */
.sg-acquisitions {
  width: 100%;
}


/* --------------------------------------------------------------------------
   DESKTOP / TABLET — 3 independent flex columns
   -------------------------------------------------------------------------- */

/* Outer row: hides the mobile slider track on desktop */
.sg-acquisitions__grid--cols {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sg-gap-col);
  width: 100%;
  box-sizing: border-box;
}

/* Mobile slider is hidden on desktop/tablet */
.sg-acquisitions__grid--slider {
  display: none;
}

/* Dots hidden on desktop/tablet */
.sg-acquisitions__dots {
  display: none;
}

/* Each independent column */
.sg-acq-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sg-gap-card);
}

/* Tablet ≤ 63.9375 rem (1023 px): tighten the column gap */
@media (max-width: 63.9375rem) {
  .sg-acquisitions__grid--cols {
    gap: 1rem;
  }

  .sg-acq-col {
    gap: 1rem;
  }
}


/* --------------------------------------------------------------------------
   Card shell
   -------------------------------------------------------------------------- */
.sg-acq-card {
  background-color: var(--sg-card-bg);
  border-radius: var(--sg-card-radius);
  border-top: var(--sg-border-top);
  box-shadow: var(--sg-card-shadow);
  overflow: hidden;
  cursor: default;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Mouse / stylus — hover to lift */
@media (hover: hover) and (pointer: fine) {
  .sg-acq-card:hover {
    box-shadow: 0 1.5rem 2.5rem -0.75rem rgba(0, 0, 0, 0.15);
    transform: translateY(-0.125rem);
  }
}

/* Touch — tap to lift (JS toggles .is-open) */
@media (hover: none) {
  .sg-acq-card.is-open {
    box-shadow: 0 1.5rem 2.5rem -0.75rem rgba(0, 0, 0, 0.15);
  }
}

.sg-acq-card__inner {
  padding: var(--sg-pad-y) var(--sg-pad-x);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-height: 0;
}


/* --------------------------------------------------------------------------
   Year
   -------------------------------------------------------------------------- */
.sg-acq-card__header {
  display: flex;
  align-items: center;
}

.sg-acq-card__year {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sg-blue);
}



/* --------------------------------------------------------------------------
   Divider
   -------------------------------------------------------------------------- */
.sg-acq-card__divider {
  border: none;
  border-top: 0.0625rem solid var(--sg-divider);
  margin: 0;
}


/* --------------------------------------------------------------------------
   Company identity row
   -------------------------------------------------------------------------- */
.sg-acq-card__company {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
}

.sg-acq-card__icon {
  width: 100%;
  margin-inline: 0;
  min-height: 0;
  border-radius: 0;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.sg-acquisitions img.sg-acq-card__logo,
.sg-acquisitions svg.sg-acq-card__logo-fallback {
  display: block;
  width: 100%;
  height: var(--sg-logo-height);
  max-height: var(--sg-logo-height);
  min-height: var(--sg-logo-height);
  box-sizing: border-box;
  object-fit: contain;
  object-position: left center;
}


/* --------------------------------------------------------------------------
   Description — hidden by default; slides down on hover (desktop/tablet)
   -------------------------------------------------------------------------- */
.sg-acq-card__desc {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  transition: var(--sg-desc-transition);
}
.sg-acq-card__desc-text {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1.125rem;
  font-weight: normal;
  line-height: 1.4;
  color: var(--sg-body);
}

/* Phone + iPad (≤1024px): slightly smaller description copy */
@media (max-width: 64rem) {
  .sg-acquisitions .sg-acq-card__desc-text {
    font-size: 1rem;
  }
}

/* Mouse / stylus — hover to reveal description */
@media (hover: hover) and (pointer: fine) {
  .sg-acq-card:hover .sg-acq-card__desc,
  .sg-acq-card:focus-within .sg-acq-card__desc {
    max-height: var(--sg-desc-max-height);
    opacity: 1;
    padding-top: 0.25rem;
  }
}

/* Touch — tap to reveal description (JS toggles .is-open) */
@media (hover: none) {
  .sg-acq-card.is-open .sg-acq-card__desc {
    max-height: var(--sg-desc-max-height);
    opacity: 1;
    padding-top: 0.25rem;
  }
}


/* --------------------------------------------------------------------------
   Focus ring
   -------------------------------------------------------------------------- */
.sg-acq-card:focus-visible {
  outline: 0.1875rem solid var(--sg-blue);
  outline-offset: 0.125rem;
}


/* --------------------------------------------------------------------------
   Dot button base resets — scoped for specificity over global button rules
   -------------------------------------------------------------------------- */
.sg-acquisitions .sg-acquisitions__dot {
  display: inline-block;
  width: var(--sg-dot-size);
  height: var(--sg-dot-size);
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background-color: var(--sg-dot-inactive);
  flex-shrink: 0;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.sg-acquisitions .sg-acquisitions__dot.is-active {
  background-color: var(--sg-dot-active);
  transform: scale(1.35);
}


/* --------------------------------------------------------------------------
   MOBILE ≤ 47.9375 rem (767 px) — scroll-snap slider
   Must come LAST so overrides win the cascade.
   -------------------------------------------------------------------------- */
     @media (min-width: 2000px) {
   .sg-acquisitions {
    width: 80%;
    margin: 0px auto;
}
  }
@media (max-width: 1024px) {

  /* Tighten inner tokens; bottom spacing so slider + dots clear viewport / home indicator */
  .sg-acquisitions {
    --sg-pad-y:      0.625rem;  /* 10 px */
    --sg-pad-x:      0.875rem;  /* 14 px */
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }

  /* Tight inner gap; flex column so description can absorb stretch height */
  .sg-acq-card__inner {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem; /* 5 px */
  }

  /* Hide column grid, show slider track */
  .sg-acquisitions__grid--cols {
    display: none;
  }

  .sg-acquisitions__grid--slider {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* all cards same height for visual consistency */
    gap: 1rem;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
    /* Bleed past the Elementor container's horizontal padding (1 rem each side)
       so the next card can peek from the right edge of the viewport. */
    margin-inline: -1rem;
    width: calc(100% + 2rem);
    padding-inline-start: 1rem;
    padding-inline-end: 0.5rem;
    scroll-padding-inline-start: 1rem;
    box-sizing: border-box;
  }

  .sg-acquisitions__grid--slider::-webkit-scrollbar {
    display: none;
  }

  /* Each card = 320 px (design spec) — next card peeks ~23 px on the right */
  .sg-acquisitions__grid--slider .sg-acq-card {
    flex: 0 0 20rem;
    width: 20rem;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-bottom: var(--sg-border-top);
  }

  /* Description: fully visible, no clip.
     flex:1 lets it absorb any extra height when shorter cards stretch
     to match a taller sibling — keeps whitespace inside the description
     area rather than leaving a blank gap below all content. */
  .sg-acq-card__desc {
    flex: 1;
    max-height: none;
    overflow: hidden;
    opacity: 1;
    padding-top: 0.25rem;
  }

  /* Dot pagination: inset from side edges (notch / rounded screens) */
  .sg-acquisitions__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sg-dot-gap);
    margin-top: 2rem;
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }

  /* Dot sizing/colours are already set in the base block above;
     nothing additional needed here for mobile. */
}