/* Readable article layout for news and event detail pages (change #030).
   Sizes are in px because the base theme scales the root font down on wide screens (8px at 1440px). */
/* Article sits on a lighter panel; the page background stays the theme's #0F1223 */
.blog-detail{box-sizing:border-box;max-width:856px;margin:0 auto;padding:0 0 48px;overflow:hidden;border-radius:24px;background:#1A2038;border:1px solid rgba(255,255,255,.08)}
.blog-detail > :not(.blog-detail-image){margin-left:48px;margin-right:48px}
@media (max-width:767px){.blog-detail{padding-bottom:28px;border-radius:16px}.blog-detail > :not(.blog-detail-image){margin-left:18px;margin-right:18px}}
/* The cover image is the top edge of the panel, not a second rounded box inside it */
.blog-detail-image{margin:0 0 36px}
.blog-detail-image,.blog-detail-image picture,.blog-detail-image img{display:block;width:100%;height:auto;border-radius:0!important}

/* Meta row: category pill and date */
.blog-detail-flex-items{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:24px}
.blog-detail .blog-item-labels,.blog-detail .blog-item-labels .label-item,.blog-detail .blog-detail-date{margin:0}
.blog-detail .blog-item-labels .label-item{padding:6px 14px;border-radius:999px;background:rgba(240,127,26,.16);color:#FFB073;font-size:14px;line-height:20px;font-weight:600}
.blog-detail .blog-detail-date{font-size:15px;line-height:24px;color:rgba(255,255,255,.72)}

/* Title and perex */
.blog-detail h1{margin:0 0 24px;font-size:clamp(30px,2.6vw + 14px,46px);line-height:1.18;font-weight:600;letter-spacing:-.01em;color:#fff}
.blog-detail .blog-detail-perex{margin-bottom:28px}
.blog-detail-perex p{margin:0;font-size:clamp(19px,.5vw + 15px,22px);line-height:1.6;color:#E8EBF2}

/* Body text: 17-19px, 1.7 line height, ~70 characters per line, cool light grey (10:1) so white headings stand out */
.blog-detail-content{font-size:clamp(17px,.3vw + 15px,19px);line-height:1.7;color:#C9CFDD}
.blog-detail-content p,.blog-detail-content p.perex{margin:0 0 1.15em;font-size:inherit;line-height:inherit;color:inherit}
.blog-detail-perex p,.blog-detail-content p,.blog-detail-content li,.blog-detail-content blockquote,.blog-detail-content blockquote *,.blog-detail-content h2,.blog-detail-content h3,.blog-detail-content h5{text-align:left!important}
.blog-detail-content p:has(> img:only-child),.blog-detail-content p:has(> a.btn){text-align:center!important}
.blog-detail-content [style*="font-size"],.blog-detail-content [style*="font-family"],.blog-detail-content [style*="color"]{font-size:inherit!important;font-family:inherit!important;color:inherit!important;line-height:inherit!important}
.blog-detail-content strong,.blog-detail-content b{font-weight:600;color:#EEF1F6}

/* Headings: the CMS used h5 for section titles, so h2, h3 and h5 share one scale */
.blog-detail-content h2,.blog-detail-content h3,.blog-detail-content h5{margin:1.9em 0 .55em;font-weight:600;letter-spacing:-.005em;color:#fff}
.blog-detail-content h2{font-size:clamp(25px,1vw + 15px,30px);line-height:1.3}
.blog-detail-content h3,.blog-detail-content h5{font-size:clamp(22px,.8vw + 14px,26px);line-height:1.3}
.blog-detail-content > :first-child{margin-top:0}

/* Links inside text are underlined so they are visible without relying on colour */
.blog-detail-content a:not(.btn){color:#FF9A4D;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.blog-detail-content a:not(.btn):hover{color:#fff}

/* Lists: the base theme gives ul items a fixed 44px height, so wrapped items overlapped */
.blog-detail-content ul,.blog-detail-content ol{margin:0 0 1.3em;padding:0}
.blog-detail-content ul li,.blog-detail-content ol li{display:block;height:auto;margin:0 0 .6em;padding-left:1.6em}
.blog-detail-content ul li::before{width:7px;height:7px;top:calc(.85em - 3.5px)}
.blog-detail-content ol li::before{top:0;font-size:inherit;line-height:inherit;font-weight:600}
.blog-detail-content li > p{margin:0}

/* Quotes, images, tables */
.blog-detail-content blockquote{margin:2em 0;padding:4px 0 4px 24px;border-left:3px solid #F07F1A;font-size:1.1em;font-style:italic;color:#E8EBF2}
.blog-detail-content img{max-width:100%;height:auto;border-radius:12px}
.blog-detail-content .mtv-figure{margin:2em 0}
.blog-detail-content .mtv-figure img{display:block;width:100%}
.blog-detail-content .mtv-figure figcaption{margin-top:10px;font-size:.82em;line-height:1.5;color:rgba(255,255,255,.66)}
/* FAQ accordion: same markup as the homepage FAQ (change #030), FAQPage schema comes from lib/jsonld.ts */
.blog-detail-content .mtv-faq{margin:0 0 1em}
.blog-detail-content .mtv-faq-item{border-bottom:1px solid rgba(255,255,255,.14)}
.blog-detail-content .mtv-faq-item:first-of-type{border-top:1px solid rgba(255,255,255,.14)}
.blog-detail-content .mtv-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;cursor:pointer;list-style:none}
.blog-detail-content .mtv-faq-item summary::-webkit-details-marker{display:none}
.blog-detail-content .mtv-faq-item summary::after{content:"+";flex:0 0 auto;font-size:26px;line-height:1;color:#F07F1A}
.blog-detail-content .mtv-faq-item[open] summary::after{content:"\2212"}
.blog-detail-content .mtv-faq-item summary:focus-visible{outline:2px solid #F07F1A;outline-offset:4px}
.blog-detail-content .mtv-faq-q{margin:0;font-size:clamp(18px,.3vw + 15px,20px);line-height:1.4}
.blog-detail-content .mtv-faq-a p{margin:0 0 18px}
.blog-detail-content table{display:block;max-width:100%;overflow-x:auto;margin:0 0 1.5em;border-collapse:collapse;font-size:.9em}
.blog-detail-content th,.blog-detail-content td{padding:10px 14px;border:1px solid rgba(255,255,255,.14);text-align:left;vertical-align:top}
.blog-detail-content th{background:rgba(255,255,255,.06);color:#fff;font-weight:600}

/* CTA and "Learn more" footer of the article */
.blog-detail-content p:has(> a.btn){margin-top:2em}
.blog-detail-content .mtv-article-next{margin-top:2.5em;padding-top:1.5em;border-top:1px solid rgba(255,255,255,.12)}
.blog-detail-content .mtv-article-next p{margin:0;font-size:inherit}
/* After the FAQ accordion its last border already separates the footer, so drop the second line */
.blog-detail-content .mtv-faq + .mtv-article-next{margin-top:2em;padding-top:0;border-top:0}
/* Request a Demo under the article: a bit smaller than the header CTA (#040) */
.blog-detail-content .mtv-article-next .btn{font-size:13px;padding:12px 28px}