/* ================================================================
   Sync Inn Digital — Why Us Section
   Per-page content via WP meta. Home page only.

   Layout:
     Header — label + heading + description  (top padding here)
     Cards  — horizontal accordion, up to 6 cards
              Active card expands; inactive cards are narrow with
              vertically-rotated title.

   Card accordion technique:
     All cards share flex-basis: 170px.
     The active card uses flex-basis: 600px + flex-grow: 1.
     CSS transitions flex-basis for a smooth expand/collapse.

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

/* ── Section wrapper — no top/bottom padding ─────────────────── */

.sid-wu {
  background-color: var(--sid-light-grayish-blue-bg, #F5F6FA);
  padding: 0;
}

/* ── Constrained inner ───────────────────────────────────────── */

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

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

.sid-wu__header {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 50px;
}

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

.sid-wu__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-wu__heading-muted {
  color: #7E7E81;
}

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

.sid-wu__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;
  max-width: 50%;
}

/* ── Card icon — only visible in mobile accordion ────────────── */

.sid-wu__card-icon {
  display: none;
}

/* ── Cards row ───────────────────────────────────────────────── */

.sid-wu__cards {
  display: flex;
  gap: 16px;
  align-items: stretch;
  overflow: hidden;
}

/* ── Single card ─────────────────────────────────────────────── */

/*
 * Percentage-based flex layout:
 *   Active card  → flex-grow: 2  ≈ 40 % of total width (with 4 cards: 2/(2+1+1+1) = 40%)
 *   Inactive cards → flex-grow: 1  each, share the remaining ~60 %
 *
 * flex-basis: 0 ensures all sizing comes from flex-grow ratios,
 * preventing any card from being clipped regardless of card count.
 */
