/**
 * 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;
}

/* Text column — title + optional subtitle. */
.dynamic-icon-list-item__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

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

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

/* Optional subtitle (excerpt or custom field). */
.dynamic-icon-list-item__subtitle {
	color: #666666;
	line-height: 1.5;
}

/* 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 );
}

/* ---------------------------------------------------------------------------
 * NUMBERED CARD SKIN — big number + divider + title/subtitle on a colored card.
 * Colors, number size and divider color are overridable via Style controls.
 * ------------------------------------------------------------------------- */
.dil-skin-numbered .dynamic-icon-list-item {
	align-items: center;
	gap: 20px;
	padding: 22px 28px;
	background-color: #3a4a99;
	border-radius: 6px;
}

.dil-skin-numbered .dynamic-icon-list-item__number {
	flex-shrink: 0;
	min-width: 44px;
	color: #ffffff;
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
}

.dil-skin-numbered .dynamic-icon-list-item__text {
	border-left: 1px solid rgba( 255, 255, 255, 0.35 );
	padding-left: 22px;
}

.dil-skin-numbered .dynamic-icon-list-item__title {
	margin: 0 0 6px;
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
}

.dil-skin-numbered .dynamic-icon-list-item__title a {
	color: #ffffff;
}

.dil-skin-numbered .dynamic-icon-list-item__subtitle {
	color: rgba( 255, 255, 255, 0.85 );
	font-size: 14px;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * 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;
}

/* ---------------------------------------------------------------------------
 * HOVER IMAGE PREVIEW — a floating thumbnail that follows the cursor.
 * The element is created by dynamic-icon-list.js and appended to <body>; its
 * left/top are set to the cursor position. Width/height/radius are applied
 * inline from the widget's controls.
 * ------------------------------------------------------------------------- */
.dynamic-icon-list__hover-thumb {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99999;
	pointer-events: none;
	overflow: hidden;
	background: #f2f2f2;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.25 );
	opacity: 0;
	transform: translate( 24px, -50% ) scale( 0.92 );
	transition: opacity 0.16s ease, transform 0.16s ease;
}

.dynamic-icon-list__hover-thumb.is-visible {
	opacity: 1;
	transform: translate( 24px, -50% ) scale( 1 );
}

.dynamic-icon-list__hover-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}