/* The map-site shell shared by Contract Research Map and Clinical Research Map (layouts/map_site): header, footer and the
   list head. Tokens only. The ad card is a cataloged component and lives in components.css. */

/* The logo is an inline SVG with no plate behind it. Its navy parts take --color-crm-ink, which flips
   with the site theme (tokens.css); the teal and green stay fixed in both themes. */
.s-crm-logo {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  line-height: 0;
}

.s-crm-logo:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.c-crm-logo__svg {
  display: block;
  width: auto;
  height: 2.25rem;
  max-width: 100%;
}

.c-crm-logo__svg .crm-ink {
  fill: var(--color-crm-ink);
  stroke: var(--color-crm-ink);
}

.c-crm-logo__svg .crm-teal {
  fill: var(--color-crm-teal);
  stroke: var(--color-crm-teal);
}

.c-crm-logo__svg .crm-green {
  fill: var(--color-crm-green);
  stroke: var(--color-crm-green);
}

.s-crm-spacer {
  flex: 1 1 auto;
}

.s-crm-footer .s-footer__inner {
  flex-wrap: wrap;
  row-gap: var(--space-3);
}

.s-crm-footer__powered {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-md);
}

.s-crm-footer__use,
.s-crm-footer__credit {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-sm);
}

.s-crm-footer__powered a,
.s-crm-footer__use a,
.s-crm-footer__credit a,
.s-crm-footer .s-footer__links a {
  color: var(--color-link);
}

/* The content area under the map: the ad slot, then the filters, charts and list. Below 72rem the slot is a
   short strip above the filters (columns by count); from 72rem it is a narrow sticky rail in the right
   column. The slot is hidden until an ad arrives, so with no ads the main column takes the full width:
   the two-column grid only applies while a slot is showing (:has), never an empty gutter. */
.c-crm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.c-ad-slot {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.c-ad-slot__label {
  margin: 0;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (min-width: 40rem) and (max-width: 71.99rem) {
  .c-ad-slot .c-ad-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-ad-slot .c-ad-list[data-count="1"] {
    grid-template-columns: minmax(0, 24rem);
  }

  .c-ad-slot .c-ad-list[data-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) and (max-width: 71.99rem) {
  .c-ad-slot .c-ad-list[data-count="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 72rem) {
  .c-crm-layout:has(.c-ad-slot:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) 17rem;
  }

  .c-crm-layout__main {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .c-ad-slot {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: var(--space-4);
  }
}

/* The /agents page of both map sites (views/map_site/agents): a hero band (connect URL in the cataloged
   copy snippet beside one illustrative screenshot) over a client picker card and the sample queries. */
.p-map-agents__frame {
  max-width: 72rem;
  margin-inline: auto;
}

/* Row A: full-bleed hero band. Under 64rem one column, capped at the prose measure and centred. */
.p-map-agents__hero {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-8) var(--space-6);
}

.p-map-agents__hero-grid,
.p-map-agents__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

.p-map-agents__intro,
.p-map-agents__figure,
.p-map-agents__samples {
  min-width: 0;
}

.p-map-agents__intro > .u-overline { margin: 0 0 var(--space-3); }

.p-map-agents__intro h1 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.p-map-agents__lede {
  max-width: 36rem;
  margin: 0 0 var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

.p-map-agents__samples h2 {
  margin: 0 0 var(--space-3);
}

.p-map-agents__samples .c-question-list-text {
  flex: 1 1 0;
  min-width: 0;
}

.p-map-agents__figure {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.p-map-agents__figure-query {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-text-strong);
}

/* On a phone the picker card gives its width to the copy snippets inside it. */
@media (max-width: 39.99rem) {
  #agents-client .c-card__body {
    padding-inline: var(--space-3);
  }
}

@media (min-width: 40rem) {
  .p-map-agents__hero {
    padding-block: var(--space-12) var(--space-10);
  }

  .p-map-agents__hero-grid,
  .p-map-agents__body {
    max-width: var(--container-prose);
  }

  .p-map-agents__intro h1 {
    font-size: var(--text-3xl);
  }

  .p-map-agents__lede {
    font-size: var(--text-lg);
  }
}

@media (min-width: 64rem) {
  .p-map-agents__hero-grid,
  .p-map-agents__body {
    max-width: 72rem;
    gap: var(--space-10);
  }

  /* Both rows share one column pair (text, then a 32rem figure column) so their column edges line up. */
  .p-map-agents__hero-grid,
  .p-map-agents__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
  }

  .p-map-agents__hero-grid { align-items: center; }
  .p-map-agents__body { align-items: start; }

  /* Sticks below the sticky top bar, which is --topbar-height plus its 1px border tall. */
  .p-map-agents__samples {
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-4));
  }
}

/* The picture keeps its own light Claude chrome in either theme. */
.p-map-agents__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.p-map-agents__caption {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.p-map-agents__note {
  display: block;
  font-style: italic;
}