/* ================================================
   Google Ads — paid-ads-google.css
   Sub-service page. Piggybacks on paid-ads-facebook.css
   for shared sections (services, thesis, account, myths,
   results, faq). Adds only the SERP-style hero viz.
   ================================================ */

/* ===== SERP sponsored result card ===== */
.ga-viz {
  /* base .fb-viz provides border/radius/bg — add slight top gap */
}

.ga-serp {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
[data-theme="light"] .ga-serp {
  background: #fff;
}
.ga-serp-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: color-mix(in oklab, var(--bg) 70%, var(--bg-2));
}

.ga-serp-ad { display: flex; flex-direction: column; gap: 6px; }

.ga-serp-fav {
  display: flex; align-items: center; gap: 10px;
}
.ga-serp-fav-circle {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #D6FF3D; /* intentional: site accent */
  color: #0E0E10;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.ga-serp-url {
  font-size: 11.5px;
  color: var(--fg-muted);
}
.ga-serp-title {
  font-size: 17px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #7aa7ff; /* SERP blue-link affordance; light/dark both work */
  margin: 2px 0 2px;
  text-wrap: pretty;
}
[data-theme="light"] .ga-serp-title {
  color: #1a0dab;
}
.ga-serp-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg);
  margin: 0;
  opacity: 0.92;
}
.ga-serp-ext {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.ga-serp-ext-pill {
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 70%, var(--bg-2));
  color: var(--fg);
  white-space: nowrap;
}

/* ===== Keyword planner table — override 7-col grid to 5-col ===== */
.ga-viz-table .fb-viz-row {
  grid-template-columns: minmax(0, 2.2fr) 0.8fr 0.7fr 0.8fr 1fr;
}

.ga-kw-mark {
  color: var(--fg-muted);
  font-weight: 500;
  flex-shrink: 0;
  font-size: 12px;
  opacity: 0.55;
}

.ga-qs { justify-content: flex-start; }
.ga-qs-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.ga-qs-good {
  background: color-mix(in oklab, #22c55e 18%, transparent);
  color: #22c55e;
  border: 1px solid color-mix(in oklab, #22c55e 40%, transparent);
}
.ga-qs-mid {
  background: color-mix(in oklab, #eab308 18%, transparent);
  color: #eab308;
  border: 1px solid color-mix(in oklab, #eab308 40%, transparent);
}

.ga-intent {
  color: var(--fg-muted);
  font-size: 10.5px;
  letter-spacing: 0.02em;
}

/* ===== Responsive ===== */
@media (max-width: 760px) {
  .ga-viz-table .fb-viz-row {
    grid-template-columns: minmax(0, 2fr) 0.9fr 0.7fr;
    gap: 8px;
    padding: 10px;
  }
  .ga-viz-table .fb-viz-row .fb-viz-cell:nth-child(n+4) { display: none; }
  .ga-viz-table .fb-viz-head { display: none; }
  .ga-serp-title { font-size: 15px; }
  .ga-serp-ext-pill { font-size: 10px; }
}