/* colophon — home hero.
 *
 * Built on colophon's own documented palette (docs/about/branding.md): petrol
 * teal, amber, cream, charcoal. The structure follows sigillum's hero, which is
 * the pattern for a top-level project rather than a toolkit module, but the
 * colours are read from this project's brand page rather than copied across.
 *
 * Everything reads from the theme's variables where it can, so light and dark
 * work from one set of rules rather than two.
 */

:root {
  --col-teal: #14534f;
  --col-teal-deep: #0e3c39;
  --col-amber: #e8912a;
  --col-cream: #f5f2ea;
  --col-charcoal: #211e1a;
}

[data-md-color-scheme="slate"] {
  --col-teal: #2a8880;
  --col-amber: #f0a44b;
}

/* ---------------------------------------------------------------- hero ---- */

.hero {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin: 1rem auto 3.5rem;
  padding: 2.5rem 2rem;
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 25%, rgba(232, 145, 42, 0.13), transparent 55%),
    radial-gradient(circle at 82% 75%, rgba(20, 83, 79, 0.16), transparent 55%);
  border: 1px solid rgba(20, 83, 79, 0.18);
}

.hero-mark { flex: 0 0 auto; width: 190px; height: 190px; }

.hero-mark img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(33, 30, 26, 0.22));
}

.hero-body { flex: 1; min-width: 0; }

.hero-title {
  font-size: 3.1rem !important;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem !important;
  /* the theme's own .md-typeset h1 rule outranks a plain declaration here */
  color: var(--col-teal) !important;
}

.hero-tagline {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--md-default-fg-color--light);
}

.hero-description {
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 0 1.5rem;
  color: var(--md-default-fg-color--light);
}

/* -------------------------------------------------------- install box ---- */

.install-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  /* Sized so the install line fits outright rather than scrolling under the
     copy button, which reads as a broken layout. */
  max-width: 700px;
  margin: 0 0 1.6rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: var(--md-code-bg-color);
  border: 1px solid rgba(20, 83, 79, 0.28);
  font-family: var(--md-code-font-family, "JetBrains Mono", monospace);
  font-size: 0.76rem;
}

.install-command {
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  color: var(--md-code-fg-color);
}

.install-copy {
  flex: 0 0 auto;
  cursor: pointer;
  border: 0;
  border-radius: 6px;
  padding: 0.3rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--col-teal);
  color: #fff;
  transition: background 0.2s ease, transform 0.2s ease;
}

.install-copy:hover { background: var(--col-teal-deep); transform: translateY(-1px); }
.install-copy.copied { background: var(--col-amber); }

/* ------------------------------------------------------------ buttons ---- */

.hero-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-primary { background: var(--col-teal); color: #fff !important; }
.btn-primary:hover { background: var(--col-teal-deep); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20, 83, 79, 0.3); }

.btn-secondary { background: transparent; color: var(--col-teal) !important; border: 1.5px solid var(--col-teal); }
.btn-secondary:hover { background: rgba(20, 83, 79, 0.09); transform: translateY(-2px); }

/* ------------------------------------------------------- capability grid - */

.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
}

.cap {
  padding: 1.15rem 1.25rem;
  border-radius: 12px;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-top: 3px solid var(--col-amber);
  background: var(--md-default-bg-color);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cap:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(33, 30, 26, 0.1); }
.cap h3 { margin: 0 0 0.35rem; font-size: 1.05rem; color: var(--col-teal); }
.cap h3 code { font-size: 0.95em; background: none; padding: 0; color: inherit; }
.cap p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--md-default-fg-color--light); }

/* ------------------------------------------------------------ responsive - */

@media screen and (max-width: 60em) {
  /* align-items: center on a column flex container sizes children to
     max-content, which the nowrap install line then blows past and the page
     scrolls sideways. Stretch them to the container instead. */
  .hero {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 1.75rem;
    padding: 2rem 1.25rem;
  }
  .hero-mark { width: 150px; height: 150px; align-self: center; }
  .hero-body { width: 100%; max-width: 100%; }
  .hero-title { font-size: 2.4rem !important; }
  .hero-buttons { justify-content: center; }
  .install-box { max-width: 100%; margin-left: auto; margin-right: auto; }
}