/* TashiOS Blog - matches landing site aesthetic */

.blog-breadcrumbs{
  position:static;top:auto;left:auto;right:auto;z-index:auto;
  background:transparent;backdrop-filter:none;border:none;
  max-width:760px;margin:100px auto 0;padding:0 24px;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--text3);
}
.blog-breadcrumbs a{color:var(--amber);text-decoration:none}
.blog-breadcrumbs a:hover{text-decoration:underline}
.blog-breadcrumbs span:last-child{color:var(--text2)}

.author-title{color:var(--amber);font-weight:600;margin:8px 0}
.author-avatar-fallback{
  width:80px;height:80px;border-radius:50%;margin:0 auto 16px;
  background:linear-gradient(135deg,var(--amber),var(--amber2));
  color:#000;font-size:2rem;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.author-social{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:12px 0}
.author-social a{
  font-size:13px;color:var(--text3);text-decoration:none;padding:4px 12px;
  border:1px solid var(--border);border-radius:999px;transition:all .15s;
}
.author-social a:hover{color:var(--amber);border-color:var(--amber)}

.blog-page-header{
  padding:140px 24px 48px;text-align:center;max-width:820px;margin:0 auto;
}
.blog-page-header .section-label{
  font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--amber);margin-bottom:16px;
}
.blog-page-header h1{
  font-size:clamp(2.2rem,5vw,3.2rem);line-height:1.08;letter-spacing:-.03em;margin-bottom:16px;
}
.blog-page-header h1 .gradient{
  background:linear-gradient(135deg,var(--amber),var(--amber2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.blog-page-header p{color:var(--text2);font-size:1.05rem;line-height:1.65;max-width:620px;margin:0 auto}

.blog-toolbar{
  max-width:1100px;margin:0 auto 32px;padding:0 24px;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
.blog-chip{
  display:inline-flex;align-items:center;gap:6px;padding:8px 16px;
  border:1px solid var(--border);border-radius:999px;color:var(--text2);
  text-decoration:none;font-size:13px;font-weight:500;transition:all .2s;
}
.blog-chip:hover,.blog-chip.active{
  border-color:var(--amber);color:var(--text);background:rgba(245,158,11,.08);
}
.blog-chip em{font-style:normal;color:var(--text3);font-size:11px}

.blog-wrap{max-width:1100px;margin:0 auto;padding:0 24px 80px}

.blog-featured{margin-bottom:40px}
.blog-featured .blog-card{
  display:grid;grid-template-columns:1.15fr 1fr;gap:0;overflow:hidden;
  border:1px solid var(--border);border-radius:18px;background:var(--bg2);
  transition:border-color .25s,transform .25s;
}
.blog-featured .blog-card:hover{border-color:var(--border2);transform:translateY(-2px)}
.blog-featured .blog-card-media{min-height:300px}
.blog-featured .blog-card-body{padding:36px 32px;display:flex;flex-direction:column;justify-content:center}
.blog-featured h2{font-size:clamp(1.5rem,3vw,2rem);line-height:1.2}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.blog-card{
  display:flex;flex-direction:column;border:1px solid var(--border);border-radius:16px;
  overflow:hidden;background:var(--bg2);transition:border-color .2s,transform .2s;
}
.blog-card:not(.featured):hover{border-color:var(--border2);transform:translateY(-3px)}
.blog-card-media{display:block;aspect-ratio:16/9;background:var(--bg3);overflow:hidden;position:relative}
.blog-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card-placeholder{
  width:100%;height:100%;min-height:180px;
  background:linear-gradient(135deg,var(--bg3) 0%,var(--bg4) 50%,rgba(245,158,11,.12) 100%);
  display:flex;align-items:center;justify-content:center;
}
.blog-card-placeholder svg{width:48px;height:48px;opacity:.35;stroke:var(--amber)}
.blog-card-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.blog-card-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--text3)}
.blog-card-meta a{color:var(--amber);text-decoration:none;font-weight:600}
.blog-card h2{font-size:1.12rem;line-height:1.35;letter-spacing:-.02em;margin:0}
.blog-card h2 a{color:var(--text);text-decoration:none;transition:color .15s}
.blog-card h2 a:hover{color:var(--amber)}
.blog-card-body>p{color:var(--text2);font-size:14px;line-height:1.55;flex:1;margin:0}
.blog-card-foot{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--text3);margin-top:auto;padding-top:8px}
.blog-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.blog-tag{
  font-size:11px;padding:3px 10px;border-radius:999px;
  background:var(--bg3);color:var(--text3);text-decoration:none;border:1px solid var(--border);
}
.blog-tag:hover{border-color:var(--amber);color:var(--amber)}

.blog-pagination{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:48px;padding-top:28px;border-top:1px solid var(--border);
  color:var(--text3);font-size:14px;max-width:1100px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px;
}
.blog-pagination a{color:var(--amber);text-decoration:none;font-weight:600}
.blog-empty{color:var(--text3);padding:64px 24px;text-align:center;grid-column:1/-1}
.blog-empty a{color:var(--amber)}

/* Article */
.blog-article-wrap{max-width:760px;margin:0 auto;padding:0 24px 80px}
.blog-article-wrap .back-link{
  display:inline-flex;align-items:center;gap:6px;color:var(--text3);
  text-decoration:none;font-size:14px;margin-bottom:24px;transition:color .15s;
}
.blog-article-wrap .back-link:hover{color:var(--amber)}
.article-header{margin-bottom:28px}
.article-header h1{
  font-size:clamp(2rem,4.5vw,2.85rem);line-height:1.12;letter-spacing:-.03em;margin:14px 0 16px;
}
.article-excerpt{font-size:1.12rem;color:var(--text2);line-height:1.65;margin:0}
.article-byline{margin-top:18px;font-size:14px;color:var(--text3)}
.article-byline a{color:var(--amber);text-decoration:none;font-weight:500}
.article-hero{margin:0 0 36px;border-radius:16px;overflow:hidden;border:1px solid var(--border)}
.article-hero img{width:100%;height:auto;display:block}

.article-content{font-size:1.06rem;line-height:1.78;color:var(--text2)}
.article-content h2{font-size:1.55rem;margin:2.4em 0 .75em;color:var(--text);letter-spacing:-.02em}
.article-content h3{font-size:1.22rem;margin:1.9em 0 .6em;color:var(--text)}
.article-content p{margin:0 0 1.2em}
.article-content ul,.article-content ol{margin:0 0 1.3em 1.35em}
.article-content li{margin-bottom:.5em}
.article-content a{color:var(--amber);text-decoration:underline;text-underline-offset:2px}
.article-content blockquote{
  margin:1.6em 0;padding:14px 22px;border-left:3px solid var(--amber);
  background:var(--bg2);border-radius:0 10px 10px 0;color:var(--text2);
}
.article-content strong{color:var(--text);font-weight:600}
.article-content img{max-width:100%;border-radius:12px;margin:1.5em 0}

.author-card{
  display:flex;gap:18px;align-items:flex-start;
  margin-top:40px;padding:24px 28px;border-radius:16px;
  border:1px solid var(--border);background:var(--bg2);
}
.author-card-avatar{
  flex-shrink:0;width:64px;height:64px;border-radius:14px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--amber),#b45309);text-decoration:none;
}
.author-card-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.author-card-initial{font-size:26px;font-weight:800;color:#0a0a0a}
.author-card-body{flex:1;min-width:0}
.author-card-label{
  margin:0 0 4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);
}
.author-card-name{
  font-size:17px;font-weight:700;color:var(--text);text-decoration:none;transition:color .15s;
}
.author-card-name:hover{color:var(--amber)}
.author-card-title{margin:2px 0 0;font-size:13px;font-weight:600;color:var(--amber)}
.author-card-bio{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--text2)}
.author-card .author-social{justify-content:flex-start;margin:10px 0 0}

