/* ==========================================================================
   SIX CAMPAIGN TYPES — THE ACCORDION INSIDE EACH CARD
   Applied 2026-08-30 from /gads-card-best10.html, view 03.

   What this file replaces: the "See what's included" action and the reading
   drawer it opened. Every card now answers the same four questions in place,
   so nothing leaves the card and nothing covers the page. gsvc-data.js,
   gsvc-art.js, gsvc-kit.js and gsvc-init.js are no longer loaded by
   google-ads.html — they exist only for that drawer.

   One rule from the user, in force across the site: the open row is marked by
   a rounded blue left accent. Blue, not the card's own hue — the accent says
   "this is the one open", and it has to read the same on all six cards.
   ========================================================================== */

#gsvc-six{ --gsa-accent:#1A73E8; --gsa-open:#E8F0FE; --gsa-ink:#0B3FA8; }

/* the card is no longer a target: nothing opens when it is clicked, so it
   must stop offering the hand and the lift that promised it */
#gsvc-six .sc{ cursor:default; }
#gsvc-six .sc:hover{ transform:none; }

/* .sc-line keeps flex:1 from gsvc.css, so the four rows sit at the foot of
   every card and the six read across the rail on one line */
#gsvc-six .gsa{ display:block; width:100%; margin-top:15px; padding-top:3px;
  border-top:1px solid var(--line-2); }

#gsvc-six .gsa-r{ position:relative; display:block;
  border-bottom:1px solid var(--line-2); }
#gsvc-six .gsa-r:last-child{ border-bottom:0; }

#gsvc-six .gsa-h{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  gap:10px; width:100%; margin:0; padding:12px 0; border:0; border-radius:0;
  background:none; -webkit-appearance:none; appearance:none; text-align:left;
  font:inherit; font-size:13.6px; font-weight:750; line-height:1.3;
  letter-spacing:-.012em; color:var(--ink); cursor:pointer;
  transition:color .2s ease; }
#gsvc-six .gsa-h > span{ min-width:0; }
#gsvc-six .gsa-h svg{ width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; color:var(--ink-4);
  transition:transform .24s var(--ease), color .2s ease; }
#gsvc-six .gsa-h:hover{ color:var(--gsa-ink); }
#gsvc-six .gsa-h:hover svg{ color:var(--gsa-accent); }
#gsvc-six .gsa-h:focus-visible{ outline:2px solid var(--gsa-accent); outline-offset:2px;
  border-radius:6px; }

/* the open row: pale blue ground, the rule under it gone, and the accent */
#gsvc-six .gsa-r:has(.gsa-h[aria-expanded="true"]){ background:var(--gsa-open);
  border-radius:12px; border-bottom-color:transparent; padding-left:13px; }
#gsvc-six .gsa-r:has(.gsa-h[aria-expanded="true"])::before{ content:"";
  position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:99px;
  background:var(--gsa-accent); }
#gsvc-six .gsa-h[aria-expanded="true"]{ color:var(--gsa-ink); }
#gsvc-six .gsa-h[aria-expanded="true"] svg{ transform:rotate(45deg);
  color:var(--gsa-accent); }

/* display is authored here, so the UA sheet's [hidden] cannot win on its own */
#gsvc-six .gsa-b{ display:block; padding:0 0 13px; }
#gsvc-six .gsa-b[hidden]{ display:none; }
#gsvc-six .gsa-r:has(.gsa-h[aria-expanded="true"]) .gsa-b{ padding-right:13px; }
#gsvc-six .gsa-p{ display:block; font-size:13.2px; line-height:1.5; color:var(--ink-2); }

@media (max-width:700px){
  #gsvc-six .gsa{ margin-top:13px; }
  #gsvc-six .gsa-h{ padding:11px 0; font-size:13.2px; }
  #gsvc-six .gsa-p{ font-size:12.9px; }
}