/**
 * Feature Cards Widget Styles
 *
 * Grid layout and responsive breakpoints for the Feature Cards widget.
 * Card-level visual styles (backgrounds, borders, typography) are in
 * the shared card stylesheet (assets/css/shared/card.css).
 *
 * Column count set by PHP: --cols-1, --cols-2, --cols-3.
 * Card style set by PHP: --vertical-default, --horizontal-aqua, --horizontal-orange.
 *
 * @package Zededa
 */

/* ==========================================================================
   1. Elementor Container Overrides
   ========================================================================== */

/* Inter-component vertical spacing is in container-styles.css (shared rule) */

/* ==========================================================================
   2. Elementor Kit Specificity Overrides
   [class*="elementor-kit-"] sets global h3, body typography that cascade into widget.
   ========================================================================== */

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

/* ==========================================================================
   3. Grid Layout
   ========================================================================== */

.zededa-feature-cards {
	display: grid;
	gap: var(--spacing-xl);
	width: 100%;
}

/* Column modifiers set by PHP based on card count / manual override */
.zededa-feature-cards--cols-1 {
	grid-template-columns: 1fr;
	max-width: 540px;
}

.zededa-feature-cards--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.zededa-feature-cards--cols-3 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.zededa-feature-cards--cols-3 > .zededa-card {
	flex: 0 0 calc((100% - 2 * var(--spacing-xl)) / 3);
	min-width: 0;
}

/* ==========================================================================
   4. Orphan Card Centering
   Center incomplete last rows in multi-column grids.
   CSS subgrid is not widely supported, so we use justify-content on the
   grid container and let orphans auto-place centered.
   ========================================================================== */

.zededa-feature-cards--cols-2 {
	justify-content: center;
}

/* For 2-col with 1 orphan: span the full row width */
.zededa-feature-cards--cols-2 > .zededa-card:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* For 3-col with 1 orphan: span the full row width */
.zededa-feature-cards--cols-3 > .zededa-card:last-child:nth-child(3n+1) {
	flex: 0 0 100%;
}

/* ==========================================================================
   5. Legacy Class Aliases
   Existing widgets may use old class names. Map to shared card selectors.
   These aliases will be removed in a future release.
   ========================================================================== */

/* Legacy card selector maps to shared card via dual-class in PHP */
.zededa-feature-cards__card {
	/* Card visual styles handled by .zededa-card variant classes */
}

/* ==========================================================================
   6. Accessibility
   ========================================================================== */

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

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

/* ==========================================================================
   7. Responsive: Tablet (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
	/* 3-col grids collapse to 2-col on tablet */
	.zededa-feature-cards--cols-3 > .zededa-card {
		flex: 0 0 calc((100% - var(--spacing-xl)) / 2);
	}

	/* At tablet, 3-col shows 2 per row. Orphaned last card spans full width */
	.zededa-feature-cards--cols-3 > .zededa-card:last-child:nth-child(odd) {
		flex: 0 0 100%;
	}
}

/* ==========================================================================
   8. Responsive: Mobile (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
	/* All grids become single column on mobile */
	.zededa-feature-cards--cols-2 {
		grid-template-columns: 1fr;
	}

	.zededa-feature-cards--cols-3 > .zededa-card {
		flex: 0 0 100%;
	}

	.zededa-feature-cards {
		gap: var(--spacing-lg);
	}

	/* Reset all orphan centering on mobile */
	.zededa-feature-cards > .zededa-card {
		grid-column: auto !important;
		max-width: none !important;
		justify-self: auto !important;
	}
}