/*
 * SIA Feature List — a repeater of indicator (auto-number / icon) + title +
 * subtitle + description items. Vertical (flat list, divider lines, large
 * pale ordinal number) or horizontal (multi-column grid, no dividers —
 * spacing via gap instead), toggled by a prefix_class on the root:
 * `.sia-fl--vertical` / `.sia-fl--horizontal` (see class-widget.php).
 *
 * Per-item style overrides (background/border/radius) are applied as an
 * inline `style` attribute directly on that item — inline naturally wins
 * over these class rules, same mechanism as modules/icon-list and
 * modules/table-grid.
 *
 * Hover: `--sia-fl-transition` (Style → Item → "Hover transition duration")
 * drives the transition speed for EVERY hover effect on the widget — the
 * item background plus the indicator/title/subtitle/text hover colors —
 * from one control. Hover rules match `.sia-fl__item:hover` directly (no
 * `a.` prefix), since items without a Link render as a plain <div> (see
 * class-widget.php render()) and would never trigger an anchor-scoped hover.
 */

.sia-fl__list {
	display: flex;
	flex-direction: column;
}
.sia-fl--horizontal .sia-fl__list {
	display: grid;
	/* Columns come from a variable the responsive control sets on the widget
	   wrapper. They used to be an inline style attribute written by render(),
	   which pinned the widget to one column count on every device — an attribute
	   cannot carry a per-breakpoint value. */
	grid-template-columns: repeat(var(--sia-fl-cols, 3), minmax(0, 1fr));
}

/* ─── Item (the styleable row/card) ─── */
.sia-fl__item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 18px 8px;
	text-decoration: none;
	color: inherit;
	/* Load-bearing for the border: with border-box the width eats into the
	   padding box, so turning a border on never changes the item's footprint
	   and never reflows the grid. */
	box-sizing: border-box;
	border: var(--sia-fl-bw, 0px) solid var(--sia-fl-bc, transparent);
	/* Through a variable, not straight from the control: render() emits a
	   per-instance rule that hands the four corner items the GROUP radius, and
	   it has to be able to restate the other three corners without out-ranking
	   the per-item setting. */
	border-radius: var(--sia-fl-item-radius, 0px);
	/* ─── Shared borders ───
	   With the gap at 0 and every item drawing all four sides, the line between
	   two neighbours is two borders thick while the outer edge is one — the
	   giveaway that it is not a table. Pulling each item up and left by exactly
	   one border width lays its top and left edges ON TOP of the neighbour's
	   bottom and right, so every internal line is one width and the outer frame
	   still reads correctly. The list pads by the same amount to put the whole
	   grid back where it started.

	   `--sia-fl-collapse` is the multiplier (0 or 1) rather than a class,
	   because the gap is a responsive setting and a `prefix_class` only ever
	   emits the desktop value. */
	margin-top: calc(var(--sia-fl-bw, 0px) * var(--sia-fl-collapse, 0) * -1);
	margin-left: calc(var(--sia-fl-bw, 0px) * var(--sia-fl-collapse, 0) * -1);
	transition: background-color var(--sia-fl-transition, 0.2s) ease,
	            border-color var(--sia-fl-transition, 0.2s) ease,
	            box-shadow var(--sia-fl-transition, 0.2s) ease;
}
/* Hover colour comes from the stylesheet, never from a control writing
   `border-color` — a control would out-rank this rule outright. */
.sia-fl__item:hover {
	border-color: var(--sia-fl-bc-hover, var(--sia-fl-bc, transparent));
}
.sia-fl__list {
	padding-top: calc(var(--sia-fl-bw, 0px) * var(--sia-fl-collapse, 0));
	padding-left: calc(var(--sia-fl-bw, 0px) * var(--sia-fl-collapse, 0));
}
a.sia-fl__item {
	cursor: pointer;
}

/* ─── Indicator position (prefix_class on the root — see class-widget.php) ───
   Left is the base default (row); Top stacks the indicator above the content,
   Right sends it to the trailing edge. `fl_indicator_gap` sets the flex `gap`,
   so it becomes vertical spacing automatically in the Top (column) case. */
.sia-fl--ind-top .sia-fl__item   { flex-direction: column; }
.sia-fl--ind-right .sia-fl__item { flex-direction: row-reverse; }

