@import url("cFonts.css");
@layer reset, dev, base, theme, layout, widgets;

/* https://jakelazaroff.com/words/my-modern-css-reset/ */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
    padding: 0;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-inline-size: 100%;
  }

  input, button, textarea, select {
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    color: currentColor;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  ol, ul {
    list-style: none;
  }

  :not([class]) {
    h1&, h2&, h3&, h4&, h5&, h6& {
      text-wrap: balance;
    }

    ol&, ul& {
      padding-inline-start: 1.5em;
      list-style: revert;
    }
  }
}


@layer dev {
	.offscreen {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px; 
	}

	.skipLink {
		position: fixed;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
		z-index: 300;
		padding: 1em 2em;
		
		background-color: var(--color__select);
		color: #fff;
	}
	
	.icon {
		display: inline-block;
		width: 1em;
	}
	
	.variables-debug {
		display: none;
	}

	.variables-debug--active {
		display: block;
		position: fixed;
		bottom: 0;
		right: 0;
		width: 70%;
		padding: 1em;
		
		background-color: #39CCCC;
		color: #000;
	}

	.lockWarning {
		width: 4px; 
		height: 100%;
		position: fixed; 
		right: 0; 
		top: 0; 
		z-index: 500; 
		
		background-color: #f00;
		font-size: 10px;
		color: #000;	
	}

	.lockWarning:hover {
		padding: 1em;
		width: 200px; 
	}
}





