/* Codex Content Blocks style pack: angular */

.ccb-root.ccb-style-angular {
	--ccb-radius: 3px;
	--ccb-radius-sm: 2px;
	--ccb-shadow: 16px 18px 0 color-mix(in srgb, var(--ccb-primary-dark) 10%, transparent), 0 20px 54px rgba(15,31,55,.16);
	--ccb-shadow-strong: 22px 24px 0 color-mix(in srgb, var(--ccb-primary-dark) 13%, transparent), 0 28px 70px rgba(15,31,55,.24);
}

.ccb-root.ccb-style-angular.ccb-document {
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--ccb-primary-soft) 22%, #fff 78%) 0 25%, transparent 25% 100%),
		linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--ccb-canvas) 88%, #fff 12%) 46%, color-mix(in srgb, var(--ccb-primary-soft) 34%, #fff 66%) 100%);
}

.ccb-root.ccb-style-angular .ccb-section::before {
	background:
		linear-gradient(135deg, transparent 0 54%, color-mix(in srgb, var(--ccb-primary) 18%, transparent) 54% 56%, transparent 56%),
		repeating-linear-gradient(45deg, color-mix(in srgb, var(--ccb-primary-border) 42%, transparent) 0 2px, transparent 2px 22px);
	opacity: .22;
	mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

.ccb-root.ccb-style-angular .ccb-card,
.ccb-root.ccb-style-angular .ccb-deep-card,
.ccb-root.ccb-style-angular .ccb-price-card,
.ccb-root.ccb-style-angular .ccb-resource-card,
.ccb-root.ccb-style-angular .ccb-related-card,
.ccb-root.ccb-style-angular .ccb-case-card,
.ccb-root.ccb-style-angular .ccb-product-cta,
.ccb-root.ccb-style-angular .ccb-standard-panel,
.ccb-root.ccb-style-angular .ccb-intro-panel,
.ccb-root.ccb-style-angular .ccb-icon-list-panel,
.ccb-root.ccb-style-angular .ccb-verdict,
.ccb-root.ccb-style-angular .ccb-tabs,
.ccb-root.ccb-style-angular .ccb-faq-accordion__item,
.ccb-root.ccb-style-angular .ccb-callout,
.ccb-root.ccb-style-angular .ccb-author-bio,
.ccb-root.ccb-style-angular .ccb-newsletter,
.ccb-root.ccb-style-angular .ccb-checklist-panel,
.ccb-root.ccb-style-angular .ccb-screenshot-frame {
	border-width: 2px;
	border-radius: var(--ccb-radius);
	box-shadow: var(--ccb-shadow);
}

.ccb-root.ccb-style-angular .ccb-hero-art,
.ccb-root.ccb-style-angular .ccb-image-hero,
.ccb-root.ccb-style-angular .ccb-image-cta,
.ccb-root.ccb-style-angular .ccb-image-placeholder,
.ccb-root.ccb-style-angular .ccb-related-card__media,
.ccb-root.ccb-style-angular .ccb-author-bio__avatar {
	border-radius: var(--ccb-radius);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}

.ccb-root.ccb-style-angular .ccb-button,
.ccb-root.ccb-style-angular .ccb-pill,
.ccb-root.ccb-style-angular .ccb-chip,
.ccb-root.ccb-style-angular .ccb-float-chip,
.ccb-root.ccb-style-angular .ccb-tab,
.ccb-root.ccb-style-angular .ccb-newsletter__form {
	border-radius: var(--ccb-radius-sm);
}

.ccb-root.ccb-style-angular .ccb-eyebrow::before,
.ccb-root.ccb-style-angular .ccb-eyebrow::after {
	width: 34px;
	transform: skewX(-24deg);
	border-radius: 0;
}

/* Stronger visual language packs. These intentionally create distinct
   silhouettes so AI-generated sites do not all read like the same template. */
.ccb-root.ccb-style-angular .ccb-section {
	clip-path: polygon(0 0, 100% 32px, 100% 100%, 0 calc(100% - 32px));
	margin-block: -18px;
	padding-block: calc(var(--ccb-section-pad) + 20px);
}

.ccb-root.ccb-style-angular .ccb-section::before {
	inset: 0;
	background:
		linear-gradient(132deg, transparent 0 42%, color-mix(in srgb, var(--ccb-primary), transparent 88%) 42% 45%, transparent 45% 100%),
		repeating-linear-gradient(135deg, transparent 0 24px, color-mix(in srgb, var(--ccb-primary), transparent 95%) 24px 26px, transparent 26px 58px);
	border-radius: 0;
	transform: none;
}

.ccb-root.ccb-style-angular .ccb-card,
.ccb-root.ccb-style-angular .ccb-deep-card,
.ccb-root.ccb-style-angular .ccb-price-card,
.ccb-root.ccb-style-angular .ccb-resource-card,
.ccb-root.ccb-style-angular .ccb-related-card,
.ccb-root.ccb-style-angular .ccb-case-card,
.ccb-root.ccb-style-angular .ccb-product-cta,
.ccb-root.ccb-style-angular .ccb-standard-panel,
.ccb-root.ccb-style-angular .ccb-intro-panel,
.ccb-root.ccb-style-angular .ccb-icon-list-panel,
.ccb-root.ccb-style-angular .ccb-verdict,
.ccb-root.ccb-style-angular .ccb-tabs,
.ccb-root.ccb-style-angular .ccb-faq-accordion__item,
.ccb-root.ccb-style-angular .ccb-callout,
.ccb-root.ccb-style-angular .ccb-author-bio,
.ccb-root.ccb-style-angular .ccb-newsletter,
.ccb-root.ccb-style-angular .ccb-checklist-panel {
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
	border-radius: 0;
	border-width: 2px;
	box-shadow: 14px 14px 0 color-mix(in srgb, var(--ccb-primary), transparent 88%);
}

.ccb-root.ccb-style-angular .ccb-image-hero,
.ccb-root.ccb-style-angular .ccb-image-cta,
.ccb-root.ccb-style-angular .ccb-image-placeholder,
.ccb-root.ccb-style-angular .ccb-related-card__media,
.ccb-root.ccb-style-angular .ccb-video-frame {
	clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
	border-radius: 0;
}

.ccb-root.ccb-style-angular .ccb-hero-art {
	overflow: visible;
	border-radius: 0;
	clip-path: none;
}

.ccb-root.ccb-style-angular .ccb-hero-art::before {
	clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
	border-radius: 0;
}

.ccb-root.ccb-style-angular .ccb-video-frame {
	clip-path: polygon(2.5% 0, 100% 0, 97.5% 100%, 0 100%);
}

.ccb-root.ccb-style-angular .ccb-section:has(.ccb-screenshot-frame) {
	padding-block: clamp(43px, 4.2vw, 53px);
}

.ccb-root.ccb-style-angular .ccb-screenshot-frame .ccb-image-screen {
	max-height: 620px;
	object-fit: cover;
}

.ccb-root.ccb-style-angular .ccb-button,
.ccb-root.ccb-style-angular .ccb-pill,
.ccb-root.ccb-style-angular .ccb-chip,
.ccb-root.ccb-style-angular .ccb-tab,
.ccb-root.ccb-style-angular .ccb-newsletter__form {
	clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
	border-radius: 0;
}

.ccb-root.ccb-style-angular .ccb-newsletter__form,
.ccb-root.ccb-style-wavy .ccb-newsletter__form {
	clip-path: none;
}

.ccb-root.ccb-style-angular .ccb-tabs__tab,
.ccb-root.ccb-style-wavy .ccb-tabs__tab,
.ccb-root.ccb-style-dense_pro .ccb-tabs__tab {
	border-radius: var(--ccb-radius-sm);
}

.ccb-root.ccb-style-angular .ccb-tabs__tab {
	clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
	border-radius: 0;
}