/* ==========================================================================
   blog.css — BMC Manufacturing
   Layers on top of site.css. MUST load second.

   Everything here is scoped to blog article pages and the blog index. It
   deliberately reuses the tokens already defined in site.css (--ink, --navy,
   --royal, --mist, --paper, --line, --disp, --body, --mono) rather than
   introducing a second palette.

   The class names are the ones AUTO_BLOG_ROUTINE.md instructs the routine to
   use. Renaming anything here means updating that file too.
   ========================================================================== */

/* ---------- article shell ------------------------------------------------ */

.bp-body {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 72px) 0 24px;
  font-size: 17px;
  line-height: 1.72;
  color: #33404f;
}

.bp-body > * + * { margin-top: 22px; }

.bp-body h2 {
  font-family: var(--disp);
  font-size: clamp(23px, 3.2vw, 30px);
  line-height: 1.22;
  color: var(--navy);
  letter-spacing: -.015em;
  margin-top: 52px;
}

.bp-body h3 {
  font-family: var(--disp);
  font-size: clamp(18px, 2.4vw, 21px);
  line-height: 1.3;
  color: var(--navy);
  margin-top: 34px;
}

.bp-body p { margin-top: 18px; }
.bp-body strong { color: var(--navy); font-weight: 650; }

.bp-body a {
  color: var(--royal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.bp-body a:hover { color: var(--royal-soft); }

/* ---------- meta line + updated stamp ------------------------------------ */

.bp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.bp-meta .bp-cat {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid var(--line-d);
  border-radius: 999px;
  padding: 4px 11px;
}

.updated-stamp {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--steel);
  border-left: 2px solid var(--line);
  padding-left: 12px;
  margin-top: 26px !important;
}

/* ---------- the answer box (the most important element on the page) ------ */

.answer-box {
  background: linear-gradient(180deg, rgba(47, 62, 168, .06), rgba(47, 62, 168, .02));
  border: 1px solid rgba(47, 62, 168, .22);
  border-left: 3px solid var(--royal);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-top: 30px !important;
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--navy);
}

.answer-box p { margin: 0; }
.answer-box p + p { margin-top: 12px; }

.answer-box .ab-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--royal);
  margin-bottom: 9px;
}

/* ---------- at a glance --------------------------------------------------- */

.at-a-glance {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 8px 24px 20px;
  margin-top: 34px;
}

.at-a-glance > .aag-h {
  font-family: var(--disp);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .01em;
  padding: 16px 0 4px;
}

.at-a-glance dl { margin: 0; }

.at-a-glance dt {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--steel);
  padding-top: 15px;
  border-top: 1px dashed var(--line);
  margin-top: 14px;
}

.at-a-glance dd {
  margin: 5px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--navy);
}

/* ---------- tables -------------------------------------------------------- */

.bp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 30px;
}

.bp-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 15px;
}

.bp-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--steel);
  padding: 14px 18px 10px;
}

.bp-table th,
.bp-table td {
  padding: 12px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.bp-table thead th {
  background: var(--mist);
  font-family: var(--disp);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .01em;
  border-bottom: 1px solid var(--line);
}

.bp-table tbody tr:last-child td { border-bottom: 0; }
.bp-table tbody tr:nth-child(even) td { background: rgba(233, 237, 244, .38); }

.bp-table td.num,
.bp-table th.num {
  font-family: var(--mono);
  font-size: 14px;
  white-space: nowrap;
  color: var(--navy);
  font-weight: 500;
}

.bp-table tfoot td {
  background: var(--mist);
  font-weight: 650;
  color: var(--navy);
}

/* ---------- lists --------------------------------------------------------- */

.bp-list {
  list-style: none;
  margin-top: 24px;
  padding: 0;
}

.bp-list li {
  position: relative;
  padding-left: 28px;
  margin-top: 13px;
  font-size: 16.5px;
  line-height: 1.62;
}

.bp-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--royal);
}

/* numbered process steps (mirrored into HowTo schema when used) */

.bp-steps {
  counter-reset: bpstep;
  list-style: none;
  margin-top: 28px;
  padding: 0;
}

.bp-steps li {
  counter-increment: bpstep;
  position: relative;
  padding-left: 56px;
  margin-top: 24px;
}

.bp-steps li::before {
  content: counter(bpstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--royal);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 9px;
  background: #fff;
}

.bp-steps h3 {
  margin: 0 0 5px;
  font-size: 17px;
}

.bp-steps p { margin: 0; font-size: 16px; }

/* ---------- callouts ------------------------------------------------------ */

