/* Copyright (c) 2026 Chinaready. All rights reserved. */

/* ==========================================================================
   Tool page patterns (IA refactor stage 2a) — gfonts and future tool pages.
   Loaded after home.css; reuses the Stats glass cards and final-cta band.
   All tokens are DS variables; no new color literals beyond DS equivalents.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breadcrumb — minimal on-dark trail inside the hero band
   -------------------------------------------------------------------------- */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cr-space-3);
  margin: 0 0 var(--cr-space-6);
  font-size: var(--cr-fs-small);
  color: var(--cr-on-dark-tertiary);
}

.breadcrumb a {
  color: var(--cr-on-dark-secondary);
  text-decoration: none;
  border-bottom: none;
}

.breadcrumb a:hover {
  color: var(--cr-on-dark-primary);
}

.breadcrumb [aria-current='page'] {
  color: var(--cr-on-dark-primary);
}

/* --------------------------------------------------------------------------
   Page hero band — dark navy like the home hero, but shorter
   -------------------------------------------------------------------------- */

.tool-hero {
  position: relative;
  background: var(--cr-dark-surface);
  color: var(--cr-on-dark-primary);
  padding-block: 140px clamp(56px, 7vw, 88px); /* top clears the fixed header */
}

.tool-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

.tool-hero__title {
  max-width: 14em;
  margin-top: 0;
}

/* On-dark tokens, stated explicitly (DS h1/p rules set text-primary and beat
   plain inheritance; site-base also routes .tool-hero headings to inherit). */
.tool-hero .tool-hero__title {
  color: var(--cr-on-dark-primary);
}

.tool-hero .t-eyebrow {
  color: var(--cr-on-dark-tertiary);
  margin-bottom: var(--cr-space-4);
}

.tool-hero .tool-hero__lead {
  margin-top: var(--cr-space-5);
  max-width: 36em;
  color: var(--cr-on-dark-secondary); /* t-muted is a light-ground token */
}

/* ZH copy: narrower measure avoids single-glyph line strandings (走/上). */
html[lang='zh'] .tool-hero .tool-hero__lead {
  max-width: 34em;
}

.tool-hero__lead code {
  font-family: var(--cr-font-mono);
  font-size: 0.88em;
  color: var(--cr-on-dark-primary);
  overflow-wrap: anywhere;
}

.tool-hero__visual {
  border: 1px solid var(--cr-on-dark-border);
  border-radius: var(--cr-radius-card, 8px);
  background: #08152c; /* deeper navy inset, matches DS dark elevation */
  overflow: hidden;
  box-shadow: var(--cr-shadow-overlay);
}

.tool-hero__visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

/* Stats band — glass cards patterned after the home Stats band, with the
   "last synced" caption folded in as a right-aligned footnote row. */
.tool-hero__stats-wrap {
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: var(--cr-space-6);
  border-top: 1px solid var(--cr-on-dark-border);
}

.tool-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cr-space-5);
}

.tool-hero__stat .stats__value {
  font-size: clamp(32px, 3.4vw, 48px);
  color: var(--cr-on-dark-primary);
}

.tool-hero .tool-hero__stat .t-body {
  color: var(--cr-on-dark-tertiary);
}

.tool-hero .tool-hero__synced {
  margin: var(--cr-space-4) 0 0;
  text-align: right;
  font-size: var(--cr-fs-small);
  color: var(--cr-on-dark-tertiary);
}

.tool-hero .tool-hero__synced time {
  color: var(--cr-on-dark-secondary);
}

/* --------------------------------------------------------------------------
   Usage — white ground, mono code blocks, endpoints-unchanged notice
   -------------------------------------------------------------------------- */

.tool-usage .t-lead {
  margin-bottom: var(--cr-space-6);
}

.tool-notice {
  max-width: 760px;
  padding: var(--cr-space-5);
  border: 1px solid var(--cr-border);
  border-left: 4px solid var(--cr-brand-blue);
  border-radius: var(--cr-radius-card, 8px);
  background: var(--cr-surface);
  margin-bottom: var(--cr-space-6);
}

.tool-notice__title {
  margin: 0 0 var(--cr-space-2);
  font-weight: var(--cr-fw-semibold);
  color: var(--cr-text-primary);
}

.tool-notice__body {
  margin: 0;
  color: var(--cr-text-secondary);
}

.tool-notice__body code {
  font-family: var(--cr-font-mono);
  font-size: 0.9em;
  color: var(--cr-text-primary);
  overflow-wrap: anywhere;
}

.tool-code {
  margin: 0 0 var(--cr-space-6);
  padding: var(--cr-space-5) var(--cr-space-6);
  max-width: 760px;
  overflow: auto;
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-card, 8px);
  background: #f0f4fa; /* fog inset on white ground */
  font-family: var(--cr-font-mono);
  font-size: var(--cr-fs-small);
  line-height: 1.7;
  color: var(--cr-text-primary);
}

/* Small uppercase label above a code block (fd-cdn / wp-cdn / docker-hub
   example groups — the source landings' code-label pattern). */
.tool-code__label {
  margin: 0 0 var(--cr-space-2);
  font-size: var(--cr-fs-small);
  font-weight: var(--cr-fw-bold);
  letter-spacing: var(--cr-tracking-wide);
  text-transform: uppercase;
  color: var(--cr-text-secondary);
}

.tool-usage__notes {
  max-width: 760px;
  display: grid;
  gap: var(--cr-space-4);
}

.tool-usage__notes p {
  margin: 0;
  color: var(--cr-text-secondary);
  line-height: 1.7;
}

.tool-usage__notes code {
  font-family: var(--cr-font-mono);
  font-size: 0.9em;
  color: var(--cr-text-primary);
  overflow-wrap: anywhere; /* long URLs wrap; block .tool-code keeps scroll */
}

