/* Blog index + article styles. Uses tokens.css variables. White backgrounds. */

/* ---- Shared hero for index + posts ---- */
.blog-hero {
  background: var(--ct-black);
  color: #fff;
  padding: var(--space-lg) 0;
}
.blog-hero .eyebrow { color: var(--ct-gold); }
.blog-hero h1 { color: #fff; margin: 12px 0 14px; max-width: 20ch; }
.blog-hero__sub { color: rgba(255,255,255,0.72); font-size: 17px; line-height: 1.7; max-width: 60ch; }

/* ---- Breadcrumb ---- */
.blog-crumb { font-size: 13px; color: var(--ct-caption); padding: 20px 0 0; }
.blog-crumb a { color: var(--ct-blue); text-decoration: none; }
.blog-crumb a:hover { text-decoration: underline; }
.blog-crumb span { color: var(--ct-border); margin: 0 8px; }

/* ---- Index grid ---- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--ct-white);
  border: 1px solid var(--ct-border);
  border-top: 3px solid var(--ct-gold);
  border-radius: var(--radius);
  padding: 26px 24px 24px;
  transition: box-shadow 0.15s, transform 0.15s;
  text-decoration: none;
}
.blog-card:hover { box-shadow: 0 12px 30px rgba(12,15,24,0.10); transform: translateY(-2px); }
.blog-card__tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ct-blue); margin-bottom: 12px;
}
.blog-card__title { font-size: 19px; line-height: 1.35; color: var(--ct-black); margin: 0 0 10px; }
.blog-card__dek { font-size: 14px; line-height: 1.7; color: var(--ct-caption); margin: 0 0 18px; flex-grow: 1; }
.blog-card__meta { font-size: 12px; color: var(--ct-caption); display: flex; align-items: center; gap: 8px; }
.blog-card__more { font-size: 13px; font-weight: 600; color: var(--ct-blue); }

/* ---- Article ---- */
.blog-article { max-width: 760px; margin: 0 auto; }
.blog-article__meta { font-size: 13px; color: var(--ct-caption); margin: 8px 0 var(--space-md); }
.blog-article__body { font-size: 17px; line-height: 1.8; color: var(--ct-text); }
.blog-article__body h2 { font-size: 26px; line-height: 1.3; color: var(--ct-black); margin: 40px 0 14px; }
.blog-article__body h3 { font-size: 20px; line-height: 1.4; color: var(--ct-black); margin: 28px 0 10px; }
.blog-article__body p { margin: 0 0 18px; }
.blog-article__body ul, .blog-article__body ol { margin: 0 0 18px; padding-left: 22px; }
.blog-article__body li { margin-bottom: 10px; }
.blog-article__body a { color: var(--ct-blue); text-decoration: underline; text-underline-offset: 2px; }
.blog-article__body strong { color: var(--ct-black); }
.blog-article__body blockquote {
  margin: 24px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--ct-gold);
  font-size: 19px; color: var(--ct-black); font-style: italic;
}
.blog-article__lead { font-size: 20px; line-height: 1.7; color: var(--ct-black); margin: 0 0 28px; }

/* ---- Related services block ---- */
.blog-related {
  max-width: 760px; margin: 40px auto 0; padding: 28px 30px;
  background: var(--ct-gray-light); border: 1px solid var(--ct-border); border-radius: var(--radius);
}
.blog-related h3 { font-size: 16px; color: var(--ct-black); margin: 0 0 10px; }
.blog-related p { font-size: 15px; line-height: 1.75; color: var(--ct-caption); margin: 0 0 8px; }
.blog-related a { color: var(--ct-blue); font-weight: 600; text-decoration: none; }
.blog-related a:hover { text-decoration: underline; }