:root {
	--hslColor__violet: 228 80% 73%;
	--hslColor__violet--light: 228 100% 95%;
	--hslColor__blue: 198 100% 81%;
	--hslColor__blue--light: 198 100% 96%;
	--hslColor__yellow: 44 100% 52%;
	--hslColor__yellow--light: 44 98% 93%;
	--hslColor__red: 3 88% 73%;
	--hslColor__red--light: 9 86% 93%;
	--hslColor__grey: 0 0% 95%;
	--hslColor__grey--dark: 0 0% 62%;
	--hslColor__white: 0 0% 100%;
	--hslColor__black: 0 0% 20%;
	--hslColor__energus--green: 173 59% 55%;
	--hslColor__energus--blue: 226 100% 40%;
	
	--color__violet: hsl(var(--hslColor__violet));
	--color__violet--light: hsl(var(--hslColor__violet--light));
	--color__blue: hsl(var(--hslColor__blue));
	--color__blue--light: hsl(var(--hslColor__blue--light));
	--color__yellow: hsl(var(--hslColor__yellow));
	--color__yellow--light: hsl(var(--hslColor__yellow--light));
	--color__red: hsl(var(--hslColor__red));
	--color__red--light: hsl(var(--hslColor__red--light));
	--color__grey: hsl(var(--hslColor__grey));
	--color__grey--dark: hsl(var(--hslColor__grey--dark));
	--color__black: hsl(var(--hslColor__black));
	--color__white: hsl(var(--hslColor__white));
	
	--color__energus--green: var(--hslColor__energus--green);
	--color__energus--blue: var(--hslColor__energus--blue);
	--color__select: #343eb3;

	--family1: "Roboto Serif", serif;
	--family2: "Rethink Sans", sans-serif;
	--family3: "Manrope", sans-serif;
	
	/* ======================================= */
	/* 1.2a BUTTONS (GUMBI) - MOBILE FIRST     */
	/* ======================================= */

	/* Meni (Menu) */
	--font-weight__menu: 700; /* Bold */
	--font-size__menu: 16px;
	--line-height__menu: 20px;

	/* Button */
	--font-weight__button: 700; /* Bold */
	--font-size__button: 15px;
	--line-height__button: 19px;

	/* Newsletter/Cookies Button */
	--font-weight__newsletter-button: 700; /* Bold */
	--font-size__small-button: 12px;
	--line-height__small-button: 16px;

	/* ======================================= */
	/* 1.2b HEADINGS, TEXTS (NASLOVI, TEKSTI) */
	/* ======================================= */

	/* H1 */
	--font-weight__h1: 600; /* Semibold */
	--font-size__h1: 26px;
	--line-height__h1: 30px;

	/* H2 */
	--font-weight__h2: 500; /* Medium */
	--font-size__h2: 18px;
	--line-height__h2: 22px;

	/* H3 */
	--font-weight__h3: 500; /* Regular */
	--font-size__h3: 16px;
	--line-height__h3: 20px;

	/* Paragraph */
	--font-weight__paragraph: 400; /* Regular */
	--font-size__paragraph: 14px;
	--line-height__paragraph: 20px;

	/* ======================================= */
	/* 1.2c CATEGORY CARD (KARTICA KATEGORIJE)*/
	/* ======================================= */

	/* Category Card Number (številke) */
	--font-weight__card-category-number: 500; /* Medium */
	--font-size__card-category-number: 35px;
	--line-height__card-category-number: 30px;

	/* Category Card Title (naslov) */
	--font-weight__card-category-title: 600; /* Semibold */
	--font-size__card-category-title: 14px;
	--line-height__card-category-title: 16px;

	/* Category Card Text (tekst) */
	--font-weight__card-category-text: 400; /* Regular */
	--font-size__card-category-text: 9.5px;
	--line-height__card-category-text: 12.5px;

	/* ======================================= */
	/* 1.2d CAREER CARD (KARTICA KARIERCI)    */
	/* ======================================= */

	/* Career Names (Imena kariercev) */
	--font-weight__card-career-name: 600; /* Semibold */
	--font-size__card-career-name: 20px;
	--line-height__card-career-name: 24px;

	/* Career Titles (Nazivi kariercev) */
	--font-weight__card-career-title: 400; /* Regular */
	--font-size__card-career-title: 10px;
	--line-height__card-career-title: 12px;

	/* ======================================= */
	/* 1.2e NEWS, ENERGUS, QUOTE CARD, ETC.   */
	/* ======================================= */

	/* Card Title (Kartica naslov) */
	--font-weight__card-title: 600; /* Semibold */
	--font-size__card-title: 10px;
	--line-height__card-title: 12px;

	/* Card Text (Kartica tekst) */
	--font-weight__card-text: 400; /* Regular */
	--font-size__card-text: 9px;
	--line-height__card-text: 12px;

	/* News Meta Text (Novice meta tekst) */
	--font-weight__card-meta-text: 400; /* Regular */
	--font-size__card-meta-text: 7px;
	--line-height__card-meta-text: 12px;
	
	
	
	--s7: 7px;
	--s10: 10px;
	--s15: 15px;
	--s20: 20px;
	--s25: 25px;
	--s30: 30px;
	--s40: 40px;
	--s50: 50px;
	--s60: 60px;
	--s80: 80px;
	
	
				--size-3: 0.7rem;
			--size-2: 0.8rem;
		--size-1: 0.9rem;
	--size0: 18px;
		--size1: 1.1rem;
			--size2: 1.3rem;
				--size3: 1.6rem;
					--size4: 2.5rem;
	--sizeh1: var(--font-size__h1);
	--sizeh2: var(--font-size__h2);
	--sizeh3: var(--font-size__h3);
	--sizeh4: var(--size1);
	
	--gradient1: linear-gradient(180deg, #E8F8FF 38.46%, #CEDFFF 69.23%, #A9C1FF 100%);
	--shadow__blue: 0.4em 0.4em 0.8em hsl(var(--hslColor__violet) / 70%);
		--shadow__blue--hover: 0.4em 0.4em 0.8em hsl(var(--hslColor__violet) / 0%);
	--shadow__red: 0.4em 0.4em 0.8em hsl(var(--hslColor__red) / 50%);
	--shadow__green: 0.4em 0.4em 0.8em hsl(var(--hslColor__energus--green) / 70%);
	--weight__bold: 600;
	--weight__medium: 500;
	--weight__normal: 400;
	--weight__light: 300;
	
	--spacer: 1rem;
			--spacing-2: calc(var(--spacer) * 0.25);
		--spacing-1: calc(var(--spacer) * 0.5);
	--spacing: var(--spacer);
		--spacing0: var(--spacer);
			--spacing1: calc(var(--spacer) * 1.5);
				--spacing2: calc(var(--spacer) * 3);
					--spacing3: calc(var(--spacer) * 4);
	
	--theme--spacing: var(--s60);
}




@layer layout {
	:root {
		--grid: grid;
			--w__gridOffsetLeft: 2;
			--w__gridOffsetRight: -2;
			--w__gridGap: 0.5em;
	}
	
	.masterWrapper {
		min-height: 100vh;
		display: flex;
		
		flex-direction: column;
	}

	.masterWrapper > * {
		flex: 0 0 auto;
	}

		.masterWrapper__body {
			flex: 1 1 auto;
		}


	.wrapper__masterLayout {
		flex: 1 0 auto;
	}

	.w {
		display: grid;
		grid-template-columns: 
			var(--spacing-1) 
			repeat(12, minmax(0.5em, 1fr)) 
			var(--spacing-1);
		
		align-content: start; 
		column-gap: var(--w__gridGap);
	}

		
		
		:where(.w > *) {
			grid-column: var(--w__gridOffsetLeft, 1) / var(--w__gridOffsetRight, -1);
		}
	 
	.ws { 
		display: grid;
		grid-template-columns: subgrid;
		
		grid-column: var(--w__gridOffsetLeft, 2) / var(--w__gridOffsetRight, -2);
	}

		:where(.ws > *) {
			grid-column: 1 / -1;
		}

		.ws--F {
			--w__gridOffsetLeft: 1;
			--w__gridOffsetRight: -1;
		}
		
			:where(.ws--F > *) {
				grid-column: calc(var(--w__gridOffsetLeft, 1) + 1) / calc(var(--w__gridOffsetRight, -1) - 1);
			}
		
		.ws--C, 
		.ws--B, 
		.ws--A {
			--w__gridOffsetLeft: 2;
			--w__gridOffsetRight: -2;
		}
		
	.flow > * + * {
		margin-top: var(--flow, 0.7em);
	}
	
	@media (min-width: 48em) {
		.ws--A {
			--w__gridOffsetLeft: 2;
			--w__gridOffsetRight: -2;
		}
		 
		.ws--C, 
		.ws--B {
			--w__gridOffsetLeft: 3;
			--w__gridOffsetRight: -3;
		}
	}
	
	@media (min-width: 65em) {
		.ws--C {
			--w__gridOffsetLeft: 4;
			--w__gridOffsetRight: -4;
		}
	}
	
	@media (min-width: 90em) {
		:root {
			--w__gridGap: 1em;
			--w__gridColumn: 100px;
		}
		
		.w {
			grid-template-columns: 
				1fr 
				repeat(12, minmax(1em, var(--w__gridColumn))) 
				1fr;
		}
	}
}







@layer base {
	html {
		font-family: var(--family3);
		font-size: var(--size0);
		line-height: 156%;
	}
	
	[id] {
		scroll-margin-top: var(--header-height, 8em);
	}

	body {
		font-family: var(--family3);
		font-weight: var(--font-weight__paragraph);
		font-size: var(--font-size__paragraph);
		line-height: var(--line-height__paragraph);
	}

	h1, h2, h3, h4 {
		font-family: var(--family2);
		leading-trim: both;
		text-edge: cap;
	}

	.text-h1, 
	h1 {
		font-weight: var(--font-weight__h1);
		font-size: var(--font-size__h1);
		line-height: var(--line-height__h1);
	}
	
	h1 {
		margin-bottom: var(--s40); 
	}

	.text-h2,
	h2 {
		font-weight: var(--font-weight__h2);
		font-size: var(--font-size__h2);
		line-height: var(--line-height__h2);
	}
	
	h2 {
		margin-bottom: var(--s20); 
	}

	.text-h3,
	h3 {
		font-weight: var(--font-weight__h3);
		font-size: var(--font-size__h3);
		line-height: var(--line-height__h3);
	}

	h4 {
		font-size: var(--sizeh4);
		line-height: 125%;
	}
	
	a {
		text-decoration: none;
		color: currentColor;
		
		transition: color .3s;
	}

	a.b {
		text-decoration: none;
	}

	.b {
		--paddingInline: 1.5em;
		--paddingBlock: 0.32em;
		
		display: inline-block;
		background-color: transparent;
		border: 0;
		
		transition: 
			color .3s, 
			border-color .3s,
			background-color .3s,
			box-shadow .3s;
		cursor: pointer;
	}

	.b--primary {
		padding: var(--paddingBlock) var(--paddingInline);
		
		font-family: var(--family2);
		font-weight: var(--font-weight__button);
		font-size: var(--font-size__button);
		line-height: var(--line-height__button);
		
		text-transform: uppercase;
		border-radius: 40px;
		color: var(--color__black);
		border: 1px solid var(--color__black);
		background-color: var(--color__white);
	}
	
		.b--primary:hover {	
			background-color: var(--color__yellow--light);
		}
	
	.b--small {
		font-family: var(--font-family__rethink-bold);
		font-weight: var(--font-weight__newsletter-button);
		font-size: var(--font-size__small-button);
		line-height: var(--line-height__small-button);
	}
	
	.b:has(.icon) {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}
	
	.b--plain {
		font-size: var(--size1);
		text-transform: uppercase;
		line-height: 1;
		font-weight: var(--weight__bold);
		color: var(--color__black);
	}
	
	
	.b--option {
		padding: 0.55em 1.5em;
		
		border-radius: 10px;
		color: var(--color__black);
		border: 1px solid var(--color__black);
		background-color: var(--color__white);
		line-height: 1;
		font-weight: var(--weight__normal);
	}
	
	.b--shadow {
		box-shadow: var(--shadow__blue);
	}
	
		.b--shadow:hover {
			box-shadow: var(--shadow__blue--hover);
		}
	
	.b--shadowRed {
		box-shadow: var(--shadow__red);
	}
	
	.b--option:hover {
		background-color: var(--color__yellow--light);
	}
	
	.b--option:active {
		background-color: var(--color__white);
	}
	
	.b--dot {
		overflow: hidden;
		position: relative;
		padding-left: calc(var(--paddingInline) * 1.5);
		padding-right: calc(var(--paddingInline) * 1.5);
	}
	
		.b--dot span {
			position: relative;
			z-index: 2;
		}
		
		.b--dot::after {
			position: absolute;
			left: calc(var(--paddingInline) / 3);
			top: 50%;
			transform: translateY(-50%);
			width: 12px;
			height: 12px;
			z-index: 1;
			
			
			content: "";
			border-radius: 50%;
			background-color: currentColor;
			
			transition: transform .7s ease-in-out;
		}
		
		.b--karierci::after {
			background-color: var(--color__violet);
		}
		
		.b--zaposlovalci::after {
			background-color: var(--color__yellow);
		}
		
		.b--izobrazevalci::after {
			background-color: var(--color__red);
		}
		
		.b--poklici::after {
			background-color: var(--color__blue);
		}
		
		.b--dot:hover {
			background-color: var(--color__white);
		}
		
		.b--dot.active::after, 
		.b--dot:hover::after {
			transform: scale(35);
		}
		
	@media (min-width: 65em) {
		:root {
			--header-height: 16em;
		}
	}
}


.header {
	position: sticky;
	top: 0;
	z-index: 100;
	
	padding: var(--s15) 0;
	
	background-color: var(--color__white);
}

	.header .ws__inner {
		display: flex; 
		align-items: center;
		justify-content: space-between;
	}

.header__logo {
	width: 100px;
}

	.header__logo img {
		height: auto;
	}







#nav ul {
	list-style: none;
	display: flex;
	gap: var(--spacing-2);
	padding: 0;
	
	font-weight: var(--font-weight__menu);
	font-size: var(--font-size__menu);
	line-height: var(--line-height__menu);
	text-transform: uppercase;
}