/* Divider — every item gets a bottom border except the last one. */
.sia-fl__list--divider .sia-fl__item:not(.sia-fl__item--last) {
	border-bottom: var(--sia-fl-divider-w, 1px) solid var(--sia-fl-divider-color, #e5e7eb);
}

/* ─── Indicator accent divider ───
   A short line between the indicator and the content (opt-in). It's a flex
   item of `.sia-fl__item`, so the item's `gap` spaces it from both neighbors.
   Default orientation is a horizontal bar (for Position = Top — number over a
   line over the title). In the row indicator layouts it becomes a vertical
   bar so it still reads as a separator between the two. Alignment follows the
   indicator (align-self, set by the Alignment control). */
.sia-fl__ind-divider {
	flex: 0 0 auto;
	width: var(--sia-fl-ind-div-len, 32px);
	height: var(--sia-fl-ind-div-thick, 3px);
	background: var(--sia-fl-ind-div-color, var(--sia-color-primary, #6EC1E4));
	border-radius: 999px;
}
.sia-fl--ind-left .sia-fl__ind-divider,
.sia-fl--ind-right .sia-fl__ind-divider {
	width: var(--sia-fl-ind-div-thick, 3px);
	height: var(--sia-fl-ind-div-len, 32px);
}

/* ─── Indicator — large pale ordinal number, or an icon ─── */
.sia-fl__indicator {
	flex: 0 0 auto;
	font-size: 36px;
	font-weight: 800;
	line-height: 1;
	/* Through a variable so the per-type rules below can override it. A control
	   writing `color` here would land at (0,4,0) and out-rank every one of them. */
	color: var(--sia-fl-ind-color, #d1d5db);
	font-variant-numeric: tabular-nums;
	transition: color var(--sia-fl-transition, 0.2s) ease,
	            background-color var(--sia-fl-transition, 0.2s) ease;
}
.sia-fl__item:hover .sia-fl__indicator {
	color: var(--sia-fl-ind-color-hover, var(--sia-fl-ind-color, #d1d5db));
}

/* Icon indicator — its own colour and a box to sit in.
   Scoped to the type class so a list mixing numbers and icons does not end up
   with boxed numbers. Each value falls back to the shared Color control, so
   leaving the icon group untouched changes nothing.
   `--sia-fl-icon-box` is deliberately checked before padding: a fixed square is
   what a circle needs, and `width: auto` lets the glyph plus padding decide
   when it is unset. */
.sia-fl__indicator--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--sia-fl-icon-box, auto);
	height: var(--sia-fl-icon-box, auto);
	padding: var(--sia-fl-icon-pad, 0px);
	background-color: var(--sia-fl-icon-bg, transparent);
	border-radius: var(--sia-fl-icon-radius, 0px);
	color: var(--sia-fl-icon-color, var(--sia-fl-ind-color, #d1d5db));
}
/* Later in source than the generic item-hover rule above and at the same
   specificity, so this is what applies to an icon on hover. */
.sia-fl__item:hover .sia-fl__indicator--icon {
	background-color: var(--sia-fl-icon-bg-hover, var(--sia-fl-icon-bg, transparent));
	color: var(--sia-fl-icon-color-hover, var(--sia-fl-icon-color, var(--sia-fl-ind-color-hover, var(--sia-fl-ind-color, #d1d5db))));
}
.sia-fl__indicator svg {
	width: 0.7em;
	height: 0.7em;
	fill: currentColor;
	display: block;
}

/* Image indicator.
   The compound selector is load-bearing, not tidiness: Elementor's frontend
   reset is `.elementor img { max-width:100%; height:auto; border-radius:0 }` at
   (0,1,1), so a single-class rule here would lose on height and radius and the
   image would ignore both controls. `.sia-fl .sia-fl__ind-img` is (0,2,0),
   which beats it without an !important.
   Height defaults to `auto` so an untouched Height control leaves the image at
   its own proportions; object-fit only bites once a height is set. */
.sia-fl .sia-fl__ind-img {
	display: block;
	width: var(--sia-fl-img-w, 56px);
	height: var(--sia-fl-img-h, auto);
	max-width: 100%;
	object-fit: var(--sia-fl-img-fit, cover);
	border-radius: var(--sia-fl-img-radius, 0px);
}

.sia-fl__content {
	flex: 1 1 auto;
	min-width: 0;
}

/* Content inline layout — title on the left, subtitle pushed to the right edge
   on the same row (via margin-left:auto); a description wraps to its own line
   below (flex-basis:100%). The "01  Question ........ LABEL" row look. */

/* Vertically center the (tall) indicator with the single content row — the
   number sits in the middle of the row instead of top-aligned. The base
   `.sia-fl__item` is `align-items:flex-start`; here center is the natural look
   for a one-line inline row. */
.sia-fl--content-inline .sia-fl__item {
	align-items: center;
}
.sia-fl--content-inline .sia-fl__content {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	row-gap: 6px;
	column-gap: 16px;
}
.sia-fl--content-inline .sia-fl__title {
	margin-bottom: 0;
}
.sia-fl--content-inline .sia-fl__subtitle {
	margin-left: auto;
	margin-bottom: 0;
}
.sia-fl--content-inline .sia-fl__text {
	flex-basis: 100%;
	margin: 0;
}

.sia-fl__title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 6px;
	color: var(--sia-color-text, #1A1718);
	transition: color var(--sia-fl-transition, 0.2s) ease;
}

.sia-fl__subtitle {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 6px;
	color: var(--sia-color-text, #1A1718);
	transition: color var(--sia-fl-transition, 0.2s) ease;
}

.sia-fl__text {
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
	color: var(--sia-color-text, #1A1718);
	opacity: 0.75;
	transition: color var(--sia-fl-transition, 0.2s) ease;
}

/* The old mobile collapse lived here with an `!important`, purely to beat the
   inline style attribute render() used to write. Both are gone: the Columns
   control is responsive now and defaults to one column on mobile, so a blanket
   override would only overrule someone who deliberately asked for two. */

@media (prefers-reduced-motion: reduce) {
	.sia-fl__item,
	.sia-fl__indicator,
	.sia-fl__title,
	.sia-fl__subtitle,
	.sia-fl__text {
		transition: none;
	}
}