/* AnswerCraft blog: hub listing, filters and long-form article layout.
   Palette follows the site: charcoal ground, steel edges, gold + sky accents,
   Playfair/Georgia display, DM Sans body. */

:root{
  --blog-gold:#c7ab70;
  --blog-gold-soft:rgba(199,171,112,.34);
  --blog-sky:#a4c9e3;
  --blog-panel:linear-gradient(140deg,rgba(44,55,67,.5),rgba(9,16,24,.84));
  --blog-edge:rgba(161,187,207,.28);
  --blog-body:#c6cbd0;
}

.page-blog{background:radial-gradient(ellipse at 80% 6%,rgba(31,63,87,.22),transparent 46%),#080a0c}
.page-blog main{padding-bottom:88px}

/* ---------- Hub intro ---------- */
.blog-intro{padding:24px 0 8px;max-width:820px}
.blog-intro h1{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:clamp(2.2rem,4.4vw,3.9rem);line-height:1.06;letter-spacing:-.035em;margin:10px 0 20px;text-wrap:balance;overflow-wrap:break-word;hyphens:none}
.blog-intro p{color:var(--blog-body);font-size:1.08rem;line-height:1.8;margin-bottom:0}

/* ---------- Filter bar ---------- */
.blog-controls{margin:34px 0 10px;padding:24px 26px;border:1px solid var(--blog-edge);border-image:var(--craft-edge,none) 1;background:var(--blog-panel);backdrop-filter:blur(12px);box-shadow:inset 0 1px rgba(255,255,255,.08)}
.blog-search{display:block;max-width:520px}
.blog-search label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blog-sky);margin-bottom:9px}
.blog-search-field{position:relative;display:flex;align-items:center}
.blog-search-field svg{position:absolute;left:14px;width:17px;height:17px;color:#8fa2b1;pointer-events:none}
.blog-controls input[type=search]{width:100%;min-height:52px;padding:0 44px 0 41px;color:#f4f6f8;font:inherit;font-size:1rem;background:rgba(6,11,16,.72);border:1px solid #6d7d8a;border-radius:2px;-webkit-appearance:none;appearance:none}
.blog-controls input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.blog-controls input[type=search]::placeholder{color:#8494a1}
.blog-controls input[type=search]:focus{border-color:var(--blog-sky);outline:3px solid #8dcdea;outline-offset:3px}
.blog-search-clear{position:absolute;right:6px;display:none;align-items:center;justify-content:center;width:34px;height:34px;color:#b9c6d1;font-size:1.15rem;line-height:1;background:none;border:0;cursor:pointer}
.blog-search-clear:hover{color:#fff}
.blog-search-field.has-value .blog-search-clear{display:flex}
.blog-hint{margin:11px 0 0;color:#93a1ad;font-size:.82rem}

.blog-filters{margin-top:22px;padding-top:20px;border-top:1px solid rgba(161,187,207,.18)}
.blog-filters-label{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blog-sky);margin-bottom:12px}
.blog-chips{display:flex;flex-wrap:wrap;gap:9px}
.blog-chip{min-height:42px;padding:0 16px;color:#d3dae0;font:inherit;font-size:.85rem;font-weight:600;letter-spacing:.01em;background:rgba(11,18,25,.66);border:1px solid #56636e;border-radius:2px;cursor:pointer;transition:.18s ease}
.blog-chip:hover{border-color:var(--blog-sky);color:#fff}
.blog-chip[aria-pressed=true]{color:#14171a;background:var(--blog-gold);border-color:#e0c791;font-weight:700}

.blog-status{margin:26px 0 0;color:#9aa7b3;font-size:.88rem}
.blog-status strong{color:#eef2f5;font-weight:700}

/* ---------- Card grid ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:26px 0 0;padding:0;list-style:none}
.blog-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--blog-panel);border:1px solid var(--blog-edge);box-shadow:inset 0 1px rgba(255,255,255,.07);transition:.2s ease}
.blog-card:hover{border-color:var(--blog-sky);transform:translateY(-3px);box-shadow:inset 0 1px rgba(255,255,255,.1),0 18px 40px rgba(0,0,0,.36)}
.blog-card:focus-within{border-color:var(--blog-sky)}
.blog-card-media{position:relative;overflow:hidden;aspect-ratio:3/2;background:#0d1216;border-bottom:1px solid rgba(161,187,207,.2)}
.blog-card-media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.blog-card-body{display:flex;flex:1 1 auto;flex-direction:column;padding:24px 24px 26px}
.blog-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-bottom:13px;font-size:.71rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.blog-card-cat{color:var(--blog-gold)}
.blog-card-dot{color:#5d6a75}
.blog-card-time{color:#8fa0ad;letter-spacing:.1em}
.blog-card h2{font-family:Georgia,'Times New Roman',serif;font-size:1.36rem;font-weight:400;line-height:1.26;letter-spacing:-.015em;margin:0 0 12px}
.blog-card h2 a{color:#f6f4ee}
.blog-card h2 a::after{content:"";position:absolute;inset:0}
.blog-card:hover h2 a{color:#fff}
.blog-card p{margin:0;color:var(--blog-body);font-size:.95rem;line-height:1.75}
.blog-card-more{margin-top:auto;padding-top:18px;color:#a8defa;font-size:.85rem;font-weight:700}

/* ---------- Empty state ---------- */
.blog-empty{margin:30px 0 0;padding:52px 34px;text-align:center;border:1px dashed #5b6a76;background:rgba(10,17,24,.55)}
.blog-empty h2{font-family:Georgia,serif;font-size:1.7rem;font-weight:400;margin:0 0 12px}
.blog-empty p{max-width:52ch;margin:0 auto 18px;color:var(--blog-body);line-height:1.8}
.blog-empty .button{min-height:46px}
[hidden]{display:none!important}

/* ---------- Article ---------- */
.article-head{max-width:820px;padding:10px 0 0}
.article-head .section-kicker{color:var(--blog-gold);margin-bottom:14px}
.article-head h1{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:clamp(2.25rem,3.9vw,3.35rem);line-height:1.07;letter-spacing:-.032em;margin:0 0 20px}
.article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 26px;color:#8fa0ad;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.article-lede{color:#d7dbdf;font-size:1.14rem;line-height:1.75;margin:0 0 30px}

.article-hero{max-width:1040px;margin:0 0 44px;border:1px solid #5b6771;background:#0d1216}
.article-hero img{width:100%;height:auto;aspect-ratio:var(--hero-ar,16/9);object-fit:cover;object-position:var(--hero-pos,50% 0%);display:block}
.article-hero figcaption{padding:11px 18px;color:#94a1ac;font-size:.74rem;line-height:1.6;border-top:1px solid rgba(161,187,207,.18)}

.article-body{max-width:74ch}
.article-body h2{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:clamp(1.65rem,2.5vw,2.1rem);line-height:1.18;letter-spacing:-.022em;color:#f7f5ef;margin:52px 0 16px}
.article-body h3{font-family:Georgia,serif;font-size:1.24rem;font-weight:400;line-height:1.3;color:#eef0f2;margin:34px 0 12px}
.article-body p{color:var(--blog-body);font-size:1.03rem;line-height:1.82;margin:0 0 18px}
.article-body ul,.article-body ol{margin:0 0 22px;padding-left:22px}
.article-body li{color:var(--blog-body);font-size:1.03rem;line-height:1.8;margin-bottom:10px}
.article-body li::marker{color:var(--blog-gold)}
.article-body strong{color:#eef0f2}
.article-body a:not(.button){color:#a8defa;text-decoration:underline;text-underline-offset:3px}
.article-body a:not(.button):hover{color:#cfeaff}
.article-body>:first-child{margin-top:0}

.article-body figure{margin:38px 0;border:1px solid #5b6771;background:#0d1216}
.article-body figure img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 14%}
.article-body figcaption{padding:11px 18px;color:#94a1ac;font-size:.74rem;line-height:1.6;border-top:1px solid rgba(161,187,207,.18)}

.field-note{margin:30px 0;padding:24px 26px;border-left:3px solid var(--blog-gold);background:linear-gradient(120deg,rgba(47,43,37,.7),rgba(20,24,27,.6))}
.field-note h3{margin:0 0 10px;font-family:Georgia,serif;font-size:1.1rem;color:#f1e6cf}
.field-note p:last-child{margin-bottom:0}
.article-body .script-note{margin:-8px 0 22px;padding-left:15px;color:#96a2ac;font-size:.86rem;line-height:1.7;border-left:2px solid rgba(199,171,112,.4)}

.takeaway{margin:52px 0 0;padding:28px 30px;border:1px solid #7d8a93;border-left:3px solid var(--blog-sky);background:linear-gradient(125deg,rgba(20,34,46,.72),rgba(10,15,20,.6))}
.takeaway h2{margin:0 0 12px;font-size:1.45rem;font-family:Georgia,serif;font-weight:400}
.takeaway p:last-child{margin-bottom:0}

.article-related{max-width:840px;margin:56px 0 0;padding-top:34px;border-top:1px solid rgba(161,187,207,.22)}
.article-related h2{font-family:Georgia,serif;font-size:1.5rem;font-weight:400;margin:0 0 18px}
.article-related ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.article-related li{margin:0}
.article-related a{display:block;padding:16px 18px;color:#e9edf0;font-size:1rem;line-height:1.5;background:rgba(13,20,27,.62);border:1px solid #4c5a65;transition:.18s ease}
.article-related a:hover{border-color:var(--blog-sky);color:#fff;background:rgba(19,30,40,.8)}
.article-related .rel-cat{display:block;margin-top:6px;color:var(--blog-gold);font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}

.article-cta{max-width:840px;margin:52px 0 0;padding:32px;border:1px solid #648599;background:linear-gradient(135deg,#16232d,#0b1116)}
.article-cta h2{font-family:Georgia,serif;font-size:1.6rem;font-weight:400;margin:0 0 12px}
.article-cta p{color:var(--blog-body);line-height:1.75;margin:0 0 20px}
.article-cta .cta-links{display:flex;flex-wrap:wrap;gap:12px}

.article-back{display:inline-block;margin:46px 0 0;color:#a8defa;font-weight:700;text-decoration:underline;text-underline-offset:4px}

/* ---------- Responsive ---------- */
@media(max-width:1020px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
}
@media(max-width:720px){
  .blog-grid{grid-template-columns:1fr;gap:20px}
  .blog-controls{padding:20px 18px}
  .blog-chips{gap:8px}
  .blog-chip{min-height:40px;padding:0 13px;font-size:.8rem}
  .blog-intro{padding-top:8px}
  .blog-card-body{padding:20px 20px 22px}
  .blog-empty{padding:38px 22px}
  .article-hero img{aspect-ratio:3/2}
  .article-body figure img{aspect-ratio:3/2;object-position:50% 18%}
  .article-body h2{margin-top:42px}
  .article-cta,.field-note{padding:22px}
  .takeaway{padding:22px}
}