#nav ul a {
	overflow: hidden;
	position: relative;
	display: inline-block;
	padding: 0.45em 0.8em;
	
	border-radius: 40px;
	text-decoration: none;
	color: var(--color__black); 
}

	#nav ul a:after {
		position: absolute;
		left: 0;
		top: 50%;
		width: 1em;
		height: 1em;
		z-index: -1;
		transform: translateY(-50%) scale(1);
		
		background-color: hsla(var(--hslColor__white) / 0);
		transition: background-color .3s, transform .5s ease-in-out;
		
		content: "";
	}

#nav ul li.active a:after, 
#nav ul a:hover:after {
	transform: translateY(-50%) scale(20);
	background-color: var(--color__yellow);
}





#btnMenu {	
	position: relative;
	
	width: 2.5rem;
	aspect-ratio: 1;
	
	transition: transform .3s ease-in-out, background-color .3s;
}

	#btnMenu:hover {
	}
	
	#btnMenu:hover::after {
		top: 25%;
	}

	#btnMenu:hover:before {
		top: 75%;
	}
	
	

#btnMenu span, 
#btnMenu:before, 
#btnMenu::after {
	position: absolute;
	
	left: 50%;
	transform: translate(-50%, -50%);
	transform-origin: 50% 50%;
	
	width: 80%;
	height: 3px;
	
	background-color: var(--color__black);
	content: "";
	
	transition: top .3s, transform .6s;
}

	#btnMenu span {
		opacity: 1;
		transition: opacity .3s;
	}

	#btnMenu::after {
		top: 30%;
	}

	#btnMenu:before {
		top: 70%;
	}

