/**
 * Shared Card Styles
 *
 * BEM block `.zededa-card` with four variant modifiers used by both
 * Feature Cards and Image-Text widgets. All colors and spacing via
 * design tokens.
 *
 * Variants:
 * --vertical-default    : Icon top, 1px orange border, 12px top accent bar (Feature Cards)
 * --horizontal-accent   : Icon left, 2px orange border, 12px left accent bar (Image-Text feature list)
 * --horizontal-aqua     : Icon left, 2px aqua border, no accent bar, inline heading+description
 * --horizontal-orange   : Icon left, 2px orange border, no accent bar, heading only
 *
 * Typography: IBM Plex Sans, heading bold 20-26px clamp, description medium 16-20px clamp.
 * All font-size clamp() values use px (not rem) to prevent Elementor Kit
 * root font-size overrides from scaling text beyond Figma specifications.
 *
 * @package Zededa
 */

/* ==========================================================================
   1. Elementor Kit Specificity Overrides
   ========================================================================== */

[class*="elementor-kit-"] .zededa-card__heading {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(20px, calc(0.56vw + 17.92px), 26px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.45;
	letter-spacing: -0.005em;
}

[class*="elementor-kit-"] .zededa-card__description {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(16px, calc(0.37vw + 14.67px), 20px);
	font-weight: var(--typography-font-weight-normal);
	line-height: 1.45;
	letter-spacing: -0.005em;
}

[class*="elementor-kit-"] .zededa-card__text {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(16px, calc(0.37vw + 14.67px), 20px);
	font-weight: var(--typography-font-weight-medium);
	line-height: 1.45;
}

[class*="elementor-kit-"] .zededa-card__icon-label {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: 20px;
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.45;
	letter-spacing: -0.1px;
}

[class*="elementor-kit-"] .zededa-card__cta {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-base);
	font-size: clamp(15px, calc(0.19vw + 14.28px), 17px);
	font-weight: var(--typography-font-weight-bold);
	color: var(--color-navigation-cta-background);
}

/* Scoped override: horizontal-accent heading can differ from vertical-default */
[class*="elementor-kit-"] .zededa-card--horizontal-accent .zededa-card__heading {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(20px, calc(0.56vw + 17.92px), 26px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.45;
	letter-spacing: -0.005em;
}

/* ==========================================================================
   2. Base Card
   ========================================================================== */

.zededa-card {
	background-color: var(--color-container-card-blue);
	overflow: clip;
	display: flex;
}

/* Cards on light container backgrounds use the darker blue token.
   Uses the container-level classes that Elementor applies server-side,
   so this works for ALL widgets that use .zededa-card (feature cards,
   image-text feature lists, etc.) without widget-specific overrides. */
.zededa-bg-white .zededa-card,
.zededa-bg-cream .zededa-card,
.zededa-bg-cream-pattern .zededa-card {
	background-color: var(--color-container-blue);
}

/* Cards on the light-blue container invert: use dark blue so they stand
   out against the medium-teal (#245868) container background. */
.zededa-bg-blue-light .zededa-card {
	background-color: var(--color-container-blue);
}

/* ==========================================================================
   3. Variant: Vertical Default (existing Feature Cards)
   Icon on top, column layout, 1px orange border, 12px top accent bar.
   ========================================================================== */

.zededa-card--vertical-default {
	border: var(--border-width-thin) solid var(--color-brand-primary);
	box-shadow: var(--shadow-md);
	flex-direction: column;
}

.zededa-card--vertical-default .zededa-card__accent {
	height: 12px;
	background-color: var(--color-brand-primary);
	flex-shrink: 0;
}

.zededa-card--vertical-default .zededa-card__body {
	display: flex;
	flex-direction: column;
	padding: var(--spacing-lg);
	flex: 1;
}

.zededa-card--vertical-default .zededa-card__icon {
	margin-bottom: var(--spacing-md);
}

.zededa-card--vertical-default .zededa-card__icon img {
	max-width: 53px;
	max-height: 30px;
	width: auto;
	object-fit: contain;
	display: block;
}

.zededa-card--vertical-default .zededa-card__heading {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(20px, calc(0.56vw + 17.92px), 26px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.45;
	letter-spacing: -0.005em;
	color: var(--color-neutral-white);
	margin: 0 0 var(--spacing-md);
}

.zededa-card--vertical-default .zededa-card__description {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(16px, calc(0.19vw + 15.28px), 18px);
	font-weight: var(--typography-font-weight-normal);
	line-height: 1.45;
	letter-spacing: -0.005em;
	color: var(--color-neutral-white);
	margin: 0;
}

/* WYSIWYG description: paragraph spacing for rich text content */
.zededa-card--vertical-default .zededa-card__description p {
	margin: 0;
}

.zededa-card--vertical-default .zededa-card__description p + p {
	margin-top: var(--spacing-sm);
}

/* -- 3a. Icon Badge (vertical-default) ----------------------------------- */

.zededa-card__icon-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	/* Figma 2123:1976: badge bg is dark teal (#133844), border is mid-grey (#939393) */
	background-color: var(--color-container-blue);
	border: var(--border-width-base) solid var(--color-neutral-gray-500);
	padding: var(--spacing-xs) var(--spacing-md);
	margin-bottom: var(--spacing-xl);
	align-self: flex-start;
}

/* On light containers the card bg is dark (#133844), so invert: use medium
   teal for the badge so it retains visible contrast against the card. */
.zededa-bg-white .zededa-card__icon-badge,
.zededa-bg-cream .zededa-card__icon-badge,
.zededa-bg-cream-pattern .zededa-card__icon-badge,
.zededa-bg-blue-light .zededa-card__icon-badge {
	background-color: var(--color-container-card-blue);
}

.zededa-card__icon-badge .zededa-card__icon {
	margin-bottom: 0;
}

.zededa-card__icon-badge .zededa-card__icon img {
	max-width: 25px;
	max-height: 25px;
}

.zededa-card__icon-label {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: 20px;
	font-style: normal;
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.45;
	letter-spacing: -0.1px;
	text-transform: uppercase;
	color: var(--color-neutral-white);
}

/* -- 3b. Quote Marks (vertical-default) ---------------------------------- */

.zededa-card__quote {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(64px, calc(3.56vw + 51.2px), 102px);
	line-height: 0.6;
	color: var(--color-brand-sunrise);
	display: block;
}

.zededa-card__quote--open {
	margin-bottom: var(--spacing-sm);
}

.zededa-card__quote--close {
	margin-top: var(--spacing-md);
	margin-bottom: var(--spacing-lg);
	text-align: right;
}

/* -- 3c. CTA Link (vertical-default) ------------------------------------ */

.zededa-card__cta-wrapper {
	padding: 0 var(--spacing-lg) var(--spacing-lg);
	text-align: right;
}

.zededa-card__cta {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-base);
	font-size: clamp(15px, calc(0.19vw + 14.28px), 17px);
	font-weight: var(--typography-font-weight-bold);
	color: var(--color-navigation-cta-background);
	text-decoration: none;
}

