/**
 * Trihead Dynamic Icon List widget.
 *
 * Base layout only. Colors, sizes, gaps, columns and typography are driven by
 * the widget's Style controls via Elementor selectors. The icon wrapper is
 * sized with font-size and colored with `color`; SVG icons follow because they
 * are set to 1em and `fill: currentColor` below — so one size/color control
 * styles both font icons and inline SVGs.
 *
 * @package Trihead_Elementor_Widgets
 */

/* Optional heading above the list. */
.dynamic-icon-list__heading {
	margin: 0 0 20px;
}

/* Wrapper — hosts the optional background grid + its padding. */
.dynamic-icon-list-wrap {
	position: relative;
}

.dynamic-icon-list {
	margin: 0;
}

.dynamic-icon-list-item {
	display: flex;
	align-items: center;
	gap: 10px;
	/* Keep an item from splitting across two CSS columns. */
	-webkit-column-break-inside: avoid;
	break-inside: avoid;
}

.dynamic-icon-list-item:last-child {
	margin-bottom: 0;
}

/* Icon wrapper — drives both size (font-size) and color. */
.dynamic-icon-list-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	flex-shrink: 0;
}

.dynamic-icon-list-item__icon i {
	font-size: inherit;
	color: inherit;
}

.dynamic-icon-list-item__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Title */
.dynamic-icon-list-item__title {
	margin: 0;
}

.dynamic-icon-list-item__title a {
	text-decoration: none;
	transition: color 0.15s ease;
}

/* Trailing arrow — pinned to the right edge of the row. */
.dynamic-icon-list-item__arrow {
	margin-left: auto;
	line-height: 1;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

/* ---------------------------------------------------------------------------
 * CARD SKIN — class added to the widget wrapper via prefix_class (dil-skin-*).
 * Colors, border, radius, shadow and padding are overridden by Style controls;
 * these are just the structural defaults so the skin works out of the box.
 * ------------------------------------------------------------------------- */
.dil-skin-card .dynamic-icon-list-item {
	background-color: #ffffff;
	border: 1px solid #ececec;
	border-radius: 6px;
	padding: 18px 22px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 );
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.dil-skin-card .dynamic-icon-list-item:hover {
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.08 );
}

.dil-skin-card .dynamic-icon-list-item:hover .dynamic-icon-list-item__arrow {
	transform: translateX( 4px );
}

/* ---------------------------------------------------------------------------
 * BACKGROUND GRID — blueprint backdrop behind the cards. The grid image and
 * size come from Style controls; the rule below just enables the layer.
 * ------------------------------------------------------------------------- */
.dynamic-icon-list-wrap.dil-has-grid {
	background-image:
		linear-gradient( to right, #ececec 1px, transparent 1px ),
		linear-gradient( to bottom, #ececec 1px, transparent 1px );
	background-size: 40px 40px;
}