/**
 * VIC Icon List (elementor-widgets/icon-list.php).
 *
 * Modifiers:
 *   layout      --column | --row | --grid (columns via --vic-icon-list-cols)
 *   icon place  --icon-left | --icon-top, --valign-start | --valign-center
 *   item        --plain | --divided | --card
 *   lines       --lines-rows (horizontal) | --lines-cols (vertical), either or both
 *   links       --link-item (whole item clickable) + --hover-highlight | --hover-lift | --hover-none
 *               (items with a link: .vic-icon-list__item--link)
 *
 * .vic-icon-list-box wraps the list: Style → List Box (background, border,
 * radius, padding, box shadow) styles it; empty = no visible box.
 *   spacing     --gap-tight | --gap-default | --gap-relaxed
 *   icon        --style-soft | --style-solid | --style-outline | --style-plain
 *               --shape-circle | --shape-square
 *               --size-sm | --size-md | --size-lg | --size-xl
 *               --accent-blue | --accent-orange
 *   surface     --dark
 *
 * Colour overrides (Elementor Style tab) set the --vic-icon-list-* variables.
 */

.vic-icon-list {
	/* Defaults; each can be overridden from Elementor. */
	--_icon: var(--vic-icon-list-icon, var(--vic-blue));
	--_icon-bg: var(--vic-icon-list-icon-bg, rgba(0, 60, 127, 0.08));
	--_title: var(--vic-icon-list-title, var(--color-heading));
	--_text: var(--vic-icon-list-text, var(--color-body));
	--_note: var(--vic-icon-list-note, var(--color-muted));
	--_line: var(--color-border);
	--_gap: var(--space-6);
	--_box: 56px;
	--_glyph: 24px;

	display: flex;
	flex-direction: column;
	gap: var(--_gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Spacing */
.vic-icon-list--gap-tight { --_gap: var(--space-4); }
.vic-icon-list--gap-relaxed { --_gap: var(--space-8); }

/* Icon sizes: box / glyph. Plain icons drop the box to the glyph size. */
.vic-icon-list--size-sm { --_box: 40px; --_glyph: 18px; }
.vic-icon-list--size-md { --_box: 48px; --_glyph: 20px; }
.vic-icon-list--size-lg { --_box: 56px; --_glyph: 24px; }
.vic-icon-list--size-xl { --_box: 64px; --_glyph: 28px; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

/* Row: side by side, wrapping; stacked on small screens. */
@media (min-width: 768px) {
	.vic-icon-list--row {
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: calc(var(--_gap) * 2);
	}

	.vic-icon-list--row > .vic-icon-list__item {
		flex: 1 1 14rem;
		min-width: 0;
	}
}

/* Grid: equal columns (responsive control → --vic-icon-list-cols). */
.vic-icon-list--grid {
	display: grid;
	grid-template-columns: repeat(var(--vic-icon-list-cols, 1), minmax(0, 1fr));
	column-gap: calc(var(--_gap) * 1.5);
}

/* --------------------------------------------------------------------------
   Item
   -------------------------------------------------------------------------- */
.vic-icon-list__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	min-width: 0;
}

.vic-icon-list--valign-center.vic-icon-list--icon-left .vic-icon-list__item {
	align-items: center;
}

.vic-icon-list--icon-top .vic-icon-list__item {
	flex-direction: column;
	gap: var(--space-4);
}

.vic-icon-list__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}

/* Left icon: nudge the text so the title's first line centres on the icon. */
.vic-icon-list--icon-left.vic-icon-list--valign-start:not(.vic-icon-list--style-plain) .vic-icon-list__body {
	padding-block-start: calc((var(--_box) - var(--text-body-line)) / 2);
}

.vic-icon-list--icon-left.vic-icon-list--valign-start.vic-icon-list--style-plain .vic-icon-list__body {
	padding-block-start: 0;
}

/* Divided: a hairline between items (on every item in rows / grids). */
.vic-icon-list--divided.vic-icon-list--column > .vic-icon-list__item + .vic-icon-list__item {
	padding-block-start: var(--_gap);
	border-block-start: 1px solid var(--_line);
}

.vic-icon-list--divided:is(.vic-icon-list--row, .vic-icon-list--grid) > .vic-icon-list__item {
	padding-block-start: var(--_gap);
	border-block-start: 1px solid var(--_line);
}

@media (max-width: 767px) {
	/* Row stacks on phones: behave like a divided column. */
	.vic-icon-list--divided.vic-icon-list--row > .vic-icon-list__item:first-child {
		padding-block-start: 0;
		border-block-start: 0;
	}
}

/* Divider lines (rows and / or columns).
   Every item draws a line on its top / start edge and is padded by the
   spacing; the list is pulled out by the same padding and clipped back to
   the content edges, so the lines of the first row and of the first item on
   each line fall outside, and no line runs past the content. Lines therefore
   only sit between items — also when a row wraps. */
.vic-icon-list--lines-rows,
.vic-icon-list--lines-cols {
	--_line-y: 0px;
	--_line-x: 0px;

	margin: calc(var(--_line-y) * -1) calc(var(--_line-x) * -1);
	clip-path: inset(var(--_line-y) var(--_line-x));
}

.vic-icon-list--lines-rows {
	--_line-y: calc(var(--_gap) * 0.75);

	row-gap: 0;
}

.vic-icon-list--lines-cols {
	--_line-x: var(--_gap);

	column-gap: 0;
}

.vic-icon-list--lines-rows > .vic-icon-list__item {
	margin-block-start: -1px;
	padding-block: var(--_line-y);
	border-block-start: 1px solid var(--_line);
}

.vic-icon-list--lines-cols > .vic-icon-list__item {
	margin-inline-start: -1px;
	padding-inline: var(--_line-x);
	border-inline-start: 1px solid var(--_line);
}

/* Card */
.vic-icon-list--card > .vic-icon-list__item {
	padding: var(--card-pad);
	border: 1px solid var(--_line);
	border-radius: var(--radius-card);
	background-color: var(--color-background);
}

/* --------------------------------------------------------------------------
   Icon
   -------------------------------------------------------------------------- */
.vic-icon-list__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--_box);
	height: var(--_box);
	border-radius: var(--radius-pill);
	background-color: var(--_icon-bg);
	color: var(--_icon);
	font-size: var(--_glyph);
	line-height: 1;
}