.zededa-card__cta:hover {
	opacity: 0.85;
}

.zededa-card__cta:focus {
	outline: 2px solid var(--color-navigation-cta-background);
	outline-offset: 2px;
}

/* -- 3d. CTA Push-to-Bottom ---------------------------------------------- */

.zededa-card--has-cta .zededa-card__body {
	flex: 1;
}

/* -- 3e. Accent Left (vertical-default modifier) ------------------------- */
/* Switches the accent bar from top to left using CSS Grid.
   Accent spans all rows in column 1; body + CTA stack in column 2. */

.zededa-card--vertical-default.zededa-card--accent-left {
	display: grid;
	grid-template-columns: 12px 1fr;
	grid-template-rows: 1fr auto;
}

.zededa-card--vertical-default.zededa-card--accent-left .zededa-card__accent {
	width: 12px;
	height: auto;
	grid-row: 1 / -1;
	grid-column: 1;
}

.zededa-card--vertical-default.zededa-card--accent-left .zededa-card__body {
	grid-column: 2;
	grid-row: 1;
}

.zededa-card--vertical-default.zededa-card--accent-left .zededa-card__cta-wrapper {
	grid-column: 2;
	grid-row: 2;
}

/* ==========================================================================
   4. Variant: Horizontal Accent (Image-Text feature list)
   Icon left, row layout, 2px orange border, 12px left accent bar.
   Supports optional heading + description stack and right-aligned CTA.
   ========================================================================== */

.zededa-card--horizontal-accent {
	border: var(--border-width-base) solid var(--color-brand-primary);
	flex-direction: row;
}

.zededa-card--horizontal-accent .zededa-card__accent {
	width: 12px;
	background-color: var(--color-brand-primary);
	flex-shrink: 0;
}

.zededa-card--horizontal-accent .zededa-card__body {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: var(--spacing-xl) var(--spacing-lg);
	gap: var(--spacing-xl);
	flex: 1;
}

.zededa-card--horizontal-accent .zededa-card__icon {
	flex-shrink: 0;
}

.zededa-card--horizontal-accent .zededa-card__icon img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	display: block;
}

/* Text group: heading spans full width; description left + CTA right on same row */
.zededa-card--horizontal-accent .zededa-card__text-group {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	column-gap: var(--spacing-lg);
	row-gap: var(--spacing-xs);
}

