/* Copied from storetasker-website/web/public/css/pages/case-studies.css by tools/redesign/import-base.mjs.
   Element-level rules skip .st-legacy areas (old page bodies, hire panel); nothing else changed. */
/* case-studies: custom CSS from the Webflow page embeds, in original order. */
  /* Logo Marquee CSS */
.logo-marquee_track {
  display: flex;
  width: max-content;
}

.logo_wrapper {
  overflow: hidden; /* clips marquee to wrapper bounds */
  width: 100%;
}

.logo-marquee_set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  animation: logo-marquee-scroll linear infinite;
  animation-play-state: paused;
}

@keyframes logo-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

  /* Stack all grid panels on top of each other */

  .cust-grid_list .cust-grid_item {
    grid-row: 1;
    grid-column: 1;
  }

  /* Always keep nav above the slides */

  .cust-grid-nav_wrapper {
    z-index: 10;
  }

  /* Nav: inactive links dimmed, no gap */

  .cust-grid-nav_item .feat-stories_link {
    opacity: 0.55;
    gap: 0;
    transition:
      opacity 0.3s ease,
      gap 0.4s ease;
  }

  .cust-grid-nav_item.is-active .feat-stories_link {
    opacity: 1;
    gap: 1em;
  }

  /* Fix logo to its natural size — no stretching or shrinking */

  .feat-stories_link img:where(:not(.st-legacy, .st-legacy *)) {
    width: auto;
    max-width: none;
    flex-shrink: 0;
  }

  /* Collapse "x" and expert details on inactive nav items */

  .cust-grid-nav_item .feat-stories_link .times,
  .cust-grid-nav_item .feat-stories_link .div-block-30 {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transform: translateX(-6px);
    transition:
      opacity 0.5s ease,
      max-width 0.5s ease,
      transform 0.5s ease;

    pointer-events: none;
  }

  /* Expand them on the active nav item */

  .cust-grid-nav_item.is-active .feat-stories_link .times,
  .cust-grid-nav_item.is-active .feat-stories_link .div-block-30 {
    opacity: 1;
    max-width: 300px;
    transform: translateX(0px);
    pointer-events: auto;
  }

  /* ── Mobile: make nav horizontally swipeable ── */

  @media screen and (max-width: 767px) {
    .cust-grid-nav_wrapper {
      left: 0;
      right: 0;
      inset-inline: 0;
      overflow: hidden;
    }

    .cust-grid-nav_list {
      overflow-x: auto;
      overflow-y: visible;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      scrollbar-width: none;
      flex-wrap: nowrap;
      padding-right: 2em;
    }

    .cust-grid-nav_list::-webkit-scrollbar {
      display: none;
    }
  }

/* Fix (not in the Webflow original): the two story cards of a pair (.double-wrapper) sit in one grid row as tall as
   the taller card. Stretch the shorter card to that height too, so the grey background behind the pair does not show
   under it (e.g. a one-line title next to a two-line one). No effect when both cards are as tall, or when they stack. */
.double-wrapper .cs-blogs_list,
.double-wrapper .cs-blogs_item {
  height: 100%;
}