/* Caploonba Global: blog ("Insights") styles.
   Loaded after assets/site.css and built on its tokens (--green, --mint, --wrap, --head-h ...).
   Every rule is scoped to a .cb- class, so nothing here touches the other pages. */

.cb-main{padding-top:calc(var(--head-h,64px) + clamp(44px,7vw,96px));padding-bottom:clamp(24px,4vw,48px)}
.cb-main p{max-width:none}

/* ---------- shared pieces */
.cb-crumb{display:inline-flex;align-items:center;gap:.6em;font-weight:600;color:var(--green-deep);text-decoration:none}
.cb-crumb i{width:1.1em;height:1.1em;border-radius:50%;border:.28em solid var(--green);display:block}
.cb-crumb:hover{text-decoration:underline;text-underline-offset:.3em}

/* ---------- article header */
.cb-kicker{margin-top:clamp(22px,3vw,34px);font-weight:600;color:var(--stone)}
.cb-hero h1{margin-top:10px;color:var(--green);font-size:clamp(2.05rem,4.7vw,3.7rem);line-height:1.04;letter-spacing:-.028em;max-width:19em}
.cb-main .cb-lede{margin-top:clamp(18px,2.4vw,28px);max-width:36em}
.cb-meta{margin-top:18px;color:var(--stone);font-size:.95rem}
.cb-cover{margin-top:clamp(28px,4vw,52px);border-radius:var(--r-lg);overflow:hidden;background:var(--mint);aspect-ratio:2/1}
.cb-cover img{width:100%;height:100%;object-fit:cover}
@media (max-width:640px){.cb-cover{aspect-ratio:3/2}}

/* ---------- layout: text column with a sticky contents list */
.cb-layout{display:grid;gap:clamp(24px,4vw,40px);margin-top:clamp(32px,5vw,64px);grid-template-columns:minmax(0,1fr)}
.cb-col{min-width:0}
@media (min-width:1021px){
  .cb-layout{grid-template-columns:minmax(0,760px) minmax(210px,290px);justify-content:space-between;align-items:start;gap:clamp(40px,6vw,96px)}
  .cb-side{order:2;position:sticky;top:calc(var(--head-h,64px) + 40px)}
}

.cb-toc h2{font-size:1rem;font-weight:600;letter-spacing:0;line-height:1.3;color:var(--stone)}
.cb-toc ol{margin-top:12px;display:grid;gap:2px;border-left:2px solid var(--mint)}
.cb-toc a{display:block;padding:.38em 0 .38em 16px;margin-left:-2px;border-left:2px solid transparent;text-decoration:none;color:var(--stone);font-size:.97rem;line-height:1.35}
.cb-toc a:hover{color:var(--green-deep);border-left-color:var(--green)}
@media (max-width:1020px){
  .cb-toc{background:var(--white);border-radius:var(--r-md);padding:20px 22px}
}

/* ---------- key takeaways */
.cb-key{background:var(--mint);border-radius:var(--r-md);padding:clamp(20px,3vw,30px) clamp(20px,3vw,32px)}
.cb-key h2{font-size:1.15rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--green-deep)}
.cb-key ul{margin-top:14px;display:grid;gap:10px}
.cb-key li,.cb-body ul>li{position:relative;padding-left:1.75em}
.cb-key li::before,.cb-body ul>li::before{content:"";position:absolute;left:.1em;top:.42em;width:.78em;height:.78em;border-radius:50%;border:.21em solid var(--green)}

/* ---------- article text */
.cb-body{margin-top:clamp(32px,5vw,56px);font-size:1.0625rem;line-height:1.7}
.cb-body h2{font-size:clamp(1.6rem,2.7vw,2.15rem);line-height:1.1;letter-spacing:-.022em;color:var(--green-deep);margin:2.1em 0 .6em;scroll-margin-top:calc(var(--head-h,64px) + 36px)}
.cb-body>h2:first-child{margin-top:0}
.cb-body h3{font-size:1.25rem;line-height:1.25;margin:1.7em 0 .45em}
.cb-body p{margin:0 0 1.1em}
.cb-body ul,.cb-body ol{margin:0 0 1.3em;display:grid;gap:.55em}
.cb-body ol{counter-reset:cb}
.cb-body ol>li{counter-increment:cb;position:relative;padding-left:2.1em}
.cb-body ol>li::before{content:counter(cb);position:absolute;left:0;top:.18em;width:1.55em;height:1.55em;border-radius:50%;background:var(--mint);color:var(--green-deep);font-weight:600;font-size:.82em;display:grid;place-items:center}
.cb-body a,.cb-sources a{color:var(--green-deep);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.24em;text-decoration-color:var(--green-light);overflow-wrap:anywhere}
.cb-body a:hover,.cb-sources a:hover{text-decoration-color:var(--green-deep)}