/* ---- Table of contents ---- */
.blog-toc {
  max-width: 760px; margin: 0 auto 30px; padding: 20px 24px;
  background: var(--ct-gray-light); border: 1px solid var(--ct-border);
  border-left: 3px solid var(--ct-blue); border-radius: var(--radius);
}
.blog-toc__title { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ct-caption); margin: 0 0 12px; }
.blog-toc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.blog-toc li { font-size: 15px; line-height: 1.5; }
.blog-toc a { color: var(--ct-blue); text-decoration: none; }
.blog-toc a:hover { text-decoration: underline; }
.blog-article__body h2 { scroll-margin-top: 90px; }

/* ---- Share ---- */
.blog-share { max-width: 760px; margin: 32px auto 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.blog-share__label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ct-caption); }
.blog-share a {
  font-size: 13px; font-weight: 600; color: var(--ct-blue); text-decoration: none;
  border: 1px solid var(--ct-border); border-radius: var(--radius); padding: 6px 14px;
}
.blog-share a:hover { border-color: var(--ct-blue); }

/* ---- Author ---- */
.blog-author {
  max-width: 760px; margin: 28px auto 0; padding: 24px 28px;
  background: var(--ct-black); border-radius: var(--radius); color: #fff;
}
.blog-author__name { font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 2px; }
.blog-author__role { font-size: 13px; color: var(--ct-gold); margin: 0 0 12px; }
.blog-author__bio { font-size: 14px; line-height: 1.75; color: rgba(255,255,255,0.72); margin: 0; }

/* ---- Related posts ---- */
.blog-more__heading { font-size: 20px; color: var(--ct-black); margin: 0 0 20px; }
.blog-more__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.blog-more__card {
  display: flex; flex-direction: column; gap: 8px; background: var(--ct-white);
  border: 1px solid var(--ct-border); border-top: 3px solid var(--ct-gold);
  border-radius: var(--radius); padding: 22px 22px; text-decoration: none;
  transition: box-shadow 0.15s, transform 0.15s;
}
.blog-more__card:hover { box-shadow: 0 10px 26px rgba(12,15,24,0.10); transform: translateY(-2px); }
.blog-more__tag { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ct-blue); }
.blog-more__title { font-size: 16px; line-height: 1.4; color: var(--ct-black); }

/* ---- Subscribe ---- */
.ct-subscribe { background: var(--ct-gray-light); }
.ct-subscribe__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center;
  background: var(--ct-white); border: 1px solid var(--ct-border); border-top: 3px solid var(--ct-blue);
  border-radius: var(--radius); padding: 36px 40px;
}
.ct-subscribe__copy h2 { font-size: 24px; color: var(--ct-black); margin: 8px 0 10px; }
.ct-subscribe__copy p { font-size: 15px; line-height: 1.75; color: var(--ct-caption); margin: 0; }
.ct-subscribe__row { display: flex; gap: 10px; align-items: flex-start; }
.ct-subscribe-form .ct-field { flex-grow: 1; display: flex; flex-direction: column; gap: 6px; }
.ct-subscribe-form input {
  font-family: var(--font-body); font-size: 15px; color: var(--ct-text); background: var(--ct-white);
  border: 1px solid var(--ct-border); border-radius: var(--radius); padding: 13px 14px; width: 100%; outline: none;
}
.ct-subscribe-form input:focus { border-color: var(--ct-blue); }
.ct-subscribe-form .ct-field.has-error input { border-color: #dc2626; }
.ct-subscribe-form .ct-field-err { font-size: 12px; color: #dc2626; min-height: 14px; }
.ct-subscribe-form .ct-form-status { font-size: 14px; line-height: 1.6; margin-top: 10px; display: none; }
.ct-subscribe-form .ct-form-status--ok { display: block; color: #065f46; }
.ct-subscribe-form .ct-form-status--err { display: block; color: #991b1b; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .blog-more__grid { grid-template-columns: 1fr; }
  .ct-subscribe__inner { grid-template-columns: 1fr; gap: var(--space-md); padding: 28px 24px; }
}
@media (max-width: 620px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-article__body { font-size: 16px; }
  .ct-subscribe__row { flex-direction: column; }
  .ct-subscribe__row .btn { width: 100%; }
}