/* ======================================================================
   OGLAS TOTHEMOON (26. 10. 2026) — the same file on the job portal and on
   zdravstvena.info. Markup: ttm-oglas.php, sky + rotation: ttm-oglas.js.

   Brand from tothemoon.si: night #05070f, gradient #4e7cff → #7c5cf5 →
   #b45ce8, Manrope (both sites already host it).

   Layout: `.ttm-ad-ovoj` is a size container. ≥ 600 px wide the ad is the
   970×250 strip; narrower it becomes the 300×250 card (phone, box slot);
   `.ttm-ad--stolp` is the 300×600 tower. All sizes are in `cqw`, so the
   ad scales with its slot instead of breaking at in-between widths.

   ⚠ Both host themes style a, img, p and span. Everything the ad needs is
     set here explicitly, and the few properties a host sets with more
     weight (`.zi a`, `.zi-oglas__kos img`) are pinned with !important.
   ====================================================================== */
.ttm-ad-ovoj { container-type: inline-size; width: 100%; display: block; }

.ttm-ad-ovoj a.ttm-ad {
	--ttm-noc: #05070f;
	--ttm-bela: #ffffff;
	--ttm-mehka: #c3ccec;
	--ttm-nadnaslov: #a9b8ff;
	--ttm-preliv: linear-gradient(96deg, #4e7cff 0%, #7c5cf5 52%, #b45ce8 100%);
	position: relative; display: block; isolation: isolate; overflow: hidden;
	width: 100%; aspect-ratio: 970 / 250; border-radius: 14px;
	background: var(--ttm-noc); color: var(--ttm-bela) !important; text-decoration: none !important;
	font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.3; text-align: left;
	box-shadow: 0 0 0 1px rgba(140, 160, 255, .18);
}
.ttm-ad *, .ttm-ad *::before, .ttm-ad *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0; letter-spacing: normal; text-transform: none; text-decoration: none; font-family: inherit; line-height: 1.3; color: inherit; }
.ttm-ad:focus-visible { outline: 3px solid #8aa2ff; outline-offset: 3px; }
.ttm-ad .ttm-ad__nebo { position: absolute; inset: 0; width: 100% !important; height: 100% !important; z-index: -1; display: block; }
.ttm-ad .ttm-ad__vsebina {
	position: absolute; inset: 0; display: grid;
	grid-template-columns: minmax(0, 62%) minmax(0, 1fr);
	grid-template-rows: auto auto 1fr auto;
	column-gap: 2cqw; padding: 2.6cqw 3cqw;
}
.ttm-ad .ttm-ad__logo { grid-column: 1; grid-row: 1; display: block; height: 1.9cqw !important; width: auto !important; max-width: none !important; border-radius: 0; }
.ttm-ad .ttm-ad__nadnaslov { display: block; grid-column: 1; grid-row: 2; margin-top: 1.4cqw; font-size: 1.15cqw; font-weight: 700; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--ttm-nadnaslov); }
.ttm-ad .ttm-ad__sporocila { grid-column: 1; grid-row: 3; display: grid; align-content: center; }
.ttm-ad .ttm-ad__sporocilo { grid-area: 1 / 1; display: grid; align-content: center; gap: .7cqw; opacity: 0; transform: translateY(10px); filter: blur(6px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1), filter .7s ease; }
.ttm-ad .ttm-ad__sporocilo.is-aktivno { opacity: 1; transform: none; filter: none; }
.ttm-ad .ttm-ad__sporocilo strong { display: block; color: var(--ttm-bela); font-size: 3.05cqw; line-height: 1.12; font-weight: 800; letter-spacing: -.015em; text-wrap: balance; }
.ttm-ad .ttm-ad__sporocilo em { font-style: normal; background: var(--ttm-preliv); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ttm-ad .ttm-ad__sporocilo > span { display: block; font-size: 1.5cqw; line-height: 1.45; color: var(--ttm-mehka); max-width: 48ch; }
.ttm-ad .ttm-ad__storitve { grid-column: 1; grid-row: 4; align-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: .7cqw; }
.ttm-ad .ttm-ad__storitve span { display: inline-block; font-size: 1.1cqw; line-height: 1.2; font-weight: 600; color: #dce2fa; padding: .35cqw .9cqw; border-radius: 999px; border: 1px solid rgba(140, 160, 255, .28); background: rgba(20, 26, 52, .55); }
.ttm-ad .ttm-ad__gumb {
	grid-column: 2; grid-row: 4; justify-self: end; align-self: end; position: relative; overflow: hidden;
	display: inline-flex; align-items: center; gap: .8cqw; padding: 1.15cqw 2.1cqw; border-radius: 999px;
	background: var(--ttm-preliv); box-shadow: 0 8px 26px rgba(90, 100, 240, .45);
	font-size: 1.45cqw; font-weight: 700; white-space: nowrap; color: #fff; transition: transform .25s ease, box-shadow .25s ease;
}
.ttm-ad .ttm-ad__gumb i { font-style: normal; transition: transform .25s ease; }
.ttm-ad .ttm-ad__gumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); animation: ttm-ad-blisk 4.5s ease-in-out 1.2s infinite; }
.ttm-ad:hover .ttm-ad__gumb { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(90, 100, 240, .6); }
.ttm-ad:hover .ttm-ad__gumb i { transform: translateX(4px); }
@keyframes ttm-ad-blisk { 0%, 62% { transform: translateX(-120%); } 82%, 100% { transform: translateX(120%); } }

