/*
 * press-kit.css — the brand-asset cards on the press kit (/{locale}/press-kit), and nothing else.
 *
 * The page renders on the site's CONTENT TEMPLATE: content.css supplies the body, the .blog-main
 * padding, the .blog-container width, the title and the .blog-post-body article typography, exactly
 * as /blog, /docs and /privacy-policy get them. This file is loaded after both stylesheets and adds
 * only the one surface the template has no equivalent for. Everything here is token-driven
 * (--panel, --border, --border-hover, --accent), so it follows the reader's theme with no
 * light-theme override block. No JavaScript — the page stays byte-identical / CDN-cacheable.
 */

/* ===== Reading hierarchy =====
   The page is four headings over four short paragraphs, so the template's near-white body colour
   leaves every line at the same weight and the whole page reads as one undifferentiated block. The
   headings keep --text and carry the structure; the prose drops to --muted, the same relationship
   the pricing page's .meter-item uses. Scoped to this page rather than changed in content.css,
   where the near-white body is right for a long article being read start to finish. */
.press-kit-doc .blog-post-body p {
  color: var(--muted);
}

/* The brand-asset heading opens a different kind of block (a grid, not prose), so it gets a little
   more air above it than the template's 2.5rem run-on spacing gives. */
.press-kit-doc .blog-post-body h2 {
  color: var(--text);
  margin-top: 3rem;
}

/* The card grid sits inside .blog-post-body, whose `> * + *` rule already spaces it off the
   heading above, so it carries no top margin of its own. */
.press-assets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Square corners and a hairline border, the same surface treatment as .blog-card and
   .blog-featured — mixing --panel toward white is what lifts a card off the page in the dark theme
   and holds it on the light one, from a single declaration. */
.press-asset {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 92%, white 8%);
  transition: border-color 0.15s ease;
}

.press-asset:hover {
  border-color: var(--border-hover);
}

/* The preview swatch is FIXED per asset (dark behind the white wordmark, light behind the dark
   one) and deliberately does NOT follow the page theme — otherwise one of the two marks would be
   invisible to half the readers. That is why these two colours are literals rather than tokens. */
.press-asset-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 104px;
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.press-asset-preview.is-dark {
  background: #0d1117;
}

.press-asset-preview.is-light {
  background: #ffffff;
}

.press-asset-img {
  width: 100%;
  max-width: 150px;
  height: auto;
}

/* The app icon is a circular mark, not a wordmark — it reads as an icon only at icon size. */
.press-asset-img.is-icon {
  width: 52px;
  max-width: 52px;
}

.press-asset-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
}

.press-asset-name {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

/* Accent colour carries the affordance, underline on hover — the metadata-link contract the
   content template uses for .blog-post-category and .blog-rail-link, rather than the
   underlined-at-rest treatment .blog-post-body gives links inside running prose. */
.press-asset-link {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--accent);
  font-size: 14px;
  text-decoration: none;
}

.press-asset-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.press-asset-type {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
}

@media (max-width: 860px) {
  .press-assets { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .press-assets { grid-template-columns: 1fr; }
}