/* ==========================================================================
   Boldorg — Components (buttons, badges, cards, prose)
   ========================================================================== */

/* ---------- Buttons ---------- */
.bo-btn {
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .85rem 1.4rem; border-radius: var(--bo-r-pill);
	font-weight: 600; font-size: .98rem; line-height: 1;
	transition: transform .25s var(--bo-ease), box-shadow .25s var(--bo-ease), background .25s var(--bo-ease), color .25s;
	white-space: nowrap; position: relative; isolation: isolate;
}
.bo-btn .bo-icon { transition: transform .25s var(--bo-ease); }
.bo-btn:hover .bo-icon { transform: translateX(3px); }
.bo-btn--primary { background: var(--bo-blue); color: #fff; box-shadow: var(--bo-shadow-blue); }
.bo-btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 22px 50px rgba(37,99,235,.36); background: var(--bo-blue-hover); }
.bo-btn--ghost { background: transparent; color: var(--bo-ink); box-shadow: inset 0 0 0 1.5px var(--bo-border); }
.bo-btn--ghost:hover { color: var(--bo-blue); box-shadow: inset 0 0 0 1.5px var(--bo-blue); transform: translateY(-2px); }
.bo-btn--light { background: #fff; color: var(--bo-blue); box-shadow: var(--bo-shadow-md); }
.bo-btn--light:hover { transform: translateY(-2px); box-shadow: var(--bo-shadow-lg); color: var(--bo-blue-hover); }
.bo-btn--lg { padding: 1.05rem 1.8rem; font-size: 1.05rem; }
.bo-btn-row { display: flex; gap: .9rem; flex-wrap: wrap; }

/* ---------- Eyebrow / section heads ---------- */
.bo-eyebrow {
	display: inline-flex; align-items: center; gap: .5rem;
	font-size: var(--bo-fs-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: var(--bo-blue); padding: .45rem .9rem; border-radius: var(--bo-r-pill);
	background: var(--bo-blue-100);
}
.bo-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bo-blue); }
.bo-sec-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.bo-sec-head.is-center { margin-inline: auto; text-align: center; }
.bo-sec-head.is-center .bo-eyebrow { margin-inline: auto; }
.bo-sec-title { font-size: var(--bo-fs-h2); margin-top: 1rem; }
.bo-sec-lead { font-size: var(--bo-fs-lead); margin-top: 1rem; color: var(--bo-text); }

/* ---------- Badge ---------- */
.bo-badge {
	display: inline-flex; align-items: center; gap: .4rem;
	font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	padding: .3rem .7rem; border-radius: var(--bo-r-pill);
	background: var(--bo-blue); color: #fff;
}
.bo-badge--soft { background: var(--bo-blue-100); color: var(--bo-blue); }

/* ---------- Generic card ---------- */
.bo-card {
	background: #fff; border: 1px solid var(--bo-border); border-radius: var(--bo-r-lg);
	padding: clamp(1.5rem, 3vw, 2.2rem);
	transition: transform .35s var(--bo-ease-out), box-shadow .35s var(--bo-ease-out), border-color .35s;
	position: relative; overflow: hidden;
}
.bo-card:hover { transform: translateY(-6px); box-shadow: var(--bo-shadow-lg); border-color: transparent; }

/* Icon tile */
.bo-icon-tile {
	width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;
	background: var(--bo-blue-100); color: var(--bo-blue); flex: 0 0 auto;
	transition: background .35s var(--bo-ease), color .35s var(--bo-ease), transform .35s;
}
.bo-card:hover .bo-icon-tile { background: var(--bo-blue); color: #fff; transform: rotate(-6deg) scale(1.05); }
.bo-icon-tile--purple { background: #F3EEFF; color: var(--bo-purple); }
.bo-icon-tile--lg { width: 76px; height: 76px; border-radius: 20px; }

/* ---------- Adaptive grid (last row centers; no orphans) ---------- */
.bo-grid {
	--bo-grid-cols: 3;
	--bo-grid-gap: clamp(1.25rem, 2.4vw, 2rem);
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: var(--bo-grid-gap);
}
.bo-grid > * {
	flex: 1 1 calc((100% - (var(--bo-grid-cols) - 1) * var(--bo-grid-gap)) / var(--bo-grid-cols));
	max-width: calc((100% - (var(--bo-grid-cols) - 1) * var(--bo-grid-gap)) / var(--bo-grid-cols));
}
@media (max-width: 900px) {
	.bo-grid > * { flex-basis: calc((100% - var(--bo-grid-gap)) / 2); max-width: calc((100% - var(--bo-grid-gap)) / 2); }
}
@media (max-width: 560px) {
	.bo-grid > * { flex-basis: 100%; max-width: 100%; }
}

/* ---------- Link ---------- */
.bo-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--bo-blue); }
.bo-link .bo-icon { transition: transform .25s var(--bo-ease); }
.bo-link:hover .bo-icon { transform: translateX(4px); }

