/*
 * blog.css — public blog (/blog + /blog-articles/:slug)
 *
 * Ported from yms360.com's blog stylesheet, trimmed to only the blog-specific
 * selectors. Design tokens (--navy, --teal, --ink, --muted, radii, shadows) and
 * the base .container/.section/.card/.eyebrow/.fade-up rules already live in
 * vendor/yms-site.css + app.css, so this file only adds what's missing and
 * scopes card colors to blog contexts. Loaded (after app.css) via $pageCss='blog'.
 */

/* CTA heading: balance the two lines and keep the last two words together so no
 * single word ("…call") is ever left alone on the second line. */
.cta-heading { text-wrap: balance; }

/* ---- Blog index hero -------------------------------------------------------
 * Matches yms360.com/blog exactly. The base .hero / .hero-content / .text-center
 * / .text-blue rules already ship in vendor/yms-site.css; only .hero--compact is
 * missing here, so it is ported verbatim from the reference blog stylesheet. */
.hero--compact { min-height: auto; padding-top: calc(var(--nav-height) + 4rem); padding-bottom: 4rem; }
.hero--compact h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
/* Light section wrapping the article grid (reference uses this single class;
 * mirrors cyber .section padding + .bg-light background). */
.section-bg-light { padding: 6rem 0; background: var(--light); }

/* ---- Article cards (index grid + related rail) ------------------------------
 * yms-site.css ships an unscoped `.card-module{background:var(--navy-2)}` (a
 * porting artifact of the original `.bg-navy .card-module`). Blog cards are light,
 * so re-assert white within blog contexts. */
.blog-list .card-module,
.article-related .card-module {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, .06);
  color: var(--ink);
}
.blog-list .card-module:hover,
.article-related .card-module:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.grid-3 .card-module { display: flex; flex-direction: column; height: 100%; }
.card-module img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 8px; margin-bottom: 1rem;
}
.card-thumb-fallback {
  display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--navy-2) 0%, var(--teal-dark) 100%);
}
.card-module .card-meta {
  font-size: 13px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: .5rem; display: flex; gap: .5rem; flex-wrap: wrap;
}
.card-module .card-meta .sep { opacity: .5; }
.card-title {
  font-family: 'Montserrat', sans-serif; font-size: 1.25rem; font-weight: 700;
  line-height: 1.3; color: var(--ink); margin: .25rem 0 .5rem;
}
a.card-module:hover .card-title { color: var(--teal); }

/* ---- Pagination ------------------------------------------------------------ */
.blog-pagination { display: flex; justify-content: center; gap: 1rem; margin-top: 3rem; }
.blog-pagination .page-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px;
  padding: .7rem 1.5rem; border-radius: var(--radius-sm);
  border: 2px solid rgba(0, 0, 0, .15); color: var(--dark-gray); background: var(--white);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.blog-pagination .page-link:hover { border-color: var(--teal); color: var(--teal); }
.blog-pagination .page-link--next { background: var(--teal); border-color: var(--teal); color: var(--white); }
.blog-pagination .page-link--next:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--white); }
.blog-pagination svg { width: 14px; height: 14px; }

/* ---- Article hero ---------------------------------------------------------- */
.article-hero-band {
  position: relative; overflow: hidden; background: var(--off-white);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  padding: calc(var(--nav-height) + 2rem) 0 2.25rem;
}
.article-hero-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(20, 108, 243, .05) 1px, transparent 1px);
  background-size: 26px 26px; pointer-events: none;
}
.article-hero-grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
}
.article-hero-grid--solo { grid-template-columns: 1fr; max-width: 820px; }
.article-hero-copy { min-width: 0; }
.article-hero-copy h1 {
  /* Slightly smaller than the reference's clamp because these cyber titles run
   * longer; keeps a 6-line title from pushing the hero past the fold. */
  font-size: clamp(1.85rem, 3vw, 2.75rem); color: var(--ink); font-weight: 800;
  line-height: 1.14; letter-spacing: -.02em; margin-bottom: 1.25rem;
}
.article-hero-copy .eyebrow { display: block; margin-bottom: 1rem; }
.article-hero-media { margin: 0; }
/* Clone of yms360.com: 4:3 on desktop, 16:9 on mobile, object-fit cover.
 * Hero exhibits are authored with content inside the 4:3-safe center zone so
 * the desktop crop never clips them. */
.article-hero-media img {
  /* height:auto is required — the img carries a height="900" attribute, and with
   * both width (100%) and height explicit the browser ignores aspect-ratio. The
   * cyber vendor reset only sets max-width:100% (no height:auto), unlike the
   * reference stack, which is why the box came out portrait. */
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: block;
}

/* Breadcrumb inside the hero (no border, inline row) */
.blog-article .breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  padding: 0; border: none; margin-bottom: 1.25rem; font-size: 14px;
}
.blog-article .breadcrumb a { color: var(--teal); text-decoration: none; }
.blog-article .breadcrumb a:hover { text-decoration: underline; }
.blog-article .breadcrumb-sep { color: var(--muted); }
.blog-article .breadcrumb-current { color: var(--muted); }

/* Byline */
.article-byline { display: flex; align-items: center; gap: .75rem; }
.article-byline img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.article-byline-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.article-byline-text a, .article-byline-text span { color: var(--ink); font-weight: 600; font-size: 15px; }
.article-byline-text a:hover { color: var(--teal); }
.article-date { font-size: 13px; color: var(--muted); font-weight: 400; }

/* Share */
.article-share { display: flex; align-items: center; gap: .5rem; margin-top: 1.75rem; }
.article-share-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-right: .25rem; font-family: 'Montserrat', sans-serif;
}
.article-share a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12);
  color: var(--dark-gray); background: var(--white);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.article-share a:hover { color: var(--teal); border-color: var(--teal-25); background: var(--teal-10); }
