/* ===== Bykaz — Blog (liste /blog + pages article /blog/<slug>) ===== */

/* --- Liste --- */
.bl-hero{position:relative;background:var(--ink);color:var(--paper);padding:200px 32px 110px;overflow:hidden}
.bl-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 22% 18%,rgba(233,112,67,0.30) 0%,transparent 55%),radial-gradient(ellipse at 80% 80%,rgba(212,165,116,0.18) 0%,transparent 55%)}
.bl-in{max-width:1200px;margin:0 auto;position:relative;z-index:2}
.bl-h1{font-family:'Archivo Black',sans-serif;font-size:clamp(42px,7vw,100px);line-height:0.95;letter-spacing:-0.04em;text-transform:uppercase;margin:26px 0 24px}
.bl-h1 em{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;text-transform:none;letter-spacing:-0.01em;color:var(--accent)}
.bl-sub{font-size:clamp(16px,1.6vw,20px);line-height:1.6;color:rgba(248,244,237,0.78);max-width:680px}
.bl-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px}
.bl-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:40px;border:1px solid rgba(248,244,237,0.28);color:var(--paper);text-decoration:none;font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s}
.bl-chip:hover{border-color:var(--accent);color:var(--accent)}
.bl-chip.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.bl-chip:focus-visible,.bl-card:focus-visible,.ar a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.bl-list{background:#FFFCF7;padding:90px 32px 120px}
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 28px}
.bl-card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);border-radius:18px;background:#fff;box-shadow:0 1px 0 rgba(26,26,26,0.06),0 24px 48px -32px rgba(26,26,26,0.35);overflow:hidden;transition:transform .25s cubic-bezier(.23,1,.32,1),box-shadow .25s}
.bl-card[hidden]{display:none}
.bl-card:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgba(26,26,26,0.06),0 34px 60px -30px rgba(26,26,26,0.45)}
.bl-card:active{transform:scale(0.985)}
.bl-card-vis{aspect-ratio:16/10;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:20px}
.bl-card-vis span{font-family:'Archivo Black',sans-serif;font-size:clamp(22px,2.4vw,30px);line-height:0.95;letter-spacing:-0.02em;text-transform:uppercase;color:rgba(248,244,237,0.92)}
.bl-card-body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.bl-card-cat{font-size:11px;letter-spacing:0.24em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.bl-card-title{font-family:'Archivo Black',sans-serif;font-size:21px;line-height:1.12;letter-spacing:-0.01em;text-transform:uppercase}
.bl-card-ex{font-size:15px;line-height:1.55;color:#4a4641;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bl-card-meta{margin-top:auto;padding-top:8px;font-size:12px;letter-spacing:0.08em;color:var(--muted)}
.bl-none{font-family:'Playfair Display',serif;font-style:italic;font-size:20px;color:var(--muted);text-align:center;padding:40px 0}
.bl-empty{text-align:center;padding:30px 0 10px}
.bl-empty p{font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(20px,2.4vw,28px);color:var(--muted);margin-bottom:30px}
.bl-empty .cta-1{display:inline-block}
.bl-related{background:#FFFCF7;padding:90px 32px 110px;border-top:1px solid rgba(26,26,26,0.08)}
.bl-related .kicker{margin-bottom:34px}

/* --- Article --- */
.ar-hero{position:relative;background:var(--ink);color:var(--paper);padding:180px 32px 0;overflow:hidden}
.ar-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 18% 12%,rgba(233,112,67,0.26) 0%,transparent 55%)}
.ar-hero > .ar-in{padding-bottom:80px}
.ar-in{max-width:760px;margin:0 auto;position:relative;z-index:2}
.ar-crumbs{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;margin-bottom:28px}
.ar-crumbs a{color:rgba(248,244,237,0.7);text-decoration:none;transition:color .2s}
.ar-crumbs a:hover{color:var(--accent)}
.ar-crumbs span{color:rgba(248,244,237,0.35)}
.ar-h1{font-family:'Archivo Black',sans-serif;font-size:clamp(34px,5.4vw,64px);line-height:1;letter-spacing:-0.03em;text-transform:uppercase;margin:22px 0 24px;overflow-wrap:break-word;hyphens:auto}
.ar-lead{font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(19px,2.1vw,24px);line-height:1.45;color:rgba(248,244,237,0.82)}
.ar-meta{margin-top:30px;font-size:13px;letter-spacing:0.04em;color:rgba(248,244,237,0.62)}
.ar-meta a{color:var(--gold);text-decoration:none}
.ar-meta a:hover{text-decoration:underline}
.ar-cover{position:relative;z-index:2;max-width:1100px;margin:0 auto -1px;padding:0}
.ar-cover img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:18px 18px 0 0}
.ar > .ar-in{padding:70px 32px 30px;max-width:744px}

