/* ============================================================================
   SECTOR STORY — MOBILE (max-width: 760px only). Desktop is untouched.

   The story opened by a sector card ("Solutions that fit your business").
   On a phone it was 883px tall on a 760px screen, with the photo pushed below
   the fold under two full-width buttons, and its body copy ran off the right
   edge: section3-editorial.css sets `.scene__card--editorial .scene__text` to
   max-width 460px, which outranked the mobile rule that asked for 100%.

   The phone layout here fits one screen:
     1. back link + sector pills, compact
     2. the photo, first, so it is always visible
     3. label, title, body, chips
     4. the two buttons, small and side by side
     5. dots + arrows on one row
   Swiping sideways changes the part of the story (story-mobile.js).
   ============================================================================ */
@media (max-width: 760px) {
  .bts.is-engaged {
    padding-top: 4.4rem;
    padding-bottom: 1.25rem;
  }
  .story__stage {
    padding: 0.5rem 14px 0.75rem;
  }

  /* ---------------------------------------------------------- 1. top bar */
  .story__top-bar {
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
  }
  .story__all {
    font-size: 0.74rem;
    padding: 5px 11px;
  }
  .minis {
    gap: 6px;
    padding-bottom: 2px;
  }
  .minis .card {
    height: 36px;
    min-width: 0;
    padding: 3px 10px 3px 4px;
    gap: 6px;
  }
  .minis .card .card__thumb {
    width: 26px;
    height: 26px;
  }
  .minis .card .card__label {
    font-size: 0.74rem;
  }

  /* ------------------------------------------------- 2-4. one story part */
  .slider {
    touch-action: pan-y;            /* sideways swipes go to story-mobile.js */
  }
  .scene__card,
  .scene__card--editorial {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .scene__visual--editorial {
    order: 1;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
  }
  .scene__visual--editorial .scene__photo {
    border-radius: 12px;
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.8);
  }
  /* The blurred oversized copy behind each photo: a 40px blur on a second
     full image, invisible at this size and expensive on a phone. */
  .scene__visual--editorial .scene__photo-bg {
    display: none;
  }
  .scene__card--editorial .scene__text,
  .scene__text {
    order: 2;
    max-width: 100%;               /* the fix for the copy running off screen */
    width: 100%;
  }

  .editorial-meta {
    font-size: 0.64rem;
    gap: 6px;
    margin-bottom: 3px;
  }
  .scene__kicker {
    font-size: 0.66rem;
    margin: 0 0 5px;
  }
  .scene h2 {
    font-size: clamp(1.18rem, 5.4vw, 1.4rem);
    line-height: 1.16;
    margin-bottom: 6px;
  }
  .scene__body,
  .scene__pref {
    font-size: 0.875rem;
    line-height: 1.46;
    margin: 0 0 8px;
  }
  .scene__chips {
    gap: 5px;
    margin: 0 0 8px;
  }
  .scene__chips li {
    font-size: 0.68rem;
    padding: 0.2rem 0.55rem;
  }
  .scene__note {
    margin: 0 0 8px;
    padding: 0.5rem 0.7rem;
    font-size: 0.76rem;
  }

  /* Buttons: half the height they had, side by side. */
  .story .cta__row,
  .story .cta__row--compact {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    margin-top: 6px;
  }
  .story .cta__row .btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 7px 10px;
    justify-content: center;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.2;
    white-space: normal;
  }
  .cta__support {
    font-size: 0.66rem;
    margin-top: 6px;
  }

  /* ------------------------------------------------------- 5. bottom bar */
  .story__bottom-bar {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    margin-top: 10px;
    padding-top: 8px;
    padding-right: 84px;           /* the chat launcher sits bottom-right */
  }
  /* Arrows on the left, dots after them: the right corner belongs to the chat
     launcher, which was covering the next button. */
  .story__deck-nav { order: -1; }
  .story__dots {
    gap: 7px;
  }
  .story__deck-nav {
    gap: 6px;
    padding: 3px 6px;
  }
  .deck-btn {
    width: 40px;                   /* was 32px: too small to hit reliably */
    height: 40px;
  }

  /* A part change is a short sideways move in the direction of the swipe,
     instead of a 0.45s rise from below. */
  .scene.is-active {
    animation: storyPartIn 0.18s ease-out both;
  }
  .slider[data-dir="prev"] .scene.is-active {
    animation-name: storyPartInPrev;
  }
  @keyframes storyPartIn {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes storyPartInPrev {
    from { opacity: 0; transform: translateX(-18px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .scene.is-active { animation: none; }
}