.sid-wu__card {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  min-height: 450px;
  cursor: pointer;
  overflow: hidden;
  background-color: var(--sid-grey, #808080);
  transition: flex-grow 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.35s ease;
}

/* Active (expanded) card — ~40 % width */
.sid-wu__card--active {
  flex: 3 1 0;
  cursor: default;
  background-color: var(--sid-primary-blue, #4f9cf9);
}

/* ── Card top row: number + toggle button ────────────────────── */

.sid-wu__card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  margin-bottom: 20px;
}

/* ── Card number: 01, 02 … ───────────────────────────────────── */

.sid-wu__card-num {
  font-family: 'Poppins', var(--sid-font-heading, sans-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--sid-black, #000);
  line-height: 1;
  transition: color 0.3s ease;
}

.sid-wu__card--active .sid-wu__card-num {
  color: var(--sid-white, #fff);
}

/* ── Toggle button (+ on inactive, → on active) ──────────────── */

.sid-wu__card-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #D1D5DB;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* "+" icon on inactive cards */
.sid-wu__card:not(.sid-wu__card--active) .sid-wu__card-btn::after {
  content: '+';
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  color: #9CA3AF;
}

/* Orange arrow button on active card */
.sid-wu__card--active .sid-wu__card-btn {
  background-color: var(--sid-orange, #f97316);
  border-color: var(--sid-orange, #f97316);
}

.sid-wu__card--active .sid-wu__card-btn::after {
  content: '';
  display: block;
  width: 18px;
  height: 16px;
  background-color: var(--sid-white, #fff);
  -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;
}

/* ── Card content area ───────────────────────────────────────── */

.sid-wu__card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Inactive: rotated title aligned to the left (bottom of rotation = left edge) */
.sid-wu__card:not(.sid-wu__card--active) .sid-wu__card-content {
  align-items: flex-start;
  justify-content: flex-end;
}

/* Active: title + desc pushed to bottom */
.sid-wu__card--active .sid-wu__card-content {
  justify-content: flex-end;
}

/* ── Card title ───────────────────────────────────────────────── */

.sid-wu__card-title {
  font-family: 'Poppins', var(--sid-font-heading, sans-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--sid-black, #000);
  margin: 0 0 14px;
  transition: color 0.3s ease;
}

.sid-wu__card--active .sid-wu__card-title {
  color: var(--sid-white, #fff);
  margin-bottom: 16px;
}

/* Rotate title text on inactive/collapsed cards */
.sid-wu__card:not(.sid-wu__card--active) .sid-wu__card-title {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 280px;
  font-size: 20px;
  color: var(--sid-black, #000);
  margin: 0;
}

/* ── Card description ────────────────────────────────────────── */

.sid-wu__card-desc {
  font-family: 'Nunito', var(--sid-font-body, sans-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--sid-white, #fff);
  margin: 0;
  opacity: 0;
  transition: opacity 0.25s ease 0.15s; /* fade in after card expands */
}

/* Hide desc entirely on inactive */
.sid-wu__card:not(.sid-wu__card--active) .sid-wu__card-desc {
  display: none;
}

/* Fade in desc on active */
.sid-wu__card--active .sid-wu__card-desc {
  opacity: 1;
}

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

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

  .sid-wu__card-title {
    font-size: 20px;
  }
}

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

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

  .sid-wu__card {
    padding: 22px 18px;
    min-height: 360px;
  }

  .sid-wu__card-title {
    font-size: 18px;
  }

  .sid-wu__card-desc {
    font-size: 17px;
  }
}

@media (max-width: 767px) {
  .sid-wu__header {
    padding-top: 0;
    padding-bottom: 0;
  }

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

  .sid-wu__desc {
    font-size: 17px;
  }

  /* Cards: vertical accordion list */
  .sid-wu__cards {
    flex-direction: column;
    gap: 0;
    padding-bottom: 60px;
    overflow: visible;
  }

  /* Each card: 3-column grid — icon | title | toggle */
  .sid-wu__card {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    column-gap: 14px;
    align-items: center;
    flex-basis: auto;
    flex-grow: 0;
    min-height: 0;
    padding: 18px 0;
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    overflow: visible;
    transition: none;
  }

  .sid-wu__card:last-child {
    border-bottom: none;
  }

  .sid-wu__card--active {
    flex-basis: auto;
    min-height: 0;
    background: transparent;
  }

  /* Icon: col 1, row 1 */
  .sid-wu__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 1;
    grid-row: 1;
  }

  .sid-wu__card-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
  }

  /* Card-top: col 3, row 1 — toggle button only */
  .sid-wu__card-top {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 0;
  }

  .sid-wu__card-num {
    display: none;
  }

  /* Content: dissolve into parent grid so title/desc sit in grid cells */
  .sid-wu__card-content {
    display: contents;
  }

  /* Title: col 2, row 1 — override all writing-mode variants */
  .sid-wu__card-title,
  .sid-wu__card--active .sid-wu__card-title,
  .sid-wu__card:not(.sid-wu__card--active) .sid-wu__card-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 20px;
    font-weight: 600;
    color: var(--sid-black, #000);
    margin: 0;
    writing-mode: horizontal-tb;
    transform: none;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-height: none;
    align-self: center;
  }

  /* Description: full width, row 2 */
  .sid-wu__card-desc {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 16px;
    font-weight: 400;
    color: var(--sid-black, #000);
    line-height: 1.5;
    padding-top: 10px;
    opacity: 1;
    transition: none;
  }

  .sid-wu__card:not(.sid-wu__card--active) .sid-wu__card-desc {
    display: none;
  }

  .sid-wu__card--active .sid-wu__card-desc {
    display: block;
    opacity: 1;
  }

  /* Inactive: muted grey title and icon */
  .sid-wu__card:not(.sid-wu__card--active) .sid-wu__card-title {
    color: #7E7E81;
  }

  .sid-wu__card:not(.sid-wu__card--active) .sid-wu__card-icon img {
    filter: brightness(0) opacity(0.45); /* renders icon in #7E7E81-ish grey */
  }

  /* Toggle button: no circle — bare chevron only */
  .sid-wu__card-btn {
    width: auto;
    height: auto;
    border: none;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
  }

  /* Override desktop orange active-button state */
  .sid-wu__card--active .sid-wu__card-btn {
    background-color: transparent;
    border-color: transparent;
  }

  /* Chevron down — collapsed (grey) */
  .sid-wu__card:not(.sid-wu__card--active) .sid-wu__card-btn::after {
    content: '';
    display: block;
    width: 9px;
    height: 9px;
    border-right: 2px solid #7E7E81;
    border-bottom: 2px solid #7E7E81;
    transform: rotate(45deg);
    margin-top: -4px;
    background-color: transparent;
    -webkit-mask-image: none;
            mask-image: none;
    font-size: 0;
    color: transparent;
  }

  /* Chevron up — expanded (black) */
  .sid-wu__card--active .sid-wu__card-btn::after {
    content: '';
    display: block;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--sid-black, #000);
    border-bottom: 2px solid var(--sid-black, #000);
    transform: rotate(-135deg);
    margin-bottom: -4px;
    background-color: transparent;
    -webkit-mask-image: none;
            mask-image: none;
    -webkit-mask-size: unset;
            mask-size: unset;
  }
}

@media (max-width: 479px) {
  .sid-wu__heading {
    font-size: 30px;
    line-height: 30px;
  }

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