/* ==========================================================================
   Small layout fixes. Loaded on every page by
   wp-content/novamira-sandbox/acclaimed-fixes.php
   ========================================================================== */

/* Store map: draw the marker circle around the "Prečko / Zagreb" text itself,
   so it follows the text instead of a fixed spot in the map box (it drifted
   over the letters and the Show map button on phones). */
.map__cover .map__circle { display: none; }

.map__place { margin: 22px 0 22px; }

.map__place::before {
	content: "";
	position: absolute;
	left: -24%;
	right: -24%;
	top: -52%;
	bottom: -44%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 90' preserveAspectRatio='none'%3E%3Cpath d='M168 9C92 3 14 18 9 45c-4 24 76 38 160 35 76-3 124-17 122-40-2-21-60-33-118-31-30 1-50 4-62 8' fill='none' stroke='%230E0E0D' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	transform: rotate(-3deg);
	pointer-events: none;
}

.map--compact .map__place::before { display: none; }

/* Homepage intro: the inset photo is shown whole in its own landscape ratio
   (1364 x 974). On desktop it starts at 41.8% of the media width and runs past
   the media's right edge into the column gap (up to 14.3%, always leaving 32px
   before the text). The media box is 122cqw tall (4:5 main photo at 80% width
   + 22% bottom padding), which places the "Smoke" note on the inset's top-right
   corner. */
.intro__media {
	container-type: inline-size;
	--ins-left: 41.8cqw;
	--ins-over: min(14.3cqw, clamp(48px, 7vw, 120px) - 32px);
}

.intro__inset {
	left: var(--ins-left);
	right: calc(-1 * var(--ins-over));
	width: auto;
}

.intro__inset img { aspect-ratio: 1364 / 974; }

.intro__note--inset {
	top: calc(122cqw - (100cqw - var(--ins-left) + var(--ins-over) - 12px) / 1.4 - 12px + 3cqw);
	right: calc(3cqw - var(--ins-over));
	bottom: auto;
	text-shadow: none;
}

@media (max-width: 899px) {
	.intro__media { --ins-left: 28cqw; --ins-over: 0px; }
}