/* narrow: phone width or the 300×250 box */
@container (max-width: 599px) {
	.ttm-ad-ovoj a.ttm-ad { aspect-ratio: 300 / 250; max-width: 440px; margin-inline: auto; border-radius: 16px; }
	.ttm-ad .ttm-ad__vsebina { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; padding: 6.5cqw 6.5cqw 6cqw; }
	.ttm-ad .ttm-ad__logo { height: 5.2cqw !important; }
	.ttm-ad .ttm-ad__nadnaslov { margin-top: 3.2cqw; font-size: 3.3cqw; letter-spacing: .12em !important; max-width: 70%; }
	.ttm-ad .ttm-ad__sporocila { align-content: end; padding-bottom: 4cqw; }
	.ttm-ad .ttm-ad__sporocilo { gap: 2cqw; align-content: end; }
	.ttm-ad .ttm-ad__sporocilo strong { font-size: 7.6cqw; }
	.ttm-ad .ttm-ad__sporocilo > span { font-size: 4.1cqw; }
	.ttm-ad .ttm-ad__storitve { display: none; }
	.ttm-ad .ttm-ad__gumb { grid-column: 1; justify-self: stretch; justify-content: center; font-size: 4.6cqw; padding: 3.3cqw 4cqw; gap: 2cqw; }

	/* the 300×600 tower: moon on top, services listed, room to breathe */
	.ttm-ad-ovoj a.ttm-ad.ttm-ad--stolp { aspect-ratio: 300 / 600; max-width: 300px; }
	.ttm-ad--stolp .ttm-ad__vsebina { padding: 8cqw 7cqw 7cqw; }
	.ttm-ad--stolp .ttm-ad__sporocila { align-content: end; padding-bottom: 6cqw; }
	.ttm-ad--stolp .ttm-ad__sporocilo strong { font-size: 9cqw; }
	.ttm-ad--stolp .ttm-ad__sporocilo > span { font-size: 4.6cqw; }
	.ttm-ad--stolp .ttm-ad__storitve { display: flex; grid-row: auto; gap: 2cqw; margin-bottom: 6cqw; }
	.ttm-ad--stolp .ttm-ad__storitve span { font-size: 3.6cqw; padding: 1.2cqw 3cqw; }
	.ttm-ad--stolp .ttm-ad__vsebina { grid-template-rows: auto auto 1fr auto auto; }
	.ttm-ad--stolp .ttm-ad__storitve { grid-row: 4; }
	.ttm-ad--stolp .ttm-ad__gumb { grid-row: 5; }
}
@media (prefers-reduced-motion: reduce) {
	.ttm-ad .ttm-ad__sporocilo { transition: none; }
	.ttm-ad .ttm-ad__gumb::after { animation: none; }
}

/* the job portal adds its own frame and the "Oglas" label (inc/ttm-oglas.php) */
.ttm-ad-mesto { position: relative; margin: 0 0 30px; }
.ttm-ad-mesto__oznaka { display: block; margin: 0 0 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #7a849f; text-align: right; }
.ttm-ad-mesto--naslovnica { max-width: 1000px; margin: 34px auto 6px; padding: 0 15px; }
@media (max-width: 767px) { .ttm-ad-mesto { margin-bottom: 20px; } .ttm-ad-mesto--naslovnica { margin-top: 22px; } }