/* Narrow-screen repairs for the supplied V2 service pages.
   Load after the exported styles. Desktop compositions remain unchanged.
   ID-scoped structural selectors follow the new sections in the V2 export;
   they do not depend on generated classes replacing the original inline CSS. */

@media (max-width: 1100px) {
  :is(.page-services, .page-website-services, .page-branding-graphics,
      .page-social-media, .page-marketing, .page-managed-it, .page-ai-automation)
      :is(.svc-card, .ws-hero-copy, .bg-hero-copy, .sm-hero-copy,
          .sd-hero-copy, .sd-dashboard-head > div, .marketing-channel > *) {
    min-width: 0;
  }

  :is(.page-marketing, .page-managed-it, .page-ai-automation)
      .sd-dashboard-head {
    flex-wrap: wrap;
  }

  :is(.page-marketing, .page-managed-it, .page-ai-automation)
      :is(.sd-demo-label, .sd-ui-note strong, .sd-ui-note span,
          .marketing-stats strong, .marketing-stats span,
          .marketing-channel strong, .marketing-channel span) {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 600px) {
  /* The new service sections used an independent desktop-only page shell. */
  :is(#website-packages, #what-we-design, #what-we-deliver, #what-we-run,
      #what-we-manage, #what-we-connect) > div {
    width: 89%;
  }

  :is(.page-services, .page-website-services, .page-branding-graphics,
      .page-social-media, .page-marketing, .page-managed-it, .page-ai-automation)
      :is(.ws-actions, .sd-actions, .bg-actions, .sm-actions) .button {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  .page-services .svc-card-action {
    gap: 14px;
  }

  .page-services .svc-card-action > span {
    min-width: 0;
  }

  .page-services .svc-card-action > :last-child {
    flex-shrink: 0;
  }

  /* Preserve the accordion's icon/title/plus hierarchy while giving the
     expanded chips the full width, rather than the desktop 78px indent. */
  #what-we-design details > div {
    padding-left: 0;
  }

  #what-we-design .sub-chip {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #what-we-design .acc-sum > span:nth-child(2) {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Fully managed package and its nested price panel. */
  #website-packages > div > article {
    padding: 28px 24px;
    gap: 28px;
  }

  #website-packages > div > article > div:last-child {
    padding: 24px 20px;
  }

  #website-packages > div > div:last-child > article {
    padding: 28px 24px;
  }

  #website-packages .button {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  /* Social cards contain deliberately long hashtags. */
  #what-we-deliver article p {
    overflow-wrap: anywhere;
  }

  #what-we-deliver article > div:first-child > span {
    flex-shrink: 0;
  }

  /* The mock workflow is illustrative text, not a fixed-width terminal. */
  #what-we-connect > div > div:nth-child(2) > div:first-child > div {
    min-width: 0;
    max-width: 100%;
  }

  #what-we-connect > div > div:nth-child(2) > div:first-child > div > div:first-child {
    flex-wrap: wrap;
  }

  #what-we-connect > div > div:nth-child(2) > div:first-child > div > div:first-child > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #what-we-connect > div > div:nth-child(2) > div:first-child > div > div:first-child > span:nth-child(-n+3) {
    flex-shrink: 0;
  }

  #what-we-connect > div > div:nth-child(2) > div:first-child > div > div:first-child > span:nth-child(4) {
    flex: 1 1 140px;
  }

  #what-we-connect > div > div:nth-child(2) > div:first-child > div > div:last-child {
    padding: 20px 18px 24px;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 480px) {
  #what-we-design .acc-sum > span:first-child {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  #what-we-design .acc-plus {
    width: 36px;
    height: 36px;
  }

  /* Platform comparison labels and values stack instead of squeezing
     into two unreadably narrow columns. */
  #website-packages dl > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  #website-packages dd {
    text-align: left;
    overflow-wrap: anywhere;
  }

  #website-packages > div > div:last-child > article > div:first-child {
    flex-wrap: wrap;
  }

  #website-packages > div > div:last-child > article > div:first-child > div {
    justify-content: flex-start;
  }

  /* Keep the small promotional labels inside the mobile artwork gutter. */
  #what-we-run > div > div:nth-child(2) > div:first-child {
    padding-inline: 16px;
  }

  #what-we-run > div > div:nth-child(2) > div:first-child > div > span:first-of-type {
    right: -8px;
  }

  #what-we-run > div > div:nth-child(2) > div:first-child > div > span:last-of-type {
    left: -10px;
  }

  #what-we-manage > div > div:nth-child(2) > div > div {
    padding: 16px 14px;
    gap: 10px;
    overflow-wrap: anywhere;
  }

  .page-branding-graphics .bg-hero-card strong {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 480px) {
  :is(#v2-specificity,.dc-page) .v2-6b1c5ee865, :is(#v2-specificity,.dc-page) .v2-1a6075e44c { flex-direction: column; gap: 4px; }
  :is(#v2-specificity,.dc-page) .v2-b21bddd35e { text-align: left; }
}