/**
 * MOBILE REFINEMENTS
 * =========================================================================
 * Phone-only polish, mirroring desktop-refinements.css. Everything here is
 * inside @media (max-width: 767px) so desktop and tablet are untouched.
 *
 * There is no mobile frame in the Figma file, so these are judgement calls
 * against the desktop design rather than measured values - each one is
 * explained so it can be argued with.
 */

@media (max-width: 767px) {

  /* -----------------------------------------------------------------------
   * HERO
   *
   * Was padding: 150px 10px. On a 390px screen that is 300px of vertical
   * padding around ~320px of content, so the section ran to 721px with a
   * large dead band under the buttons, and the copy was squeezed into 10px
   * side gutters. 88/72 keeps it generous without the dead space, and 20px
   * gutters match the rest of the mobile layout.
   * -------------------------------------------------------------------- */
  /* !important because service.css:5 declares
   * `padding: 150px 10px !important` on the base .a3-hero rule - nothing
   * without it can win, at any specificity. */
  .a3-hero {
    padding: 88px 20px 72px !important;
    min-height: 0;
  }

  /* 21px is small for a hero headline - it read as body copy next to the
   * 14px description. 28/1.25 gives it presence while still fitting
   * "End-to-End Digital Services" on sensible lines. */
  /* service.css targets this as `.a3-hero .a3-hero__overlay .a3-hero__heading`
   * (0-3-0), so a bare class selector never wins - match its specificity. */
  .a3-hero .a3-hero__overlay .a3-hero__heading,
  .a3-hero__heading {
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: -0.4px;
    margin-bottom: 16px;
  }

  .a3-hero__description {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 28px;
  }

  /* Full-width stacked buttons with a real tap target (48px minimum). */
  .a3-hero__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .a3-hero__actions .a3-btn {
    width: 100%;
    min-height: 52px;
    padding: 14px 20px;
    font-size: 15px;
  }

  /* The eyebrow badge sat tight against the heading. */
  .a3-hero .a3-tag,
  .a3-hero__eyebrow {
    margin-bottom: 18px;
  }
}

@media (max-width: 767px) {

  /* -----------------------------------------------------------------------
   * HEADER
   *
   * The logo and hamburger sat on a different gutter to the page content
   * below them, so the header looked inset. Match the 20px the hero and the
   * rest of the mobile layout use.
   * -------------------------------------------------------------------- */
  .a3-site-header .container,
  ..a3-site-header {
    max-width: 100%;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 767px) {

  /* The toggle carried its own right offset, leaving it 51px from the edge
   * against the logo's 36 on the left. Zero it so the header reads even. */
  .a3-site-header__mobile-toggle {
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 767px) {

  /* The 16px lives on .a3-site-header itself, not the container - that was the
   * offset the container rules could never reach. Move the gutter entirely to
   * the container so there is one place that controls it. */
  .a3-site-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .a3-site-header .container,
  .a3-site-header__inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 0;
  }
}

@media (max-width: 991.98px) {

  /* -----------------------------------------------------------------------
   * TESTIMONIALS - slider dots
   *
   * Slick's defaults are a 20x56 button with a transparent colour and a
   * bullet character in ::before, absolutely positioned at bottom: -25px.
   * That rendered as faint specks sitting on the photo's bottom edge.
   *
   * Replaced with real dots in normal flow below the card, so they cannot
   * overlap the image and have room to be tapped.
   * -------------------------------------------------------------------- */
  .a3-testimonials .slick-dots {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;
    height: auto;
    margin: 24px 0 0;
    padding: 0;

    list-style: none;
  }

  .a3-testimonials .slick-dots li {
    width: auto;
    height: auto;
    margin: 0;
  }

  /* The bullet glyph goes; the button itself becomes the dot. 44px of tap
   * target is kept via padding, while the visible dot stays 8px. */
  .a3-testimonials .slick-dots li button:before {
    display: none;
  }

  .a3-testimonials .slick-dots li button {
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    min-height: 0;

    border: 0;
    border-radius: 999px !important;
    background: #d4d4d8;

    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;

    transition:
      width 0.3s cubic-bezier(0.22, 0.85, 0.28, 1),
      background-color 0.3s ease;
  }

  /* Active dot stretches into a pill, as most sliders in this theme do. */
  .a3-testimonials .slick-dots li.slick-active button {
    width: 24px;
    background: var(--primary, #ff6900);
  }

  .a3-testimonials .slick-dots li button:hover,
  .a3-testimonials .slick-dots li button:focus-visible {
    background: var(--primary, #ff6900);
  }

  /* The dots are in flow now, so the track must not clip them. */
  .a3-testimonials .slick-list {
    overflow: hidden;
  }

  .a3-testimonials .slick-slider {
    margin-bottom: 0;
  }
}

/* -------------------------------------------------------------------------
 * Enterprise-grade tooling - tighten the slider on phones.
 *
 * The slide padding and the dot margin are both sized for the desktop
 * four-up. At one card per view they stack into a lot of dead vertical space
 * between the card and its pager. Override only - service.css keeps the
 * desktop values.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .a3_tool_slider .slick-slide {
    padding: 8px 8px;
  }

  .a3_tool_slider .slick-list {
    margin: 0 -8px;
  }

  .a3_tool_slider .slick-dots {
    margin-top: 0;
  }

  .a3-tooling {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}


/* =========================================================================
 * Case study card title - phone
 *
 * service.css drops the headline to 26px below 767, but the column is only
 * ~304px wide there, so the measured titles still ran 4-7 lines and the card
 * opened on a wall of type before the reader reached the summary.
 *
 * 22/28 with a four-line clamp shows 27 of the 31 titles whole and lands the
 * block at 112px - the same height the desktop card now uses. Three lines is
 * not reachable at any size a headline could still be read at.
 *
 * The clamp is visual only: the full title stays in the DOM, so the link's
 * accessible name is unchanged.
 * ========================================================================= */

@media (max-width: 767px) {

  .a3-case-study-card__link h3 {
    font-size: 22px;
    line-height: 28px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }
}