#btnMenu[aria-expanded="true"] {
	transform: rotate(-180deg);
	transition: transform .6s ease-in-out, background-color .3s;
}

	#btnMenu[aria-expanded="true"] span {
		opacity: 0;
	}

	#btnMenu[aria-expanded="true"]:hover {
	}

	#btnMenu[aria-expanded="true"]::after {
		top: 50%;
		transform: translate(-50%, -50%) rotate(45deg);
	}

	#btnMenu[aria-expanded="true"]:before {
		top: 50%;
		transform: translate(-50%, -50%) rotate(-45deg);
	}

.footer {
	padding-top: var(--s20);
	padding-bottom: var(--s20);
}

.footer__logo {
	width: 100px;
}

.footer__contacts {
	--flow: var(--s20);
}

.footer nav {
	margin-top: var(--s20);
}

.footer .ws + .ws {
	margin-top: var(--s40);
}

.footer nav ul {
	display: flex;
	gap: var(--s20);
	flex-wrap: wrap;
	
	list-style: none;
	padding: 0;
	text-transform: uppercase;
	font-weight: 700;
}

	.footer nav a:hover {
		color: var(--color__violet);
	}

.input__group--email {
	margin-top: var(--s15);
}

.copyright {
	font-weight: 700;
}

.footer__nl {
	margin-top: var(--s40);
}