.warn-box,
.bp-note {
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-top: 30px;
  font-size: 16px;
  line-height: 1.6;
}

.warn-box {
  background: rgba(232, 200, 138, .13);
  border: 1px solid rgba(232, 200, 138, .5);
  border-left: 3px solid var(--gold);
  color: #5c4a22;
}

.warn-box strong { color: #4a3a15; }

.bp-note {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--steel-2);
  color: #46525f;
}

.warn-box .wb-label,
.bp-note .bn-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 7px;
  opacity: .85;
}

.warn-box p,
.bp-note p { margin: 0; }
.warn-box p + p,
.bp-note p + p { margin-top: 10px; }

/* ---------- key points ---------------------------------------------------- */

.key-points {
  background: var(--ink);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin-top: 44px;
  color: rgba(255, 255, 255, .82);
}

.key-points .kp-h {
  font-family: var(--disp);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
}

.key-points ul { list-style: none; margin: 0; padding: 0; }

.key-points li {
  position: relative;
  padding-left: 26px;
  margin-top: 11px;
  font-size: 16px;
  line-height: 1.6;
}

.key-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--royal-glow);
}

.key-points strong { color: #fff; }

/* ---------- figures ------------------------------------------------------- */

.bp-fig {
  margin-top: 36px;
}

.bp-fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.bp-fig figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--steel);
}

/* ---------- FAQ ----------------------------------------------------------- */

.bp-faqs { margin-top: 30px; }

.bp-faq {
  border-bottom: 1px solid var(--line);
}

.bp-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 19px 34px 19px 0;
  position: relative;
  font-family: var(--disp);
  font-size: 17px;
  font-weight: 650;
  color: var(--navy);
  line-height: 1.4;
}

.bp-faq summary::-webkit-details-marker { display: none; }

.bp-faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 26px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--royal);
  border-bottom: 2px solid var(--royal);
  transform: rotate(45deg);
  transition: transform .22s ease;
}

.bp-faq[open] summary::after { transform: rotate(-135deg); top: 30px; }
.bp-faq summary:hover { color: var(--royal); }

.bp-faq .faq-a {
  padding: 0 0 20px;
  font-size: 16px;
  line-height: 1.68;
  color: #46525f;
}

.bp-faq .faq-a p { margin: 0; }
.bp-faq .faq-a p + p { margin-top: 12px; }

/* ---------- article CTA --------------------------------------------------- */

.bp-cta {
  margin-top: 46px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--ink-2) 100%);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 38px);
  color: rgba(255, 255, 255, .78);
}

.bp-cta h2 {
  color: #fff !important;
  margin: 0 0 10px !important;
  font-size: clamp(21px, 3vw, 26px);
}

.bp-cta p { margin: 0 0 20px; font-size: 16.5px; line-height: 1.6; }

.bp-cta .bp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- blog index ---------------------------------------------------- */

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
}

.blog-filters .filter {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-d);
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
  transition: all .2s ease;
}

.blog-filters .filter:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
}

.blog-filters .filter.active {
  color: #fff;
  background: var(--royal);
  border-color: var(--royal);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 34px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  border-color: rgba(47, 62, 168, .35);
  box-shadow: 0 18px 40px rgba(11, 21, 35, .13);
}

.blog-card-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--mist);
  border-bottom: 1px solid var(--line);
}

.blog-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-card-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card .bc-cat {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--royal);
}

.blog-card h3 {
  font-family: var(--disp);
  font-size: 18px;
  line-height: 1.32;
  color: var(--navy);
  margin: 9px 0 8px;
  letter-spacing: -.01em;
}

.blog-card p {
  font-size: 14.5px;
  line-height: 1.58;
  color: #55616e;
  margin: 0 0 16px;
}

.blog-card .bc-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--steel);
}

.blog-card .bc-read { color: var(--royal); font-weight: 600; }

.blog-empty {
  grid-column: 1 / -1;
  padding: 40px 0;
  text-align: center;
  color: var(--steel);
  font-size: 15px;
}

/* ---------- breadcrumb ---------------------------------------------------- */

.bp-crumbs {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 14px;
}

.bp-crumbs a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.bp-crumbs a:hover { color: #fff; text-decoration: underline; }
.bp-crumbs span { opacity: .5; margin: 0 7px; }

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

@media (max-width: 640px) {
  .bp-body { font-size: 16.5px; }
  .answer-box { padding: 19px 18px; font-size: 16.5px; }
  .at-a-glance { padding: 6px 18px 18px; }
  .key-points { padding: 22px 20px; }
  .bp-steps li { padding-left: 46px; }
  .blog-grid { grid-template-columns: 1fr; }
}