/* ---------- Prose ---------- */
.bo-prose { font-size: 1.075rem; line-height: 1.8; }
.bo-prose > * + * { margin-top: 1.2rem; }
.bo-prose h2 { font-size: clamp(1.5rem,2.6vw,2rem); margin-top: 2.4rem; }
.bo-prose h3 { font-size: 1.3rem; margin-top: 1.8rem; }
.bo-prose .bo-lead { font-size: 1.3rem; color: var(--bo-ink); font-weight: 500; line-height: 1.5; }
.bo-prose ul { padding-left: 0; }
.bo-prose ul li { position: relative; padding-left: 1.8rem; margin-bottom: .6rem; }
.bo-prose ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 16px; height: 16px; border-radius: 50%; background: var(--bo-blue-100); }
.bo-prose ul li::after { content: ""; position: absolute; left: 5px; top: calc(.55em + 4px); width: 6px; height: 6px; border-radius: 50%; background: var(--bo-blue); }
.bo-prose a { text-decoration: underline; text-underline-offset: 3px; }
.bo-prose__hero { border-radius: var(--bo-r-lg); overflow: hidden; margin-bottom: 2rem; }
.bo-prose blockquote { border-left: 4px solid var(--bo-blue); padding-left: 1.5rem; font-size: 1.2rem; color: var(--bo-ink); font-style: italic; }

/* ---------- Blog cards ---------- */
.bo-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; }
.bo-post-card { background: #fff; border: 1px solid var(--bo-border); border-radius: var(--bo-r-lg); overflow: hidden; transition: transform .35s var(--bo-ease-out), box-shadow .35s; }
.bo-post-card:hover { transform: translateY(-6px); box-shadow: var(--bo-shadow-lg); }
.bo-post-card__media img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.bo-post-card__body { padding: 1.5rem; }
.bo-post-card__title { font-size: 1.25rem; margin-bottom: .6rem; }
.bo-post-card__title a { color: var(--bo-ink); }
.bo-post-card__title a:hover { color: var(--bo-blue); }

/* ---------- Pagination ---------- */
.bo-pagination { margin-top: 3rem; display: flex; justify-content: center; }
.bo-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 .5rem; border-radius: 12px; border: 1px solid var(--bo-border); color: var(--bo-ink); font-weight: 600; margin: 0 .2rem; }
.bo-pagination .page-numbers.current { background: var(--bo-blue); color: #fff; border-color: var(--bo-blue); }
.bo-pagination .page-numbers:hover:not(.current) { border-color: var(--bo-blue); color: var(--bo-blue); }

/* ---------- Search form ---------- */
.bo-searchform { display: flex; gap: .5rem; }
.bo-searchform input { flex: 1; padding: .7rem 1rem; border: 1.5px solid var(--bo-border); border-radius: var(--bo-r-pill); background: var(--bo-bg-soft); }
.bo-searchform button { width: 46px; border-radius: 50%; background: var(--bo-blue); color: #fff; display: grid; place-items: center; }

/* ---------- 404 ---------- */
.bo-404 { text-align: center; overflow: hidden; }
.bo-404__inner { position: relative; z-index: 1; }
.bo-404__code { font-family: var(--bo-font-display); font-size: clamp(5rem, 18vw, 12rem); font-weight: 800; line-height: 1; color: var(--bo-blue); }
.bo-404 h1 { font-size: var(--bo-fs-h2); margin: .5rem 0 1rem; }
.bo-404 p { max-width: 48ch; margin: 0 auto 2rem; }
.bo-404 .bo-btn-row { justify-content: center; }
.bo-empty { text-align: center; color: var(--bo-text-soft); padding: 3rem 0; }

/* ---------- Decorative blobs ---------- */
.bo-blob { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 0; }
.bo-blob--1 { width: 420px; height: 420px; background: rgba(37,99,235,.16); top: -120px; right: -80px; }
.bo-blob--2 { width: 360px; height: 360px; background: rgba(124,58,237,.14); bottom: -120px; left: -80px; }

/* ---------- Quick contact (floating WhatsApp) ---------- */
.bo-quick-wa {
	position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 90;
	display: inline-grid; place-items: center;
	width: 64px; height: 64px; padding: 0; border-radius: 50%;
	background: #25D366; color: #fff; font-weight: 700; font-size: .95rem; line-height: 1;
	box-shadow: 0 14px 32px rgba(37,211,102,.4), 0 0 0 6px rgba(37,211,102,.12);
	transition: transform .3s var(--bo-ease), box-shadow .3s var(--bo-ease);
	animation: boQuickIn .5s var(--bo-ease-out) both;
}
.bo-quick-wa svg { width: 28px; height: 28px; }
.bo-quick-wa__label { display: none; }
.bo-quick-wa:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 18px 40px rgba(37,211,102,.5), 0 0 0 8px rgba(37,211,102,.14); }
.bo-quick-wa::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(37,211,102,.45); animation: boQuickPulse 2.6s var(--bo-ease) infinite; pointer-events: none; }
@keyframes boQuickIn { from { transform: translateY(20px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes boQuickPulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
@media (max-width: 560px) { .bo-quick-wa { width: 58px; height: 58px; } }
@media (prefers-reduced-motion: reduce) { .bo-quick-wa, .bo-quick-wa::after { animation: none; } }