/* ============================================================
   blog.css — blog index + article layout for daaistudio.com
   Loaded AFTER project.css + pages.css. Reuses their tokens and
   the .prose / .answer-box / .faq / .faq-q / .rel-grid components.
   ============================================================ */

/* ---------- Blog index ---------- */
.blog-grid{max-width:1200px;margin:0 auto;padding:8px 48px 80px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px}
.blog-card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);background:var(--bg);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.09)}
.blog-card-cover{aspect-ratio:1200/630;overflow:hidden;background:linear-gradient(135deg,#14120a,#2a2418 55%,#1e1a0c);position:relative}
.blog-card-cover img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card-cover .bc-fallback{position:absolute;inset:0;display:flex;align-items:flex-end;padding:22px;
  font-family:var(--mono);font-size:12.1px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.blog-card-body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.blog-card-cat{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);margin-bottom:12px}
.blog-card-title{font-family:var(--sans);font-size:20.9px;font-weight:600;line-height:1.34;letter-spacing:-.01em;margin-bottom:12px}
.blog-card-excerpt{font-size:15.4px;font-weight:300;line-height:1.7;color:var(--muted);flex:1}
.blog-card-meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}

/* ---------- Article cover hero: text-free image + overlaid title ----------
   The cover image carries NO text, so one image serves TH/EN/JP. The title,
   category and meta are HTML overlaid on the image over a dark scrim, so each
   language renders its own text on the same picture. */
.article-cover-hero{position:relative;max-width:1120px;margin:0 auto 4px;min-height:clamp(360px,44vw,520px);
  display:flex;align-items:flex-end;overflow:hidden;background:linear-gradient(135deg,#14120a,#2a2418 55%,#1e1a0c)}
.acover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.acover-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,6,.9) 0%,rgba(10,9,6,.55) 40%,rgba(10,9,6,.12) 100%)}
.acover-inner{position:relative;z-index:2;width:100%;padding:52px 56px}
.article-cat{font-family:var(--mono);font-size:12.1px;letter-spacing:.22em;text-transform:uppercase;color:#e9c98a;display:block;margin-bottom:16px}
.article-title{font-family:var(--sans);font-size:clamp(30px,4vw,49.5px);font-weight:700;line-height:1.2;letter-spacing:-.02em;color:#fff;margin-bottom:18px;max-width:20em}
.article-meta{font-family:var(--mono);font-size:12.1px;letter-spacing:.08em;color:rgba(255,255,255,.72);display:flex;gap:22px;flex-wrap:wrap}
.article-meta span{position:relative}
.article-meta span+span::before{content:'·';position:absolute;left:-13px;color:rgba(255,255,255,.45)}

/* ---------- Article layout: body + sticky TOC ---------- */
.article-layout{max-width:800px;margin:0 auto;padding:40px 48px 28px;display:flex;flex-direction:column}
.article-body{max-width:none;min-width:0;font-size:18.7px;font-weight:300;line-height:1.95;color:var(--ink)}
.article-body>p{margin-bottom:22px}
.article-body h2{font-family:var(--sans);font-size:clamp(24.2px,2.6vw,31px);font-weight:600;line-height:1.3;
  letter-spacing:-.015em;color:var(--ink);margin:52px 0 18px;scroll-margin-top:96px}
.article-body h3{font-family:var(--sans);font-size:20.9px;font-weight:600;line-height:1.4;margin:34px 0 12px;color:var(--ink)}
.article-body ul,.article-body ol{margin:0 0 22px;padding-left:24px}
.article-body li{margin-bottom:10px}
.article-body strong{font-weight:600}
.article-body a:not(.inline-cta-btn){color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.article-body img{width:100%;height:auto;display:block;margin:32px 0;border:1px solid var(--line)}
.article-body .a-table-wrap{overflow-x:auto;max-width:100%;margin:28px 0}
.article-body table{border-collapse:collapse;width:100%;min-width:440px;font-size:15.4px}
.article-body th,.article-body td{border:1px solid var(--line);padding:12px 16px;text-align:left;font-weight:300;line-height:1.6}
.article-body th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:400;color:var(--muted);background:#f1efeb}

/* Table of contents */
.toc{order:-1;margin:0 0 44px;border:1px solid var(--line);padding:20px 24px}
.toc>summary{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  cursor:pointer;list-style:none;margin-bottom:0;padding-bottom:0;border-bottom:none}
.toc>summary::after{content:'+';float:right;font-size:15px;line-height:1;color:var(--muted)}
.toc[open]>summary{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.toc[open]>summary::after{content:'\2013'}
.toc>summary::-webkit-details-marker{display:none}
.toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.toc-list a{display:block;font-family:var(--sans);font-size:13.2px;font-weight:300;line-height:1.5;color:var(--muted);
  text-decoration:none;padding:7px 0 7px 14px;border-left:2px solid transparent;transition:color .2s,border-color .2s}
.toc-list a:hover{color:var(--ink)}
.toc-list a.active{color:var(--navy);border-left-color:var(--navy);font-weight:400}

/* Direct-answer box at top (GEO) reuses .answer-box from pages.css */
.article-body .answer-box{margin:0 0 40px}

/* Inline mid-article CTA */
.inline-cta{margin:44px 0;padding:32px 34px;background:#f1efeb;border-left:2px solid var(--navy)}
.inline-cta h3{font-family:var(--sans);font-size:20.9px;font-weight:600;margin:0 0 8px;letter-spacing:-.01em}
.inline-cta p{font-size:15.4px;font-weight:300;line-height:1.7;color:var(--muted);margin:0 0 18px}
.inline-cta-row{display:flex;gap:12px;flex-wrap:wrap}
.inline-cta-btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 26px;border-radius:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:background .25s,color .25s}
.inline-cta-btn.solid{background:var(--ink);color:var(--bg)}
.inline-cta-btn.solid:hover{background:var(--navy);color:#fff}
.inline-cta-btn.ghost{border:1px solid var(--ink);color:var(--ink)}
.inline-cta-btn.ghost:hover{background:var(--ink);color:var(--bg)}

/* FAQ heading spacing inside article */
.article-faq{max-width:820px;margin:16px auto 0;padding:0 48px}
.article-faq .sec-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);margin-bottom:14px}
.article-faq h2{font-family:var(--sans);font-size:clamp(24.2px,2.8vw,33px);font-weight:700;letter-spacing:-.02em;margin-bottom:12px}

/* ---------- Contact CTA (4 channels) ---------- */
.contact-cta{max-width:1120px;margin:64px auto 0;padding:56px 48px;background:var(--ink);color:#f7f6f4}
.contact-cta h2{font-family:var(--sans);font-size:clamp(26.4px,3.3vw,39.6px);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:#fff;margin-bottom:14px;max-width:16em}
.contact-cta p{font-size:16.5px;font-weight:300;line-height:1.7;color:rgba(247,246,244,.6);max-width:38em;margin-bottom:34px}
.contact-cta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.contact-cta-btn{display:flex;flex-direction:column;gap:6px;padding:22px 22px;border-radius:0;text-decoration:none;
  border:1px solid rgba(247,246,244,.16);transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s,border-color .25s}
.contact-cta-btn:hover{transform:translateY(-3px)}
.contact-cta-btn .cc-label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,246,244,.5)}
.contact-cta-btn .cc-value{font-family:var(--sans);font-size:16.5px;font-weight:600;color:#fff}
.cc-email:hover{background:rgba(247,246,244,.06);border-color:rgba(247,246,244,.4)}
.cc-line:hover{background:#06C755;border-color:#06C755}
.cc-call:hover{background:var(--navy);border-color:var(--navy)}
.cc-wa:hover{background:#25D366;border-color:#25D366}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .blog-grid{grid-template-columns:1fr 1fr;padding:8px 24px 64px;gap:28px 24px}
  .article-layout{padding:26px 24px 16px}
  .toc{margin-bottom:32px}
  .article-body{max-width:none}
  .article-cover-hero{min-height:320px;margin-bottom:0}
  .acover-inner{padding:34px 24px}
  .article-faq{padding:0 24px}
  .contact-cta{padding:44px 24px}
  .contact-cta-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .blog-grid{grid-template-columns:1fr}
  .contact-cta-grid{grid-template-columns:1fr}
}

/* ---------- Blog category filter ---------- */
.blog-filter{max-width:1200px;margin:0 auto;padding:0 48px 26px;display:flex;flex-wrap:wrap;gap:10px}
.blog-filter button{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 20px;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;border-radius:0;
  transition:background .2s,color .2s,border-color .2s}
.blog-filter button:hover{color:var(--ink);border-color:var(--ink)}
.blog-filter button.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.blog-empty{max-width:1200px;margin:0 auto;padding:0 48px 64px;font-size:15.4px;font-weight:300;color:var(--muted)}
@media(max-width:900px){.blog-filter{padding:0 24px 20px}.blog-empty{padding:0 24px 48px}}

/* ---------- Breadcrumb spacing on blog ---------- */
.breadcrumb{padding-bottom:26px}
@media(max-width:900px){.breadcrumb{padding-bottom:20px}}

/* remove decorative dash above section labels on blog posts */
.sec-label::before{display:none!important}