/* ==========================================================================
   THE GOOGLE ADS PAGE'S SUCCESS STORIES CLIENT LIST,
   INSIDE THE HOMEPAGE'S "GOOGLE ADS" TAB

   The section itself is not restyled at all: gads-clients/*.css is the same
   set of nine stylesheets the Google Ads page links, in the same order, and
   the markup is built by the same rz.js from the same data. This file only
   does the two things that a section moving into a tab panel needs:

     1 · shows the panel when the Google Ads tab is selected, and the card
         rail the rest of the time
     2 · hands the section the gutter and the tokens it expects from a page
         it is no longer sitting on

   Nothing else about the homepage changes; every selector below is inside
   .gah, .drawer.is-gads or the tab panel itself.
   ========================================================================== */

.gah{
  /* the homepage keeps --line-b on #wcu8 / #about5 rather than on :root, so
     this block mirrors it the same way those sections do. Without it the
     client cards' edges compute to no border at all. */
  --line-b: #DEE5F1;
  display: block; width: 100%;
}
/* author display beats the UA sheet, so `hidden` needs saying out loud */
.gah[hidden]{ display: none !important; }
.lane2[hidden]{ display: none !important; }
/* the paging arrows belong to the card rail, not to this panel */
.drawer.is-gads .head{ display: none !important; }

/* ---------- the section, on the homepage band's own ground --------------- */
/* .drawer already carries the page gutter AND the top and bottom space that
   every tab's content sits in, so .cc must add neither. Leaving its own
   padding-bottom in place was what pushed the list up against the tab row:
   23px above but 50px below, where every other tab is 21 / 26. */
.gah .cc{
  width: 100%;
  padding: 0;
  /* its top hairline separated it from the hero on its own page; here the tab
     row's hairline is directly above, and two rules would read as a mistake */
  border-top: 0;
  /* the pale strip is the ground for everything in this band, so the section
     does not bring its own white one */
  background: none;
}

/* On its own page the section is full-bleed, so it caps its inner column at
   min(1400px,100%) and centres it. Inside the tab the drawer already sets the
   width, and that cap made the list narrower than the All Work grid on any
   wide screen — 42px indented each side at 1600, 106 at 1728, 202 at 1920.
   The column is simply the drawer's, like every other tab's. */
.gah .cc .mp{ width: 100%; max-width: none; margin-inline: 0; }

/* ---------- the words live inside the Google Ads tab --------------------
   "Success Stories" names what is under the tab — the same pair of words
   the All Work door card already shows under "Google Ads" — so the tab
   names the category and its content, and the section below carries no
   heading of its own.

   It used to be a second, much smaller line stacked under the name, which
   made this the only tab in the row reading over two lines and at two
   sizes: 16px over 10px where every other tab is a single 16px label. The
   two spans are still there (the panel script builds them, and the pair is
   what the check harness looks for), but they now sit on ONE line at the
   button's own size, weight, letter-spacing and colour — so the tab is a
   plain label like its neighbours and takes the width that label needs.
   The gap is a word space, not a design gap — .23em is what a real space
   measures in this face at the tab's size and weight (3.70px of 16px), so
   the four words space evenly. Nothing about the row's own height, icon,
   padding or alignment changes, and the two spans inherit every hover and
   selected colour rather than carrying their own.                        */
.tail.show .tabs .gah-tabw{
  display: flex; flex-direction: row; align-items: baseline;
  gap: .23em; line-height: inherit; text-align: left; white-space: nowrap;
}
.tail.show .tabs .gah-tabsub{
  font-style: normal; font-size: inherit; font-weight: inherit;
  letter-spacing: inherit; color: inherit;
}

/* the section's own heading is not shown at all now — but the client row is
   labelled by it, so it stays in the DOM for a screen reader. Absolute with
   a positioned parent: without .mp-head being relative it would escape the
   rail and widen the whole page, which is the trap the Before/After labels
   fell into. */
.gah .cc .mp-head{ position: relative; }
.gah .cc.al .mp-t{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* with the heading gone the row starts where every other tab's cards start:
   no margin of its own, and none of the scroller's own 2px block padding —
   which is there to keep a focus ring off the clip edge, so the ring is
   drawn inside the card instead. */
.gah .cc .mp-row{ margin-top: 0; padding-block: 0; }
.gah .cc .mp-i:focus-visible{ outline-offset: -2px; }

/* ---------- the rail fills its row exactly ------------------------------
   The section was drawn with a fixed 252px card, so at most widths the row
   ended on a card sliced at an arbitrary point: flush on the left, ragged on
   the right, and a different amount ragged at every width. Here the card is
   a share of the row instead, so a whole number of them fills it and both
   edges land on the same line as the tabs above and as the cards on every
   other tab. It also makes the card a little larger than 252px across most
   of the range, which is the other half of the ask.

   --dk-cw is read by grid-auto-columns on .mp-row, so the percentage
   resolves against the row's own content box. desk.js reads the rendered
   card width for its paging step, so it follows automatically.            */
@media (min-width: 861px){
  .gah .cc.d5 .mp-row{ grid-auto-columns: var(--dk-cw); }
  .gah .cc.dk .mp-i{ width: 100%; }
  .gah .cc{ --dk-cw: calc((100% - 20px) / 3); }   /*  861-1099 · three  */
}
@media (min-width: 1100px){ .gah .cc{ --dk-cw: calc((100% - 30px) / 4); } }  /* 1100-1399 · four */
@media (min-width: 1400px){ .gah .cc{ --dk-cw: calc((100% - 40px) / 5); } }  /* 1400-1699 · five  */
@media (min-width: 1700px){ .gah .cc{ --dk-cw: calc((100% - 50px) / 6); } }  /* 1700-1999 · six   */
@media (min-width: 2000px){ .gah .cc{ --dk-cw: calc((100% - 60px) / 7); } }  /* 2000-2299 · seven */
@media (min-width: 2300px){ .gah .cc{ --dk-cw: calc((100% - 70px) / 8); } }  /* 2300+     · eight */

/* ---------- phones -------------------------------------------------------- */
@media (max-width: 760px){
  /* the phone drawer hands its gutter to the card rail, not to its children,
     so this panel has to carry its own — otherwise the rail runs into both
     screen edges */
  .gah{ padding-inline: var(--gut, 18px); }

  /* On its own page this rail is full-bleed: it breaks out of the section
     gutter and puts it back as scroll-padding, so cards travel to the screen
     edge. Every other tab on this homepage insets its rail instead and clips
     the cards on the gutter line. This tab now does the same, so the content
     column is identical on all six. */
  .gah .cc .mp-row{
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
}