.sm {
	display: flex;
	gap: var(--spacing1);
}

.sm a {
	display: inline-block;
	width: 40px;
	aspect-ratio: 1;
	overflow: hidden;
	
	border-radius: 50%;
	border: 1px solid var(--color__black);
	background-color: var(--color__white);
	box-shadow: var(--shadow__blue);
	
	transition: background-color .5s;
}

	.sm a:hover {
		background-color: var(--color__yellow--light);
	}







.hScrl {
	display: flex;
	gap: var(--spacing1);
	justify-content: flex-start;
	
	padding-bottom: var(--s40);
	
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; 
	scroll-behavior: smooth; 
	-webkit-overflow-scrolling: touch;
	
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.hScrl > * {
	flex: 0 0 auto;
	
	scroll-snap-align: start;
	scroll-snap-stop: always;
} 


.accordion details summary::-webkit-details-marker {
	display: none;
}

.accordion details summary {
	list-style: none;
}


.e404 {
	--flow: var(--spacing2);
	
	display: flex;
	flex-direction: column;
	align-items: center;
	
	padding-top: var(--spacing2);
	text-align: center;
}

.e404 h1 {
	--flow: var(--spacing1);
	font-size: 6em;
	font-weight: var(--weight__normal);
}

.e404 h3 {
	margin-top: var(--spacing);
}



@layer theme {
	.theme {
		padding-top: var(--theme--spacing);
		padding-bottom: var(--theme--spacing);
	}

	.theme--yellow {
		background: var(--color__yellow--light);
	}

	.theme--yellow h1, 
	.theme--yellow h2 {
		color: var(--color__violet);
	}
	
	.theme--blueg {
		background: var(--gradient1);
	}
	
	.theme--white h1 {
		color: var(--color__violet);
	}
	
	
}

 .novice footer {
	margin-top: var(--s40);
}











@layer widgets {
	.videoEmbed { 
		position: relative;
		
		width: 220px; 
		max-width: var(--youtubeEmbedWidth, 16em);
		aspect-ratio: var(--videoRatio, 16 / 9); 
		overflow: hidden;
		
		border-radius: 0.8em;
		box-shadow: var(--shadow__blue);
	}

	.videoEmbed__iframe {
		width: 100%; 
		height: 100%; 
		border: 0;
	}
	
	.videoEmbed .videoEmbed__play {
		position:absolute;
		left:50%;
		top:50%;
		transform:translate(-50%,-50%);
		
		width:68px;
		height:48px;
		
		border:0;
		border-radius:8px;
		background:rgba(0,0,0,.6);
		cursor: pointer;
	}
	
		.videoEmbed__cover img {
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
	
	.wKartica {
		--innerPadding: var(--spacing-1);
		
		position: relative;
		display: inline-block;
		aspect-ratio: 20 / 35;
		max-width: 190px;
		
		background-color: transparent;
		box-shadow: var(--shadow__blue);
		border-radius: 0.5rem;
	}
	

	
	a.wKartica {
		text-decoration: none;
	}
	
	.wKartica__cover {
		object-fit: cover;
		width: 100%;
		height: 100%;
		border-radius: 0.5rem;
	}
	
	.wKartica__badge {
		position: absolute;
		top: var(--s10);
		right: var(--s10);
		
		width: 50px;
	}
	
	.wKartica__name {
		--flow: 5px;
		
		position: absolute;
		top: 60%;
		left: var(--innerPadding);
		width: max-content;
		
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		max-width: 80%;
		
		text-align: left;
	}
	
	.wKartica__name:has(.b) {
		bottom: var(--innerPadding);
	}		
	
	.wKartica__name h2 {
		margin-bottom: 0 !important; 
		font-family: var(--family2);
		color: var(--color__white);
		font-weight: var(--font-weight__card-career-name);
		font-size: var(--font-size__card-career-name);
		line-height: var(--line-height__card-career-name);
	}
	
	.wKartica__name p {
		font-family: var(--family3);
		font-weight: var(--font-weight__card-career-title);
		font-size: var(--font-size__card-career-title);
		line-height: var(--line-height__card-career-title);
	}
	
	.wKartica__more {
		position: absolute;
		bottom: var(--s10);
		left: 50%;
		transform: translateX(-50%);
		white-space: nowrap;
	}
	
	.wKartica__podjetje,
	.wKartica__izjava, 
	.wKartica__name > * {
		display: inline-block;
		padding: 7px;
		
		border-radius: 0.5rem;
		background-color: var(--color__violet);
		color: #fff;
		
		font-weight: var(--font-weight__card-career-title);
		font-size: var(--font-size__card-career-title);
		line-height: var(--line-height__card-career-title);
	}
	
	
	.wKartica__podjetje {
		position: absolute;
		top: var(--spacing1);
		left: calc(var(--spacing1) * -1);
		transform: rotate(-5deg);
		max-width: 11em;
		
		line-height: 1.2;
	}
	
	.wKartica__izjava {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translate(70%, -49%) rotate(5deg);
		max-width: 13em;
	}
	
	
	
	.wNewsEntry {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		
		text-align: left;
		text-decoration: none;
		color: currentColor;
		border: 1px solid var(--color__black);
		border-radius: 0.5rem;
		box-shadow: var(--shadow__blue);
		background-color: var(--color__white);
		
		transition: box-shadow .3s, background-color .3s !important;
	}
	
		.wNewsEntry:hover {
			background-color: var(--color__yellow--light); 
			box-shadow: var(--shadow__blue--hover);
		}
	
	.wNewsEntry__cover {
		aspect-ratio: 5 / 3;
		min-height: 0;
	}
	
	.wNewsEntry__cover img {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	
	.wNewsEntry h3 {
		color: var(--color__violet);
		font-size: var(--font-size__card-title);
		line-height: var(--line-height__card-title);
		
		min-height: calc(2 * 1.5em); 
		
		-webkit-line-clamp: 2;
		overflow: hidden;
		-webkit-box-orient: vertical;
		display: -webkit-box;
	}
	
	.wNewsEntry__details {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: var(--s10);
		min-height: 5em;
	}
	
	.wNewsEntry__tags {
		text-align: right;
	}
	
	.wNewsEntry__info {
		--flow: var(--s10);
		
		display: flex;
		flex-direction: column;
		
		padding: 0 var(--s10) var(--s10) var(--s10);
	}
	
	.wNewsEntry__info p {
		-webkit-line-clamp: 4;
		overflow: hidden;
		-webkit-box-orient: vertical;
		display: -webkit-box;
		
		font-size: var(--font-size__card-text);
		line-height: var(--line-height__card-text);
	}
	
	.wNewsEntry__info .b {
		align-self: flex-end;
		
		font-size: var(--font-size__card-text);
		line-height: var(--line-height__card-text);
		font-weight: 700;
	}
	
	.wNewsEntry__info .b .icon {
		width: 1.5em;
	}
	
	
	.wNews {
		position: relative;
		
		text-align: center;
		background-image: url("/images/background__blue.avif");
		background-repeat: no-repeat;
		background-position: 30% -20vw;
		background-size: 90vw;
	}

	.wNews h2 {
		color: var(--color__violet);
	}
	
	.wNews h3 {
	}

	.wNews__list {
		margin-top: var(--s20);
	}
	
	.wNews__list .swiper {
		padding-top: var(--120) !important; 
		padding-bottom: var(--s20) !important; 
		padding-right: var(--s20) !important; 
	}
	
	
	.wNewsEntry--related h3 {
		min-height: 0;
	} 
	
	.wNewsEntry--related .wNewsEntry__details  {
		min-height: 0;
		padding-bottom: 0;
	}
	
	.wNewsEntry--related time,
	.wNewsEntry--related .wNewsEntry__tags {
		font-size: var(--font-size__card-meta-text);
		line-height: var(--line-height__card-meta-text);
	} 
	
	.wKarierci {
		grid-column-end: -1;
	}
	
	@media (min-width: 65em) {
		.wKartica {
			--innerPadding: var(--spacing1);
		}
	
		.wNews {
			background-position: right 10vw bottom -30vw;
			background-size: 70vw;
		}
		
		.videoEmbed { 
			width: 270px; 
		}
		
		.wKartica {
			position: relative;
			display: inline-block;
			aspect-ratio: 20 / 35;
			max-width: 260px;
		}
		
		.wKartica__more {
			bottom: var(--s25);
		}
	}
}





 
.layout1 {
	padding-bottom: var(--theme--spacing);
	
	background-image: 
		url("/images/background__blue.avif"), 
		url("/images/background__blue.avif");

	background-repeat: no-repeat, no-repeat;
	background-position: 30% -20vw, right bottom -40vw
	background-size: 90vw, 80vw;
	background-attachment: scroll, scroll;
	/* background-origin: content-box; */
}

.layout1--red {
	background-image: url("/images/background__red.avif"), url("/images/background__red.avif");
}

.layout1 header {
	position: relative;
	text-align: center;
}

.layout1__icon {
	position: absolute;
	right: 0;
	/* top: var(--theme--spacing); */
	top: 0;
	
	width: clamp(3em, 10vw, 7em)
}


.checkmarks {
	text-align: left;
}

.checkmarks li {
	display: flex;
	gap: var(--spacing-2);
	align-items: center;
}

.checkmarks li > img {
	width: 1.3em;
	/* transform: translateY(0.4em); */
}

.layout2 {
	margin-top: var(--spacing2);
	margin-bottom: var(--spacing2);
	
	text-align: left;
}

.layout2--columns > div:first-child {
	margin-bottom: var(--spacing-1);
	flex: 1 0 auto;
	
}

.layout2--columns > div:first-child img {
	display: inline-block;
	
}

.layout3 {
	display: flex;
	flex-direction: column;
	gap: var(--s15);
}

.layout3__break {
	display: none;
}

.layout3__one {
	text-align: center;
}

.layout3__one img {
	display: inline-block;
}

form {
	accent-color: var(--color__violet);
}


fieldset {
	padding: 0;
	border: 0;
}

form.was-validated input:invalid {
	border-color: red !important;
}

form.was-validated .input__group--checkbox:has(:invalid) {
	outline: 1px solid red;
	outline-offset: 0.2em;
}


.form__status {
	display: none;
}

.form__status--error {
	display: block;
	color: red;
}

.form__status--success {
	display: block;
	color: green;
}

.input__group--checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
}

.input__group--checkbox input {
	margin-top: 0.3em;
}


#newsletterSignup input[type="email"] {
	width: 100%;
	padding: 0.3em 0;
	
	border: 0;
	border-bottom: 2px solid var(--color__black);
}

#newsletterSignup .input__group--checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	margin-top: var(--spacing-1);
	margin-bottom: var(--spacing-1);
}

