/* ------------------------------------------------------------------ */
/*  [iskra_hotspots] — slika s točkami, ki se izmenjujejo               */
/* ------------------------------------------------------------------ */

.iskra-hs {
	--hs-on:        var(--FMS-Electric-Blue, #0046FF);
	--hs-off:       var(--Fill-Iskra-White, #FFF);
	--hs-plus-on:   var(--Fill-Iskra-White, #FFF);
	--hs-plus-off:  #0B1B33;
	--hs-radius:    20px;
	--hs-max:       100%;

	position: relative;
	width: 100%;
	max-width: var(--hs-max);
	margin-inline: auto;
}

.iskra-hs *,
.iskra-hs *::before,
.iskra-hs *::after {
	box-sizing: border-box;
}

/*
 * Okvir ne reže vsebine: oblaček z besedilom sme štrleti čezenj, zato
 * zaobljenost nosi slika sama.
 */
.iskra-hs__frame {
	position: relative;
	display: block;
	line-height: 0;
}

.iskra-hs__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--hs-radius);
}

/* ------------------------------------------------------------------ */
/*  Točka                                                              */
/* ------------------------------------------------------------------ */

.iskra-hs__point {
	position: absolute;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 45px;
	height: 45px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	z-index: 2;
}

.iskra-hs__point:focus {
	outline: none;
}

.iskra-hs__mark {
	position: relative;
	display: grid;
	place-items: center;
	width: 45px;
	height: 45px;
}

/*
 * Obe stanji sta v isti celici mreže in se prelijeta eno v drugo. Tako
 * točka ne skoči, ker je 45px polje enako veliko v obeh stanjih.
 */
.iskra-hs__on,
.iskra-hs__off,
.iskra-hs__plus {
	grid-area: 1 / 1;
	transition: opacity .32s ease, transform .32s ease;
}

.iskra-hs__on path {
	fill: var(--hs-on);
}

.iskra-hs__off path {
	fill: var(--hs-off);
}

/* Prehod obroča je določen z gradientom; barvo mu da ista spremenljivka. */
.iskra-hs__defs stop {
	stop-color: var(--hs-on);
}

.iskra-hs__on {
	opacity: 0;
	transform: scale(.55);
}

.iskra-hs__off {
	opacity: 1;
	transform: scale(1);
}

.iskra-hs__point.is-on .iskra-hs__on,
.iskra-hs__point:hover .iskra-hs__on,
.iskra-hs__point:focus-visible .iskra-hs__on {
	opacity: 1;
	transform: scale(1);
}

.iskra-hs__point.is-on .iskra-hs__off,
.iskra-hs__point:hover .iskra-hs__off,
.iskra-hs__point:focus-visible .iskra-hs__off {
	opacity: 0;
	transform: scale(.75);
}

/* Križec v sredini. */
.iskra-hs__plus {
	position: relative;
	width: 9px;
	height: 9px;
	z-index: 2;
	pointer-events: none;
}

.iskra-hs__plus::before,
.iskra-hs__plus::after {
	content: "";
	position: absolute;
	background: var(--hs-plus-off);
	border-radius: 1px;
	transition: background .32s ease;
}

.iskra-hs__plus::before {
	left: 0;
	right: 0;
	top: 50%;
	height: 1.6px;
	transform: translateY(-50%);
}

.iskra-hs__plus::after {
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1.6px;
	transform: translateX(-50%);
}

.iskra-hs__point.is-on .iskra-hs__plus::before,
.iskra-hs__point.is-on .iskra-hs__plus::after,
.iskra-hs__point:hover .iskra-hs__plus::before,
.iskra-hs__point:hover .iskra-hs__plus::after,
.iskra-hs__point:focus-visible .iskra-hs__plus::before,
.iskra-hs__point:focus-visible .iskra-hs__plus::after {
	background: var(--hs-plus-on);
}

/* Skrite definicije gradienta; ne smejo zavzeti prostora. */
.iskra-hs__defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/*  Oblaček z besedilom                                                */
/* ------------------------------------------------------------------ */

.iskra-hs__tip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	width: max-content;
	max-width: 260px;
	padding: 14px 16px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
	color: #0B1B33;
	font-size: 14px;
	line-height: 1.45;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 6px);
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
	pointer-events: none;
	z-index: 3;
}

/* Ob robu slike se oblaček poravna navznoter, da ne štrli iz postavitve. */
.iskra-hs__point.is-edge-left .iskra-hs__tip {
	left: 0;
	transform: translate(-12px, 6px);
}

.iskra-hs__point.is-edge-right .iskra-hs__tip {
	left: auto;
	right: 0;
	transform: translate(12px, 6px);
}

.iskra-hs__point.is-below .iskra-hs__tip {
	bottom: auto;
	top: calc(100% + 10px);
}

.iskra-hs__point:hover .iskra-hs__tip,
.iskra-hs__point:focus-visible .iskra-hs__tip,
.iskra-hs__point.is-open .iskra-hs__tip {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.iskra-hs__point.is-edge-left:hover .iskra-hs__tip,
.iskra-hs__point.is-edge-left:focus-visible .iskra-hs__tip,
.iskra-hs__point.is-edge-left.is-open .iskra-hs__tip {
	transform: translate(-12px, 0);
}

.iskra-hs__point.is-edge-right:hover .iskra-hs__tip,
.iskra-hs__point.is-edge-right:focus-visible .iskra-hs__tip,
.iskra-hs__point.is-edge-right.is-open .iskra-hs__tip {
	transform: translate(12px, 0);
}

.iskra-hs__tiptitle {
	display: block;
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.iskra-hs__tiptext {
	display: block;
	color: #4A5568;
}

.iskra-hs__tiplink {
	display: inline-block;
	margin-top: 8px;
	color: var(--hs-on);
	font-weight: 600;
	text-decoration: none;
}

.iskra-hs__tiplink:hover {
	text-decoration: underline;
}

/* Oblaček je klikljiv samo, ko je viden — sicer bi lovil miško. */
.iskra-hs__point:hover .iskra-hs__tip,
.iskra-hs__point.is-open .iskra-hs__tip {
	pointer-events: auto;
}

/* ------------------------------------------------------------------ */
/*  Manjši zasloni                                                     */
/* ------------------------------------------------------------------ */

@media (max-width: 600px) {
	.iskra-hs__tip {
		max-width: 200px;
		padding: 12px 14px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.iskra-hs__on,
	.iskra-hs__off,
	.iskra-hs__plus,
	.iskra-hs__tip,
	.iskra-hs__plus::before,
	.iskra-hs__plus::after {
		transition-duration: .01ms;
	}
}