/* A customer story, /customers/<slug> (src/pages/customers/[slug].astro),
   over blog.css's article cells and grid.css's rows: the hero's switch
   line and its story card (the portrait, the logo, who it is), the results, the facts column and the pull
   quotes. The card is stories.css's .st, the home page's. */

/* hero: the copy, then the home page's card filling its cell */
.cs-hero .bl-posthero__copy { padding-block: 56px 48px; }
.cs-hero__title { max-width: 18ch; }

.cs-from {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  margin: 28px 0 0;
  font: 500 13px/1 var(--font-ui); color: var(--bl-soft);
}
.cs-from__dot { width: 3px; height: 3px; border-radius: 50%; background: #c4c7ce; }
.cs-from__chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 11px 0 7px;
  border: 1px solid var(--bl-line); border-radius: 999px;
  background: #fff; color: var(--ink-nav);
}
.cs-from__chip img { width: 15px; height: 15px; object-fit: contain; }
.cs-from__chip--us svg { width: 9px; fill: var(--brand); margin-inline: 3px 1px; }
.cs-from__arrow { width: 15px; height: 15px; color: #a3a8b3; }

.cs-read { margin-left: 0; }

.cs-hero__art { padding: var(--bl-pad); }
.cs-card { height: 100%; min-height: 540px; }
.cs-card .st__photo { object-position: 50% 12%; }
.cs-card__who { margin: 0; }
.cs-card__who b { font-size: 16px; }

/* results: three figures between the hero's rule and the story's */
.cs-results .gk-stat { padding: 36px 32px 34px; }
.cs-results .gk-stat__note { max-width: 320px; }

/* the facts column, sticky only where it fits under the nav */
.cs-aside .bl-aside__in { max-height: none; }
@media (max-height: 859px) {
  .cs-aside .bl-aside__in { position: static; }
}
.cs-aside__logo { display: block; align-self: flex-start; width: auto; height: 24px; }
.cs-aside__about { margin: 18px 0 0; font: 400 14.5px/1.55 var(--font-ui); color: var(--bl-soft); text-wrap: pretty; }
.cs-aside a { color: var(--ink-nav); text-decoration: underline; text-decoration-color: #c9ccd3; text-underline-offset: 3px; transition: text-decoration-color .15s ease; }
.cs-aside a:hover { text-decoration-color: currentColor; }

.cs-facts { display: grid; gap: 14px; margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--bl-line); }
.cs-facts dt { font: 400 12.5px/1.3 var(--font-ui); color: var(--bl-grey); }
.cs-facts dd { margin: 4px 0 0; font: 500 14px/1.4 var(--font-ui); color: var(--ink-nav); }
.cs-facts__rival { display: inline-flex; align-items: center; gap: 7px; }
.cs-facts__rival img { width: 14px; height: 14px; object-fit: contain; }

.cs-uses { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--bl-line); }
.cs-uses ul { list-style: none; display: grid; gap: 1px; margin: 12px 0 0; padding: 0; }
.cs-aside .cs-uses a {
  display: flex; align-items: center; gap: 10px;
  margin-left: -8px; padding: 6px 8px; border-radius: 8px;
  font: 400 14px/1.3 var(--font-ui); color: #5f6571; text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.cs-aside .cs-uses a:hover { background: var(--bl-tint); color: var(--ink-nav); }
.cs-uses svg { flex: none; width: 16px; height: 16px; color: var(--brand); }

/* the story: the opening paragraph a size up, quotes with who said them */
.cs-body .bl-prose > p:first-child { font-size: 19px; line-height: 1.65; color: var(--ink); }
.bl-prose .cs-pull { margin: 36px 0 40px; }
.bl-prose .cs-pull blockquote { margin: 0; }
.bl-prose .cs-pull blockquote p { text-indent: -.4em; text-wrap: pretty; }
.bl-prose .cs-pull figcaption { margin-top: 12px; padding-left: 24px; font-weight: 500; color: var(--ink-nav); }
.cs-body .bl-try { max-width: 680px; margin-top: 48px; }

@media (max-width: 1023px) {
  .cs-aside .bl-aside__in { gap: 0; }
  .cs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  .cs-uses ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .cs-aside .cs-uses a { margin-left: 0; border: 1px solid var(--bl-line); }
}

@media (max-width: 900px) {
  .cs-hero .bl-posthero__copy { padding-block: 36px 32px; }
  .cs-card { min-height: 460px; }
  .cs-results .gk-cells { grid-template-columns: minmax(0, 1fr); }
  .cs-results .gk-cells > * + * { border-left: 0; border-top: 1px solid var(--rail); }
  .cs-results .gk-stat { padding: 28px var(--bl-pad); }
  .cs .gk-linkcell { padding: 0; }
  .cs .gk-linkcell a { padding: 24px; }
}

@media (max-width: 640px) {
  .cs-from > :first-child { flex-basis: 100%; }
  .cs-from__dot { display: none; }
  .cs-card { min-height: 400px; }
  .cs-body .bl-prose > p:first-child { font-size: 17.5px; }
  .bl-prose .cs-pull blockquote { font-size: 20px; }
  .cs-facts { grid-template-columns: minmax(0, 1fr); }
}