/**
 * Event Card Widget Styles
 *
 * Grid of conference event cards (photo left, content right) for event
 * landing pages such as TRANSFORM 2026. Card interior is the dark event
 * branding; the badge chip (.zededa-event-badge) comes from the shared
 * event stylesheet (assets/css/shared/event.css) and the CTA button
 * (.zededa-cta, .zededa-cta--primary) from the shared CTA stylesheet
 * (assets/css/cta-button/cta-button-widget.css) — both are registered
 * dependencies of this style in class-widget-loader.php.
 *
 * Figma: DicvhGrzEhYHwdwvGgxu13 node 3451:22638 ("transform") —
 * two cards side-by-side, 744x402 each at 1440+, square corners.
 *
 * @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 and body typography that
   cascade into the widget; re-assert the event card typography here.
   ========================================================================== */

[class*="elementor-kit-"] .zededa-event-card__city {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-weight: var(--typography-font-weight-semibold);
	/* Figma-exact fluid heading: 24px @375 -> 34px @1440 (no matching size token) */
	font-size: clamp(24px, calc(0.94vw + 20.48px), 34px);
	line-height: 1.47;
	color: var(--color-neutral-white);
	margin: 0;
}

/* ==========================================================================
   3. Grid Layout
   Column count comes from the Elementor responsive "columns" control
   ({{WRAPPER}} selector overrides this fallback). Mobile collapse to a
   single column is also enforced in the media query below.
   ========================================================================== */

.zededa-event-card {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-lg);
	width: 100%;
}

/* ==========================================================================
   4. Card
   ========================================================================== */

.zededa-event-card__item {
	display: flex;
	flex-direction: row;
	background-color: var(--color-container-blue);
	/* 8px spring accent is Figma-exact; no border-width token at this size */
	border-left: 8px solid var(--color-brand-spring);
	border-radius: 0; /* square corners per event branding */
	/* Figma-exact card height at 1440 (744x402); content may grow taller */
	min-height: 402px;
	overflow: hidden;
}

/* ==========================================================================
   5. Photo
   ========================================================================== */

.zededa-event-card__photo {
	/* Figma-exact photo column ratio: 342/744 ≈ 46% of the card width */
	flex: 0 0 46%;
	width: 46%;
	min-width: 0;
	align-self: stretch;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   6. Content Column
   ========================================================================== */

.zededa-event-card__content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	gap: var(--spacing-md);
	padding: var(--spacing-xl); /* 32px token; ~29px in Figma */
	color: var(--color-neutral-white);
}

.zededa-event-card__badge {
	align-self: flex-start;
}

.zededa-event-card__date {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-weight: var(--typography-font-weight-normal);
	/* Figma-exact fluid size: 18px @375 -> 22px @1440 (no matching size token) */
	font-size: clamp(18px, calc(0.38vw + 16.59px), 22px);
	line-height: 1.45;
	color: var(--color-neutral-white);
	opacity: 0.7; /* white at 70% per Figma */
	margin: 0;
}

.zededa-event-card__body {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-weight: var(--typography-font-weight-medium);
	font-size: 15px; /* Figma-exact body size; no matching size token */
	line-height: 1.45;
	color: var(--color-neutral-white);
	margin: 0;
}

/* ==========================================================================
   7. CTA
   Visual style (aqua primary button) comes from the shared CTA stylesheet.
   Here we only pin it to the card bottom and handle the disabled mode.
   ========================================================================== */

.zededa-event-card__content > .zededa-cta {
	margin-top: auto;
	align-self: flex-start;
}

/* Disabled ("Coming soon") mode: keep the aqua look per design but
   suppress the hover affordances the shared CTA styles add. */
.zededa-event-card .zededa-cta.zededa-event-card__cta--disabled {
	cursor: default;
}

.zededa-event-card .zededa-cta.zededa-event-card__cta--disabled:hover {
	opacity: 1;
	box-shadow: none;
}

/* ==========================================================================
   8. Accessibility
   ========================================================================== */

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

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

/* ==========================================================================
   9. Responsive: Mobile (max-width: 767px)
   Cards stack into a single column; each card stacks vertically with the
   photo on top. The spring left border stays on the card.
   ========================================================================== */

@media (max-width: 767px) {
	.zededa-event-card {
		grid-template-columns: 1fr;
	}

	.zededa-event-card__item {
		flex-direction: column;
		min-height: 0;
	}

	.zededa-event-card__photo {
		flex: 0 0 auto;
		width: 100%;
		height: 220px; /* Figma-approximate mobile photo height; no token */
	}
}

/* ==========================================================================
   10. Responsive: Tablet → small desktop (768px–1199px)
   Stay TWO columns, but stack each card VERTICALLY (photo on top, content
   below). In a 2-column ROW layout at these widths the content column is only
   ~175–290px wide, so the body text wraps to 1–3 words per line and the CTA
   button overflows its column. Going vertical gives the content the full card
   width. Above 1199px the row layout has room again; below 768px the grid
   collapses to a single column (see the mobile rule above).
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1199px) {
	.zededa-event-card__item {
		flex-direction: column;
		min-height: 0;
	}

	.zededa-event-card__photo {
		flex: 0 0 auto;
		width: 100%;
		height: 240px; /* slightly taller than mobile — cards are wider here */
	}
}