/* Strategy landing page responsive */

/* Light separator between strategy sections on mobile */
@media (width < 48rem) {
  section[data-bg="second"] + section[data-bg="second"] {
    position: relative;

    &::before {
      content: '';
      display: block;
      width: 60%;
      height: 1px;
      background: linear-gradient(to right, transparent, #d1d5db, transparent);
      margin: 0 auto;
      position: absolute;
      top: 0;
      left: 20%;
    }
  }
}

/* Prevent title overflow on small screens */
[data-layout="ecosystem-crypto"] h2 {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Ecosystem crypto icons-only variant (data-align="left") */
/* Override the global ecosystem-crypto mobile grid which is designed for name+icon pairs */
[data-layout="ecosystem-crypto"][data-align="left"] {
  /* On all screens: simple flex layout, not the complex grid */
  @media (width < 75rem) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-md);
    padding: calc(var(--padding-section-block) * 0.67) var(--padding-section-inline);

    @media (width < 48rem) {
      padding-inline: calc(var(--padding-section-inline) / 2);
    }

    @media (width < 25rem) {
      padding-inline: 1rem;
    }
  }

  /* Icons container: flex-wrap grid of icons, evenly distributed */
  & > div:has(img) {
    flex-wrap: wrap;
    gap: var(--gap-md);
    justify-content: flex-start;

    @media (width < 75rem) {
      display: flex;
      justify-content: center;
      gap: 1rem;
    }
  }

  /* Button container: centered */
  & > div:last-child {
    @media (width < 75rem) {
      justify-content: center;
      margin-top: var(--gap-md);
    }
  }
}

/* Performance table - tighter on mobile */
.performance-table.strategy-table {
  /* Prevent perf cells from wrapping (arrow + percentage must stay on same line) */
  td > div, th > div {
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }

  /* Align arrows consistently across rows */
  td:not(:first-child) {
    width: 6rem;
  }

  td:not(:first-child) > div {
    justify-content: flex-end;
  }

  td:not(:first-child) p {
    font-variant-numeric: tabular-nums;
  }

  @media (width < 48rem) {
    border-spacing: var(--gap-xs);
    --font-size: 0.75rem;

    th, td {
      padding-inline: 0.25rem;
    }

    td:first-child a {
      word-break: break-word;
    }

    img {
      width: 20px !important;
      height: 20px !important;
    }
  }
}

/* Center comparator CTA button on mobile */
[data-layout="col"] > div:has(a[role="button"]) {
  @media (width < 64rem) {
    display: flex;
    justify-content: center;
  }
}

/* Stack footer note and date on mobile */
.performance-table + div[data-layout="two-col"] {
  @media (width < 48rem) {
    gap: var(--gap-xs);

    p[data-layout="row"] {
      justify-content: flex-start;
    }
  }
}