/* campiq-blog.css — shared styling for the blog section (list + article).
 * Reuses the marketing-site design tokens, nav and footer so the blog is a
 * visual extension of the existing site. Loaded by blog.html and article.html. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#F7F6F2;color:#1F2937;font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Manrope',system-ui,sans-serif;font-weight:700}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
img{display:block;max-width:100%}
:root{
  --navy:#0D1F3C;--navy-mid:#162845;--slate:#4A6FA5;--emerald:#10B981;
  --off-white:#F7F6F2;--cool-grey:#D1D5DB;--cool-grey-2:#E5E7EB;
  --charcoal:#1F2937;--muted:#6B7280;--white:#FFFFFF;
}

/* ── NAV (shared with marketing site) ── */
.nav{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:1rem 3rem;background:rgba(247,246,242,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--cool-grey)}
.nav-logo img{height:30px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-size:.84rem;font-weight:500;color:var(--muted);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--navy)}
.nav-login{color:var(--navy)!important;font-weight:600!important;border:1.5px solid var(--cool-grey);padding:.45rem 1rem;border-radius:100px;transition:all .2s!important}
.nav-login:hover{border-color:var(--slate)!important;color:var(--slate)!important}
.nav-pill{padding:.5rem 1.3rem;border-radius:100px;transition:background .2s!important}
.nav-cta{background:var(--emerald)!important;color:var(--white)!important;font-weight:700!important;transition:background .2s!important}
.nav-cta:hover{background:#0ea572!important}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;background:none;border:none;cursor:pointer;padding:9px;border-radius:9px;flex-shrink:0}
.nav-burger span{display:block;height:2px;width:22px;background:var(--navy);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.nav-burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.active span:nth-child(2){opacity:0}
.nav-burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Blog list ── */
.blog-hero{max-width:1120px;margin:0 auto;padding:4.5rem 3rem 2.5rem}
.blog-hero .tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald);margin-bottom:1rem}
.blog-hero h1{font-size:clamp(2rem,4vw,2.9rem);color:var(--navy);letter-spacing:-.03em;line-height:1.1;margin-bottom:.9rem}
.blog-hero p{font-size:1.02rem;color:var(--muted);max-width:560px;line-height:1.7}
.blog-wrap{max-width:1120px;margin:0 auto;padding:1rem 3rem 6rem}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.card{background:var(--white);border:1px solid var(--cool-grey-2);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(13,31,60,.10);border-color:var(--cool-grey)}
.card-img{aspect-ratio:16/9;width:100%;object-fit:cover;background:linear-gradient(135deg,#0D1F3C,#1E3A5F)}
.card-img.placeholder{display:flex;align-items:center;justify-content:center}
.card-img.placeholder svg{width:40px;height:40px;opacity:.5}
.card-body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.chip{align-self:flex-start;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);background:rgba(74,111,165,.1);border-radius:100px;padding:.28rem .7rem;margin-bottom:.85rem}
.card h2{font-size:1.18rem;color:var(--navy);line-height:1.35;letter-spacing:-.01em;margin-bottom:.6rem}
.card p{font-size:.9rem;color:var(--muted);line-height:1.65;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{display:flex;align-items:center;gap:.5rem;margin-top:1.1rem;font-size:.78rem;color:var(--muted)}
.card-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--cool-grey)}

