/* =====================================================================
   KMS BLOG in the deer theme (main site)   assets/css/kms-blog-deer.css
   Loads BEFORE kms-blog.css (the plugin enqueues kms-blog with this file as
   its dependency). kms-blog.css itself is the approved file, unchanged.

   Why: deer styles  .post h2 / .post h3 / .post ul / .post ul li  (one class + one
   element) and  article / nav / header / p  (element). kms-blog.css resets these with
   one class, so the theme wins. Each rule below restates the blog's own base value
   one class stronger (.kms-blog .x). Because this file comes first, every variant
   rule in kms-blog.css that already has two classes (feature, row, data-count) still
   wins the tie, exactly as on the KMS site.
   ===================================================================== */

/* 0. Inherited from deer's body: letter-spacing .5px and overflow-wrap: break-word. */
.kms-blog.kms-blog { letter-spacing: normal; overflow-wrap: normal; }

/* 1. Headings: deer gives h2/h3 padding, margin, a white/colored box, 3px borders,
      white text (h3), 20px / 1.3em size and its own line-height. */
.kms-blog .kms-blog__title {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--kb-ink);
  font-size: clamp(60px, 7.6vw, 100px);
  line-height: .86;
  text-align: left;
}
.kms-blog .kms-blog-card__title {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.62;
  text-align: left;
}

/* 1a. The kms theme balances every heading ( :where(h1, h2, h3) { text-wrap: balance } in its style.css ),
       which sets where the post titles break in the approved design. deer has no such rule. */
.kms-blog :where(h2, h3) { text-wrap: balance; }

/* 1b. deer centers <header> and pads it 3px; its <p> is weight 300. */
.kms-blog .kms-blog__head { padding: 0; text-align: left; }
.kms-blog .kms-blog__lead,
.kms-blog .kms-blog-card__meta,
.kms-blog .kms-blog-card__excerpt { font-weight: 400; }

/* 2. Lists: deer pads every  .post ul  (10px 20px 10px 30px) and colors  .post ul li  #333. */
.kms-blog .kms-blog__grid,
.kms-blog .kms-blog__cats ul { margin: 0; padding: 0; list-style: none; }
.kms-blog .kms-blog__more { margin: 56px 0 0; padding: 30px 0 0; list-style: none; }
.kms-blog .kms-blog-card,
.kms-blog .kms-blog__cats li {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  list-style: none;
}

/* 3. article { margin: 0 auto } would shrink and center the large card inside its grid cell
      (seen with a short latest title). Reset every article in the section. */
.kms-blog article { margin: 0; }

/* 4. nav { text-align: center } */
.kms-blog .kms-blog__cats { text-align: left; }

/* 5. .post a { word-break: break-all } cuts words like "Vol.01" or "KMS" in titles.
      deer also makes links position: relative, which shrinks the card-wide
      click area (the link's ::after) to the title text. */
.kms-blog .kms-blog-card__link,
.kms-blog .kms-blog__cat,
.kms-blog .kms-blog__all { word-break: inherit; }
.kms-blog .kms-blog-card__link { position: static; }

/* 6. Width. deer keeps the content in a 1080px column (350px on phones, with its own 20px
      gutters). Let the gray band run to the window edges like the theme's blue bands.
      The band is 100vw + 32px wide (deer's column sits up to 10px off center), so the
      blog's own 6vw slant is unchanged; body { overflow: hidden } in deer.css clips the extra. */
.kms-blog.kms-blog { overflow: visible; }
.kms-blog .kms-blog__bg {
  left: calc(50% - 50vw - 16px);
  right: calc(50% - 50vw - 16px);
}

@media (max-width: 767px) {
  .kms-blog .kms-blog__title { font-size: 64px; }
  .kms-blog .kms-blog-card__title { font-size: 14px; line-height: 1.6; }
  .kms-blog .kms-blog__more { margin: 40px 0 0; padding: 24px 0 0; }
  /* deer already leaves 20px each side on phones; the blog's own 16px would make it 36px */
  .kms-blog .kms-blog__inner { padding: 0; }
}