/* ============================================================
   Zeybek Guides (blog) stylesheet.
   Long-form article layout: hub grid + single-article reading column,
   table of contents, answer callout, cost tables, FAQ, author card.
   Extends assets/pages.css tokens. Ink / bone / amber. No em dashes.
   ============================================================ */

/* ---------- HUB (blog.html index) ---------- */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:22px;}
.hub-card{position:relative;display:flex;flex-direction:column;border:1px solid rgba(238,232,220,0.10);border-radius:16px;overflow:hidden;background:var(--ink-2);transition:transform .5s var(--ease-out),border-color .5s var(--ease-out),box-shadow .5s var(--ease-out);}
.hub-card:hover{transform:translateY(-4px);border-color:rgba(226,106,44,0.34);box-shadow:0 26px 60px rgba(0,0,0,0.45);}
.hub-card__media{aspect-ratio:16/10;overflow:hidden;position:relative;}
.hub-card__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.1s var(--ease-out);}
.hub-card:hover .hub-card__media img{transform:scale(1.07);}
.hub-card__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1;}
.hub-card__tag{font-family:var(--f-body);font-size:10px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--amber);}
.hub-card h3{font-family:var(--f-display);font-weight:360;font-size:22px;line-height:1.18;letter-spacing:-0.014em;color:var(--bone);margin:0;}
.hub-card p{font-family:var(--f-body);font-size:14px;line-height:1.55;color:var(--ash);margin:0;}
.hub-card__more{margin-top:auto;font-family:var(--f-body);font-size:12px;font-weight:600;letter-spacing:0.06em;color:var(--bone-dim);display:inline-flex;align-items:center;gap:8px;transition:gap .3s,color .3s;}
.hub-card:hover .hub-card__more{gap:13px;color:var(--amber);}
.hub-card__link{position:absolute;inset:0;z-index:2;}

/* ---------- ARTICLE ---------- */
.breadcrumb{font-family:var(--f-body);font-size:12px;letter-spacing:0.02em;color:var(--ash);display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.breadcrumb a{color:var(--ash);transition:color .25s;}
.breadcrumb a:hover{color:var(--amber);}
.breadcrumb .sep{color:var(--steel);}
.breadcrumb [aria-current]{color:var(--bone-dim);}

.article-hero{padding-top:clamp(18px,3vw,30px);}
.article-hero .kicker{font-family:var(--f-body);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.2em;color:var(--amber);margin:20px 0 14px;display:inline-block;}
.article-hero h1{font-family:var(--f-display);font-weight:340;font-size:clamp(32px,4.7vw,60px);line-height:1.04;letter-spacing:-0.02em;color:var(--bone);margin:0 0 18px;max-width:20ch;}
.article-hero h1 em{font-style:italic;color:var(--amber);}
.article-hero .lede{font-family:var(--f-body);font-size:clamp(17px,1.4vw,21px);line-height:1.55;color:var(--bone-dim);max-width:60ch;margin:0;}
.article-meta{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:24px;font-family:var(--f-body);font-size:13px;color:var(--ash);}
.article-meta .who{color:var(--bone-dim);font-weight:500;}
.article-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--steel);}
.article-figure{margin:30px 0 6px;border-radius:16px;overflow:hidden;border:1px solid rgba(238,232,220,0.08);}
.article-figure img{width:100%;height:auto;object-fit:cover;}
.article-figure figcaption,.figure figcaption{font-family:var(--f-body);font-size:12.5px;color:var(--ash);letter-spacing:0.01em;padding:12px 4px 0;text-align:center;}

/* Layout: sticky TOC + reading column, centered. */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;margin-top:clamp(30px,4vw,52px);}
@media(min-width:1000px){
  .article-layout{grid-template-columns:236px minmax(0,720px);justify-content:center;gap:56px;align-items:start;}
}
.toc{border:1px solid rgba(238,232,220,0.10);border-radius:14px;background:var(--ink-2);padding:18px 20px;}
@media(min-width:1000px){ .toc{position:sticky;top:100px;} }
.toc h2{font-family:var(--f-body);font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--ash);margin:0 0 12px;}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;}
.toc li{margin:0 0 9px;}
.toc a{font-family:var(--f-body);font-size:13.5px;line-height:1.4;color:var(--bone-dim);display:block;transition:color .25s,padding .25s;border-left:2px solid transparent;padding-left:12px;margin-left:-2px;}
.toc a:hover,.toc a.is-active{color:var(--amber);border-left-color:var(--amber);}

/* Reading column typography. */
.prose{font-family:var(--f-body);color:var(--bone-dim);font-size:clamp(16px,1.05vw,18px);line-height:1.72;max-width:72ch;}
.prose > p{margin:0 0 22px;}
.prose h2{font-family:var(--f-display);font-weight:360;font-size:clamp(25px,2.5vw,34px);line-height:1.14;letter-spacing:-0.016em;color:var(--bone);margin:46px 0 16px;scroll-margin-top:100px;}
.prose h3{font-family:var(--f-display);font-weight:400;font-size:clamp(20px,1.7vw,24px);line-height:1.2;letter-spacing:-0.01em;color:var(--bone);margin:34px 0 12px;scroll-margin-top:100px;}
.prose h2 + p{margin-top:0;}
.prose strong{color:var(--bone);font-weight:600;}
.prose em{font-style:italic;}
.prose a:not(.btn){color:var(--amber);text-decoration:underline;text-decoration-color:rgba(226,106,44,0.4);text-underline-offset:3px;transition:text-decoration-color .25s;}
.prose a:not(.btn):hover{text-decoration-color:var(--amber);}
/* Buttons inside prose keep their own contrast (dark ink text on amber). */
.prose a.btn{text-decoration:none;}
.prose a.btn--primary{color:var(--ink);}
.prose ul,.prose ol{margin:0 0 22px;padding-left:1.25em;}
.prose li{margin:0 0 10px;padding-left:6px;}
.prose ul li::marker{color:var(--amber);}
.prose ol li::marker{color:var(--amber);font-family:var(--f-display);font-style:italic;}
.prose figure{margin:30px 0;}
.prose figure img{width:100%;height:auto;border-radius:14px;border:1px solid rgba(238,232,220,0.08);}

