/* Kouzelná Linka — editorial / blog */
/* Reset the browser's native body margin. The shared design reset only
   targets descendants, which otherwise leaves a thin white frame. */
body.page-blog {
  --zs-font-display: 'Fraunces', Georgia, serif;
  margin: 0;
  overflow-x: clip;
  background: #fffaf1;
}
.blog-breadcrumbs { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; color: #8f7466; font-size: .76rem; font-weight: 600; }
.blog-breadcrumbs a { transition: color .2s; }
.blog-breadcrumbs a:hover { color: var(--zs-red); }

.blog-index-hero { position: relative; padding: 5.5rem 0 6.5rem; color: #fff8e9; background: radial-gradient(circle at 84% 20%, rgba(232,185,49,.2), transparent 26%), linear-gradient(125deg,#1a0a07 0%,#32120c 64%,#1d291d 100%); }
.blog-index-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 7px; background: repeating-linear-gradient(90deg,var(--zs-red) 0 30px,var(--zs-gold) 30px 35px,var(--zs-green) 35px 65px,var(--zs-gold) 65px 70px); }
.blog-index-hero .blog-breadcrumbs { color: #d7c1ae; margin-bottom: 2rem; }
.blog-eyebrow,.blog-index-cta p,.blog-section-heading p,.blog-related>p,.blog-conversion-card>div>p { color: #f1b632; font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.blog-index-hero h1 { max-width: 900px; margin: .75rem 0 1.25rem; font-family: var(--zs-font-display); font-size: clamp(2.65rem,6vw,5.1rem); line-height: .98; letter-spacing: -.045em; }
.blog-index-hero h1 span { color: #f1b632; }
.blog-index-hero>.zs-container>p:last-child { max-width: 680px; color: #dfcabc; font-size: 1.05rem; line-height: 1.75; }

.blog-index-list { padding: 5rem 0 6rem; background: radial-gradient(circle at 9% 3%,rgba(241,182,50,.1),transparent 25%),#fffaf1; }
.blog-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.3rem; }
.blog-section-heading h2 { margin-top: .35rem; font-family: var(--zs-font-display); color: #30160e; font-size: clamp(2rem,4vw,3.2rem); line-height: 1.08; }
.blog-section-heading>a { color: var(--zs-red); font-weight: 700; }
.blog-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; }
.blog-card { overflow: hidden; border: 1px solid #e5c996; border-radius: 24px; background: rgba(255,255,255,.82); box-shadow: 0 20px 50px rgba(75,38,18,.08); }
.blog-card-media { display: block; overflow: hidden; aspect-ratio: 16/9; background: linear-gradient(135deg,#eee0c5,#c7d1b6); }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.blog-card:hover .blog-card-media img { transform: scale(1.035); }
.blog-card-body { padding: 1.7rem 1.8rem 1.9rem; }
.blog-card-meta { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: .8rem; color: #8b6b58; font-size: .72rem; font-weight: 600; }
.blog-card-meta span:first-child { color: #b72229; text-transform: uppercase; letter-spacing: .09em; }
.blog-card-meta span+span::before { content: '•'; margin-right: .75rem; color: #d4a62d; }
.blog-card h2 { font-family: var(--zs-font-display); font-size: clamp(1.55rem,2.8vw,2.25rem); line-height: 1.15; color: #30160e; }
.blog-card h2 a:hover { color: #b72229; }
.blog-card-body>p { margin: 1rem 0 1.35rem; color: #74594c; line-height: 1.72; }
.blog-read-link { display: inline-flex; gap: .55rem; align-items: center; color: #b72229 !important; font-weight: 700; }
.blog-read-link span { transition: transform .2s; }
.blog-read-link:hover span { transform: translateX(4px); }

.blog-index-cta { padding: 3.2rem 0; color: #fff; background: linear-gradient(120deg,#1d2c1d,#293b24); }
.blog-index-cta .zs-container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.blog-index-cta h2 { max-width: 680px; margin-top: .35rem; font-family: var(--zs-font-display); font-size: clamp(1.9rem,4vw,3.2rem); line-height: 1.08; }
.blog-primary-button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 52px; padding: .8rem 1.4rem; border-radius: 14px; color: #fff !important; background: linear-gradient(135deg,#df2632,#be1925); font-weight: 700; box-shadow: 0 12px 28px rgba(190,25,37,.25); transition: transform .2s,box-shadow .2s; }
.blog-primary-button:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(190,25,37,.32); }

/* Article */
.blog-article-header { padding: 3.2rem 0 4rem; background: radial-gradient(circle at 9% 0,rgba(241,182,50,.12),transparent 28%),linear-gradient(180deg,#fff8eb,#f8ecd7); border-bottom: 1px solid #ecd6af; }
.blog-article-header-grid { display: grid; grid-template-columns: minmax(0,1.04fr) minmax(380px,.96fr); gap: 4rem; align-items: center; }
.blog-article-copy .blog-breadcrumbs { margin-bottom: 2rem; }
.blog-article-copy h1 { margin: .8rem 0 1.2rem; max-width: 750px; color: #30160e; font-family: var(--zs-font-display); font-size: clamp(2.45rem,4.8vw,4.7rem); line-height: 1.01; letter-spacing: -.045em; }
.blog-article-lead { max-width: 710px; color: #684b3e; font-size: 1.02rem; line-height: 1.8; }
.blog-byline { display: flex; gap: .75rem; align-items: center; margin-top: 1.7rem; color: #4b3026; }
.blog-author-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #d9a62c; border-radius: 50%; color: #b72229; background: #fff9ed; font-family: var(--zs-font-display); font-weight: 700; }
.blog-byline>span:last-child { display: flex; flex-direction: column; }
.blog-byline strong { font-size: .82rem; }
.blog-byline small { color: #8c6f5f; font-size: .7rem; }
.blog-article-hero { position: relative; overflow: hidden; aspect-ratio: 16/10; border: 1px solid #d9b774; border-radius: 30px 30px 90px 30px; background: linear-gradient(135deg,#e8d8bb,#becaae); box-shadow: 0 28px 65px rgba(75,40,20,.18); }
.blog-article-hero::after { content: 'VÁNOČNÍ INSPIRACE'; position: absolute; right: 20px; bottom: 20px; padding: .55rem .75rem; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; color: #fff; background: rgba(31,22,16,.45); backdrop-filter: blur(8px); font-size: .62rem; font-weight: 700; letter-spacing: .12em; }
.blog-article-hero img { width: 100%; height: 100%; object-fit: cover; }

.blog-article-layout { display: grid; grid-template-columns: 245px minmax(0,780px); justify-content: center; gap: 4rem; padding-top: 4.5rem; padding-bottom: 6rem; }
.blog-toc { position: sticky; top: calc(var(--zs-header-h) + 1.5rem); align-self: start; padding: 1.3rem; border: 1px solid #ead1a6; border-radius: 18px; background: #fffdf8; box-shadow: 0 12px 32px rgba(74,42,22,.07); }
.blog-toc>summary { display: none; }
.blog-toc-content>strong { display: block; color: #30160e; font-family: var(--zs-font-display); font-size: 1.05rem; }
.blog-toc ol { margin: 1rem 0; padding-left: 1.15rem; color: #a48673; }
.blog-toc li { padding: .34rem 0 .34rem .25rem; font-size: .75rem; line-height: 1.45; }
.blog-toc a:hover { color: #b72229; }
.blog-toc-cta { display: flex; justify-content: space-between; padding-top: .85rem; border-top: 1px solid #ebdcc4; color: #b72229 !important; font-size: .76rem; font-weight: 700; }
.blog-article-content>section { position: relative; scroll-margin-top: calc(var(--zs-header-h) + 1.5rem); margin-bottom: 4.4rem; }
.blog-section-number { display: inline-block; margin-bottom: .55rem; color: #bd8520; font-size: .72rem; font-weight: 700; letter-spacing: .13em; }
.blog-article-content h2 { margin-bottom: 1.1rem; color: #30160e; font-family: var(--zs-font-display); font-size: clamp(1.85rem,3.5vw,2.75rem); line-height: 1.1; letter-spacing: -.025em; }
.blog-article-content>section>p { margin: 0 0 1rem; color: #60483e; font-size: .97rem; line-height: 1.85; }
.blog-steps { display: grid; gap: .8rem; margin: 1.5rem 0 0; list-style: none; }
.blog-steps li { display: grid; grid-template-columns: 38px 1fr; gap: 1rem; padding: 1.15rem; border: 1px solid #ead2aa; border-radius: 16px; background: rgba(255,253,248,.8); }
.blog-steps li>span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: #1f3826; font-weight: 700; }
.blog-steps h3 { margin: .15rem 0 .35rem; color: #351b12; font-size: .95rem; }
.blog-steps p,.blog-age-grid p { color: #71584b; font-size: .84rem; line-height: 1.65; }
.blog-checklist { display: grid; gap: .7rem; margin-top: 1.4rem; list-style: none; }
.blog-checklist li { display: grid; grid-template-columns: 26px 1fr; align-items: start; color: #5f473c; line-height: 1.65; }
.blog-checklist li span { display: grid; place-items: center; width: 21px; height: 21px; margin-top: 2px; border-radius: 50%; color: #fff; background: #2e7a4c; font-size: .67rem; }
.blog-age-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; margin-top: 1.5rem; }
.blog-age-grid>div { padding: 1.2rem; border-top: 4px solid #dba927; border-radius: 10px 10px 16px 16px; background: #fff8e8; }
.blog-age-grid strong { display: block; margin-bottom: .45rem; color: #b72229; font-family: var(--zs-font-display); font-size: 1.15rem; }
.blog-callout { display: grid; grid-template-columns: 34px 1fr; gap: .8rem; margin: 1.5rem 0; padding: 1.15rem 1.25rem; border-left: 4px solid #d3a126; border-radius: 0 14px 14px 0; color: #60483e; background: #fff4d9; }
.blog-callout>span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: #b72229; }
.blog-callout p { line-height: 1.68; }
.blog-template { margin: 1.5rem 0; padding: 1.7rem; border: 1px solid #d9b875; border-radius: 18px; background: repeating-linear-gradient(0deg,transparent 0 31px,rgba(171,124,61,.1) 31px 32px),#fffdf7; }
.blog-template span { color: #b72229; font-size: .67rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.blog-template p { margin-top: .8rem; color: #4c3329; font-family: var(--zs-font-display); font-size: 1.05rem; line-height: 1.85; }
.blog-article-content>section>p.blog-section-link { margin-top: 1.2rem; }
.blog-section-link a { display: inline-flex; align-items: center; gap: .5rem; color: #b72229; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(183,34,41,.3); text-underline-offset: .24em; }
.blog-section-link a:hover { text-decoration-color: currentColor; }
.blog-faq details { border-bottom: 1px solid #ead7b8; }
.blog-faq summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; color: #351b12; font-weight: 700; cursor: pointer; list-style: none; }
.blog-faq summary::-webkit-details-marker { display: none; }
.blog-faq summary span { color: #b72229; font-size: 1.25rem; }
.blog-faq details[open] summary span { transform: rotate(45deg); }
.blog-faq details p { padding: 0 2rem 1.15rem 0; color: #70574a; line-height: 1.7; }
.blog-conversion-card { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; margin: 4.5rem 0; padding: 2rem; border-radius: 22px; color: #fff; background: radial-gradient(circle at 10% 15%,rgba(235,185,48,.18),transparent 30%),linear-gradient(135deg,#172919,#2e1b12); box-shadow: 0 22px 48px rgba(44,29,17,.18); }
.blog-conversion-card h2 { margin: .4rem 0 .65rem; color: #fff; font-size: 2rem; }
.blog-conversion-card>div>span { color: #decfc3; font-size: .88rem; line-height: 1.65; }
.blog-related { padding-top: 1.5rem; border-top: 1px solid #e6ceb0; }
.blog-related>h2 { margin-top: .3rem; font-size: 2rem; }
.blog-related>a { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; padding: 1.2rem; border: 1px solid #ead3af; border-radius: 15px; background: #fffdf8; }
.blog-related>a span { color: #b72229; font-size: .67rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.blog-related>a strong { color: #351b12; }
.blog-related>a em { grid-row: 1/3; grid-column: 2; align-self: center; color: #b72229; font-size: 1.3rem; font-style: normal; }

@media (max-width: 1000px) {
  .blog-article-header-grid { grid-template-columns: 1fr; gap: 2.3rem; }
  .blog-article-hero { max-width: 760px; }
  .blog-article-layout { grid-template-columns: minmax(0,780px); }
  .blog-toc { position: static; padding: 1.2rem 1.4rem; }
  .blog-toc ol { columns: 2; column-gap: 2rem; }
}
@media (max-width: 700px) {
  .blog-index-hero { padding: 3.4rem 0 4.5rem; }
  .blog-index-list { padding: 3rem 0 4rem; }
  .blog-section-heading,.blog-index-cta .zs-container { align-items: flex-start; flex-direction: column; }
  .blog-card-grid { grid-template-columns: 1fr; }
  .blog-card-body { padding: 1.35rem; }
  .blog-article-header { padding: 2rem 0 2.6rem; }
  .blog-article-copy .blog-breadcrumbs { margin-bottom: 1.2rem; }
  .blog-article-copy h1 { font-size: 2.45rem; }
  .blog-article-lead { font-size: .94rem; }
  .blog-article-hero { border-radius: 20px 20px 55px 20px; }
  .blog-article-layout { display: block; padding-top: 2rem; padding-bottom: 4rem; }
  .blog-toc { margin-bottom: 3rem; }
  .blog-toc>summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #30160e; font-family: var(--zs-font-display); font-weight: 700; cursor: pointer; list-style: none; }
  .blog-toc>summary::-webkit-details-marker { display: none; }
  .blog-toc>summary span { color: #b72229; font-family: var(--zs-font-sans); font-size: 1.25rem; transition: transform .2s; }
  .blog-toc[open]>summary span { transform: rotate(45deg); }
  .blog-toc-content { padding-top: 1rem; }
  .blog-toc-content>strong { display: none; }
  .blog-toc ol { columns: 1; }
  .blog-article-content>section { margin-bottom: 3.4rem; }
  .blog-age-grid { grid-template-columns: 1fr; }
  .blog-conversion-card { grid-template-columns: 1fr; padding: 1.5rem; }
  .blog-conversion-card .blog-primary-button { width: 100%; }
}
@media (max-width: 420px) {
  .blog-index-hero h1,.blog-article-copy h1 { font-size: 2.15rem; }
  .blog-card-meta { gap: .45rem; }
  .blog-steps li { grid-template-columns: 32px 1fr; gap: .75rem; padding: .95rem; }
  .blog-steps li>span { width: 32px; height: 32px; }
}