.cb-table{overflow-x:auto;margin:0 0 1.5em;background:var(--white);border-radius:var(--r-md);border:1px solid var(--mint)}
.cb-table table{border-collapse:collapse;width:100%;min-width:540px;font-size:.97rem;line-height:1.5}
.cb-table table:not(:has(th:nth-child(3))){min-width:0}
.cb-table caption{caption-side:top;text-align:left;font-weight:600;padding:16px 18px 12px;color:var(--green-deep)}
.cb-table th,.cb-table td{text-align:left;vertical-align:top;padding:12px 18px;border-top:1px solid var(--mint)}
.cb-table thead th{background:var(--mint);font-weight:600;border-top:0}
.cb-table tbody th{font-weight:600}

.cb-note{background:var(--white);border-radius:var(--r-md);padding:18px 22px;margin:0 0 1.5em;border:1px solid var(--mint)}
.cb-note p:last-child{margin-bottom:0}
.cb-note strong:first-child{color:var(--green-deep)}

.cb-faq h3{margin-top:1.5em}

/* ---------- call to action: the two "o" rings of the logotype */
.cb-cta{position:relative;overflow:hidden;background:var(--green-deep);color:var(--paper);border-radius:var(--r-lg);padding:clamp(28px,4.5vw,52px);margin-top:clamp(40px,6vw,72px)}
.cb-cta::before,.cb-cta::after{content:"";position:absolute;width:clamp(120px,18vw,200px);aspect-ratio:1;border-radius:50%;border:clamp(20px,3vw,34px) solid var(--green);opacity:.4;top:-22%;right:-4%;pointer-events:none}
.cb-cta::after{right:calc(-4% + clamp(100px,15vw,168px))}
.cb-cta>*{position:relative;z-index:1}
.cb-cta h2{font-size:clamp(1.55rem,2.8vw,2.2rem);line-height:1.08;letter-spacing:-.02em;max-width:16em}
.cb-main .cb-cta p{margin-top:14px;max-width:34em;font-weight:300;font-size:1.1rem;line-height:1.5}
.cb-cta .btn{margin-top:24px}

/* ---------- sources and small print */
.cb-sources{margin-top:clamp(40px,6vw,64px);font-size:.95rem;color:var(--stone)}
.cb-sources h2{font-size:1.15rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.cb-sources ol{margin-top:12px;list-style:decimal;padding-left:1.5em;display:grid;gap:6px}
.cb-about{margin-top:32px;font-size:.95rem;color:var(--stone)}
.cb-disclaimer{margin-top:14px;padding-top:16px;border-top:1px solid var(--mint);font-size:.9rem;color:var(--stone)}

/* ---------- cards: related articles and the hub */
.cb-more{margin-top:clamp(64px,9vw,120px)}
.cb-more>h2,.cb-cluster>h2{font-size:clamp(1.8rem,3.6vw,3rem);color:var(--green-deep)}
.cb-grid{display:grid;gap:clamp(24px,3vw,40px);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));margin-top:clamp(24px,3.5vw,40px)}
@media (min-width:700px){.cb-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.cb-grid--2 .cb-card h3{font-size:1.5rem}}
@media (min-width:1100px){.cb-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}.cb-grid--4 .cb-card h3{font-size:1.15rem}}
.cb-nw{white-space:nowrap}
.cb-card{display:block;text-decoration:none;color:inherit}
.cb-card figure{border-radius:var(--r-md);overflow:hidden;background:var(--mint);aspect-ratio:16/10}
.cb-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cb-card:hover img{transform:scale(1.04)}
.cb-card__meta{display:block;margin-top:16px;font-weight:600;font-size:.92rem;color:var(--stone)}
.cb-card h3{margin-top:6px;font-size:1.3rem;line-height:1.2;letter-spacing:-.012em}
.cb-card:hover h3{color:var(--green-deep);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em;text-decoration-color:var(--green-light)}
.cb-main .cb-card p{margin-top:8px;color:var(--stone);font-size:.98rem;line-height:1.5}
@media (prefers-reduced-motion:reduce){.cb-card img{transition:none}}

/* ---------- hub page */
.cb-hub h1{margin-top:22px;color:var(--green);font-size:clamp(2.7rem,7vw,6rem);max-width:10em}
.cb-hub .lead{margin-top:28px}
.cb-cluster{margin-top:clamp(64px,9vw,120px)}
.cb-main .cb-cluster__intro{margin-top:14px;color:var(--stone);max-width:36em}
.cb-hub-cta{margin-top:clamp(32px,5vw,64px)}

/* ---------- header: one more menu item needs the compact menu up to 1100px.
   The same block is supplied for site.css so that all pages behave alike. */
@media (min-width:1021px) and (max-width:1100px){
  .menu-btn{display:flex}
  .head .btn{display:none}
  .nav{position:absolute;top:calc(var(--head-h) + 8px);left:12px;right:12px;margin:0;flex-direction:column;align-items:stretch;gap:2px;padding:12px;background:var(--paper);border:1px solid var(--mint);border-radius:28px;display:none}
  .nav.is-open{display:flex}
  .nav a{font-size:1.15rem;padding:.7em 1em}
  .nav .nav__cta{display:block;background:var(--green-deep);color:var(--white);text-align:center;margin-top:6px}
}