/*
 * EMPOR — skupni slog strani
 * Velja za vse strani, zgrajene po potrjenem dizajnu (razred ttm-empor).
 * Osnovni slog iz potrjenega dizajna. Skoraj vse oblikovanje potuje v samem
 * markupu (inline), tu je le podlaga in nekaj popravkov, da Hubovi privzeti
 * slogi ne posegajo vmes.
 */

body.ttm-empor {
	margin: 0;
	background: #ffffff;
	color: #0c1a26;
	font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	/* clip in ne hidden: hidden naredi iz telesa drsni vsebnik, ki nikoli ne
	   drsi, in position: sticky se nima česa prijeti — kazalo na Prodajnem
	   programu je zato odjadralo z zaslona (izmerjeno 22. 9. 2026). hidden
	   ostane kot rezerva za brskalnike brez clip (Safari pred 16). */
	overflow-x: hidden;
	overflow-x: clip;
}

/* Tema pod nami postavi html { overflow-x: hidden } — z istim učinkom na sticky. */
html:has(body.ttm-empor) { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }

body.ttm-empor *,
body.ttm-empor *::before,
body.ttm-empor *::after { box-sizing: border-box; }

body.ttm-empor a { color: #2461a6; text-decoration: none; }
body.ttm-empor a:hover { color: #0f294f; }

body.ttm-empor img { display: block; max-width: 100%; height: auto; }

body.ttm-empor h1,
body.ttm-empor h2,
body.ttm-empor h3,
body.ttm-empor h4,
body.ttm-empor p,
body.ttm-empor ul { margin: 0; }

body.ttm-empor ul { padding: 0; list-style: none; }

/* The brand strip scrolls itself; the design animates it with this. */
@keyframes emporMarquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Keyboard users must be able to see where they are. */
body.ttm-empor a:focus-visible,
body.ttm-empor button:focus-visible {
	outline: 2px solid #2461a6;
	outline-offset: 3px;
}

/* ==========================================================================
   Meni — kje sem in kam grem
   The design marks the page you are on in the desktop menu (accent colour and
   a rule under the entry) and in the panel (the light blue), so nothing needs
   adding for that. What is missing is an answer to hovering.
   ========================================================================== */

body.ttm-empor [data-ttm="nav-desktop"] a { transition: color .18s ease; }

body.ttm-empor [data-ttm="nav-desktop"] a:hover,
body.ttm-empor [data-ttm="nav-desktop"] a:hover span { color: #2461a6 !important; }

/* ==========================================================================
   Skrito je skrito
   The catalogue cards carry display:flex in their own style attribute, which
   beats the browser's rule for [hidden]. The search therefore counted matches
   correctly and hid nothing: typing "Danfoss" left every brand on screen.
   ========================================================================== */

body.ttm-empor [hidden] { display: none !important; }

/* ==========================================================================
   Angleški naslov v heroju
   "refrigeration" is a single word wider than its column, so at the scale the
   design uses it ran over the paragraph beside it. English gets its own step
   down; Slovenian, whose words are shorter, keeps the design's scale.
   ========================================================================== */

body.ttm-empor-home.ttm-lang-en h1 {
	font-size: clamp(44px, 7.2vw, 104px) !important;
}

/* ==========================================================================
   Tarče za prst
   Only below 1080px. The design's own sizes stay on the desktop.
   ========================================================================== */

@media (max-width: 1079px) {
	/* Fields and the dropdown: 34px is hard to hit, 44px is the accepted floor. */
	body.ttm-empor input:not([type="checkbox"]):not([type="radio"]),
	body.ttm-empor select,
	body.ttm-empor textarea {
		min-height: 44px;
	}

	/* The consent box is 18px, small enough to miss next to its own label. The
	   label is what a finger actually hits, so it gets the floor as well — the
	   English wording is one line shorter and fell under it. */
	body.ttm-empor input[type="checkbox"] {
		width: 24px !important;
		height: 24px !important;
		flex: 0 0 24px;
	}

	body.ttm-empor label:has(input[type="checkbox"]) {
		min-height: 44px;
		align-items: center;
	}

	/* The pills: "Pokličite" in the header, SI/EN in the panel, and the
	   telephone, e-mail and directions pills wherever they appear. The SI/EN
	   pills in the header sit in hdr-akcije, which is not on screen here.

	   The :not() is load-bearing. Matching on the href catches the big contact
	   cards on /kontakt/ as well, and centring a full-width card leaves its
	   icon and text floating in the middle of an empty box. Same trap as the
	   blue hover: never let a visual rule hang on a link's target alone. */
	body.ttm-empor [data-ttm="hdr-mobil"] a,
	body.ttm-empor [data-ttm="jezik-predal"] a,
	body.ttm-empor a[href^="tel:"]:not([data-ttm="kontakt-kartica"]),
	body.ttm-empor a[href^="mailto:"]:not([data-ttm="kontakt-kartica"]),
	body.ttm-empor a[href*="maps.google"]:not([data-ttm="kontakt-kartica"]) {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* ==========================================================================
   Besedilo v karticah na telefonu
   14px is the design's size and it stays on the desktop. Below the mobile
   breakpoint it steps to 15px — matched on the inline style, because the
   design leaves no class to target. Spans are in because the brand blurbs on
   the catalogue page are spans, not paragraphs. The 10–11px mono labels are
   below this range and stay as drawn.
   ========================================================================== */

@media (max-width: 1079px) {
	body.ttm-empor p[style*="font-size: 14px"],
	body.ttm-empor p[style*="font-size: 13px"],
	body.ttm-empor span[style*="font-size: 14px"],
	body.ttm-empor span[style*="font-size: 13px"],
	body.ttm-empor li[style*="font-size: 14px"],
	body.ttm-empor li[style*="font-size: 13px"] {
		font-size: 15px !important;
	}
}

/* ==========================================================================
   Telo članka
   The only content on the site that arrives without inline styles — it comes
   from WordPress. These rules restate the design's own scale so a story reads
   like the rest of the site rather than like a default WordPress page.
   ========================================================================== */

body.ttm-empor [data-ttm="clanek"] {
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 1.75;
	color: #3d5673;
}

body.ttm-empor [data-ttm="clanek"] > * + * { margin-top: 1.15em; }

body.ttm-empor [data-ttm="clanek"] h2 {
	margin-top: 1.9em;
	font-size: clamp(20px, 1.9vw, 27px);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: #0f294f;
}

body.ttm-empor [data-ttm="clanek"] h3 {
	margin-top: 1.6em;
	font-size: clamp(17px, 1.4vw, 21px);
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #0f294f;
}

/* The site resets lists for the design's own menus, so a story has to ask
   for its markers back. The dash matches the mono rules used elsewhere. */
body.ttm-empor [data-ttm="clanek"] ul { padding-left: 0; }

body.ttm-empor [data-ttm="clanek"] li {
	position: relative;
	padding-left: 26px;
}

body.ttm-empor [data-ttm="clanek"] li + li { margin-top: .5em; }

body.ttm-empor [data-ttm="clanek"] li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .72em;
	width: 14px;
	height: 1.5px;
	background: #2461a6;
}

body.ttm-empor [data-ttm="clanek"] a { color: #2461a6; text-decoration: underline; text-underline-offset: 3px; }

body.ttm-empor [data-ttm="clanek"] figure,
body.ttm-empor [data-ttm="clanek"] img {
	margin-top: 1.6em;
	margin-bottom: 0;
	background: #f4f7fa;
	width: 100%;
	height: auto;
}

body.ttm-empor [data-ttm="clanek"] strong { color: #0f294f; }

/* ==========================================================================
   Razkritje ob drsenju
   The design leaves 31 blocks at opacity 0 for a script to reveal. If that
   script never runs, most of the page is blank — so without JS we show
   everything outright. !important is unavoidable: the design sets opacity
   in the elements' own style attributes.
   ========================================================================== */

body.ttm-empor.ttm-js-off [data-reveal] {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* ==========================================================================
   Mozaik na strani „O podjetju"
   The handoff gives the half tiles flex-basis 320px, which on the 1080px
   container fits three across; the approved preview shows two. The preview is
   what the client signed off, so they are pinned to half width, and they fold
   to a single column at the ~700px the handoff names.
   ========================================================================== */

@media (min-width: 700px) {
	body.ttm-empor [data-ttm-ploscica="pol"] { flex-basis: calc(50% - 1px) !important; }
}

@media (max-width: 699px) {
	body.ttm-empor [data-ttm-ploscica] { flex-basis: 100% !important; }

	/* In one column the tiles fall image, text, text, image, image, text, image.
	   Miha wants them to alternate — image, then the text it belongs to — so two
	   of them trade places: the showroom photo moves up next to "Oprema", and
	   "Lastna zaloga" follows it. Nothing moves on wider screens, where the
	   mosaic is read in two columns. */
	body.ttm-empor-about [data-ttm="mozaik"] > *:nth-child(1) { order: 1; }
	body.ttm-empor-about [data-ttm="mozaik"] > *:nth-child(2) { order: 2; }
	body.ttm-empor-about [data-ttm="mozaik"] > *:nth-child(4) { order: 3; }
	body.ttm-empor-about [data-ttm="mozaik"] > *:nth-child(3) { order: 4; }
	body.ttm-empor-about [data-ttm="mozaik"] > *:nth-child(5) { order: 5; }
	body.ttm-empor-about [data-ttm="mozaik"] > *:nth-child(6) { order: 6; }
	body.ttm-empor-about [data-ttm="mozaik"] > *:nth-child(7) { order: 7; }
}

/* ==========================================================================
   Ozki zasloni
   The design was drawn for the desktop and carries no media query of its own.
   It does contain a slide-in menu panel, but nothing that opens it and no rule
   that puts the desktop navigation away, so a phone gets the wide layout cut
   off at the edge. These rules close that gap.
   ========================================================================== */

body.ttm-empor.ttm-meni-odprt #ttm-meni {
	transform: none !important;
	visibility: visible !important;
}

/* Above 1180 the home page still fits logo + menu + contact cluster on one
   line; below that the cluster goes first (telephone and e-mail are repeated
   in the hero and in the footer, the menu is not repeated anywhere). Every
   page then hands over to the mobile cluster at the 1080px the handoff names.
   Written for body.ttm-empor so a new subpage is covered the day it is added. */

@media (max-width: 1180px) {
	body.ttm-empor-home [data-ttm="hdr-akcije"] { display: none !important; }
}

@media (max-width: 1079px) {
	body.ttm-empor [data-ttm="nav-desktop"],
	body.ttm-empor [data-ttm="hdr-akcije"],
	body.ttm-empor [data-ttm="rail"] { display: none !important; }

	body.ttm-empor [data-ttm="hdr-mobil"] { display: flex !important; }

	/* The sticky index needs a column of its own; below the breakpoint the
	   groups simply follow one another and the anchors in the drawer do the
	   same job. */
	body.ttm-empor [data-ttm="kazalo"] { display: none !important; }
}

@media (min-width: 1080px) {
	/* Above the breakpoint the mobile cluster and the panel stay out of sight. */
	body.ttm-empor [data-ttm="hdr-mobil"] { display: none !important; }
	body.ttm-empor #ttm-meni { transform: translateX(100%) !important; visibility: hidden !important; }
}

/* The address card sits over the map on wide screens; below 700px the handoff
   puts it underneath, where a border on the right would hang in mid-air. */
@media (max-width: 699px) {
	body.ttm-empor-kontakt [data-ttm="kartica-zemljevid"] {
		position: static !important;
		border-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.ttm-empor *,
	body.ttm-empor *::before,
	body.ttm-empor *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	html:has(body.ttm-empor) { scroll-behavior: auto; }
	body.ttm-empor [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Noga — lebdenje pilov in povezav
   The underline on footer links is drawn by empor-pro.js; these add the pill
   border and the link colour it does not touch.
   ========================================================================== */

body.ttm-empor .ttm-fpill:hover { border-color: #3bc5f3 !important; }
body.ttm-empor .ttm-fpill-l:hover { color: #ffffff; }

/* Kartice „Kaj dobite" — subtilno posvetlijo ob prehodu kazalca */
body.ttm-empor .ttm-kd-card:hover { background: #ffffff; }

/* Domača stran — cevni razvod in vrtenje ventilatorske ikone (dekorativno).
   prefers-reduced-motion jih ustavi (glej blok zgoraj). */
@keyframes empFlow { to { stroke-dashoffset: -160; } }
@keyframes empFlowSlow { to { stroke-dashoffset: -240; } }
@keyframes empSpinSlow { to { transform: rotate(-360deg); } }

/* ==========================================================================
   Domača — kartice programa: moder hover (naročnikova želja, 5. 9. 2026)
   Selektor je vezan na oznako data-ttm v markupu, NE na cilj povezave. To
   pravilo se je namrec ze dvakrat tiho pokvarilo, ko so kartice dobile nov
   href — enkrat pri #kontakt, drugic pri #skupina-. Oznaka se ne spreminja.
   Ob prehodu kazalca postane kartica mornarsko modra, slika zbledi, besedilo
   pobeli — kot je bila prej trajno kartica „Elektronika in krmiljenje".
   !important, ker so barve v inline slogih.
   ========================================================================== */

body.ttm-empor-home #program [data-ttm="kartica-skupine"] {
	transition: transform .55s cubic-bezier(.16,1,.3,1), background .4s, border-color .3s, box-shadow .55s;
}
body.ttm-empor-home #program [data-ttm="kartica-skupine"]:hover {
	background: #0f294f !important;
	border-color: #0f294f !important;
	transform: translateY(-6px);
	box-shadow: 0 30px 70px -40px rgba(15,41,79,.5);
}
body.ttm-empor-home #program [data-ttm="kartica-skupine"]:hover > div:first-child { background: #0f294f !important; }
body.ttm-empor-home #program [data-ttm="kartica-skupine"]:hover img { opacity: 0; transition: opacity .4s; }
body.ttm-empor-home #program [data-ttm="kartica-skupine"]:hover h3 { color: #ffffff !important; }
body.ttm-empor-home #program [data-ttm="kartica-skupine"]:hover p  { color: #bfd6ec !important; }
body.ttm-empor-home #program [data-ttm="kartica-skupine"]:hover span { color: #7fb3e0 !important; }

/* Dobavitelji — logotipi v sivini, barvni ob prehodu kazalca */
body.ttm-empor .ttm-dob:hover { filter: none !important; opacity: 1 !important; }

/* ==========================================================================
   Domača — feature bloki: namizno izmenično, mobilno vedno tekst -> slika
   Postavitev prek order (DOM ostane), da mobilno vedno pokaže besedilo, nato sliko.
   ========================================================================== */
body.ttm-empor-home .ttm-feat { grid-template-columns: 1fr !important; }
body.ttm-empor-home .ttm-feat > .ttm-ft { order: 1 !important; }
body.ttm-empor-home .ttm-feat > .ttm-fi { order: 2 !important; }
@media (min-width: 760px) {
	body.ttm-empor-home .ttm-feat { grid-template-columns: 1fr 1fr !important; }
	body.ttm-empor-home .ttm-feat--imgleft > .ttm-fi { order: 1 !important; }
	body.ttm-empor-home .ttm-feat--imgleft > .ttm-ft { order: 2 !important; }
}

/* Blog kartice — slika se ob prehodu kazalca po celi kartici modro obarva (EMPOR duotone) */
body.ttm-empor .ttm-blog-img { position: relative; }
body.ttm-empor .ttm-blog-img::after { content: ""; position: absolute; inset: 0; background: #2461A6; opacity: 0; transition: opacity .4s cubic-bezier(.16,1,.3,1); pointer-events: none; }
body.ttm-empor a:hover .ttm-blog-img::after { opacity: .55; }

/* ==========================================================================
   Trak pod heroom — številke v ozadju celic
   Isti prijem kot začetnice znamk na Katalogih: velika, obledela, za besedilom.
   Tu je v slogovni datoteki in ne v markupu, ker preliv čez črke potrebuje
   @supports — brez njega bi bila številka na starem brskalniku nevidna.
   ========================================================================== */

body.ttm-empor .ttm-stevilka {
	position: absolute;
	right: -14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: clamp(58px, 6vw, 94px);
	line-height: .72;
	font-weight: 800;
	letter-spacing: -.07em;
	font-variant-numeric: tabular-nums lining-nums;
	color: #E3EBF4;
	pointer-events: none;
	user-select: none;
}

/* Preliv poživi zgornji rob in pusti spodnjega, da se izgubi v belino.
   Rezerva zgoraj je polna barva, zato je številka vidna tudi brez podpore. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	body.ttm-empor .ttm-stevilka {
		color: transparent;
		background-image: linear-gradient(168deg, #C4D8EC 0%, #DDE9F5 55%, #F1F6FB 100%);
		-webkit-background-clip: text;
		background-clip: text;
	}
}

@media (prefers-reduced-transparency: reduce) {
	body.ttm-empor .ttm-stevilka { color: #E3EBF4; background-image: none; }
}

/* ==========================================================================
   Zemljevid — siv z modrim pridihom
   Prej je bilo v markupu `sepia(1) hue-rotate(170deg) saturate(1.7)`: sepia(1)
   pobije vse barve v eno samo, saturate jo ojača, in zemljevid je postal ena
   sama modrina. Zdaj gre najprej v sivino, modrina pa se doda le rahlo — ulice
   in voda ostanejo berljive, Googlove rdeče in oranžne značke pa se umirijo,
   da se ne tepejo z modro na strani.
   ========================================================================== */

body.ttm-empor [data-ttm="zemljevid"] {
	filter: grayscale(1) brightness(1.06) contrast(.96) sepia(.35) hue-rotate(175deg) saturate(1.6);
}

/* ==========================================================================
   Priloge k povpraševanju — gumb za izbiro datotek
   Privzeti gumb brskalnika izstopa iz obrazca, zato dobi isto obliko kot
   „Predogled" na straneh katalogov. Besedila „ni izbrane datoteke" poleg njega
   ni mogoče spremeniti — to izriše brskalnik sam.
   ========================================================================== */

body.ttm-empor input[type="file"][data-ttm="priloge"] {
	font-family: inherit;
}

body.ttm-empor input[type="file"][data-ttm="priloge"]::file-selector-button {
	font-family: "IBM Plex Mono", monospace;
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #2461A6;
	background: #fff;
	border: 1px solid #E2E8F0;
	border-radius: 999px;
	padding: 10px 18px;
	margin-right: 14px;
	cursor: pointer;
	transition: border-color .3s, color .3s;
}

body.ttm-empor input[type="file"][data-ttm="priloge"]::file-selector-button:hover {
	border-color: #2461A6;
	color: #0F294F;
}

/* Gumb nazaj na podstraneh skupin — enak jezik kot „Vse znamke" na Katalogih. */
body.ttm-empor .ttm-nazaj:hover { background: #0F294F; }

/* ==========================================================================
   Glava — pisave so 16. 9. 2026 zrasle za 2 px (naročnikova želja)
   Pri tem sta se „Prodajni program" in „O podjetju" začela lomiti v dve vrsti.
   Postavke ne smejo lomiti; namesto tega se stisne razmik med njimi, dokler je
   prostor, pod 1200 px pa se meni tako ali tako umakne v drsni panel.
   ========================================================================== */

body.ttm-empor [data-ttm="nav-desktop"] { gap: clamp(10px, 1.3vw, 26px); }
body.ttm-empor [data-ttm="nav-desktop"] > a { white-space: nowrap; }

/* ==========================================================================
   Mozaik na strani O podjetju — enoten barvni ton
   Štiri fotografije so iz štirih različnih virov: rumeno priznanje, rumeni
   regali, moder zaslon, modro nebo. Skupaj niso delovale kot en komplet.

   Rešitev je zmanjšana nasičenost in rahla modra prekrivka. `hue-rotate` je
   bil preizkušen in zavrnjen: zavrti VSE odtenke, zato moder zaslon postane
   rjav in rumeni regali modri — barve premeša, ne poenoti.

   Prekrivka gre samo na celice, ki res vsebujejo sliko; treh besedilnih
   ne sme obarvati.
   ========================================================================== */

body.ttm-empor [data-ttm-ploscica]:has(> img) {
	position: relative;
}

body.ttm-empor [data-ttm-ploscica] > img {
	filter: saturate(.55) contrast(1.05);
}

body.ttm-empor [data-ttm-ploscica]:has(> img)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #2461A6;
	opacity: .1;
	pointer-events: none;
}

/* --- Glava na ožjih zaslonih ------------------------------------------- */
/* Vsa vsebina glave (logotip 184 px, meni 537 px, gumbi 593 px in razmiki)
   potrebuje najmanj 1354 px, pri 1440 pa je na voljo 1342. Zato je preklop
   SI/EN odhajal z zaslona — pri 1366 in 1280 se je to dogajalo že prej.
   Namesto da bi na prenosnikih skrili cel meni, umaknemo najprej telefon,
   nato še B2B; oba sta tudi v nogi, zato ni nič nedosegljivo.
   Oznaki sta v markupu in ne na naslovu povezave — pravilo, vezano na href,
   se je na tem projektu že dvakrat tiho pokvarilo. */
@media (max-width: 1500px) {
	body.ttm-empor [data-ttm="hdr-tel"] { display: none; }
}
@media (max-width: 1400px) {
	body.ttm-empor [data-ttm="hdr-b2b"] { display: none; }
}

/* --- Besedilne strani (Zasebnost in piškotki) ---------------------------- */
/* Vsebina pride iz urejevalnika WordPressa, zato slog velja za navadne
   oznake (h2, p, ul, table) in ne za razrede — stranka jih ne bo pisala. */
body.ttm-empor .ttm-besedilo-mreza {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(32px, 5vw, 96px);
}
@media (min-width: 1000px) {
	body.ttm-empor .ttm-besedilo-mreza { grid-template-columns: 260px minmax(0, 760px); }
}
body.ttm-empor .ttm-besedilo-kazalo { align-self: start; }
@media (min-width: 1000px) {
	body.ttm-empor .ttm-besedilo-kazalo { position: sticky; top: 120px; }
}
body.ttm-empor .ttm-besedilo-kazalo ol {
	margin: 14px 0 0; padding: 0; list-style: none;
	border-left: 1px solid #E2E8F0;
}
body.ttm-empor .ttm-besedilo-kazalo a {
	display: block; padding: 7px 0 7px 16px; margin-left: -1px;
	border-left: 2px solid transparent;
	font-size: 14px; line-height: 1.4; color: #3D5673; text-decoration: none;
	transition: color .2s, border-color .2s;
}
body.ttm-empor .ttm-besedilo-kazalo a:hover { color: #2461A6; border-left-color: #2461A6; }
@media (max-width: 999px) {
	body.ttm-empor .ttm-besedilo-kazalo ol { columns: 2 220px; column-gap: 24px; }
}

body.ttm-empor .ttm-besedilo { color: #3D5673; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7; }
body.ttm-empor .ttm-besedilo > :first-child { margin-top: 0; }
body.ttm-empor .ttm-besedilo h2 {
	margin: clamp(44px, 5vw, 64px) 0 16px;
	font-size: clamp(22px, 2vw, 28px); line-height: 1.15; font-weight: 800;
	letter-spacing: -.025em; color: #0F294F;
	scroll-margin-top: 120px;
}
body.ttm-empor .ttm-besedilo h3 {
	margin: 28px 0 8px;
	font-size: 17px; line-height: 1.3; font-weight: 700; color: #0F294F;
}
body.ttm-empor .ttm-besedilo p { margin: 0 0 14px; max-width: 68ch; }
/* Ponastavitev strani pobriše alineje — tu jih vrnemo. */
body.ttm-empor .ttm-besedilo ul { margin: 0 0 16px; padding-left: 20px; max-width: 66ch; list-style: disc outside; }
body.ttm-empor .ttm-besedilo li { margin: 0 0 6px; }
body.ttm-empor .ttm-besedilo li::marker { color: #2461A6; }
body.ttm-empor .ttm-besedilo strong { color: #0F294F; font-weight: 700; }
body.ttm-empor .ttm-besedilo a { color: #2461A6; text-decoration: underline; text-underline-offset: 3px; }
body.ttm-empor .ttm-besedilo a:hover { color: #0F294F; }

/* Tabele: na telefonu vodoravno drsenje znotraj tabele, ne cele strani. */
body.ttm-empor .ttm-besedilo .ttm-tabela { margin: 8px 0 22px; overflow-x: auto; border: 1px solid #E2E8F0; }
body.ttm-empor .ttm-besedilo table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
body.ttm-empor .ttm-besedilo th {
	padding: 10px 14px; text-align: left; vertical-align: bottom;
	font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 500;
	letter-spacing: .14em; text-transform: uppercase; color: #5B7A99;
	background: #F4F7FA; border-bottom: 1px solid #E2E8F0;
}
body.ttm-empor .ttm-besedilo td { padding: 12px 14px; vertical-align: top; border-top: 1px solid #E2E8F0; }
body.ttm-empor .ttm-besedilo tr:first-child td { border-top: 0; }
body.ttm-empor .ttm-besedilo td code {
	font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #0F294F;
	background: #F4F7FA; padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}

/* Okvir s podatki podjetja. */
body.ttm-empor .ttm-besedilo .ttm-okvir {
	margin: 8px 0 20px; padding: 18px 20px;
	border: 1px solid #E2E8F0; border-left: 2px solid #2461A6; background: #fff;
}
body.ttm-empor .ttm-besedilo .ttm-okvir p { margin: 0; }

/* ==========================================================================
   Tablica (700–1079 px) — domača stran (Miha, 5. 10. 2026)
   Oblikovanje je nastavljeno za telefon in namizje; vmes je ostalo troje:
   hero z 72vh je na pokončni tablici pustil ~300 px praznega nad naslovom,
   trak petih prednosti se je zlomil v 3 + 2 z odrezanimi številkami, kartice
   skupin pa so se menjale 2:1 in 1:1 z različno visokimi slikami.
   Markup ima sloge v vrstici, zato !important.
   ========================================================================== */

@media (min-width: 700px) and (max-width: 1079px) {
	body.ttm-empor-home #vrh {
		min-height: clamp(440px, 50vh, 560px) !important;
	}

	body.ttm-empor-home #vrh + section > div {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
	}
	body.ttm-empor-home #vrh + section > div > div {
		border-right: 0 !important;
		border-bottom: 1px solid #E2E8F0;
	}
	body.ttm-empor-home #vrh + section > div > div:nth-child(odd) {
		border-right: 1px solid #E2E8F0 !important;
	}
	body.ttm-empor-home #vrh + section > div > div:last-child {
		grid-column: 1 / -1;
		border-right: 0 !important;
		border-bottom: 0;
	}

	body.ttm-empor-home #program [data-ttm="kartica-skupine"] {
		flex: 1 1 calc(50% - 7px) !important;
	}
	/* Slikovni del enako visok v vseh karticah, ne glede na dolžino besedila. */
	body.ttm-empor-home #program [data-ttm="kartica-skupine"] > div:first-child {
		flex: 0 0 230px !important;
	}
	body.ttm-empor-home #program [data-ttm="kartica-skupine"] img {
		height: 190px !important;
	}
}