/* Skeletons + states */
.skeleton{background:var(--white);border:1px solid var(--cool-grey-2);border-radius:16px;overflow:hidden}
.sk-img{aspect-ratio:16/9;background:linear-gradient(90deg,#eee,#f5f5f5,#eee);background-size:200% 100%;animation:sh 1.3s infinite}
.sk-line{height:12px;border-radius:6px;background:#eee;margin:.7rem 1.5rem}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.state{max-width:560px;margin:4rem auto;text-align:center;padding:0 2rem}
.state-icon{width:56px;height:56px;margin:0 auto 1.3rem;border-radius:14px;background:var(--white);border:1px solid var(--cool-grey-2);display:flex;align-items:center;justify-content:center;color:var(--slate)}
.state h1,.state h2{font-size:1.5rem;color:var(--navy);margin-bottom:.6rem}
.state p{color:var(--muted);margin-bottom:1.6rem}
.state a.btn{display:inline-block;background:var(--navy);color:#fff;font-weight:600;font-size:.9rem;padding:.7rem 1.5rem;border-radius:100px}
.state a.btn:hover{background:var(--slate)}

/* Category filter bar (blog list ?category=…) */
.filter-bar{display:flex;align-items:center;gap:.8rem;margin-bottom:1.6rem}
.filter-bar .chip{margin:0}
.filter-clear{font-size:.8rem;font-weight:600;color:var(--slate)}
.filter-clear:hover{color:var(--navy)}

/* ── Article ── */
.article-shell{max-width:1120px;margin:0 auto;padding:2.2rem 3rem 5rem}
.article-layout{display:grid;grid-template-columns:minmax(0,720px) 240px;gap:4rem;justify-content:center;align-items:start}
.article{min-width:0}
/* Breadcrumbs */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.8rem;color:var(--muted);margin-bottom:1.8rem;max-width:984px;margin-left:auto;margin-right:auto}
.crumbs a{color:var(--muted);font-weight:500}
.crumbs a:hover{color:var(--navy)}
.crumbs .sep{color:var(--cool-grey)}
.crumbs .cur{color:var(--navy);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.back{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;font-weight:600;color:var(--slate);margin-bottom:2rem}
.back:hover{color:var(--navy)}
.article .chip{display:inline-block;margin-bottom:1.1rem;padding:.3rem .75rem}
a.chip:hover{background:rgba(74,111,165,.18)}
.article h1{font-size:clamp(1.9rem,4.4vw,2.7rem);color:var(--navy);letter-spacing:-.03em;line-height:1.12;margin-bottom:1rem}
.lede{font-size:1.12rem;color:var(--muted);line-height:1.65;margin-bottom:1.6rem}
/* Sticky Table of Contents (desktop only) */
.toc-wrap{position:sticky;top:96px}
.toc{border-left:1px solid var(--cool-grey-2);padding-left:1.2rem}
.toc-title{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.toc a{display:block;font-size:.83rem;color:var(--muted);padding:.28rem 0;line-height:1.45;transition:color .2s}
.toc a.l3{padding-left:.9rem;font-size:.79rem}
.toc a:hover{color:var(--navy)}
.toc a.active{color:var(--emerald);font-weight:600}
.byline{display:flex;align-items:center;gap:.85rem;margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--cool-grey-2)}
.byline-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--cool-grey-2);flex-shrink:0}
.byline-avatar.ph{display:flex;align-items:center;justify-content:center;color:var(--slate);font-weight:700;font-family:'Manrope',sans-serif}
.byline-name{font-weight:600;color:var(--navy);font-size:.92rem}
.byline-meta{font-size:.8rem;color:var(--muted);margin-top:.1rem}
.byline-meta .dot{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--cool-grey);margin:0 .45rem;vertical-align:middle}
.feat{width:100%;border-radius:16px;margin-bottom:2.4rem;aspect-ratio:16/9;object-fit:cover}
/* Prose typography */
.body{font-size:1.06rem;line-height:1.8;color:#2b3648}
.body>*+*{margin-top:1.15rem}
.body h1,.body h2{font-size:1.55rem;color:var(--navy);margin-top:2.4rem;letter-spacing:-.02em;line-height:1.25}
.body h3{font-size:1.24rem;color:var(--navy);margin-top:2rem;line-height:1.3}
.body h2,.body h3{scroll-margin-top:96px}
.body p{margin:1.15rem 0}
.body a,.body a.rte-link{color:var(--emerald);text-decoration:underline;text-underline-offset:2px}
.body ul,.body ol{padding-left:1.5rem;margin:1.15rem 0}
.body li{margin:.45rem 0}
.body blockquote{border-left:3px solid var(--emerald);padding:.3rem 0 .3rem 1.3rem;margin:1.6rem 0;color:var(--muted);font-style:italic;font-size:1.1rem}
.body img,.body img.rte-img{width:100%;border-radius:12px;margin:1.8rem 0}
.body pre{background:var(--navy);color:#e6edf6;border-radius:12px;padding:1.1rem 1.3rem;overflow-x:auto;font-size:.86rem;margin:1.6rem 0}
.body code{background:var(--cool-grey-2);border-radius:5px;padding:.12rem .38rem;font-size:.88em;font-family:'SF Mono',ui-monospace,monospace}
.body pre code{background:none;padding:0;color:inherit}
.body hr{border:0;border-top:1px solid var(--cool-grey-2);margin:2.2rem 0}
.body table{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.94rem}
.body th,.body td{border:1px solid var(--cool-grey-2);padding:.6rem .8rem;text-align:left}
.body th{background:var(--white);color:var(--navy);font-weight:600}
/* Custom blocks (from the CMS block renderer) */
/* Callouts — one component, variant = label + accent colour (existing palette) */
.body .rte-callout{background:var(--white);border:1px solid var(--cool-grey-2);border-left:3px solid var(--emerald);border-radius:10px;padding:1.05rem 1.25rem;margin:1.8rem 0}
.body .rte-callout-label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--emerald);margin-bottom:.35rem}
.body .rte-callout-body p{margin:.55rem 0}
.body .rte-callout-body>:first-child{margin-top:0}
.body .rte-callout-body>:last-child{margin-bottom:0}
.body .rte-callout-example{border-left-color:var(--slate)}
.body .rte-callout-example .rte-callout-label{color:var(--slate)}
.body .rte-callout-best-practice{border-left-color:var(--navy)}
.body .rte-callout-best-practice .rte-callout-label{color:var(--navy)}
.body .rte-callout-common-mistake{border-left-color:#D97706}
.body .rte-callout-common-mistake .rte-callout-label{color:#B45309}
.body .rte-callout-dubai-regulation{border-left-color:var(--navy)}
.body .rte-callout-dubai-regulation .rte-callout-label{color:var(--navy)}
.body .rte-callout-campiq-insight{background:rgba(16,185,129,.04)}
/* CTA block */
.body .rte-cta{background:var(--navy);border-radius:16px;padding:2.2rem 2rem;margin:2.6rem 0;text-align:center}
.body .rte-cta-heading{font-family:'Manrope',system-ui,sans-serif;font-size:1.35rem;color:var(--white);letter-spacing:-.01em;margin:0 0 .5rem}
.body .rte-cta-text{color:rgba(255,255,255,.75);font-size:.98rem;margin:0 0 1.3rem}
.body .rte-cta-btn{display:inline-block;background:var(--emerald);color:#fff;font-weight:700;padding:.75rem 1.7rem;border-radius:100px;text-decoration:none}
.body .rte-cta-btn:hover{background:#0ea572}
/* FAQ block (collapsible accordion; also feeds the FAQPage JSON-LD) */
.body .rte-faq{margin:1.8rem 0}
.body .rte-faq-item{border:1px solid var(--cool-grey-2);border-radius:10px;margin:.7rem 0;background:var(--white);padding:0}
.body .rte-faq-item summary{list-style:none;font-weight:600;color:var(--navy);cursor:pointer;padding:.95rem 2.6rem .95rem 1.2rem;position:relative}
.body .rte-faq-item summary::-webkit-details-marker{display:none}
.body .rte-faq-item summary::after{content:'+';position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);color:var(--slate);font-weight:600;font-size:1.05rem}
.body .rte-faq-item[open] summary::after{content:'−'}
.body .rte-faq-a{padding:0 1.2rem 1.05rem;font-size:.98rem}
.body .rte-faq-a p{margin:.55rem 0}
.body .rte-faq-a>:first-child{margin-top:0}
/* Author card */
.author-card{display:flex;gap:1.1rem;align-items:flex-start;background:var(--white);border:1px solid var(--cool-grey-2);border-radius:16px;padding:1.5rem 1.6rem;margin-top:3rem}
.author-card .byline-avatar{width:56px;height:56px}
.author-card h2{font-size:1.05rem;color:var(--navy);margin-bottom:.15rem}
.author-card .role{font-size:.82rem;color:var(--muted);margin-bottom:.55rem}
.author-card .bio{font-size:.9rem;color:#2b3648;line-height:1.65;margin:0}
.author-card .li-link{display:inline-flex;margin-top:.6rem;font-size:.84rem;font-weight:600;color:var(--slate)}
.author-card .li-link:hover{color:var(--navy)}
/* Related articles */
.related{margin-top:4rem;border-top:1px solid var(--cool-grey-2);padding-top:2.6rem}
.related-title{font-size:1.35rem;color:var(--navy);letter-spacing:-.02em;margin-bottom:1.5rem}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}

/* ── FOOTER (shared) ── */
.footer{background:var(--navy-mid);padding:1.7rem 3rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;border-top:1px solid rgba(255,255,255,.06)}
.footer-logo img{height:24px;width:auto;display:block}
.footer-links{display:flex;align-items:center;gap:1.6rem}
.footer-links a{font-size:.78rem;color:rgba(255,255,255,.38);transition:color .2s}
.footer-links a:hover{color:rgba(255,255,255,.7)}
.footer p{font-size:.76rem;color:rgba(255,255,255,.28)}

/* Tablet: TOC collapses (sticky TOC is desktop-only) */
@media(max-width:1080px){
  .article-layout{grid-template-columns:minmax(0,720px)}
  .toc-wrap{display:none}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
  .nav{padding:1rem 1.5rem}
  .nav-burger{display:flex}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--off-white);border-bottom:1px solid var(--cool-grey);padding:.5rem 1.5rem 1.2rem;display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:.7rem 0}
  .nav-login,.nav-pill{text-align:center;margin-top:.4rem}
  .blog-hero,.blog-wrap{padding-left:1.5rem;padding-right:1.5rem}
  .blog-grid{grid-template-columns:1fr}
  .article-shell{padding:1.8rem 1.5rem 4rem}
  .related-grid{grid-template-columns:1fr}
  .footer{padding:1.7rem 1.5rem}
}
@media(min-width:961px) and (max-width:1080px){.blog-grid{grid-template-columns:repeat(2,1fr)}}