#newsletterSignup .input__group--checkbox input {
	margin-top: 0.4em;
	margin-left: auto;
}

#newsletterSignup .input__group--checkbox label {
	font-weight: var(--font-weight__card-text);
	font-size: var(--font-size__card-text);
	line-height: var(--line-height__card-text);
}

#newsletterSignup input[type="checkbox"] {
	margin-right: 0.5em;
}

#newsletterSignup button {
	display: block;
	margin-left: auto;
	margin-top: var(--s15);
}




	
@media (max-width: 65em) {
	.header__logo, 
	#btnMenu {
		z-index: 110;
	}
	
	#nav:not([hidden]) {
		transform: translateX(0);
		transition: transform .5s ease-in-out;
	}
	
	#nav {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 100;
		transform: translateX(105%);
		
		display: flex;
		justify-content: center;
		
		width: 100%;
		padding-top: 7em;
		padding-bottom: 2em;
		
		background-color: var(--color__white);
		text-align: left; 
		
		transition: transform .3s;
	}
	
	#nav ul {
		display: inline-flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s15);
	}
}

@media (min-width: 30em) {
	.footer__nl nav ul {
		flex-direction: row;
	}
}

@media (min-width: 48em) {
	.layout1 {
		background-position: 30% -30vw, right bottom -30vw;
		background-size: 70vw, 70vw;
	}
	
	.layout1__icon {
		top: var(--theme--spacing);
	}
	
	.layout2--columns {
		display: flex;
		gap: var(--spacing1);
		justify-content: center;
	}
	
	.layout2--columns > div {
		flex: 1;
	}
	
	.layout2--columns > div:first-child {
		flex: 1;
		margin-bottom: 0; 
		text-align: right;
	}

	.footer__contacts {
		grid-column-end: 7;
	}
	
	
	
	.footer__nl {
		grid-column-start: 7;
		margin-top: 0;
		align-self: end;
	}

	.footer__nl nav ul {
		flex-direction: column;
	}
	
	.wNewsEntry__details {
		padding: var(--s20);
		font-size: var(--font-size__card-meta-text);
		line-height: var(--line-height__card-meta-text);
	}
	
	.wNewsEntry__info {
		--flow: var(--s20);
		padding: 0 var(--s20) var(--s20) var(--s20);
	}
	
	.layout3 {
		display: inline-flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		gap: var(--s15) var(--s40);
		margin-bottom: var(--s40);
		max-width: 48em;
		text-align: left;
	}
	
	.layout3__break {
		order: 2;
		display: block;
		flex-basis: 100%;
	}
	
	.layout3__two {
		order: 1;
	}
	
	.layout3__one {
		order: 3;
	}
	
	.layout3__three {
		order: 4;
	}
	
	
	
	
}

