/* ═══ blog.css — styles for the blog pages (uses tokens from brand.css) ═══ */
.container.narrow { width: min(760px, 100% - 2.5rem); }
.blog-list, .archive { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.meta { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: .4rem; }

/* image frames: one card shape, different fits */
.frame, .featured-frame { position: relative; overflow: hidden; background: var(--ecru); }
.frame { aspect-ratio: 3 / 2; border-bottom: 3px solid var(--blue); }
.frame img, .featured-frame img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; }
.fit-whole img, .fit-whole-white img { object-fit: contain; }
.fit-whole-white { background: #fff; }
.fit-whole-white img { padding: 4%; }
.fit-blur img { object-fit: contain; }
.fit-blur::before { content: ''; position: absolute; inset: -20px; background: var(--img) center / cover; filter: blur(18px) brightness(.9); }
.play-badge { position: absolute; left: .75rem; bottom: .75rem; background: rgba(46,54,71,.85); color: #fff; font-size: .75rem; font-weight: 700; padding: .3rem .6rem; border-radius: 20px; }

/* featured post */
.featured { margin-bottom: 2.5rem; }
.featured-link { display: grid; grid-template-columns: 1.25fr 1fr; min-height: 400px; background: var(--ecru); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .2s; }
.featured-link:hover { box-shadow: 0 8px 26px rgba(0,115,217,.13); }
.featured-frame { min-height: 300px; }
.featured-frame img { position: absolute; inset: 0; }
.featured .body { padding: 2.25rem; display: flex; flex-direction: column; justify-content: center; border-left: 4px solid var(--amber); }
.featured h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; margin-bottom: .75rem; }
.featured p { margin-bottom: 1.25rem; }
.featured .btn { align-self: flex-start; }
.tag { display: inline-block; align-self: flex-start; background: rgba(255,179,71,.25); color: #8a5200; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 20px; margin-bottom: .9rem; }
.sub { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.1rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(71,84,105,.15); }

/* cards */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.card { background: var(--ecru); border-radius: var(--radius); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(0,115,217,.13); }
.card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.card .body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.card h3 { font-size: 1.15rem; line-height: 1.3; margin-bottom: .5rem; }
.card p { font-size: .93rem; margin-bottom: 1rem; flex: 1; }
.read { font-weight: 700; color: var(--blue); font-size: .92rem; }
.card-link:hover .read { text-decoration: underline; }
.older { text-align: center; margin-top: 2.75rem; }

/* archive */
.year { font-size: 1.4rem; margin: 2rem 0 .75rem; color: var(--slate-dark); }
.archive-list { list-style: none; border-top: 1px solid rgba(71,84,105,.15); }
.archive-list li { border-bottom: 1px solid rgba(71,84,105,.15); }
.archive-list a { display: grid; grid-template-columns: 7.5rem 1fr; gap: .2rem 1rem; padding: 1rem .25rem; text-decoration: none; color: inherit; }
.archive-list a:hover .a-title { color: var(--blue); }
.a-date { grid-row: span 2; font-size: .85rem; font-weight: 600; color: var(--blue); padding-top: .15rem; }
.a-title { font-weight: 700; color: var(--slate-dark); font-size: 1.05rem; }
.a-teaser { font-size: .92rem; }
.page-header a.on-blue { color: #fff; }

/* single post */
.post-header .post-meta { font-size: .95rem; opacity: .85; }
.post { padding: clamp(2rem, 5vw, 3rem) 0 clamp(2.5rem, 6vw, 4rem); }
.post-media { margin: 0 0 2rem; background: var(--ecru); border-radius: var(--radius); overflow: hidden; }
.post-media img, .post-media video { width: 100%; max-height: 70vh; object-fit: contain; display: block; margin: 0 auto; background: var(--ecru); }
.post-body { font-size: 1.08rem; line-height: 1.75; color: var(--slate); }
.post-body p, .post-body ul, .post-body ol, .post-body blockquote, .post-body .table-wrap { margin-bottom: 1.2rem; }
.post-body h2 { font-size: 1.45rem; margin: 2rem 0 .75rem; }
.post-body ul, .post-body ol { padding-left: 1.4rem; }
.post-body li { margin-bottom: .35rem; }
.post-body strong { color: var(--slate-dark); }
.post-body a { color: var(--blue); font-weight: 600; }
/* brand.css makes blockquotes italic (for testimonials); posts set their own */
.post-body blockquote { font-style: normal; margin-top: 0; border-left: 4px solid var(--amber); background: var(--ecru); padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; font-size: 1.15rem; }
.post-body blockquote p { margin: 0; }
.post-body blockquote.update-note { border-left-color: var(--blue); font-size: 1rem; background: rgba(0,115,217,.07); }
.table-wrap { overflow-x: auto; }
.post-body table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.post-body th, .post-body td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid rgba(71,84,105,.2); }
.post-body th { color: var(--slate-dark); background: var(--ecru); }
.post-cta { margin: 3rem 0 2rem; background: var(--blue); color: #fff; border-radius: var(--radius); padding: 2rem; }
.post-cta h2 { color: #fff; font-size: 1.4rem; margin-bottom: .5rem; }
.post-cta p { opacity: .9; margin-bottom: 1.25rem; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.post-nav a { display: block; padding: 1rem 1.2rem; background: var(--ecru); border-radius: var(--radius); text-decoration: none; color: var(--slate-dark); font-weight: 700; line-height: 1.35; }
.post-nav a:hover { box-shadow: 0 6px 20px rgba(0,115,217,.12); }
.post-nav span { display: block; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: .3rem; }
.post-nav .next { text-align: right; }
.back a { color: var(--blue); font-weight: 700; text-decoration: none; }

@media (max-width: 480px) { .nav-right .nav-linkedin { display: none; } }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  .featured-link { grid-template-columns: 1fr; min-height: 0; }
  .featured-frame { aspect-ratio: 3 / 2; min-height: 0; }
  .featured .body { border-left: none; border-top: 4px solid var(--amber); padding: 1.5rem; }
  .archive-list a { grid-template-columns: 1fr; }
  .a-date { grid-row: auto; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav .next { text-align: left; }
}