/* ==========================================================================
   Privaed — Single article styles (loaded only on is_singular('post')).
   Ported from "Privaed Blog Post.html". Tokens, .wrap, .btn* are global
   (styles.css); only article-specific rules live here. .crumb + the .ph
   placeholder base are duplicated from the mock because contact.css/blog.css
   (which also carry them) are not loaded on this route.
   ========================================================================== */

.art{padding:14px 0 30px}

/* ===== BREADCRUMB ===== */
.crumb{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);margin-bottom:20px;flex-wrap:wrap}
.crumb a{transition:color .15s}
.crumb a:hover{color:var(--amber-deep)}
.crumb svg{width:13px;height:13px;opacity:.45}
.crumb .cur{color:var(--ink-2);font-weight:600}

/* ===== IMAGE PLACEHOLDER (cover + embed fallback) ===== */
.ph{position:relative;border-radius:var(--r-md);overflow:hidden;background:repeating-linear-gradient(135deg,#EBDDC4 0 11px,#E3D2B4 11px 22px);display:flex;align-items:flex-end;justify-content:flex-start}
.ph::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.25),transparent 60%)}
.ph .tag{position:relative;margin:12px;font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:10.5px;letter-spacing:.02em;color:#7a6c54;background:rgba(255,253,248,.86);padding:4px 9px;border-radius:8px}
.ph.dark{background:repeating-linear-gradient(135deg,#2a241b 0 13px,#221d15 13px 26px)}
.ph.dark .tag{color:#cdbfa3;background:rgba(20,15,9,.6)}

/* ===== HEAD + META ===== */
.art-head{max-width:860px;margin-bottom:32px}
.art-head .kicker{margin-bottom:18px}
.art-head h1{font-size:clamp(32px,4.2vw,52px);font-weight:800;line-height:1.06}
.art-meta{display:flex;align-items:center;gap:16px;margin-top:22px;font-size:14px;color:var(--muted);font-weight:500;flex-wrap:wrap}
.art-meta .m{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.art-meta .m svg{width:16px;height:16px;color:var(--amber-deep)}
.art-meta .sep{width:4px;height:4px;border-radius:50%;background:var(--line-2)}

/* ===== COVER ===== */
.art-cover{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:21/9;background:linear-gradient(160deg,#3a3024,#211a12);box-shadow:0 28px 64px -32px rgba(54,38,10,.5);margin-bottom:46px}
.art-cover .ph{position:absolute;inset:0;border-radius:0}
.art-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art-cover .cap{position:absolute;bottom:14px;left:16px;z-index:2;font-size:11.5px;color:rgba(255,236,205,.7);background:rgba(20,15,9,.5);padding:5px 12px;border-radius:999px;backdrop-filter:blur(4px)}

/* ===== GRID: sticky TOC + prose ===== */
.art-grid{display:grid;grid-template-columns:236px 1fr;gap:54px;align-items:start}
.art-grid.no-toc{grid-template-columns:1fr;max-width:820px}
.toc{position:sticky;top:98px}
.toc .tl{font-family:"DM Sans";font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.toc ul{list-style:none;display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--line)}
.toc a{display:block;font-size:13.5px;line-height:1.4;color:var(--body);padding:8px 0 8px 18px;margin-left:-2px;border-left:2px solid transparent;transition:.15s}
.toc a:hover{color:var(--ink)}
.toc a.sub{padding-left:32px;font-size:13px;color:var(--muted)}
.toc a.active{color:var(--amber-deep);font-weight:700;border-left-color:var(--amber)}

/* ===== PROSE ===== */
.prose{max-width:none}
.prose>h2{font-size:clamp(24px,2.5vw,32px);font-weight:800;margin:46px 0 16px;scroll-margin-top:100px}
.prose>h2:first-child{margin-top:0}
.prose>h3{font-size:20px;font-weight:700;margin:34px 0 12px;color:var(--ink-2);scroll-margin-top:100px}
.prose p{font-size:17px;line-height:1.78;color:var(--body);margin-bottom:20px}
.prose p b,.prose li b{color:var(--ink);font-weight:700}
.prose a{color:var(--amber-deep);text-decoration:underline}
.prose>ul,.prose>ol{margin:0 0 22px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:13px}
.prose>ul li{position:relative;padding-left:30px;font-size:16.5px;line-height:1.7;color:var(--body)}
.prose>ul li::before{content:"";position:absolute;left:6px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--amber)}
.prose>ol{counter-reset:step}
.prose>ol li{position:relative;padding-left:46px;font-size:16.5px;line-height:1.7;color:var(--body);counter-increment:step;min-height:32px}
.prose>ol li::before{content:counter(step);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--cream);font-family:"Epilogue";font-weight:700;font-size:14px;display:grid;place-items:center}
.prose img{border-radius:var(--r-md);margin:18px 0;max-width:100%;height:auto}
.prose figure{margin:24px 0}
.prose figcaption{font-size:13px;color:var(--muted);margin-top:8px;text-align:center}
/* equal-width flex groups (text + image side by side in Gutenberg) */
.prose .wp-block-group.is-layout-flex.is-nowrap{align-items:center}
.prose .wp-block-group.is-layout-flex.is-nowrap>*{flex:1 1 0;min-width:0}
.prose .wp-block-group.is-layout-flex.is-nowrap figure{margin:0}
.prose .wp-block-group.is-layout-flex.is-nowrap figure img{width:100%;height:auto;border-radius:var(--r-md);margin:0}
@media(max-width:780px){
  .prose .wp-block-group.is-layout-flex.is-nowrap{flex-direction:column}
}

/* ===== PROSE COMPONENTS (rendered only if present in post content) ===== */
.callout{display:flex;gap:16px;background:#FFF6E6;border-radius:var(--r-md);padding:22px 24px;margin:28px 0;box-shadow:0 10px 28px -20px rgba(180,120,30,.5)}
.callout .ci{width:40px;height:40px;border-radius:11px;background:var(--amber);color:#231a06;display:grid;place-items:center;flex:none}
.callout .ci svg{width:22px;height:22px}
.callout .ct{font-weight:800;font-family:"Epilogue";font-size:15px;color:var(--ink);margin-bottom:5px}
.callout p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0}

.pullquote{margin:34px 0;padding:6px 0 6px 28px;border-left:4px solid var(--amber);font-family:"Epilogue";font-weight:700;font-size:23px;line-height:1.34;color:var(--ink);letter-spacing:-.01em}

.embed{margin:36px 0;background:var(--cream-2);border-radius:var(--r-card);padding:26px}
.embed .eh{font-family:"DM Sans";font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.embed .erow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.epcard{background:#fff;border-radius:var(--r-md);padding:12px;box-shadow:0 8px 22px -16px rgba(64,46,16,.3);text-align:center;transition:.18s}
.epcard:hover{transform:translateY(-3px)}
.epcard .ei{position:relative;aspect-ratio:1/1;border-radius:11px;overflow:hidden;background:linear-gradient(160deg,#EDE3D2,#E2D4BC);margin-bottom:11px}
.epcard .ei .ph{position:absolute;inset:0;border-radius:0}.epcard .ei .ph .tag{font-size:8px;margin:6px}
.epcard .ei img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.epcard h4{font-size:12.5px;font-weight:700;line-height:1.3;color:var(--ink);min-height:48px}
.epcard .ep{font-family:"Epilogue";font-weight:800;font-size:14px;color:var(--amber-deep);margin-top:8px}

/* ===== WC PRODUCT-COLLECTION BLOCK → .embed look ===== */
/* Makes wp:woocommerce/product-collection embedded in prose look identical
   to the .embed / .epcard design from the blog post mock. */
.prose .wp-block-woocommerce-product-collection{margin:36px 0;background:var(--cream-2);border-radius:var(--r-card);padding:26px;margin-bottom:36px !important}
.prose .wp-block-woocommerce-product-collection::before{content:"Selles artiklis mainitud tooted";display:block;font-family:"DM Sans",system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.prose .wp-block-woocommerce-product-collection .wp-block-spacer{display:none !important}
/* product grid */
.prose .wc-block-product-template__responsive.columns-5{grid-template-columns:repeat(5,1fr) !important;gap:14px !important}
/* product card */
.prose .wc-block-product-template > li{background:#fff;border-radius:var(--r-md);padding:12px;box-shadow:0 8px 22px -16px rgba(64,46,16,.3);text-align:center;transition:transform .18s ease;display:flex;flex-direction:column;width:auto !important;list-style:none;margin:0 !important}
.prose .wc-block-product-template > li:hover{transform:translateY(-3px)}
/* product image */
.prose .wc-block-product-template .wc-block-components-product-image{position:relative !important;aspect-ratio:1/1;border-top-left-radius:11px !important;border-top-right-radius:11px !important;border-bottom-left-radius:11px !important;border-bottom-right-radius:11px !important;overflow:hidden !important;background:linear-gradient(160deg,#EDE3D2,#E2D4BC);margin:0 0 11px !important;padding:0 !important;display:block !important}
.prose .wc-block-product-template .wc-block-components-product-image a{position:absolute !important;inset:0 !important;display:block !important;border-radius:0 !important}
.prose .wc-block-product-template .wc-block-components-product-image img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;border-radius:0 !important;max-width:none !important;margin:0 !important}
.prose .wc-block-product-template .wc-block-components-product-image__inner-container{display:none !important}
/* override .prose a amber rule inside the block */
.prose .wc-block-product-template a{color:var(--ink);text-decoration:none}
.prose .wc-block-product-template a:hover{color:var(--amber-deep)}
/* product title */
.prose .wc-block-product-template .wp-block-post-title{font-size:12.5px !important;font-weight:700 !important;line-height:1.3;color:var(--ink) !important;min-height:48px;margin:0 0 8px !important;padding:0 !important;font-family:"DM Sans",system-ui,sans-serif;letter-spacing:0}
/* product price */
.prose .wc-block-product-template .wc-block-components-product-price,.prose .wc-block-product-template .wc-block-components-product-price *{font-family:"Epilogue",system-ui,sans-serif !important;font-size:14px !important;font-weight:800 !important;color:var(--amber-deep) !important;text-align:center}
.prose .wc-block-product-template .wc-block-components-product-price ins{text-decoration:none}
.prose .wc-block-product-template .wc-block-components-product-price{margin-top:auto;display:block}

/* ===== FAQ ===== */
.faq{margin:40px 0 0}
.faq h2{font-size:clamp(24px,2.5vw,32px);font-weight:800;margin-bottom:20px;scroll-margin-top:100px}
.faq-item{background:#fff;border-radius:var(--r-md);box-shadow:0 8px 24px -18px rgba(64,46,16,.26);overflow:hidden;margin-bottom:12px}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;cursor:pointer;font-family:"Epilogue";font-weight:700;font-size:16.5px;color:var(--ink)}
.faq-q svg{width:18px;height:18px;color:var(--amber-deep);transition:transform .3s;flex:none}
.faq-item.open .faq-q svg{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-item.open .faq-a{max-height:600px}
.faq-a p{padding:0 24px 22px;color:var(--body);font-size:15.5px;line-height:1.7;margin:0}

/* ===== CTA BAND ===== */
.cta-band{margin-top:60px;background:linear-gradient(160deg,#E3A23B,#C28323);border-radius:var(--r-card);padding:48px 50px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;position:relative;overflow:hidden;color:#2a1d05}
.cta-band::after{content:"";position:absolute;right:-50px;bottom:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%)}
.cta-band .cl{position:relative;z-index:2}
.cta-band h3{font-size:clamp(24px,2.6vw,32px);font-weight:800;color:#2a1d05}
.cta-band p{font-size:16px;color:#3a2806;opacity:.85;margin-top:10px;max-width:440px}
.cta-band .ca{position:relative;z-index:2;display:flex;gap:12px;flex-wrap:wrap}
.cta-band .btn-dark{background:var(--ink)}
.btn-lg{padding:16px 30px;font-size:15.5px}

/* ===== RESPONSIVE ===== */
@media(max-width:980px){
  .art-grid{grid-template-columns:1fr;gap:30px}
  .toc{position:static;border-bottom:1px solid var(--line);padding-bottom:22px}
  .embed .erow{grid-template-columns:1fr}
  .prose .wc-block-product-template__responsive.columns-5{grid-template-columns:repeat(3,1fr) !important}
}
@media(max-width:600px){
  .prose .wc-block-product-template__responsive.columns-5{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:640px){
  .cta-band{padding:32px 28px}
}