/* Answer callout: the featured-snippet direct answer. */
.answer{border:1px solid rgba(226,106,44,0.28);border-left:3px solid var(--amber);border-radius:12px;background:linear-gradient(180deg,rgba(226,106,44,0.07),rgba(226,106,44,0.02));padding:20px 22px;margin:0 0 30px;}
.answer p{margin:0;color:var(--bone);font-size:clamp(16px,1.1vw,18.5px);line-height:1.6;}
.answer .lbl{display:block;font-family:var(--f-body);font-size:10px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--amber);margin-bottom:8px;}

/* Key facts strip. */
.keyfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:rgba(238,232,220,0.09);border:1px solid rgba(238,232,220,0.09);border-radius:14px;overflow:hidden;margin:30px 0;}
.keyfacts div{background:var(--ink-2);padding:18px 20px;}
.keyfacts .n{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(22px,2.4vw,30px);color:var(--amber);line-height:1;}
.keyfacts .l{font-family:var(--f-body);font-size:12px;letter-spacing:0.02em;color:var(--ash);margin-top:8px;}

/* Cost / comparison tables (table-snippet friendly). */
.tbl-wrap{overflow-x:auto;margin:26px 0;border:1px solid rgba(238,232,220,0.10);border-radius:14px;}
table.data{width:100%;border-collapse:collapse;font-family:var(--f-body);font-size:14.5px;min-width:440px;}
table.data caption{caption-side:top;text-align:left;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ash);padding:14px 18px 0;}
table.data th,table.data td{padding:13px 18px;text-align:left;border-bottom:1px solid rgba(238,232,220,0.08);}
table.data thead th{font-weight:600;color:var(--bone);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;background:var(--ink-3);}
table.data tbody tr:last-child td{border-bottom:0;}
table.data td:first-child{color:var(--bone);font-weight:500;}
table.data .amt{color:var(--amber);font-variant-numeric:tabular-nums;white-space:nowrap;}

/* Callout note. */
.note{border:1px solid rgba(238,232,220,0.12);border-radius:12px;background:var(--ink-2);padding:18px 20px;margin:26px 0;font-size:15px;line-height:1.6;color:var(--bone-dim);}
.note b{color:var(--amber);font-weight:600;letter-spacing:0.02em;}

/* FAQ (visible Q/A, FAQPage schema mirrors this). */
.faq{margin-top:14px;border-top:1px solid rgba(238,232,220,0.10);}
.faq .qa{border-bottom:1px solid rgba(238,232,220,0.10);padding:22px 0;}
.faq .qa h3{font-family:var(--f-display);font-weight:400;font-size:clamp(19px,1.6vw,23px);color:var(--bone);margin:0 0 10px;line-height:1.22;}
.faq .qa p{font-family:var(--f-body);font-size:15.5px;line-height:1.65;color:var(--bone-dim);margin:0;}

/* Author / E-E-A-T card. */
.author-card{display:flex;gap:18px;align-items:flex-start;border:1px solid rgba(238,232,220,0.10);border-radius:16px;background:var(--ink-2);padding:22px 24px;margin:44px 0 0;}
.author-card .mark{flex:0 0 auto;width:54px;height:54px;border-radius:50%;background:var(--ink-3);display:grid;place-items:center;overflow:hidden;border:1px solid rgba(238,232,220,0.12);}
.author-card .mark img{width:70%;height:auto;}
.author-card .who{font-family:var(--f-display);font-size:18px;color:var(--bone);margin:0 0 4px;}
.author-card .role{font-family:var(--f-body);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--amber);margin:0 0 10px;}
.author-card p{font-family:var(--f-body);font-size:14px;line-height:1.6;color:var(--ash);margin:0;}

/* Related guides. */
.related{margin-top:8px;}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:20px;}
.related-card{position:relative;border:1px solid rgba(238,232,220,0.10);border-radius:14px;overflow:hidden;background:var(--ink-2);transition:border-color .4s var(--ease-out),transform .4s var(--ease-out);}
.related-card:hover{border-color:rgba(226,106,44,0.32);transform:translateY(-3px);}
.related-card img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.related-card .t{padding:16px 18px 20px;}
.related-card .tag{font-family:var(--f-body);font-size:10px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--amber);}
.related-card h3{font-family:var(--f-display);font-weight:360;font-size:18px;line-height:1.22;color:var(--bone);margin:8px 0 0;}
.related-card a.cover{position:absolute;inset:0;z-index:2;}

/* Inline article CTA. */
.mid-cta{border:1px solid rgba(238,232,220,0.12);border-radius:18px;background:linear-gradient(140deg,var(--ink-3),var(--ink-2));padding:clamp(26px,3vw,38px);margin:40px 0;text-align:center;}
.mid-cta h2{font-family:var(--f-display);font-weight:360;font-size:clamp(23px,2.4vw,32px);color:var(--bone);margin:0 0 10px;letter-spacing:-0.014em;}
.mid-cta p{font-family:var(--f-body);font-size:15px;color:var(--ash);margin:0 auto 20px;max-width:52ch;}

.updated{font-family:var(--f-body);font-size:12.5px;color:var(--steel);margin-top:40px;letter-spacing:0.02em;}