.article-cta{
  margin-top:48px;padding:28px 32px;border-radius:16px;
  border:1px solid var(--border);background:linear-gradient(135deg,var(--bg2),rgba(245,158,11,.06));
  text-align:center;
}
.article-cta h3{font-size:1.25rem;margin:0 0 8px;color:var(--text)}
.article-cta p{color:var(--text2);font-size:15px;margin:0 0 18px;line-height:1.55}
.article-cta-offer{font-size:14px!important;margin:0 0 20px!important;color:var(--text2)!important}
.article-cta-offer strong:not(.hero-pricing-highlight){color:var(--text);font-weight:700}
.article-cta .nav-cta{display:inline-flex;align-items:center;gap:8px}

.blog-related{max-width:1100px;margin:0 auto;padding:0 24px 80px;border-top:1px solid var(--border);padding-top:48px}
.blog-related h2{font-size:1.35rem;margin:0 0 24px;color:var(--text)}

.author-hero{text-align:center;max-width:640px;margin:0 auto 40px}
.author-avatar{
  width:80px;height:80px;border-radius:50%;object-fit:cover;margin-bottom:16px;
  border:2px solid var(--border);
}
.author-bio{color:var(--text2);line-height:1.65;margin:12px 0}

@media(max-width:900px){
  .blog-grid{grid-template-columns:1fr 1fr}
  .blog-featured .blog-card{grid-template-columns:1fr}
}
@media(max-width:640px){
  .blog-page-header{padding:120px 16px 32px}
  .blog-wrap,.blog-article-wrap,.blog-related{padding-left:16px;padding-right:16px}
  .blog-grid{grid-template-columns:1fr}
  .blog-featured .blog-card-body{padding:24px 20px}
}