/* ==========================================================================
   Hlavouni.cz — blog „Čtení pod čepici“ (výpis + detail článku), design v3.
   Karty článků (.blog-card, .bc-*) jsou v hlavouni-home.css, sdílí je HP.
   ========================================================================== */

/* ---------- Výpis ---------- */
.blog-list-head { text-align: center; max-width: 720px; margin: 0 auto 28px; }
.blog-list-head .section-eyebrow { font-family: var(--font-hand); font-size: 26px; color: var(--orange); transform: rotate(-2deg); display: inline-block; margin-bottom: 4px; }
.blog-list-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 12px; color: var(--fg-0); }
.blog-list-sub { font-size: 16px; line-height: 1.6; color: var(--fg-1); margin: 0; }
.blog-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.blog-filter a { padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; color: var(--fg-1); transition: border-color .15s, background .15s, color .15s; }
.blog-filter a:hover { border-color: var(--fg-0); color: var(--fg-0); }
.blog-filter a.is-active { background: var(--bg-dark); border-color: var(--bg-dark); color: #fff; }
.blog-featured { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; margin: 28px 0 8px; color: var(--fg-0); text-decoration: none; transition: box-shadow .25s ease, transform .25s ease; }
.blog-featured:hover { box-shadow: 0 18px 40px rgba(20,20,20,.10); transform: translateY(-3px); }
.blog-featured-media { position: relative; min-height: 320px; background: var(--bg-3); }
.blog-featured-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-featured-body { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(24px, 3.5vw, 48px); }
.blog-featured-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -.015em; }
.blog-featured-excerpt { font-size: 15.5px; line-height: 1.6; color: var(--fg-1); }
.blog-empty { text-align: center; padding: 64px 0; color: var(--fg-2); }
.blog-pager { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.blog-pager a { min-width: 40px; padding: 9px 12px; text-align: center; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-weight: 700; color: var(--fg-1); }
.blog-pager a.is-active { background: var(--bg-dark); border-color: var(--bg-dark); color: #fff; }
@media (max-width: 800px) { .blog-featured { grid-template-columns: 1fr; } .blog-featured-media { min-height: 0; aspect-ratio: 3 / 2; } }

/* ---------- Detail článku ---------- */
.art-head { max-width: 880px; text-align: center; padding-top: 8px; }
.art-head .breadcrumbs { justify-content: center; }
.art-chip { display: inline-block; background: var(--orange); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; margin-top: 6px; }
.art-chip:hover { color: #fff; background: var(--orange-deep, #d9560f); }
.art-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -.02em; color: var(--fg-0); margin: 16px 0 14px; text-wrap: balance; }
.art-lead { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--fg-1); margin: 0 auto 14px; max-width: 700px; text-wrap: pretty; }
.art-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--fg-2); }
.art-hero { margin: 28px auto 0; }
.art-hero img { display: block; width: 100%; aspect-ratio: 3 / 2; max-height: 680px; object-fit: cover; border-radius: 28px; background: var(--bg-3); }

.art-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(28px, 4vw, 64px); align-items: start; padding-top: 40px; padding-bottom: 24px; }
.art-main { min-width: 0; max-width: 740px; }
.art-body { font-size: 17px; line-height: 1.75; color: var(--fg-1); }
.art-body > :first-child { margin-top: 0; }
.art-body h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.015em; color: var(--fg-0); margin: 2.2em 0 .6em; scroll-margin-top: 110px; }
.art-body h3 { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--fg-0); margin: 1.6em 0 .4em; }
.art-body p { margin: 0 0 1.1em; }
.art-body strong { color: var(--fg-0); }
.art-body figure { margin: 2em 0; }
.art-body figure img { display: block; width: 100%; height: auto; border-radius: 22px; }
.art-body figcaption { font-family: var(--font-hand); font-size: 21px; line-height: 1.2; color: var(--fg-2); text-align: center; margin-top: 10px; transform: rotate(-1deg); }
.art-body ul, .art-body ol { margin: 0 0 1.2em; }
.art-body li { margin-bottom: .45em; }
.art-body li::marker { color: var(--orange); font-weight: 800; }
.art-body table { font-size: 15px; }
/* Tip od hlavouna — box s postavičkou */
.art-body .art-tip { position: relative; margin: 2em 0; padding: 22px 24px 22px 108px; background: var(--beige, #f3e9da); border-radius: 20px; font-size: 16px; line-height: 1.6; color: var(--fg-0); min-height: 110px; }
.art-body .art-tip::before { content: ""; position: absolute; left: 14px; bottom: 0; width: 84px; height: 110px; background: url("../../uploads/mascots/mascot-beanie.png") no-repeat center bottom / contain; }
.art-body .art-tip--cap::before { background-image: url("../../uploads/mascots/mascot-cap.png"); }
.art-body .art-tip--bucket::before { background-image: url("../../uploads/mascots/mascot-bucket.png"); }
.art-body .art-tip strong:first-child { display: block; font-family: var(--font-hand); font-size: 24px; font-weight: 700; color: var(--orange); line-height: 1.1; margin-bottom: 4px; }
.art-body .art-tip p:last-child { margin-bottom: 0; }
.art-products { margin: 1.6em 0 2.2em; }

.art-foot { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); }
.art-foot .pd-share { margin-top: 0; }

.art-aside { position: sticky; top: 110px; display: grid; gap: 18px; }
.art-toc { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; }
.art-toc-title { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px; }
.art-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: 2px; }
.art-toc li { counter-increment: toc; }
.art-toc a { display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding: 7px 0; font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--fg-1); transition: color .15s; }
.art-toc a::before { content: counter(toc); font-family: var(--font-display); font-weight: 900; color: var(--orange); }
.art-toc a:hover, .art-toc a.is-current { color: var(--fg-0); }
.art-cta { position: relative; background: var(--bg-dark); color: #fff; border-radius: 20px; padding: 86px 22px 22px; text-align: center; margin-top: 44px; }
.art-cta img { position: absolute; left: 50%; top: -52px; width: 118px; transform: translateX(-50%) rotate(-4deg); filter: drop-shadow(0 10px 14px rgba(0,0,0,.25)); }
.art-cta-note { font-family: var(--font-hand); font-size: 24px; line-height: 1.15; margin: 0 0 14px; }
.art-cta .btn { width: 100%; justify-content: center; background: var(--orange); border-color: var(--orange); }
.art-cta .btn:hover { background: var(--orange-deep, #d9560f); }
.art-related { padding-top: var(--s-6, 40px); }

@media (max-width: 960px) {
    .art-layout { grid-template-columns: 1fr; }
    .art-main { max-width: none; }
    .art-aside { position: static; grid-template-columns: 1fr; }
    .art-toc { display: none; }
}
@media (max-width: 600px) {
    .art-hero { padding: 0; }
    .art-hero img { border-radius: 0; aspect-ratio: 4 / 3; }
    .art-body { font-size: 16px; }
    .art-body .art-tip { padding: 20px 18px 20px 84px; }
    .art-body .art-tip::before { width: 64px; height: 88px; left: 10px; }
}