/* ==========================================================================
   BULLDROP — SEO content article
   Long-form keyword copy that sits above the footer on content pages.
   Loaded after shared.css on every page that has an article block.
   ========================================================================== */

.seo-article {
  max-width: 96ch;
  margin: 44px auto 0;
  padding: 30px 34px;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--bg-surface);
}

.seo-article__section + .seo-article__section {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.seo-article__h2 {
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 1.35;
  color: var(--text);
}

.seo-article__p {
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.8;
}

/* ---------- Keyword-rich H1 ---------- */
/* The H1 on these pages is a long keyword line rather than a display
   headline, so it reads as a lead-in instead of a giant banner. */
.page-hero__title[data-i18n$=".seoH1"],
.game-head__title[data-i18n$=".seoH1"],
h1[data-i18n$=".seoH1"] {
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--text-soft);
  text-transform: none;
}

/* Hero H1 sat inside the banner with a gradient; neutralise that treatment */
.hero__title[data-i18n$=".seoH1"] {
  max-width: 34ch;
  margin-bottom: 14px;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .seo-article {
    margin-top: 30px;
    padding: 20px 18px;
  }
  .seo-article__h2 { font-size: 16.5px; }
  .seo-article__p { font-size: 14px; }
  .seo-article__section + .seo-article__section {
    margin-top: 20px;
    padding-top: 20px;
  }
}