.vic-icon-list--shape-square .vic-icon-list__icon {
	border-radius: var(--radius-card);
}

.vic-icon-list__icon :is(i, svg) {
	display: block;
	width: var(--_glyph);
	height: var(--_glyph);
	font-size: var(--_glyph);
	line-height: 1;
}

.vic-icon-list__icon svg {
	fill: currentColor;
}

/* Styles */
.vic-icon-list--style-solid {
	--_icon: var(--vic-icon-list-icon, var(--color-on-dark));
	--_icon-bg: var(--vic-icon-list-icon-bg, var(--vic-blue));
}

.vic-icon-list--style-outline .vic-icon-list__icon {
	border: 1px solid var(--vic-icon-list-icon-bg, var(--_line));
	background-color: transparent;
}

.vic-icon-list--style-plain .vic-icon-list__icon {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
}

/* Orange accent (restrained; icons are decorative, aria-hidden). */
.vic-icon-list--accent-orange {
	--_icon: var(--vic-icon-list-icon, var(--vic-orange-large));
	--_icon-bg: var(--vic-icon-list-icon-bg, rgba(249, 157, 28, 0.14));
}

.vic-icon-list--accent-orange.vic-icon-list--style-solid {
	--_icon: var(--vic-icon-list-icon, var(--vic-blue-deep));
	--_icon-bg: var(--vic-icon-list-icon-bg, var(--vic-orange));
}

/* --------------------------------------------------------------------------
   Text
   -------------------------------------------------------------------------- */
.vic-icon-list__title {
	margin: 0;
	color: var(--_title);
	font-size: var(--text-body-size);
	font-weight: var(--weight-semibold);
	line-height: var(--text-body-line);
	letter-spacing: 0;
}

.vic-icon-list--size-xl .vic-icon-list__title {
	font-size: var(--text-body-lg-size);
	line-height: var(--text-body-lg-line);
}

.vic-icon-list__text {
	color: var(--_text);
	font-size: var(--text-body-size);
	line-height: var(--text-body-line);
	overflow-wrap: anywhere; /* long emails / URLs never overflow */
}

.vic-icon-list__link {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-color: var(--_line);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	transition: var(--transition-colors), text-decoration-color var(--duration-base) var(--ease-standard);
}

.vic-icon-list__link:hover {
	color: var(--vic-blue);
	text-decoration-color: currentColor;
}

.vic-icon-list__link .icon {
	margin-inline-start: var(--space-1);
	vertical-align: -0.15em;
}

.vic-icon-list__note {
	color: var(--_note);
	font-size: var(--text-body-sm-size);
	line-height: var(--text-body-sm-line);
}

/* --------------------------------------------------------------------------
   Whole item clickable (Clickable Area: Whole item)
   The text link stretches over its item (::after), so the icon, title and
   text all lead to it with one tab stop. Plain / Divided items (without
   divider lines) have no padding, so the hover surface reaches --_reach
   beyond the item (spread shadow, no layout change).
   -------------------------------------------------------------------------- */
.vic-icon-list--link-item {
	--_reach: var(--space-3);
	--_hover-bg: color-mix(in srgb, var(--vic-blue) 5%, transparent);
	--_lift-bg: var(--color-background);
}

