/* Insights: generated covers, clickable cards, "show more", and the single article page. */

/* ---------- Cards ---------- */
.article-card h3 a { color: inherit; }
.article-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card is the link */
.article-card:hover h3 a { color: var(--navy-2); }
.article-card:focus-within { outline: 2.5px solid var(--cyan); outline-offset: 3px; }
.article-card h3 a:focus-visible { outline: none; }
.article-card.is-more { display: none; }

/* Cover for posts without a featured image: category icon on the brand gradient */
.article-cover {
	position: relative; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden;
	background: radial-gradient(120% 90% at 80% 0%, rgba(43,163,255,.45), transparent 60%), linear-gradient(140deg, #0A1E4D 0%, #123072 55%, #041024 100%);
	transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.article-cover::before {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(124,201,255,.35) 1px, transparent 1.5px); background-size: 22px 22px;
	mask-image: linear-gradient(160deg, #000 10%, transparent 75%);
}
.article-cover svg { position: relative; width: 64px; height: 64px; color: #fff; filter: drop-shadow(0 8px 22px rgba(43,163,255,.55)); }
.article-cover--security { background-color: #0A1E4D; }
.article-cover--cloud    { background: radial-gradient(120% 90% at 20% 0%, rgba(43,163,255,.5), transparent 60%), linear-gradient(140deg, #0d2461 0%, #123072 50%, #041024 100%); }
.article-cover--ai       { background: radial-gradient(90% 80% at 50% 40%, rgba(124,201,255,.45), transparent 65%), linear-gradient(140deg, #041024 0%, #0A1E4D 60%, #123072 100%); }
.article-cover--product  { background: radial-gradient(110% 90% at 85% 100%, rgba(43,163,255,.5), transparent 60%), linear-gradient(140deg, #123072 0%, #0A1E4D 60%, #041024 100%); }
.article-cover--company  { background: radial-gradient(120% 90% at 10% 100%, rgba(124,201,255,.4), transparent 60%), linear-gradient(140deg, #0A1E4D 0%, #0d2461 60%, #123072 100%); }
.article-card:hover .article-cover { transform: scale(1.06); }

#showMore { margin-top: 0; padding: .95rem 1.8rem; font: 600 .98rem/1 "Inter", system-ui, sans-serif; background: none; cursor: pointer; }
#showMore[hidden] { display: none; }

/* ---------- Single article ---------- */
.article-hero .page-hero-inner-center { max-width: 860px; }
.article-hero h1 { font-size: clamp(2rem, 4vw, 3rem); }
.article-hero-meta { margin-top: 18px; font-size: .92rem; color: var(--muted); }
.article-hero-meta span { margin: 0 6px; }

.article-body {
	max-width: 740px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) clamp(20px, 4vw, 32px) clamp(48px, 7vw, 80px);
	font-size: 1.06rem; line-height: 1.8; color: var(--body-text);
}
.article-body > * + * { margin-top: 1.15em; }
.article-body h2 {
	margin-top: 2.1em; font-family: "Sora", sans-serif; font-weight: 700; font-size: clamp(1.35rem, 2.4vw, 1.65rem);
	line-height: 1.3; letter-spacing: -.01em; color: var(--navy);
}
.article-body h3 { margin-top: 1.7em; font-family: "Sora", sans-serif; font-weight: 700; font-size: 1.18rem; line-height: 1.35; color: var(--navy); }
.article-body h2 + *, .article-body h3 + * { margin-top: .6em; }
.article-body strong { color: var(--navy); font-weight: 600; }
.article-body a { color: var(--navy-2); text-decoration: underline; text-decoration-color: rgba(43,163,255,.55); text-underline-offset: 3px; }
.article-body a:hover { color: var(--cyan); }
.article-body ul, .article-body ol { padding-left: 1.3em; }
.article-body ul { list-style: none; }
.article-body ul li { position: relative; }
.article-body ul li::before { content: ""; position: absolute; left: -1.1em; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.article-body ol { list-style: decimal; }
.article-body ol li::marker { color: var(--cyan); font-weight: 700; }
.article-body li + li { margin-top: .45em; }
.article-body blockquote {
	padding: 18px 22px; border-left: 3px solid var(--cyan); border-radius: 0 14px 14px 0;
	background: #F6FAFF; color: var(--navy); font-weight: 500;
}
.article-body code { padding: .12em .4em; border-radius: 6px; background: #EEF4FB; color: var(--navy); font-size: .9em; }
.article-body pre {
	padding: 20px 22px; border-radius: 16px; overflow-x: auto;
	background: linear-gradient(160deg, #0A1E4D, #041024); color: #D9E9FF; font-size: .88rem; line-height: 1.65;
}
.article-body pre code { padding: 0; background: none; color: inherit; }
.article-body figure img, .article-feature img { width: 100%; height: auto; border-radius: 20px; }
.article-feature { margin-bottom: 2em; }
.article-body .article-sources { font-size: .9rem; }
.article-back { margin-top: 2.6em; padding-top: 1.6em; border-top: 1px solid var(--border); font-weight: 600; }
.article-back a { text-decoration: none; }

.article-related { background: #F6FAFF; padding: clamp(56px, 8vw, 88px) clamp(20px, 4vw, 64px); }
.article-related-head { text-align: center; margin-bottom: clamp(32px, 5vw, 48px); }
.article-related-head .eyebrow { justify-content: center; }
.article-related-head h2 { font-family: "Sora", sans-serif; font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -.02em; color: var(--navy); }
.article-related + .cta-section { padding-top: clamp(64px, 9vw, 110px); }