/* ==========================================================================
   Blog (/blog, /blog/<slug>). Separate file for the same reason as
   services.css: CSS is cached for a year, so new rules need a new file.
   Uses the brand tokens from main-v2.css.
   ========================================================================== */

/* List page hero */
.blog-hero { padding-top: clamp(120px, 14vw, 170px); }
.blog-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 64px); align-items: end; }
.blog-hero-grid .lede { margin: 0; }
.blog-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, 4vw, 44px); }
.blog-cats a { padding: 8px 14px; border: 1px solid var(--bone-white-40); border-radius: 99px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--bone-white-70); transition: border-color .15s ease, color .15s ease; }
.blog-cats a:hover { color: var(--bone-white); border-color: var(--bone-white); }
.blog-cats a[aria-current] { background: var(--bone-white); color: var(--iron-black); border-color: var(--bone-white); }
.blog-empty { opacity: .7; }

.blog-meta { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ember-red); margin: 0 0 10px; }
.blog-meta a { color: inherit; }
.blog-meta time { color: var(--steel-grey); }

/* Lead post: big split, image left */
.blog-lead { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding-bottom: clamp(40px, 6vw, 72px); }
.blog-lead-media { display: block; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--iron-black); }
.blog-lead-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-move, ease); }
.blog-lead:hover .blog-lead-media img { transform: scale(1.03); }
.blog-noimg { display: grid; place-items: center; width: 100%; height: 100%; }
.blog-noimg img { width: 40%; height: auto; object-fit: contain; opacity: .9; }
.blog-lead h2 { margin: 0 0 16px; }
.blog-lead h2 a:hover { color: var(--ember-red); }
.blog-by { font-size: 14px; color: var(--steel-grey); margin-top: 18px; }

/* Older posts: dated editorial rows */
.blog-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--iron-black); }
.blog-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 220px; gap: 12px clamp(16px, 3vw, 40px); align-items: start;
  padding: 28px 0; border-bottom: 1px solid rgba(20,23,26,.14); position: relative; }
.blog-row-date { font-size: 13px; color: var(--steel-grey); line-height: 1.3; }
.blog-row-date span { display: block; font-family: var(--font-founder); font-size: 22px; color: var(--iron-black); text-transform: uppercase; }
.blog-row-title { font-family: var(--font-founder); font-weight: 400; text-transform: uppercase; font-size: clamp(19px, 2.1vw, 26px); line-height: 1.15; margin: 0 0 10px; }
.blog-row-title a::after { content: ''; position: absolute; inset: 0; }
.blog-row:hover .blog-row-title a { color: var(--ember-red); }
.blog-row-excerpt { font-size: 16px; line-height: 1.55; opacity: .78; margin: 0; max-width: 62ch; }
.blog-row-img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; border-radius: 6px; }

.blog-pager { display: flex; gap: 24px; align-items: center; justify-content: space-between; margin-top: 40px; font-weight: 600; }
.blog-pager a { color: var(--ember-red); border-bottom: 1px solid currentColor; }
.blog-pager span { opacity: .6; font-weight: 500; }

/* Related reading under the post */
.blog-related { max-width: 68ch; margin-top: 48px; padding-top: 28px; border-top: 2px solid var(--iron-black); }
.blog-related h2 { font-family: var(--font-founder); font-weight: 400; text-transform: uppercase; font-size: 20px; letter-spacing: .02em; margin-bottom: 14px; }
.blog-related ul { list-style: none; margin: 0; padding: 0; }
.blog-related li { border-bottom: 1px solid rgba(20,23,26,.14); }
.blog-related a { display: block; padding: 14px 0 14px 18px; border-left: 3px solid transparent; transition: border-color .15s ease, color .15s ease; font-size: 17px; font-weight: 600; line-height: 1.35; }
.blog-related a:hover { color: var(--ember-red); border-left-color: var(--ember-red); }

/* Post FAQ (reuses .faq-wrap / .faq-item from services.css) */
.blog-faq + .section-tight { border-top: 1px solid var(--bone-white-12); }