.zededa-card--horizontal-accent .zededa-card__heading {
	grid-column: 1 / -1;
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(20px, calc(0.56vw + 17.92px), 26px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.45;
	letter-spacing: -0.005em;
	color: var(--color-neutral-white);
	margin: 0;
}

.zededa-card--horizontal-accent .zededa-card__description {
	grid-column: 1;
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(16px, calc(0.37vw + 14.67px), 20px);
	font-weight: var(--typography-font-weight-medium);
	line-height: 1.45;
	letter-spacing: -0.005em;
	color: var(--color-neutral-white);
	margin: 0;
}

.zededa-card--horizontal-accent .zededa-card__description p {
	margin: 0;
}

/* CTA wrapper: right column, bottom-aligned beside description text */
.zededa-card--horizontal-accent .zededa-card__cta-wrapper {
	grid-column: 2;
	padding: 0;
	text-align: right;
	white-space: nowrap;
}

/* ==========================================================================
   5. Variant: Horizontal Aqua (new — Figma 1943:523 Variant A)
   Icon left, 2px aqua border, no accent bar, 72px icon.
   Inline bold heading + description in single <p>.
   ========================================================================== */

.zededa-card--horizontal-aqua {
	border: var(--border-width-base) solid var(--color-navigation-cta-background);
	flex-direction: row;
	align-items: center;
}

.zededa-card--horizontal-aqua .zededa-card__accent {
	display: none;
}

.zededa-card--horizontal-aqua .zededa-card__body {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: var(--spacing-lg) var(--spacing-xl);
	gap: var(--spacing-xl);
	flex: 1;
}

.zededa-card--horizontal-aqua .zededa-card__icon {
	flex-shrink: 0;
}

.zededa-card--horizontal-aqua .zededa-card__icon img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	display: block;
}

/* WYSIWYG text block: <div><strong>Heading</strong><p>Description...</p></div> */
.zededa-card--horizontal-aqua .zededa-card__text {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(16px, calc(0.37vw + 14.67px), 20px);
	font-weight: var(--typography-font-weight-medium);
	line-height: 1.45;
	letter-spacing: -0.005em;
	color: var(--color-neutral-white);
	margin: 0;
}

.zededa-card--horizontal-aqua .zededa-card__text p {
	margin: 0;
}

.zededa-card--horizontal-aqua .zededa-card__text strong {
	font-weight: var(--typography-font-weight-bold);
}

/* ==========================================================================
   6. Variant: Horizontal Orange (new — Figma 1943:523 Variant B)
   Icon left, 2px orange border, no accent bar, 72px icon.
   Bold heading only, no description.
   ========================================================================== */

.zededa-card--horizontal-orange {
	border: var(--border-width-base) solid var(--color-brand-primary);
	flex-direction: row;
	align-items: center;
}

.zededa-card--horizontal-orange .zededa-card__accent {
	display: none;
}

.zededa-card--horizontal-orange .zededa-card__body {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: var(--spacing-lg) var(--spacing-xl);
	gap: var(--spacing-xl);
	flex: 1;
}

.zededa-card--horizontal-orange .zededa-card__icon {
	flex-shrink: 0;
}

.zededa-card--horizontal-orange .zededa-card__icon img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	display: block;
}

.zededa-card--horizontal-orange .zededa-card__text {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(16px, calc(0.37vw + 14.67px), 20px);
	font-weight: var(--typography-font-weight-medium);
	line-height: 1.45;
	letter-spacing: -0.005em;
	color: var(--color-neutral-white);
	margin: 0;
}

.zededa-card--horizontal-orange .zededa-card__text p {
	margin: 0;
}

.zededa-card--horizontal-orange .zededa-card__text strong {
	font-weight: var(--typography-font-weight-bold);
}

/* ==========================================================================
   7. Variant: Testimonial
   Quote marks always-on (not user-controlled), quote text style controlled
   by WYSIWYG editor, author attribution below. No icon. Same border/shadow/
   accent structure as vertical-default.
   ========================================================================== */

.zededa-card--testimonial {
	border: var(--border-width-thin) solid var(--color-brand-primary);
	box-shadow: var(--shadow-md);
	flex-direction: column;
}

.zededa-card--testimonial .zededa-card__accent {
	height: 12px;
	background-color: var(--color-brand-primary);
	flex-shrink: 0;
}

.zededa-card--testimonial .zededa-card__body {
	display: flex;
	flex-direction: column;
	padding: var(--spacing-lg);
	flex: 1;
}

.zededa-card--testimonial .zededa-card__heading {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(17px, calc(0.28vw + 15.96px), 20px);
	font-weight: var(--typography-font-weight-normal);
	line-height: 1.6;
	letter-spacing: -0.005em;
	color: var(--color-neutral-white);
	margin: 0 0 var(--spacing-sm);
}

