/* ================================================================
   Sync Inn Digital — The Growth Journey Section
   Per-page content via WP meta.  Home page only.

   Layout:
     Top   — label + heading + description (constrained wrap)
     Below — funnel SVG (left, bleeds off screen) + 4 journey rows

   Fonts specified by client:
     Row name   — Poppins 28px 700
     Row desc   — Nunito 20px 400
     Service links — Poppins 20px 500

   All colours use var(--sid-*) global CSS custom properties.
   ================================================================ */

/* ── Section wrapper ─────────────────────────────────────────── */

.sid-gj {
  background-color: var(--sid-light-grayish-blue-bg, #F5F6FA);
  width: 100%;
  padding: 0;
  overflow: hidden; /* clips funnel image that bleeds off-screen left */
}

/* ── Constrained inner — header only ─────────────────────────── */

.sid-gj__wrap {
  max-width: var(--sid-site-width, 1400px);
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Header: label + heading + descriptions ──────────────────── */

.sid-gj__header {
  margin-bottom: 60px;
}

/* ── Main heading ────────────────────────────────────────────── */

.sid-gj__heading {
  font-family: 'Poppins', var(--sid-font-heading, sans-serif);
  font-size: 60px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--sid-black, #000);
  margin: 0 0 24px;
  max-width: 70%;
}

.sid-gj__heading-muted {
  color: #7E7E81;
}

/* ── Optional italic tagline ─────────────────────────────────── */

.sid-gj__italic {
  font-family: 'Nunito', var(--sid-font-body, sans-serif);
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
  color: var(--sid-black, #000);
  line-height: 1.5;
  margin: 0 0 14px;
  max-width: 70%;
}

/* ── Description paragraphs ──────────────────────────────────── */

.sid-gj__desc {
  font-family: 'Nunito', var(--sid-font-body, sans-serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--sid-black, #000);
  margin: 0 0 14px;
  max-width: 50%;
}

/* ── Body: funnel column + rows column ───────────────────────── */

/*
 * The body sits inside .sid-gj__wrap (max-width 1400px).
 * The funnel image uses position:absolute anchored to the RIGHT
 * of its 340px column, allowing it to bleed off-screen to the left.
 * .sid-gj { overflow:hidden } clips the bleed cleanly.
 */
.sid-gj__body {
  display: grid;
  grid-template-columns: 340px 1fr;
  align-items: flex-start;
}

.sid-gj__body--no-funnel {
  grid-template-columns: 1fr;
}

/* ── Funnel image ────────────────────────────────────────────── */



/*
 * Image fills the funnel container simply.
 */
.sid-gj__funnel img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Mobile funnel — hidden on desktop, shown at < 1024px ────── */
.sid-gj__funnel-mobile {
  display: none;
}

.sid-gj__funnel-mobile img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Journey rows ────────────────────────────────────────────── */

.sid-gj__rows {
  position: relative; /* stacking context for row ::after lines */
  padding-bottom: 0;
  margin-left: 200px;
}

/* ── Single journey row ──────────────────────────────────────── */

/*
 * 3-column inner grid:
 *   col 1: Row name    — Poppins 28px 700
 *   col 2: Description — Nunito 20px 400
 *   col 3: Service links — Poppins 20px 500
 *
 * --row-color is set inline per row for the bottom border line.
 *
 * The ::after pseudo-element draws the full-width bottom border.
 * left: -9999px makes it extend behind the funnel column to the
 * left; .sid-gj { overflow:hidden } clips it at the section edge.
 */
.sid-gj__row {
  display: grid;
  grid-template-columns: 260px 300px 300px;
  gap: 60px;
  align-items: center;
  position: relative;
}

/* ── Per-row padding (tune each independently) ───────────────── */

/* Row 1: Sync Demand */
.sid-gj__row:nth-child(1) {
  padding: 37px 0;
}

/* Row 2: Sync Revenue */
.sid-gj__row:nth-child(2) {
  padding: 25px 0;
}

/* Row 3: Sync Operations */
.sid-gj__row:nth-child(3) {
  padding: 26px 0;
}

/* Row 4: Sync Scale */
.sid-gj__row:nth-child(4) {
  padding: 8px 0;
}

.sid-gj__row::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -9999px; /* extends behind the funnel; clipped by overflow:hidden on .sid-gj */
  right: 0;
  height: 1px;
  background-color: var(--row-color, rgba(0, 0, 0, 0.1));
}

/* Row name */
.sid-gj__row-name {
  font-family: 'Poppins', var(--sid-font-heading, sans-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--sid-black, #000);
  margin: 0;
}

/* Row description */
.sid-gj__row-desc {
  font-family: 'Nunito', var(--sid-font-body, sans-serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--sid-black, #000);
  margin: 0;
  max-width: 300px;
}

/* Service links column */
.sid-gj__row-services {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Individual service link */
.sid-gj__service-link {
  font-family: 'Poppins', var(--sid-font-heading, sans-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--sid-black, #000);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
  transition: color 0.2s ease;
}

.sid-gj__service-link::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  vertical-align: middle;
  flex-shrink: 0;
  /*
   * mask-image lets background-color: currentColor bleed through the SVG shape.
   * This means the icon automatically inherits the link text colour —
   * black by default and orange on hover — without any extra rules.
   */
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 357.51 307.19'%3E%3Cpath d='M0,159.217c1.443,3.159,2.449,6.509,4.6,9.35,5.4,7.152,12.533,11.02,21.485,11.058,23.253.1,46.508.05,69.762.051q87.9,0,175.8,0H275.4c-13,5.352-21.508,16.054-31,25.5-18.882,18.773-37.621,37.689-56.449,56.516-7.857,7.856-11.242,17.074-7.981,27.94,4.919,16.391,24.984,22.857,38.82,12.684a41.765,41.765,0,0,0,4.764-4.075q62.674-62.622,125.308-125.286c7.925-7.929,10.659-17.228,7.148-28.068a25.53,25.53,0,0,0-6.536-10.169Q285.954,71.207,222.393,7.744c-7.648-7.609-17.06-9.729-27.327-5.834-10.322,3.917-15.653,11.817-16.278,22.636-.458,7.919,2.53,14.841,8.153,20.455q36.527,36.474,73.153,72.849c4.068,4.039,9.067,6.8,14.185,9.87h-3.945q-120.864,0-241.727-.007c-11.46,0-20.637,4.04-26.176,14.581C1.465,144.133.8,146.13,0,148.055Z'/%3E%3C/svg%3E");
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 357.51 307.19'%3E%3Cpath d='M0,159.217c1.443,3.159,2.449,6.509,4.6,9.35,5.4,7.152,12.533,11.02,21.485,11.058,23.253.1,46.508.05,69.762.051q87.9,0,175.8,0H275.4c-13,5.352-21.508,16.054-31,25.5-18.882,18.773-37.621,37.689-56.449,56.516-7.857,7.856-11.242,17.074-7.981,27.94,4.919,16.391,24.984,22.857,38.82,12.684a41.765,41.765,0,0,0,4.764-4.075q62.674-62.622,125.308-125.286c7.925-7.929,10.659-17.228,7.148-28.068a25.53,25.53,0,0,0-6.536-10.169Q285.954,71.207,222.393,7.744c-7.648-7.609-17.06-9.729-27.327-5.834-10.322,3.917-15.653,11.817-16.278,22.636-.458,7.919,2.53,14.841,8.153,20.455q36.527,36.474,73.153,72.849c4.068,4.039,9.067,6.8,14.185,9.87h-3.945q-120.864,0-241.727-.007c-11.46,0-20.637,4.04-26.176,14.581C1.465,144.133.8,146.13,0,148.055Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  transition: transform 0.2s ease;
}

.sid-gj__service-link:hover {
  color: var(--sid-orange, #f97316);
}

.sid-gj__service-link:hover::after {
  transform: translateX(3px);
}

/* Service items with no URL (plain text, no hover) */
span.sid-gj__service-link {
  cursor: default;
}

span.sid-gj__service-link:hover {
  color: var(--sid-black, #000);
}

span.sid-gj__service-link:hover::after {
  transform: none;
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 1280px) {
  .sid-gj__heading {
    font-size: 52px;
  }

  .sid-gj__row {
    grid-template-columns: 220px 260px 260px;
    gap: 24px;
  }

  .sid-gj__row-name {
    font-size: 24px;
  }
}

@media (max-width: 1023px) {
  .sid-gj__heading {
    font-size: 44px;
    max-width: 100%;
  }

  .sid-gj__desc {
    max-width: 100%;
  }

  .sid-gj__italic {
    max-width: 100%;
  }

  /* Rows take full width; mobile funnel column added when present */
  .sid-gj__body {
    grid-template-columns: 1fr;
    padding: 0 20px;
    align-items: start;
  }

  .sid-gj__body--has-mobile-funnel {
    grid-template-columns: 1fr 120px;
    gap: 20px;
    padding-right: 0; /* funnel bleeds to the right screen edge */
  }

  /* Hide desktop funnel; show mobile version */
  .sid-gj__funnel {
    display: none;
  }

  .sid-gj__funnel-mobile {
    display: flex;
    justify-content: flex-end;
    position: sticky;
    top: 100px;
    overflow: hidden;
  }

  /*
   * Flip row dividers to bleed RIGHT (behind mobile funnel),
   * mirroring the desktop left-bleed technique.
   * .sid-gj { overflow:hidden } clips the bleed at the section edge.
   */
  .sid-gj__body--has-mobile-funnel .sid-gj__row::after {
    left: 0;
    right: -9999px;
  }

  /* Remove desktop left-margin offset */
  .sid-gj__rows {
    margin-left: 0;
  }

  /* Single-column row: name + services only, description hidden */
  .sid-gj__row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 20px 0;
  }

  .sid-gj__row-desc {
    display: none;
  }

  .sid-gj__row-name {
    font-size: 22px;
  }
}

@media (max-width: 767px) {
  .sid-gj {
    padding: 60px 0 0;
  }

  .sid-gj__heading {
    font-size: 34px;
    margin-bottom: 18px;
  }

  .sid-gj__italic,
  .sid-gj__desc {
    font-size: 17px;
    max-width: 100%;
  }

  .sid-gj__rows {
    padding: 0 0 60px; /* body handles horizontal padding */
  }

  /* Narrow mobile funnel on small screens */
  .sid-gj__body--has-mobile-funnel {
    grid-template-columns: 1fr 130px;
    gap: 0px;
    padding-right: 0;
  }

  .sid-gj__row {
    gap: 12px;
    padding: 20px 0;
  }

  .sid-gj__row-name {
    font-size: 20px;
    font-weight: 600;
  }

  .sid-gj__row-desc,
  .sid-gj__service-link {
    font-size: 16px;
    font-weight: 400;
  }
}

@media (max-width: 479px) {
  .sid-gj {
    padding: 48px 0 0;
  }

  .sid-gj__heading {
    font-size: 30px;
    line-height: 30px;
  }

  .sid-gj__desc {
    font-size: 16px;
  }
}