/* Article */
.blog-preview-bar { position: sticky; top: 0; z-index: 60; background: var(--unity-gold); color: var(--iron-black); padding: 10px var(--gutter); font-weight: 600; font-size: 14px; }
.blog-preview-bar a { text-decoration: underline; }
.blog-article-head { padding-top: clamp(120px, 14vw, 170px); }
.blog-title { max-width: 20ch; }
.blog-standfirst { max-width: 58ch; margin-top: 22px; }
.blog-byline { font-size: 14px; color: var(--bone-white-70); margin-top: 26px; }
.blog-byline strong { color: var(--bone-white); font-weight: 600; }
.blog-cover { margin: 0; background: linear-gradient(var(--iron-black) 50%, var(--bone-white) 50%); padding: 0 var(--gutter); }
.blog-cover img { max-width: var(--container-w); width: 100%; height: auto; margin: 0 auto; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius); }
.blog-body-wrap .container { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: clamp(24px, 5vw, 72px); align-items: start; }

.blog-body { font-size: 18px; line-height: 1.7; max-width: 68ch; }
.blog-body > * + * { margin-top: 1.1em; }
.blog-body h2 { font-family: var(--font-founder); font-weight: 400; text-transform: uppercase; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; margin-top: 1.8em; }
.blog-body h3 { font-size: 21px; font-weight: 700; line-height: 1.3; margin-top: 1.5em; }
.blog-body h4 { font-size: 18px; font-weight: 700; margin-top: 1.3em; }
.blog-body a { color: var(--ember-red); border-bottom: 1px solid currentColor; }
.blog-body a:hover { color: var(--iron-black); }
.blog-body ul, .blog-body ol { padding-left: 1.3em; }
.blog-body ul { list-style: disc; }
.blog-body ol { list-style: decimal; }
.blog-body li + li { margin-top: .4em; }
.blog-body li::marker { color: var(--ember-red); }
.blog-body blockquote { border-left: 4px solid var(--ember-red); padding: 4px 0 4px 22px; font-family: var(--font-philosopher); font-style: italic; font-size: 22px; line-height: 1.45; }
.blog-body img { width: 100%; height: auto; border-radius: var(--radius); margin-top: 1.6em; margin-bottom: .6em; }
.blog-body .embed { position: relative; aspect-ratio: 16/9; margin-top: 1.6em; }
.blog-body .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius); }
.blog-body strong { font-weight: 700; }

.blog-share { position: sticky; top: 110px; display: grid; gap: 10px; font-size: 14px; font-weight: 600; }
.blog-share span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--steel-grey); }
.blog-share a { border-bottom: 1px solid rgba(20,23,26,.2); padding-bottom: 8px; }
.blog-share a:hover { color: var(--ember-red); }

.blog-more { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bone-white-40); }
.blog-more a { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--bone-white-12); }
.blog-more-title { font-family: var(--font-founder); text-transform: uppercase; font-size: clamp(17px, 2vw, 22px); line-height: 1.2; }
.blog-more a:hover .blog-more-title { color: var(--ember-red); }
.blog-more-date { font-size: 13px; color: var(--bone-white-70); white-space: nowrap; }

@media (max-width: 900px) {
  .blog-hero-grid, .blog-lead { grid-template-columns: 1fr; }
  .blog-row { grid-template-columns: 80px minmax(0, 1fr); }
  .blog-row-img { grid-column: 2; max-width: 320px; }
  .blog-body-wrap .container { grid-template-columns: 1fr; }
  .blog-share { position: static; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; border-top: 1px solid rgba(20,23,26,.14); padding-top: 20px; }
  .blog-share a { border: 0; padding: 0; }
}
@media (max-width: 560px) {
  .blog-article-head .crumbs li[aria-current] { display: none; }
  .blog-row { grid-template-columns: 1fr; }
  .blog-row-img { grid-column: 1; max-width: none; }
  .blog-row-date span { display: inline; font-size: 15px; }
  .blog-body { font-size: 17px; }
  .blog-more a { flex-direction: column; gap: 4px; }
}