/**
 * Event Pills Widget Styles
 *
 * Semantic <ul> of topic/role "pills" in a 2-column grid (1 column on
 * mobile). Each pill has a spring-green left accent bar over a translucent
 * dark-teal background. Optional spring outline-triangle decoration bleeds
 * past the right edge of the content area without causing horizontal
 * scrollbars (clipped deco layer).
 *
 * Used on TRANSFORM conference landing pages ("Featured Topics" /
 * "Who Should Attend").
 *
 * Figma: DicvhGrzEhYHwdwvGgxu13 node 3451:22638 ("transform")
 *
 * Depends on shared/event.css (registered dependency) for:
 *   --color-event-dark        (#0f2d36)
 *   .zededa-event-triangle    (outline triangle decoration base class)
 *
 * @package Zededa
 */

/* ==========================================================================
   1. Elementor Kit Specificity Overrides
   [class*="elementor-kit-"] sets global typography that cascades into the
   widget. Never hardcode the kit post ID — it differs per environment.
   ========================================================================== */

[class*="elementor-kit-"] .zededa-event-pills__item {
	/* Figma: pill labels are IBM Plex Sans (event-page face), not the
	   site-wide Nunito Sans base — base family kept as fallback. */
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	color: var(--color-event-dark);
}

/* ==========================================================================
   2. Root + List Layout
   2-column grid on desktop (overridable via the responsive Columns control,
   which writes grid-template-columns at higher specificity), 1 column on
   mobile. Root is the positioning context for the decoration layer.
   ========================================================================== */

.zededa-event-pills {
	position: relative;
}

.zededa-event-pills__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: var(--spacing-3xl);
	row-gap: var(--spacing-md);
	/* Reset UA/theme list styles — pills are presentational list items */
	list-style: none;
	margin: 0;
	padding: 0;
	/* Sit above the absolutely-positioned decoration layer (z-index: 0) */
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   3. Pill
   Figma: translucent dark-teal background, 6px spring-green left bar,
   no border radius, bold dark-teal text.
   ========================================================================== */

.zededa-event-pills__item {
	/* Opaque equivalent of the Figma wash (#133844 at 20% over the cream
	   section #fff7f0). The design used translucency only to arrive at this
	   colour — pills are content blocks and must be fully opaque so that
	   behind-content decorations (z-index:-1 seam triangles) are masked by the
	   pill face instead of showing through it. No matching design token exists
	   (generated from Figma), so the resolved colour is set directly. */
	background-color: #d0d1ce;
	/* 6px accent bar width is Figma-exact (no border-width token at 6px) */
	border-left: 6px solid var(--color-brand-spring);
	/* Figma padding 14px 14px 10px — block values are Figma-exact (no
	   spacing tokens at 14px/10px); inline approximated with spacing-md. */
	padding: 14px var(--spacing-md) 10px;
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-weight: var(--typography-font-weight-bold);
	/* Fluid 16px @ 375px viewport -> 18px @ 1440px */
	font-size: clamp(16px, calc(0.19vw + 15.3px), 18px);
	line-height: 1.45;
	color: var(--color-event-dark);
}

/* ==========================================================================
   4. Dark Section Variant
   Dark containers force li color to white (container-styles.css), but the
   translucent #133844 wash is invisible on dark backgrounds — switch the
   pill background to the opaque card blue used by feature cards.
   ========================================================================== */

:is(.zededa-bg-blue, .zededa-bg-blue-light, .zededa-bg-event-dark, .zededa-bg-event-dark-texture) .zededa-event-pills__item {
	background-color: var(--color-container-card-blue);
}

/* ==========================================================================
   5. Triangle Decoration (optional, toggled via widget control)
   The deco layer extends past the widget's content box by the section's
   inline padding so triangles can bleed toward the viewport edge, while
   overflow: hidden clips them — no horizontal scrollbar.
   Triangles come from shared/event.css (.zededa-event-triangle, z-index 0).
   ========================================================================== */

.zededa-event-pills__deco {
	position: absolute;
	inset: 0 calc(-1 * var(--container-padding-inline-min, 56px));
	overflow: hidden;
	pointer-events: none;
}

/* Large triangle at top-right, pushed partially out of view */
.zededa-event-pills__triangle--top {
	/* ~300px wide per comp; height follows the 316/364 aspect ratio */
	width: 300px;
	top: 0;
	right: 0;
	transform: translateX(40%);
}

/* Smaller triangle lower down, flipped to point the other way */
.zededa-event-pills__triangle--bottom {
	/* ~180px wide per comp */
	width: 180px;
	top: 60%;
	right: 0;
	transform: translateX(25%) rotate(180deg);
}

/* ==========================================================================
   6. Responsive: Mobile (max-width: 767px)
   Single column; decoration hidden (would crowd the narrow viewport).
   ========================================================================== */

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

	.zededa-event-pills__deco {
		display: none;
	}
}