.article-share svg { width: 17px; height: 17px; }

/* ---- Measure grid: prose + sticky TOC -------------------------------------- */
.article-measure {
  width: min(100% - 2rem, 76rem); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(15rem, 22vw, 19rem);
  gap: clamp(2rem, 4vw, 4rem); align-items: start; padding: 3.5rem 0;
}
.article-prose { grid-column: 1; grid-row: 1; min-width: 0; }
.article-toc {
  grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--nav-height) + 1.5rem);
  margin: 0; background: var(--white); border: 1px solid rgba(0, 0, 0, .08);
  border-left: 3px solid var(--teal); border-radius: var(--radius-md); padding: 1.25rem 1.5rem;
}
.article-toc-title {
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .85rem;
}
.article-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: .55rem; }
.article-toc li { counter-increment: toc; display: flex; gap: .65rem; font-size: 15px; line-height: 1.4; }
.article-toc li::before {
  content: counter(toc, decimal-leading-zero); font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 12px; color: var(--teal); flex-shrink: 0; padding-top: 3px;
}
.article-toc a { color: var(--dark-gray); transition: color .2s ease; }
.article-toc a:hover { color: var(--teal); }

/* ---- Prose typography ------------------------------------------------------ */
.article-prose { font-size: clamp(1.0625rem, 1.02rem + .25vw, 1.1875rem); line-height: 1.8; color: var(--dark-gray); }
.article-prose > *:first-child { margin-top: 0; }
.article-lead { font-size: 1.3rem; line-height: 1.6; color: var(--ink); margin-bottom: 1.5rem; }
.article-lead::first-letter {
  float: left; font-family: 'Montserrat', sans-serif; font-size: 4rem; line-height: .78;
  font-weight: 800; color: var(--teal); margin: .06em .14em -.02em 0;
}
.article-prose h2 {
  font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 800; color: var(--ink);
  letter-spacing: -.01em; margin: 3rem 0 1rem; scroll-margin-top: calc(var(--nav-height) + 1.5rem);
}
.article-prose h2::before { content: ""; display: block; width: 44px; height: 3px; background: var(--teal); border-radius: 2px; margin-bottom: 1.1rem; }
.article-prose h3 { font-size: 1.375rem; font-weight: 700; color: var(--ink); margin: 2rem 0 .75rem; scroll-margin-top: calc(var(--nav-height) + 1.5rem); }
.article-prose h4 { font-size: 1.125rem; font-weight: 700; color: var(--ink); margin: 1.5rem 0 .5rem; }
.article-prose p { margin-bottom: 1.35rem; }
.article-prose strong { color: var(--ink); }
.article-prose ul, .article-prose ol { margin: 1.25rem 0 1.75rem 1.5rem; }
.article-prose ul { list-style: disc; }
.article-prose ol { list-style: decimal; }
.article-prose li { margin-bottom: .6rem; padding-left: .25rem; }
.article-prose li::marker { color: var(--teal); }
.article-prose a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.article-prose a:hover { color: var(--teal-dark); }
.article-prose img { width: 100%; border-radius: var(--radius-md); margin: 2rem 0; }
.article-prose code { background: var(--light); padding: 2px 6px; border-radius: 4px; font-size: .9em; font-family: 'SF Mono', Menlo, Monaco, monospace; }
.article-prose pre { background: var(--ink); color: var(--white); padding: 1.25rem; border-radius: var(--radius-md); overflow-x: auto; margin: 2rem 0; }
.article-prose pre code { background: transparent; padding: 0; color: inherit; }
.article-prose blockquote {
  margin: 2.5rem 0; padding: 1.5rem 2rem; border-left: 4px solid var(--teal);
  background: var(--off-white); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: 'Montserrat', sans-serif; font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 600; line-height: 1.45; color: var(--ink); font-style: normal;
}
.article-prose blockquote p { margin: 0; }

/* ---- Related rail ---------------------------------------------------------- */
.article-related { background: var(--light); padding: 4rem 0 5rem; border-top: 1px solid rgba(0, 0, 0, .06); }
.article-related-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.article-related-head h2 { font-size: 1.75rem; font-weight: 800; color: var(--ink); }
.article-related-head .back-link {
  display: inline-flex; align-items: center; gap: .4rem; font-family: 'Montserrat', sans-serif;
  font-weight: 600; font-size: 14px; color: var(--teal); transition: color .2s ease; text-decoration: none;
}
.article-related-head .back-link:hover { color: var(--teal-dark); }

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .article-measure { grid-template-columns: 1fr; gap: 0; width: min(100% - 2rem, 44rem); }
  /* Reset grid-row too — desktop pins both to row 1 (side by side); on one column
   * they must flow in DOM order (TOC then prose) instead of overlapping. */
  .article-toc { grid-column: 1; grid-row: auto; position: static; top: auto; margin-bottom: 2.5rem; }
  .article-prose { grid-column: 1; grid-row: auto; }
}
@media (max-width: 900px) {
  .article-hero-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .article-hero-media { order: -1; }
  .article-hero-media img { aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
  .article-hero-band { padding: calc(var(--nav-height) + 1.5rem) 0 2rem; }
  .article-hero-copy h1 { font-size: 1.75rem; }
  .article-measure { padding: 2rem 0; }
  .article-prose { font-size: 1rem; }
  .article-prose h2 { font-size: 1.5rem; }
  .article-prose h3 { font-size: 1.25rem; }
  .article-lead { font-size: 1.15rem; }
  .article-lead::first-letter { font-size: 3rem; }
  .article-related { padding: 3rem 0 3.5rem; }
  .article-related-head h2 { font-size: 1.5rem; }
}