.vic-icon-list--link-item:is(.vic-icon-list--card, .vic-icon-list--lines-rows, .vic-icon-list--lines-cols) {
	--_reach: 0px;
}

.vic-icon-list--link-item .vic-icon-list__item--link {
	position: relative;
	border-radius: var(--radius-small);
	transition:
		background-color var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard),
		box-shadow var(--duration-base) var(--ease-standard),
		transform var(--duration-base) var(--ease-standard);
}

.vic-icon-list--link-item.vic-icon-list--card .vic-icon-list__item--link {
	border-radius: var(--radius-card);
}

.vic-icon-list--link-item .vic-icon-list__item--link .vic-icon-list__link::after {
	content: "";
	position: absolute;
	inset: calc(var(--_reach) * -1);
	z-index: 1;
	border-radius: inherit;
}

/* Hover / keyboard focus: title and link text turn VIC Blue. */
.vic-icon-list--link-item .vic-icon-list__item--link:is(:hover, :focus-within) :is(.vic-icon-list__title, .vic-icon-list__link) {
	color: var(--vic-blue);
	text-decoration-color: currentColor;
}

/* Focus ring around the whole item, not just the text. */
.vic-icon-list--link-item .vic-icon-list__link:focus-visible {
	outline: none;
}

.vic-icon-list--link-item .vic-icon-list__item--link:has(.vic-icon-list__link:focus-visible) {
	outline: var(--focus-ring-width) solid var(--color-focus-ring);
	outline-offset: calc(var(--_reach) + 2px);
}

/* Highlight: soft tint behind the item. */
.vic-icon-list--hover-highlight .vic-icon-list__item--link:is(:hover, :focus-within) {
	background-color: var(--_hover-bg);
	box-shadow: 0 0 0 var(--_reach) var(--_hover-bg);
}

.vic-icon-list--hover-highlight.vic-icon-list--card .vic-icon-list__item--link:is(:hover, :focus-within) {
	border-color: color-mix(in srgb, var(--vic-blue) 30%, var(--_line));
}

/* Lift: moves up a little on a white surface with a soft shadow. */
.vic-icon-list--hover-lift .vic-icon-list__item--link:is(:hover, :focus-within) {
	background-color: var(--_lift-bg);
	box-shadow:
		0 0 0 var(--_reach) var(--_lift-bg),
		0 8px 24px var(--_reach) rgba(0, 30, 64, 0.09);
	transform: translateY(-2px);
}

.vic-icon-list--hover-lift.vic-icon-list--card .vic-icon-list__item--link:is(:hover, :focus-within) {
	border-color: color-mix(in srgb, var(--vic-blue) 20%, var(--_line));
}

@media (prefers-reduced-motion: reduce) {
	.vic-icon-list--hover-lift .vic-icon-list__item--link:is(:hover, :focus-within) {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Dark surface
   -------------------------------------------------------------------------- */
.vic-icon-list--dark {
	--_icon: var(--vic-icon-list-icon, var(--color-on-dark));
	--_icon-bg: var(--vic-icon-list-icon-bg, rgba(255, 255, 255, 0.1));
	--_title: var(--vic-icon-list-title, var(--color-on-dark));
	--_text: var(--vic-icon-list-text, var(--color-on-dark-muted));
	--_note: var(--vic-icon-list-note, var(--color-on-dark-muted));
	--_line: rgba(255, 255, 255, 0.16);
}

.vic-icon-list--dark.vic-icon-list--accent-orange {
	--_icon: var(--vic-icon-list-icon, var(--vic-orange));
	--_icon-bg: var(--vic-icon-list-icon-bg, rgba(249, 157, 28, 0.16));
}

.vic-icon-list--dark.vic-icon-list--style-solid {
	--_icon: var(--vic-icon-list-icon, var(--vic-blue-deep));
	--_icon-bg: var(--vic-icon-list-icon-bg, var(--color-on-dark));
}

.vic-icon-list--dark.vic-icon-list--accent-orange.vic-icon-list--style-solid {
	--_icon-bg: var(--vic-icon-list-icon-bg, var(--vic-orange));
}

.vic-icon-list--dark.vic-icon-list--card > .vic-icon-list__item {
	background-color: rgba(255, 255, 255, 0.04);
}

.vic-icon-list--dark .vic-icon-list__link:hover {
	color: var(--color-on-dark);
}

.vic-icon-list--dark.vic-icon-list--link-item {
	--_hover-bg: rgba(255, 255, 255, 0.06);
	--_lift-bg: rgba(255, 255, 255, 0.08);
}

.vic-icon-list--dark.vic-icon-list--link-item .vic-icon-list__item--link:is(:hover, :focus-within) :is(.vic-icon-list__title, .vic-icon-list__link) {
	color: var(--color-on-dark);
}