@media (min-width: 65em) {
	:root {
		/* 1.2a BUTTONS (GUMBI) */
		--font-size__menu: 18px;
		--line-height__menu: 24px;
		--font-size__button: 20px;
		--line-height__button: 26px;
		--font-size__small-button: 14px;
		--line-height__small-button: 18px;

		/* 1.2b HEADINGS, TEXTS (NASLOVI, TEKSTI) */
		--font-size__h1: 38px;
		--line-height__h1: 44px;
		--font-size__h2: 28px;
		--line-height__h2: 32px;
		--font-size__h3: 22px;
		--line-height__h3: 28px;
		--font-size__paragraph: 18px;
		--line-height__paragraph: 26px;

		/* 1.2c CATEGORY CARD (KARTICA KATEGORIJE)*/
		--font-size__card-category-number: 60px;
		--line-height__card-category-number: 30px;
		--font-size__card-category-title: 24px;
		--line-height__card-category-title: 26px;
		--font-size__card-category-text: 17px;
		--line-height__card-category-text: 22px;

		/* 1.2d CAREER CARD (KARTICA KARIERCI) */
		--font-size__card-career-name: 26px;
		--line-height__card-career-name: 30px;
		--font-size__card-career-title: 14px;
		--line-height__card-career-title: 16px;

		/* 1.2e NEWS, ENERGUS, QUOTE CARD, ETC. */
		--font-size__card-title: 16px;
		--line-height__card-title: 20px;
		--font-size__card-text: 14px;
		--line-height__card-text: 20px;
		--font-size__card-meta-text: 12px;
		--line-height__card-meta-text: 14px;
		
		--theme--spacing: var(--s80);
	}
	
	h1 {
		margin-bottom: var(--s60); 
	}
	
	h2 {
		margin-bottom: var(--s40); 
	}
	
	.header {
		position: sticky;
		top: 0;
		padding: var(--s40) 0;
		
		background-color: hsla(var(--hslColor__white) / 0.7);
		backdrop-filter: blur(10px)
	}
	
	#btnMenu {
		display: none;
	}
	
	.wKartica__badge {
		top: var(--s15);
		right: var(--s15);
		width: 66px;
	}
	
	
	
	.header__logo {
		width: 180px;
	}
	
	.hScrl {
		gap: var(--s40);
	}
	
	.wNews__list {
		margin-top: var(--s60);
		margin-bottom: var(--s40);
	}
	
	.b--dot::after {
		width: 20px;
		height: 20px;
	}
	
	.footer {
		padding-top: var(--s40);
		padding-bottom: var(--s40);
	}
	
	.footer .ws + .ws {
		margin-top: var(--s60);
		gap: var(--s60);
	}
	
	.footer .ws:last-child {
		display: flex;
		justify-content: space-between;
	}
	
	.footer nav {
		margin-top: 0;
	}
	
	.sm a {
		width: 50px;
	}
	
	.footer__logo {
		width: 180px;
	}
}

@media (min-width: 75em) {
	#nav ul {
		gap: var(--s15);
	}
	
	.layout1 {
		background-position: 30% -20vw, right bottom -30vw; 
		background-size: 60vw, 60vw;
	}
	
	.footer__nl nav ul {
		flex-direction: row;
	}
}

@media (min-width: 90em) {
	#nav ul {
		gap: var(--s40);
	}
}