/* ==========================================================================
   THE FOUR TABS ON THE GOOGLE ADS RAIL — the only styling this lab adds

   Almost nothing is needed. The panels carry the same class list the Google
   Ads section does (.gah > .q7.cc.cc4.al.rz.rz6.dk.d5), and none of the nine
   gads-clients stylesheets nor home-gads-tab/gah.css contains a single #q7
   selector — they are keyed entirely on those classes. So the surface, the
   gutter, the card, the mark, the two-row rail, the edge controls and the
   panel all arrive already styled.

   What is left is four things: hiding the paging band these tabs no longer
   use, making a non-interactive card read as one, giving the preview-card
   option its own rail measurements, and the one line the placeholder cards
   need in the detail panel.
   ========================================================================== */

/* ---- 1 · the blank band above the cards --------------------------------
   .head holds the old ‹ › paging arrows. On these four tabs the rail has its
   own controls over its edges, so the band is empty space between the tab
   row and the first card — the "blank gap" in the brief. gah.css already
   does exactly this for the Google Ads tab; this is the same rule for the
   class this lab puts on the drawer. */
.tail.show .drawer.is-wt .head{ display: none !important; }

/* and the band's reserved floor, for the same reason gah.css exempts the
   Google Ads tab from it: the rail is drawn to sit tight under its last row,
   and holding it to the floor the card grid needs gives it ~90px of empty
   recess — the "nude area" the brief is about. With this, all five rail tabs
   are the same height as each other, which is the point. */
.tail.show .drawer.is-wt{ min-height: 0px; }

/* the panels are .gah, so .gah[hidden] already hides them — this is only
   here so a panel cannot flash before that rule is parsed */
.wt-gah[hidden]{ display: none !important; }

/* ---- 2 · a card that is not a control ----------------------------------
   .cc .mp-i sets cursor:pointer and a hover lift, which is a promise. The
   static option, and the placeholder cards of the link option (a .example
   domain has no site to open), take both back. */
.cc .mp-i.wt-flat,
.tail.show .card.wt-flat{ cursor: default; }
.cc .mp-i.wt-flat:hover{
  border-color: var(--line-b); box-shadow: none; background: var(--paper);
}
.tail.show .card.wt-flat:hover{
  box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 6px 14px -10px rgba(15,23,42,.4);
}
/* the third zone stops being an action and becomes the label it now is:
   the brand colour and the arrow are what made it read as a button */
.cc .mp-i.wt-flat .cc-cue{ color: var(--ink-4); font-weight: 600; }

/* a link card keeps the action colour but leans on the outward arrow */
.cc a.mp-i{ text-decoration: none; }
.cc a.mp-i:hover .cc-ar{ transform: translate(2px, -2px); }

/* ---- 3 · the preview-card option ---------------------------------------
   Same rail, same edges, same controls, same background — one row instead of
   two, because a preview card is about four times the height of the row card
   and two rows of them would be a 500px band.

   .mp-row's own rules stay in charge of the scrolling; only the track shape
   and the item width are restated. */
@media (min-width: 861px){
  .gah .cc.d5.wt-preview .mp-row{
    grid-template-rows: auto;                 /* one row, not two */
    grid-auto-columns: var(--wt-pvw);
    align-items: start;
  }
  /* except Client Wall, whose card is one short line */
  .gah .cc.d5.wt-preview.wt-2row .mp-row{ grid-template-rows: repeat(2, auto); }
  .wt-preview{ --wt-pvw: calc((100% - 20px) / 3); }
  .tail.show .wt-preview .mp-row > .card{ width: 100%; margin: 0; }
}
@media (min-width: 1400px){ .wt-preview{ --wt-pvw: calc((100% - 30px) / 4); } }
@media (min-width: 1800px){ .wt-preview{ --wt-pvw: calc((100% - 40px) / 5); } }

/* the phone rail: the drawer's own gutter, cards at the width every other
   tab on this homepage already uses */
@media (max-width: 860px){
  .gah .cc.wt-preview .mp-row{ gap: 10px; align-items: start; }
  .tail.show .wt-preview .mp-row > .card{ flex: 0 0 82%; margin: 0; }
}

/* the preview cards are <article>/<button>/<a> where the lane used <article>
   only — the two interactive forms need the lane card's own reset back */
.tail.show .card.wt-pv{
  appearance: none; font: inherit; color: inherit; text-align: left;
  text-decoration: none; border: 0;
}

/* ---- 4 · the detail panel's one new line -------------------------------
   Every real client's panel ends with its live domain. A placeholder has no
   domain to end with, and an empty foot would leave the "Back to all" button
   floating alone against the left edge. */
.cc .wt-nolink{
  font-size: 11.8px; font-weight: 600; color: var(--ink-4);
}

/* ---- 5 · a strip sized to the facts it has ------------------------------
   .mp-strip is a fixed three columns, because a Google Ads panel always has
   three things to say (services, before, after). These four tabs do not:
   Client Wall holds two facts about a client, Meta Ads holds three. A third
   empty cell reads as missing data, so the count follows the content. */
.cc .mp-strip.wt-of-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.cc .mp-strip.wt-of-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 860px){
  .cc .mp-strip.wt-of-2,
  .cc .mp-strip.wt-of-3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cc .mp-strip.wt-of-3 .mp-s:first-child{ grid-column: 1 / -1; }
}