/* ============================================================
   blog.html — page-scoped styles.

   This page had common.css commented out and styles.css swapped
   for this file with no content yet, so it was rendering totally
   unstyled. Every class this page uses already existed in
   oldstyles.css (same design system as pricing.html/docs.html —
   CSS custom properties, Inter font, not the Assistant/oldcommon.css
   system used elsewhere on the site) and is migrated verbatim below:
   .docs-body, .blog-page, .blog-hero, .blog-tools, .blog-tags,
   .blog-search, .blog-post, and .best-practices.

   .section-kicker had TWO separate rules in oldstyles.css (one
   shared with docs-content, one shared with a nytro-hero-style
   block) that set different, non-overlapping properties on the
   same class. Since the original file loaded both as one cascade,
   they're merged here into the single computed result rather than
   picking just one.
   ============================================================ */

:root {
  color-scheme: dark;
  --bg: #0a0a0a;
  --panel: rgba(255, 255, 255, 0.05);
  --text: #f7f3f0;
  --muted: #b9b4b0;
  --accent: #4f9bd0;
  --accent-strong: #ff7a24;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  color: var(--text);
  background: var(--bg);
}

.docs-body {
  background: #000;
}

/* Back-to-top button (rendered by the shared footer include on every
   page; common.css is commented out on this page, so it needs its
   own styling here or it renders as an unstyled native button). */
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  width: 44px;
  height: 44px;
  border: none;
  outline: none;
  border-radius: 50%;
  background: #0ea5e9;
  color: #e5e7eb;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  font-weight: 700;
  line-height: 1;
  font-size: 18px;
}

#myBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(3, 105, 161, 0.35);
  background: #0284c7;
}

#myBtn:active,
#myBtn:focus {
  background: #0369a1;
  color: #e5e7eb;
  outline: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

#myBtn i {
  display: none;
}

/* ------------------------------------------------------------
   Page shell + hero
   ------------------------------------------------------------ */
.blog-page {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 130px 0 92px;
}

.blog-hero {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.blog-hero h1 {
  max-width: 920px;
  font-size: clamp(2.4rem, 6vw, 4.7rem);
}

/* Shared with .blog-post's "Kubernetes" kicker; merged from two
   rules in oldstyles.css (see header note above). */
.section-kicker {
  max-width: 720px;
  margin: 0 0 46px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Filter bar (tags + search)
   ------------------------------------------------------------ */
.blog-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 44px 0;
}

.blog-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  min-width: 0;
}

.blog-tags a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #dbe5df;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.2s ease;
}

.blog-tags a:hover,
.blog-tags a:focus-visible {
  border-color: rgba(79, 155, 208, 0.5);
  color: #ffffff;
  outline: none;
}

.blog-tags a.active {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}

.blog-tags a.active:hover,
.blog-tags a.active:focus-visible {
  border-color: transparent;
  color: #ffffff;
}

.blog-search {
  flex: 0 0 min(350px, 32vw);
  position: relative;
}

.blog-search span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.blog-search input {
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: var(--text);
  background: #080808;
  font: inherit;
  transition: border-color 0.2s ease;
}

.blog-search input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ------------------------------------------------------------
   Post + best-practices grid
   ------------------------------------------------------------ */
.blog-post {
  max-width: none;
  padding: 36px 0 0;
}

.blog-post + .blog-post {
  margin-top: 20px;
  padding-top: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.blog-post h2 {
  max-width: 760px;
  margin: 0 0 28px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.06;
}

/* ------------------------------------------------------------
   "New" update post (kicker + badge, dek, subheaded body)
   ------------------------------------------------------------ */
.post-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.post-meta .section-kicker {
  margin: 0;
}

.badge-new {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
}

.update-post h2 {
  margin-bottom: 18px;
}

.post-dek {
  max-width: 820px;
  margin: 0 0 30px;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1.55;
}

.update-body {
  max-width: 780px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.update-body p {
  margin: 0;
  color: #dcd8d4;
  font-size: 1rem;
  line-height: 1.7;
}

.update-body h3 {
  margin: 8px 0 0;
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
}

/* ------------------------------------------------------------
   Best-practices cards (clickable: header + short blurb + link)
   ------------------------------------------------------------ */
.best-practices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.best-practices li {
  border-radius: 8px;
}

.practice-card {
  min-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  height: 100%;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #f3f7f2;
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(79, 155, 208, 0.2), rgba(0, 0, 0, 0.08) 46%),
    #050505;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.practice-card:hover,
.practice-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(79, 155, 208, 0.4);
  outline: none;
}

.practice-card h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
}

.practice-card p {
  margin: 0;
  color: #cfd6d3;
  font-size: 0.88rem;
  line-height: 1.4;
}

.practice-card:hover h3,
.practice-card:focus-visible h3 {
  color: var(--accent);
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .blog-page {
    width: min(100% - 36px, 1180px);
    padding-top: 54px;
  }

  .blog-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .blog-tags {
    flex-wrap: wrap;
  }

  .blog-search {
    flex: 0 0 auto;
  }

  .best-practices {
    grid-template-columns: 1fr;
  }
}