/* =========================================
   Button-style links size to their text
   =========================================
   Applies to button-style links only (a.button: CTAs, "Talk To An Expert", free consultation...).
   Plain text links, navigation, footer and card links don't use .button and are not affected.

   The base .button in style.css has a fixed width (236px) and height (48px), and page stylesheets
   override the width with other fixed values, often with !important (e.g. 287px in
   service-page-common.css). Longer labels then spill out of the pill or wrap outside it.

   The rules sit in a cascade layer: an !important declaration in a layer outranks unlayered
   !important ones, so this one rule wins over the page-specific fixed widths without raising
   selector specificity. Only sizing is changed; colours, borders, backgrounds, typography,
   hover effects and alignment come from the existing styles.
*/
@layer link-width {
  /* Pill buttons: links and <button>s with the .button class */
  a.button,
  button.button {
    width: fit-content !important;     /* grow/shrink with the label (and icon) */
    min-width: 0 !important;
    max-width: 100% !important;        /* never wider than its container */
    padding-inline: 32px !important;   /* breathing room now that the width is not fixed */
    text-align: center;
    /* Height is left to the existing styles (48px, 40px below 1024px, page-specific values) */
    box-sizing: border-box;
  }

  /* Keep the arrow/icon beside the label instead of squeezing it */
  a.button > img,
  a.button > svg,
  button.button > img,
  button.button > svg {
    flex-shrink: 0;
  }

  /* Underlined text links ("All Case Studies" etc.): only the width, so the underline matches the text */
  a.link-button {
    width: fit-content;
    max-width: 100%;
  }

  @media (max-width: 1024px) {
    a.button,
    button.button {
      padding-inline: 24px !important;
    }
  }
}