/* ============================================================
   Houby z Vršovic — Houbožurnál (blog) + Recept (recipe)
   loaded after app.css
   ============================================================ */
.container{width:min(1240px,100% - 48px); margin-inline:auto}
.eyebrow{display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--moss); margin-bottom:14px}
.linkmore{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-head); font-weight:600; color:var(--forest); font-size:15px}
.linkmore:hover{gap:11px}

/* ---------- Journal archive ---------- */
.jhero{text-align:center; padding:64px 0 8px}
.jhero h1{font-size:clamp(42px,6vw,68px)}
.jhero p{color:var(--ink-2); font-size:17px; max-width:54ch; margin:16px auto 0}
.jfilters{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:30px 0 0}
.jfilter{font-family:var(--font-head); font-weight:600; font-size:15px; padding:12px 24px; border-radius:999px; background:#fff; border:1px solid var(--line-2); color:var(--forest); transition:.15s}
.jfilter:hover{border-color:var(--forest)}
.jfilter.on{background:var(--forest); color:#F6F2E6; border-color:var(--forest)}
.jgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px 26px; padding:48px 0 80px}
.acard{display:flex; flex-direction:column; cursor:pointer}
.acard .photo{border-radius:16px; aspect-ratio:16/10}
.acard:hover .photo{box-shadow:var(--shadow)}
.acard-meta{display:flex; align-items:center; gap:9px; margin:18px 0 10px; font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase}
.acard-meta .src{color:var(--brown)}
.acard-meta .sep{color:var(--line-2)}
.acard-meta .cat{color:var(--moss)}
.acard h3{font-size:21px; line-height:1.18; margin-bottom:10px}
.acard:hover h3{color:var(--forest)}
.acard p{color:var(--ink-2); font-size:14.5px; margin:0 0 14px}
.acard-foot{margin-top:auto; font-size:13px; color:var(--muted)}

/* ---------- Recipe single ---------- */
.recipe{padding:30px 0 60px}
.recipe>*{width:min(1080px,100% - 48px); margin-inline:auto}
.r-head{text-align:center; max-width:740px}
.r-eyebrow{color:var(--brown)}
.r-head h1{font-size:clamp(34px,5vw,54px); margin-top:6px}
.r-head .r-lead{color:var(--ink-2); font-size:18px; margin:16px 0 0}
.r-stats{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin:26px 0 0}
.r-stat{display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 18px}
.r-stat .ic{width:34px; height:34px; border-radius:10px; background:var(--cream); color:var(--forest); display:grid; place-items:center; flex:none}
.r-stat b{font-family:var(--font-head); font-size:15px; display:block; line-height:1.1}
.r-stat em{font-style:normal; font-size:12px; color:var(--muted)}
.r-hero{margin:34px auto 0}
.r-hero .photo{aspect-ratio:21/9; border-radius:24px}
.r-body{display:grid; grid-template-columns:340px 1fr; gap:46px; margin-top:46px; align-items:start}
.r-ingredients{position:sticky; top:92px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px}
.r-ingredients h2{font-size:20px; margin-bottom:6px}
.r-serv{display:flex; align-items:center; justify-content:space-between; margin:14px 0 16px; padding-bottom:16px; border-bottom:1px solid var(--line)}
.r-serv span{font-size:13.5px; color:var(--muted)}
.r-ing-list{list-style:none; margin:0; padding:0}
.r-ing-list li{display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px dashed var(--line); font-size:14.5px}
.r-ing-list li:last-child{border-bottom:none}
.r-ing-list .amt{font-family:var(--font-head); font-weight:700; color:var(--ink); white-space:nowrap}
.r-ing-list .it-fungi{color:var(--forest); font-weight:700}
.r-steps h2{font-size:24px; margin-bottom:22px}
.step{display:flex; gap:18px; padding-bottom:26px}
.step-n{width:38px; height:38px; flex:none; border-radius:999px; background:var(--forest); color:#fff; font-family:var(--font-head); font-weight:800; display:grid; place-items:center}
.step-tx h4{font-size:17px; margin-bottom:5px}
.step-tx p{color:var(--ink-2); font-size:14.5px; margin:0}
.r-tip{display:flex; gap:13px; background:var(--cream-2); border-radius:16px; padding:18px 20px; margin-top:8px}
.r-tip .ic{color:var(--moss); flex:none}
.r-tip strong{font-family:var(--font-head)}
.r-tip p{margin:4px 0 0; font-size:14px; color:var(--ink-2)}

/* used products strip */
.r-used{background:var(--forest); color:#EFEAD9; border-radius:var(--radius-lg); padding:36px; margin-top:54px; display:grid; grid-template-columns:1fr; gap:22px}
.r-used h2{color:#F6F2E6; font-size:26px}
.r-used .sub{color:#cfd3bf; font-size:15px; margin:8px 0 0}
.r-used-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.r-used-card{background:#fff; border-radius:16px; overflow:hidden; display:flex; flex-direction:column}
.r-used-card .photo{aspect-ratio:4/3}
.r-used-card .b{padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.r-used-card .b strong{font-family:var(--font-head); font-size:15px; color:var(--ink); display:block}
.r-used-card .b em{font-style:normal; font-size:12px; color:var(--muted)}

/* related recipes */
.r-related{margin-top:56px}
.r-related h2{font-size:26px; margin-bottom:22px}
.r-rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}

/* ---------- Products Grid Block (pattern demo) ---------- */
.blockdemo{padding:40px 0}
.demo-label{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 14px; display:inline-block; margin-bottom:18px}
.pblock{padding:46px 0}
.pblock-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:30px; flex-wrap:wrap}
.pblock-head h2{font-size:clamp(26px,3.6vw,38px)}
.pblock-head p{color:var(--ink-2); margin:8px 0 0; max-width:46ch}
.pblock-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.pblock-grid.cols4{grid-template-columns:repeat(4,1fr)}
.pblock.on-dark{background:var(--slate); border-radius:var(--radius-lg)}
.pblock.on-dark h2,.pblock.on-dark .eyebrow{color:#F4F6EE}
.pblock.on-dark .eyebrow{color:var(--amber)}
.pblock.on-dark .pblock-head p{color:#aeb6ac}

/* ---------- About (O nás) ---------- */
.about-hero{position:relative; height:46vh; min-height:330px; overflow:hidden}
.about-hero .photo{width:100%; height:100%; border-radius:0}
.about-hero .cap{position:absolute; left:0; right:0; bottom:24px; text-align:center; color:#F6F2E6; font-family:var(--font-head); font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:13px; text-shadow:0 2px 18px rgba(0,0,0,.4)}
.about-mission{padding:74px 0 0; text-align:center}
.about-mission .eyebrow{color:var(--moss)}
.about-mission h1{font-size:clamp(36px,5.4vw,60px)}
.mission-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; max-width:920px; margin:30px auto 0; text-align:left}
.mission-grid p{color:var(--ink-2); font-size:16.5px; margin:0}
.values{padding:78px 0}
.values .section-head{margin-bottom:8px}
.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px}
.vcard{background:#fff; border:1px solid var(--line); border-radius:20px; padding:30px}
.vcard .vic{width:50px; height:50px; border-radius:14px; background:var(--cream); color:var(--forest); display:grid; place-items:center; margin-bottom:18px}
.vcard h3{font-size:20px; margin-bottom:9px}
.vcard p{color:var(--ink-2); font-size:14.5px; margin:0}
.about-stats{background:var(--forest); color:#EFEAD9}
.about-stats .container{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding:54px 0; text-align:center}
.about-stats .big{font-family:var(--font-head); font-weight:800; font-size:46px; color:#F6F2E6; line-height:1}
.about-stats p{color:#cfd3bf; font-size:13.5px; margin:10px 0 0}

/* ---------- Contact (Kontakt) ---------- */
.contact-hero{text-align:center; padding:54px 0 6px}
.contact-hero .eyebrow{color:var(--moss)}
.contact-hero h1{font-size:clamp(42px,6vw,68px)}
.aud-pills{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px}
.aud-pill{display:flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:600; font-size:15px; padding:12px 22px; border-radius:999px; background:var(--forest); color:#F6F2E6}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:46px; padding:50px 0 84px; align-items:start}
.contact-grid>*{width:auto}
.contact-lead{color:var(--ink-2); font-size:17px; margin:0 0 22px; max-width:42ch}
.cform-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 30px}
.cform-card .field input,.cform-card textarea{background:var(--paper)}
.cform-card textarea{font-family:var(--font-body); font-size:15px; padding:13px 15px; border:1.5px solid var(--line-2); border-radius:12px; width:100%; resize:vertical; color:var(--ink)}
.cform-card textarea:focus{outline:none; border-color:var(--forest); background:#fff}
.form-success{text-align:center; padding:30px 10px}
.form-success .ic{width:60px; height:60px; border-radius:999px; background:var(--moss); color:#fff; display:grid; place-items:center; margin:0 auto 16px}
.form-success h3{font-size:22px; margin-bottom:8px}
.form-success p{color:var(--ink-2); margin:0}
.cinfo h2{font-size:clamp(30px,4.2vw,46px); margin-bottom:22px}
.cinfo .row{padding:16px 0; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; gap:14px}
.cinfo .row:first-of-type{border-top:1px solid var(--line)}
.cinfo .row .ic{width:42px; height:42px; flex:none; border-radius:12px; background:var(--cream); color:var(--forest); display:grid; place-items:center}
.cinfo .row h4{font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.cinfo .row p{margin:0; font-size:16px; font-weight:600}
.cinfo .row a{color:var(--forest)}
.map-ph{margin-top:26px; border-radius:18px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/9; background:linear-gradient(135deg,#e7e0cf,#d6cbb1); position:relative; display:grid; place-items:center}
.map-ph .grid-lines{position:absolute; inset:0; background-image:linear-gradient(rgba(31,61,43,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(31,61,43,.07) 1px,transparent 1px); background-size:38px 38px}
.map-ph .pin{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--forest); font-family:'JetBrains Mono',monospace; font-size:12px}
.map-ph .pin .dot{width:42px; height:42px; border-radius:999px 999px 999px 2px; background:var(--brown); transform:rotate(45deg); box-shadow:0 8px 20px -8px rgba(0,0,0,.4)}

@media(max-width:960px){
  .mission-grid{grid-template-columns:1fr; gap:22px}
  .values-grid{grid-template-columns:1fr}
  .about-stats .container{grid-template-columns:1fr 1fr; gap:30px 20px}
  .contact-grid{grid-template-columns:1fr; gap:34px}
}
@media(max-width:620px){
  .about-stats .container{grid-template-columns:1fr}
}

/* ---------- About / Contact end ---------- */

/* ---------- Single article (Houbožurnál / MycoAcademie) ---------- */
.art{padding:30px 0 70px}
.art-narrow{width:min(740px,100% - 48px); margin-inline:auto}
.art-wide{width:min(1060px,100% - 48px); margin-inline:auto}
.art-head{text-align:center; padding-top:8px}
.art-head .eyebrow{color:var(--brown)}
.art-head h1{font-size:clamp(32px,4.8vw,52px); line-height:1.08}
.art-metarow{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:18px; color:var(--muted); font-size:14px}
.art-metarow .au{display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:600}
.art-metarow .au .av{width:30px; height:30px; border-radius:999px; background:var(--moss); color:#fff; display:grid; place-items:center; font-family:var(--font-head); font-weight:800; font-size:13px}
.art-metarow .sep{color:var(--line-2)}
.art-hero{margin:30px auto 0}
.art-hero .photo{aspect-ratio:21/9; border-radius:24px}
.prose{margin-top:40px}
.prose p{font-size:17.5px; line-height:1.75; color:#34362c; margin:0 0 22px}
.prose .lead{font-size:21px; line-height:1.6; color:var(--ink); font-weight:500}
.prose h2{font-size:27px; margin:38px 0 14px; color:var(--ink)}
.prose blockquote{margin:32px 0; padding:6px 0 6px 24px; border-left:3px solid var(--moss); font-family:var(--font-head); font-weight:500; font-style:italic; font-size:23px; line-height:1.4; color:var(--forest)}
.prose ul{margin:0 0 22px; padding:0; list-style:none}
.prose ul li{position:relative; padding-left:26px; margin-bottom:11px; font-size:17px; color:#34362c}
.prose ul li::before{content:""; position:absolute; left:5px; top:11px; width:8px; height:8px; border-radius:2px; background:var(--moss); transform:rotate(45deg)}
.prose figure{margin:30px 0}
.prose figure .photo{aspect-ratio:16/9; border-radius:18px}
.prose figcaption{text-align:center; font-size:13px; color:var(--muted); margin-top:10px; font-style:italic}
.callout{display:flex; gap:14px; background:var(--cream-2); border-radius:16px; padding:20px 22px; margin:30px 0}
.callout .ic{color:var(--moss); flex:none}
.callout strong{font-family:var(--font-head)}
.callout p{margin:5px 0 0; font-size:15px; color:var(--ink-2)}
.art-cta{background:var(--forest); color:#EFEAD9; border-radius:var(--radius-lg); padding:30px 32px; margin:40px 0 0; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.art-cta h3{color:#F6F2E6; font-size:22px}
.art-cta p{color:#cfd3bf; font-size:14.5px; margin:6px 0 0}
.art-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:34px; padding-top:24px; border-top:1px solid var(--line); flex-wrap:wrap}
.art-tags{display:flex; gap:8px; flex-wrap:wrap}
.art-tags span{font-size:12.5px; font-weight:700; background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 13px; color:var(--ink-2)}
.art-share{display:flex; gap:9px}
.art-share button{width:40px; height:40px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); display:grid; place-items:center; font-weight:800; font-family:var(--font-head)}
.art-share button:hover{background:var(--forest); color:#fff; border-color:var(--forest)}
.art-author{display:flex; gap:16px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; margin-top:28px}
.art-author .av{width:56px; height:56px; border-radius:999px; background:var(--moss); color:#fff; display:grid; place-items:center; font-family:var(--font-head); font-weight:800; font-size:20px; flex:none}
.art-author h4{font-size:16px}
.art-author p{margin:3px 0 0; font-size:14px; color:var(--ink-2)}
.art-related{margin-top:56px}
.art-related h2{font-size:26px; margin-bottom:22px}
.art-related .jgrid{padding:0}

/* ---------- Index / sitemap ---------- */
.idx{padding:60px 0 80px}
.idx-head{text-align:center; max-width:60ch; margin:0 auto 14px}
.idx-head h1{font-size:clamp(36px,5vw,56px)}
.idx-head p{color:var(--ink-2); font-size:17px; margin:14px auto 0}
.idx-sec{margin-top:48px}
.idx-sec h2{font-size:16px; letter-spacing:.08em; text-transform:uppercase; color:var(--moss); margin-bottom:18px; padding-bottom:10px; border-bottom:1px solid var(--line)}
.idx-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.idx-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:.2s}
.idx-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.idx-card .thumb{aspect-ratio:16/9; width:100%; position:relative}
.idx-card .b{padding:18px 20px}
.idx-card h3{font-size:18px; display:flex; align-items:center; gap:8px}
.idx-card h3 .arr{color:var(--forest)}
.idx-card p{font-size:13.5px; color:var(--ink-2); margin:6px 0 0}
.idx-card .file{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); margin-top:10px; display:block}
@media(max-width:960px){ .idx-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .idx-grid{grid-template-columns:1fr} }

@media(max-width:960px){
  .jgrid,.pblock-grid,.pblock-grid.cols4,.r-used-grid,.r-rel-grid{grid-template-columns:repeat(2,1fr)}
  .r-body{grid-template-columns:1fr; gap:30px}
  .r-ingredients{position:static}
}
@media(max-width:620px){
  .jgrid,.pblock-grid,.pblock-grid.cols4,.r-used-grid,.r-rel-grid{grid-template-columns:1fr}
}