/**
 * Resource Cards Widget Styles
 *
 * Featured Resources section: section heading + grid of resource cards.
 * Cards are rendered by the shared Card_Renderer (resource variant) in card.css.
 * This file handles grid layout and section-level styles only.
 *
 * @package Zededa
 */

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

[class*="elementor-kit-"] .zededa-resource-cards__heading {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-heading);
	font-size: clamp(24px, calc(1.5vw + 21px), 40px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.14;
	letter-spacing: -0.8px;
}

/* ==========================================================================
   2. Section Heading
   ========================================================================== */

.zededa-resource-cards__heading {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-heading);
	font-size: clamp(24px, calc(1.5vw + 21px), 40px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.14;
	letter-spacing: -0.8px;
	color: var(--color-neutral-white);
	margin: 0 0 var(--spacing-xl);
}

/* Light container backgrounds: override white heading text. Resource cards
   themselves stay dark blue (consistent site-wide card pattern). */
.zededa-bg-white .zededa-resource-cards__heading,
.zededa-bg-cream .zededa-resource-cards__heading,
.zededa-bg-cream-pattern .zededa-resource-cards__heading {
	color: var(--color-text-primary);
}

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

.zededa-resource-cards__grid {
	display: grid;
	gap: var(--spacing-lg);
}

.zededa-resource-cards__grid--cols-1 {
	grid-template-columns: 1fr;
}

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

.zededa-resource-cards__grid--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.zededa-resource-cards__grid--cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

/* ==========================================================================
   4. Responsive
   ========================================================================== */

/* Tablet: 2 columns max */
@media (max-width: 1024px) {
	.zededa-resource-cards__grid--cols-3,
	.zededa-resource-cards__grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile: single column */
@media (max-width: 767px) {
	.zededa-resource-cards__grid--cols-2,
	.zededa-resource-cards__grid--cols-3,
	.zededa-resource-cards__grid--cols-4 {
		grid-template-columns: 1fr;
	}

	/* font-size handled by main clamp rule */
}

/* ==========================================================================
   5. Accessibility
   ========================================================================== */

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