.tool-link {
  color: var(--cr-brand-blue);
  font-weight: var(--cr-fw-semibold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--cr-dur-base) var(--cr-ease-standard);
  overflow-wrap: break-word;
}

.tool-link:hover {
  border-bottom-color: var(--cr-brand-blue);
  color: var(--cr-brand-blue);
}

/* --------------------------------------------------------------------------
   MU-plugin section (wp-cdn only) — numbered steps + button row + caveats,
   same section chrome as the other sections, on the mist ground
   -------------------------------------------------------------------------- */

.tool-plugin .t-lead {
  margin-bottom: var(--cr-space-6);
}

.tool-plugin__steps {
  margin: 0;
  padding-left: 1.5em;
  max-width: 760px;
  display: grid;
  gap: var(--cr-space-3);
  color: var(--cr-text-primary);
}

.tool-plugin__steps li {
  line-height: 1.7;
}

.tool-plugin__steps code {
  font-family: var(--cr-font-mono);
  font-size: 0.9em;
  color: var(--cr-text-primary);
  overflow-wrap: anywhere;
}

.tool-plugin__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cr-space-4);
  margin-top: var(--cr-space-6);
}

/* --------------------------------------------------------------------------
   Corpus — chip columns on the tinted (surface) ground
   -------------------------------------------------------------------------- */

.tool-corpus__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start; /* equal-width columns, top-aligned regardless of chips */
  gap: var(--cr-space-6);
  margin-top: var(--cr-space-6);
}

/* Info-column variant (docker-hub Access): two prose columns instead of
   three chip columns — same section chrome, column count from the data. */
.tool-corpus__grid[data-cols='2'] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tool-corpus__col {
  min-width: 0;
}

.tool-corpus__title {
  margin: 0 0 var(--cr-space-4);
  font-family: var(--cr-font-display);
  font-size: var(--cr-fs-small);
  font-weight: var(--cr-fw-bold);
  letter-spacing: var(--cr-tracking-wide);
  text-transform: uppercase;
  color: var(--cr-text-secondary);
}

.tool-corpus__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cr-space-3);
}

.chip {
  padding: 6px 14px;
  border: 1px solid var(--cr-border);
  border-radius: 999px;
  background: var(--cr-background);
  font-size: var(--cr-fs-small);
  color: var(--cr-text-primary);
}

.tool-corpus__more {
  margin: var(--cr-space-6) 0 0;
  font-size: var(--cr-fs-small);
  color: var(--cr-text-secondary);
}

/* Prose info columns (docker-hub Access) on the same corpus chrome. */
.tool-corpus__body {
  display: grid;
  gap: var(--cr-space-3);
}

.tool-corpus__body p {
  margin: 0;
  color: var(--cr-text-secondary);
  line-height: 1.7;
}

.tool-corpus__body code {
  font-family: var(--cr-font-mono);
  font-size: 0.9em;
  color: var(--cr-text-primary);
  overflow-wrap: anywhere;
}

/* Repository list inside an info column — mono rows with hairline borders. */
.tool-mono-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tool-mono-list li {
  padding: var(--cr-space-3) 0;
  border-bottom: 1px solid var(--cr-border);
  font-family: var(--cr-font-mono);
  font-size: var(--cr-fs-small);
  color: var(--cr-text-primary);
}

.tool-mono-list li:last-child {
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   FAQ — mist ground, details accordions
   -------------------------------------------------------------------------- */

.section--mist {
  background: var(--cr-info-bg);
}

.tool-faq__narrow {
  max-width: 896px;
}

.tool-faq__title {
  margin-bottom: var(--cr-space-6);
}

.tool-faq__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.tool-faq__item {
  background: var(--cr-background);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-card, 8px);
  padding: var(--cr-space-5) var(--cr-space-6);
}

.tool-faq__q {
  position: relative;
  padding-right: 32px;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: var(--cr-fw-semibold);
  line-height: 1.5;
  color: var(--cr-text-primary);
  cursor: pointer;
  list-style: none;
}

.tool-faq__q::-webkit-details-marker {
  display: none;
}

.tool-faq__q::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  font-weight: var(--cr-fw-regular, 400);
  color: var(--cr-brand-blue);
  transition: transform var(--cr-dur-base) var(--cr-ease-standard);
}

.tool-faq__item[open] .tool-faq__q::after {
  content: '\2013'; /* en dash */
}

.tool-faq__a {
  margin-top: var(--cr-space-4);
  max-width: 60ch;
  font-size: var(--cr-fs-body);
  line-height: 1.7;
  color: var(--cr-text-secondary);
}

.tool-faq__a .tool-link {
  overflow-wrap: anywhere;
}

/* ZH CTA subtitle: narrower measure avoids single-glyph strandings. */
html[lang='zh'] .final-cta .final-cta__subtitle {
  max-width: 28em;
}

/* --------------------------------------------------------------------------
   CTA band reuses .final-cta from home.css; ghost button for the secondary
   -------------------------------------------------------------------------- */

.btn--ghost-on-dark {
  background: transparent;
  color: var(--cr-on-dark-primary);
  border: 1px solid rgba(255, 255, 255, 0.32);
}

.btn--ghost-on-dark:hover {
  color: var(--cr-on-dark-primary);
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .tool-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--cr-space-6);
  }

  .tool-hero__visual {
    display: none; /* keep LCP on the headline, mirroring the old landing */
  }
}

@media (max-width: 900px) {
  .tool-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tool-corpus__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .tool-hero {
    padding-top: 120px;
  }

  .tool-faq__item {
    padding: var(--cr-space-4) var(--cr-space-5);
  }

  .final-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .final-cta__actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tool-faq__q::after {
    transition: none;
  }
}