/*
 * ARN World Clock (frontend-world-clock.js keeps it in time). Cards fill the
 * row up to the chosen number per row, but never get narrower than 150 px, so
 * a phone shows one or two clocks per row and nothing overflows.
 */
/*
 * As Elementor does for its own full-width widgets (accordion, divider, video):
 * in a column container the widget would otherwise get the height of the list
 * laid out at its narrow content width. The Width setting under Advanced still
 * applies through --container-widget-width.
 */
.e-con-inner > .elementor-widget-arnsc-world-clock,
.e-con > .elementor-widget-arnsc-world-clock {
	width: var(--container-widget-width, 100%);
	--flex-grow: var(--container-widget-flex-grow);
}

.arnsc-world-clock {
	--arnsc-world-clock-gap: 16px;
	--arnsc-world-clock-face-size: 150px;
	min-width: 0;
	max-width: 100%;
}

.arnsc-world-clock .arnsc-world-clock__list {
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(
			min(100%, max(150px, calc((100% - (var(--arnsc-world-clock-columns, 4) - 1) * var(--arnsc-world-clock-gap)) / var(--arnsc-world-clock-columns, 4)))),
			1fr
		)
	);
	gap: var(--arnsc-world-clock-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.arnsc-world-clock .arnsc-world-clock__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: 18px 14px;
	border: 1px solid var(--vendix-color-border, #d9dde5);
	border-radius: 14px;
	background: var(--vendix-color-bg-light, #f7f8fa);
	color: var(--vendix-color-text, #374151);
	text-align: center;
	container-type: inline-size;
}

.arnsc-world-clock .arnsc-world-clock__city {
	max-width: 100%;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--vendix-color-heading, #111827);
	overflow-wrap: anywhere;
}

/* The time scales with the card, so "12:45:30 PM" fits a 150 px card. */
.arnsc-world-clock .arnsc-world-clock__time {
	display: inline-flex;
	align-items: baseline;
	gap: 0.25em;
	max-width: 100%;
	font-size: 1.5rem;
	font-size: clamp(1.25rem, 17cqi, 2.5rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	color: var(--vendix-color-heading, #111827);
	white-space: nowrap;
}

.arnsc-world-clock__ampm {
	font-size: max(0.75rem, 0.45em);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.arnsc-world-clock--analog .arnsc-world-clock__time {
	font-size: 1rem;
	font-weight: 600;
}

/* Hidden digits under an analog face: still read by screen readers. */
.arnsc-world-clock .arnsc-world-clock__time--hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.arnsc-world-clock .arnsc-world-clock__date {
	font-size: 0.85rem;
	line-height: 1.3;
	color: var(--vendix-color-muted, #6b7280);
}

.arnsc-world-clock .arnsc-world-clock__daynight {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8rem;
	line-height: 1.3;
	color: var(--vendix-color-muted, #6b7280);
}

.arnsc-world-clock__daynight svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.arnsc-world-clock__sun {
	color: var(--vendix-color-accent, var(--vt-accent, #d8b25b));
}

.arnsc-world-clock__moon {
	color: var(--vendix-color-secondary, #111827);
}

.arnsc-world-clock__item.is-day .arnsc-world-clock__moon,
.arnsc-world-clock__item.is-night .arnsc-world-clock__sun {
	display: none;
}

/* Analog face */
.arnsc-world-clock .arnsc-world-clock__face {
	display: block;
	width: min(100%, var(--arnsc-world-clock-face-size));
	height: auto;
	aspect-ratio: 1 / 1;
	margin-block-end: 4px;
	overflow: visible;
}

.arnsc-world-clock__dial {
	fill: var(--arnsc-world-clock-face, transparent);
	stroke: var(--arnsc-world-clock-rim, var(--vendix-color-border, #d9dde5));
	stroke-width: 4;
}

.arnsc-world-clock__tick {
	stroke: var(--arnsc-world-clock-ticks, var(--vendix-color-muted, #6b7280));
	stroke-width: 2;
	stroke-linecap: round;
}

.arnsc-world-clock__tick--major {
	stroke-width: 4;
}

.arnsc-world-clock__hand {
	stroke: var(--arnsc-world-clock-hands, var(--vendix-color-heading, #111827));
	stroke-linecap: round;
	transform-box: view-box;
	transform-origin: 100px 100px;
	transition: transform 0.3s cubic-bezier(0.4, 1.5, 0.6, 1);
}

.arnsc-world-clock__hand--hour {
	stroke-width: 7;
}

.arnsc-world-clock__hand--minute {
	stroke-width: 5;
}

.arnsc-world-clock__hand--second {
	stroke: var(--arnsc-world-clock-second, var(--vendix-color-primary, var(--vt-accent, #d71920)));
	stroke-width: 2;
}

.arnsc-world-clock__pin {
	fill: var(--arnsc-world-clock-second, var(--vendix-color-primary, var(--vt-accent, #d71920)));
}

.arnsc-world-clock.is-jumping .arnsc-world-clock__hand {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.arnsc-world-clock__hand {
		transition: none;
	}
}

@media (max-width: 767px) {
	.arnsc-world-clock .arnsc-world-clock__item {
		padding: 14px 10px;
	}
}