.zededa-card--testimonial .zededa-card__author {
	display: flex;
	flex-direction: column;
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(13px, calc(0.19vw + 12.28px), 15px);
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: var(--color-neutral-white);
	margin-top: auto;
}

.zededa-card__author-name {
	font-weight: var(--typography-font-weight-bold);
}

.zededa-card__author-title {
	font-weight: var(--typography-font-weight-normal);
}

[class*="elementor-kit-"] .zededa-card--testimonial .zededa-card__heading {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(17px, calc(0.28vw + 15.96px), 20px);
	font-weight: var(--typography-font-weight-normal);
	line-height: 1.6;
}

[class*="elementor-kit-"] .zededa-card--testimonial .zededa-card__author {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(13px, calc(0.19vw + 12.28px), 15px);
}

[class*="elementor-kit-"] .zededa-card__author-name {
	font-weight: var(--typography-font-weight-bold);
}

[class*="elementor-kit-"] .zededa-card__author-title {
	font-weight: var(--typography-font-weight-normal);
}

/* ==========================================================================
   8. Variant: Resource (Resource Center cards)
   Dark card (#133844), 4px colored left accent bar (color via inline style),
   category badge pill, bold heading + description, aqua CTA.
   ========================================================================== */

.zededa-card--resource {
	background-color: var(--color-container-blue);
	flex-direction: row;
	border: var(--border-width-base) solid transparent; /* border-color set via inline style */
	overflow: clip;
}

.zededa-card--resource .zededa-card__accent {
	width: 8px; /* ~8.6px per Figma design */
	flex-shrink: 0;
	/* background-color set via inline style from Resource_Colors */
}

.zededa-card--resource .zededa-card__body {
	display: flex;
	flex-direction: column;
	padding: var(--spacing-lg) var(--spacing-xl);
	flex: 1;
	gap: var(--spacing-md);
}

/* -- Category Badge Pill ------------------------------------------------- */

.zededa-card__category-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	border: 2px solid rgba(255, 255, 255, 0.5); /* Semi-transparent white per Figma */
	padding: var(--spacing-xs) var(--spacing-md);
	align-self: flex-start;
}

.zededa-card__category-badge .zededa-card__category-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	display: block;
}

.zededa-card__category-label {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-base);
	font-size: clamp(13px, calc(0.28vw + 12px), 16px);
	font-weight: var(--typography-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-neutral-white);
}

/* -- Text Group ---------------------------------------------------------- */

.zededa-card--resource .zededa-card__text-group {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	flex: 1;
}

.zededa-card--resource .zededa-card__heading {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(18px, calc(0.37vw + 16.67px), 22px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.3;
	color: var(--color-neutral-white);
	margin: 0;
}

.zededa-card--resource .zededa-card__description {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(16px, calc(0.19vw + 15.28px), 18px);
	font-weight: var(--typography-font-weight-normal);
	line-height: 1.45;
	color: var(--color-neutral-white);
	margin: 0;
	/* Clamp to 3 lines */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* -- CTA Link (resource) ------------------------------------------------ */

.zededa-card--resource .zededa-card__cta-wrapper {
	padding: 0;
	text-align: right; /* Right-aligned per Figma */
	margin-top: auto;
}

.zededa-card--resource .zededa-card__cta {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-base);
	font-size: clamp(15px, calc(0.19vw + 14.28px), 17px);
	font-weight: var(--typography-font-weight-bold);
	color: var(--color-navigation-cta-background);
	text-decoration: none;
}

/* -- Stretched Link (resource) ------------------------------------------
   The CTA <a> ::after covers the entire card, making the whole card a
   click target. Only activates when CTA is an <a>, not a <span>. */

.zededa-card--resource {
	position: relative;
}

.zededa-card--resource a.zededa-card__cta::after {
	content: '';
	position: absolute;
	inset: 0;
}

/* -- Elementor Kit Override for resource cards --------------------------- */

[class*="elementor-kit-"] .zededa-card--resource .zededa-card__heading {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(18px, calc(0.37vw + 16.67px), 22px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.3;
}

[class*="elementor-kit-"] .zededa-card--resource .zededa-card__description {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(16px, calc(0.19vw + 15.28px), 18px);
	font-weight: var(--typography-font-weight-normal);
	line-height: 1.5;
}

[class*="elementor-kit-"] .zededa-card__category-label {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-base);
	font-size: clamp(13px, calc(0.28vw + 12px), 16px);
	font-weight: var(--typography-font-weight-bold);
}

/* ==========================================================================
   9. Accessibility
   ========================================================================== */

.zededa-card a:focus,
.zededa-card button:focus {
	outline: 2px solid var(--color-neutral-white);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.zededa-card *,
	.zededa-card *::before,
	.zededa-card *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}