.ar-toc{border:1px solid rgba(26,26,26,0.14);border-radius:14px;padding:24px 28px;margin-bottom:50px;background:#FFFCF7}
.ar-toc-t{font-size:11px;letter-spacing:0.24em;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:12px}
.ar-toc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.ar-toc a{color:var(--ink);text-decoration:none;font-size:15px;line-height:1.45}
.ar-toc a:hover{color:var(--accent)}

.ar-prose{font-size:18px;line-height:1.75;color:#2a2622}
.ar-prose > * + *{margin-top:1.15em}
.ar-prose h2{font-family:'Archivo Black',sans-serif;font-size:clamp(25px,3vw,34px);line-height:1.08;letter-spacing:-0.02em;text-transform:uppercase;color:var(--ink);margin-top:2.1em;scroll-margin-top:110px}
.ar-prose h3{font-family:'Archivo Black',sans-serif;font-size:clamp(19px,2vw,22px);line-height:1.2;text-transform:uppercase;letter-spacing:-0.005em;color:var(--ink);margin-top:1.8em;scroll-margin-top:110px}
.ar-prose h4,.ar-prose h5,.ar-prose h6{font-weight:700;font-size:18px;color:var(--ink);margin-top:1.6em}
.ar-prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px;transition:color .2s}
.ar-prose a:hover{color:var(--accent)}
.ar-prose strong{font-weight:700;color:var(--ink)}
.ar-prose ul,.ar-prose ol{padding-left:1.3em}
.ar-prose li + li{margin-top:0.45em}
.ar-prose li ul,.ar-prose li ol{margin-top:0.45em}
.ar-prose ul li::marker{color:var(--accent)}
.ar-prose ol li::marker{color:var(--accent);font-weight:700}
.ar-prose blockquote{border-left:3px solid var(--accent);padding:4px 0 4px 24px;font-family:'Playfair Display',serif;font-style:italic;font-size:1.15em;line-height:1.55;color:var(--ink)}
.ar-prose figure img,.ar-prose p img{display:block;max-width:100%;height:auto;border-radius:14px}
.ar-prose figure{margin-top:1.8em;margin-bottom:1.8em}
.ar-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:0.88em;background:rgba(26,26,26,0.06);padding:2px 6px;border-radius:5px}
.ar-prose pre{background:var(--ink);color:var(--paper);padding:20px 22px;border-radius:12px;overflow-x:auto;font-size:14px;line-height:1.6}
.ar-prose pre code{background:none;padding:0;font-size:inherit}
.ar-prose hr{border:0;height:1px;background:rgba(26,26,26,0.16);margin:2.4em 0}

.ar-box{margin:70px 0 30px;background:var(--ink);color:var(--paper);border-radius:18px;padding:38px 36px;position:relative;overflow:hidden}
.ar-box::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 90% 10%,rgba(233,112,67,0.28) 0%,transparent 60%);pointer-events:none}
.ar-box > *{position:relative}
.ar-box-k{font-size:11px;letter-spacing:0.24em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.ar-box-t{font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(20px,2.4vw,26px);line-height:1.4;margin:12px 0 26px}
.ar-box-row{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center}
.ar-box-row .cta-1{display:inline-block}
.ar-box-link{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;color:var(--paper);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:4px;transition:color .2s}
.ar-box-link:hover{color:var(--accent)}

@media (max-width:1000px){.bl-grid{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .bl-hero{padding:150px 22px 80px}
  .bl-list,.bl-related{padding:64px 22px 90px}
  .ar-hero{padding:140px 22px 0}
  .ar-hero > .ar-in{padding-bottom:56px}
  .ar > .ar-in{padding:50px 22px 20px}
  .ar-cover img{border-radius:12px 12px 0 0}
}
@media (max-width:640px){
  .bl-grid{grid-template-columns:1fr;gap:24px}
  .ar-prose{font-size:17px}
  .ar-box{padding:30px 24px}
}
@media (prefers-reduced-motion:reduce){.bl-card,.bl-card:hover{transition:none;transform:none}}