/**
 * Services – šablon stranice Services (page-services.php)
 *
 * Oslanja se na home-new.css (tipografija .home-new-hero__title / __text, CSS varijable).
 * Hero ovde nema pozadinsku sliku – posebna geometrija i boje teksta.
 */

/*
 * Razmak između sekcija (ispod heroa): .services-page-section
 * — desktop: padding-bottom 120px
 * — max-width 767px: 70px
 */

/* Sticky meni (body.services-page-sticky-nav postavlja functions.php) */
.services-page-sticky-nav .home-new-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background-color: var(--color-secondary);
}

/* Hero: bez slike; __stage drži min-visinu 476px */
.services-page-hero {
	box-sizing: border-box;
	background-color: var(--color-secondary);
}

.services-page-hero__stage {
	min-height: 476px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.services-page-hero__wrap {
	width: 100%;
}

.services-page-hero__inner {
	max-width: 791px;
	width: 100%;
	text-align: left;
}

/* Na home hero tekst je svetao (preko slike); ovde tamna tipografija na svetloj podlozi */
.services-page-hero .home-new-hero__title,
.services-page-hero .home-new-hero__text {
	color: var(--color-primary);
}

.services-page-hero .home-new-hero__title {
	font-size: 6rem;
	margin: 0 0 30px;
}

.services-page-hero .home-new-hero__text {
	margin: 0;
	max-width: 717px;
	line-height: 20px;
}

.services-page-hero__title strong {
	font-weight: var(--font-weight-bold);
}

.services-page-hero__lead strong {
	font-weight: var(--font-weight-bold);
}

/* Sekcije ispod heroa – isti donji razmak (vidi komentar na vrhu fajla) */
.services-page-section {
	padding-bottom: 120px;
}

.services-page-section .home-new-container {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/* Our Expertise: dve kolone (naslov | pasusi), kao home-new our_interior */
.services-expertise__inner {
	display: flex;
	align-items: flex-start;
	padding-left: 0;
	padding-right: 0;
}

.services-expertise__col-title {
	width: 420px;
	flex-shrink: 0;
}

.services-expertise__col-prose {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	margin-left: auto;
	display: flex;
	justify-content: flex-end;
}

.services-expertise__prose {
	max-width: 630px;
	width: 100%;
	box-sizing: border-box;
	/* Isto kao .services-page-hero .home-new-hero__text: veličina + line-height po breakpointu. */
	font-size: 1.8rem;
	line-height: 20px;
}

.services-expertise__prose p {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	font-size: 1em;
	line-height: inherit;
	color: var(--color-primary);
	margin: 0 0 1.5rem;
}

.services-expertise__prose p:last-child {
	margin-bottom: 0;
}

.services-expertise__prose strong {
	font-weight: var(--font-weight-semibold);
}

/*
 * Our Expertise – h2 kao home-new our_interior (clamp, ::after, strong semibold).
 */
.services-expertise__title {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	font-size: clamp(2.9rem, 4.5vw, 5.6rem);
	line-height: var(--line-height-h2);
	color: var(--color-primary);
	margin: 0;
}

.services-expertise__title::after {
	content: '';
	display: block;
	width: 195px;
	height: 1px;
	background: var(--color-primary);
	margin-top: 30px;
}

.services-expertise__title strong {
	font-weight: var(--font-weight-semibold);
}

/* Our Workflow: naslov kao Our Expertise | pasus 586px, 260px razmak kolona */
.services-workflow__inner {
	display: grid;
	grid-template-columns: max-content 260px minmax(0, 1fr);
	align-items: start;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

.services-workflow__col-title {
	grid-column: 1;
}

.services-workflow__col-title .services-expertise__title {
	white-space: nowrap;
}

.services-workflow__col-body {
	grid-column: 3;
	width: 586px;
	max-width: 100%;
	box-sizing: border-box;
}

.services-workflow__lead {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-primary);
	margin: 0;
}

.services-workflow__lead strong {
	font-weight: var(--font-weight-bold);
}

.services-workflow__tagline {
	font-family: var(--font-primary);
	font-size: 20px;
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
	color: var(--color-primary);
	margin: 30px 0 0;
}

/* Pet koraka ispod Our Workflow: 64px ispod bloka sa pasusom */
.services-workflow-steps {
	margin-top: 64px;
	width: 100%;
	box-sizing: border-box;
}

.services-workflow-steps__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	width: 100%;
	box-sizing: border-box;
}

.services-workflow-step {
	border-left: 1px solid #000;
	box-sizing: border-box;
	min-width: 0;
}

.services-workflow-step__surface {
	height: 347px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 30px 12px 20px 16px;
	cursor: default;
	background-color: transparent;
	color: var(--color-primary);
	transition:
		background-color 0.4s ease,
		color 0.4s ease;
}

.services-workflow-step__number {
	display: block;
	font-family: var(--font-primary);
	font-size: 56px;
	font-weight: var(--font-weight-bold);
	line-height: 1;
	letter-spacing: -0.02em;
	transition: color 0.4s ease;
}

.services-workflow-step__footer {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.services-workflow-step__title {
	font-family: var(--font-primary);
	font-size: 24px;
	font-weight: var(--font-weight-semibold);
	line-height: 1.2;
	margin: 0;
	max-width: 100%;
	transition:
		color 0.4s ease,
		transform 0.4s ease;
	transform: translateY(0);
}

.services-workflow-step__body {
	margin: 0;
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: var(--font-weight-regular);
	line-height: 1.45;
	color: #fff;
	max-width: 100%;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition:
		opacity 0.45s ease,
		max-height 0.45s ease;
	pointer-events: none;
}

.services-workflow-step:hover .services-workflow-step__surface,
.services-workflow-step:focus-within .services-workflow-step__surface {
	background-color: #000;
	color: #fff;
}

.services-workflow-step:hover .services-workflow-step__number,
.services-workflow-step:focus-within .services-workflow-step__number {
	color: #fff;
}

.services-workflow-step:hover .services-workflow-step__title,
.services-workflow-step:focus-within .services-workflow-step__title {
	color: #fff;
	transform: translateY(-10px);
}

.services-workflow-step:hover .services-workflow-step__body,
.services-workflow-step:focus-within .services-workflow-step__body {
	opacity: 1;
	max-height: 12em;
	pointer-events: auto;
}

.services-workflow-step:focus-visible {
	outline: none;
}

.services-workflow-step:focus-visible .services-workflow-step__surface {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.services-workflow-step__surface,
	.services-workflow-step__number,
	.services-workflow-step__title,
	.services-workflow-step__body {
		transition-duration: 0.01ms !important;
	}
}

/* How We Work: isti raster kao Our Workflow (naslov | razmak | pasusi + CTA) */
.services-page-section.services-how-we-work {
	padding-bottom: 0;
}

.services-how-we-work__inner {
	display: grid;
	grid-template-columns: 350px 260px minmax(0, 1fr);
	align-items: start;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
	border-bottom: 1px solid var(--color-primary);
	margin-bottom: 70px;
}

.services-how-we-work__col-title {
	grid-column: 1;
}

.services-how-we-work__col-body {
	grid-column: 3;
	width: 586px;
	max-width: 100%;
	box-sizing: border-box;
}

.services-how-we-work__col-body .services-expertise__prose {
	max-width: 100%;
}

.services-how-we-work__cta-wrap {
	margin: 30px 0 120px;
	padding: 0;
}

.services-how-we-work__cta-wrap .home-new-services__btn {
	margin: 0;
}

/* Dve kolone ispod Our Expertise (blok + slika po koloni) */
.services-expertise__offerings {
	padding-bottom: 0;
	box-sizing: border-box;
}

/* Ikonice ispod slika: 120px desktop / 63px mobilni od donje ivice slike */
.services-expertise__icon-strip {
	margin-top: 120px;
	box-sizing: border-box;
}

/*
 * Vizuelno „centar“ cele mreže (kao ~100px sa obe strane), bez menjanja
 * column-gap ni poravnanja sadržaja unutar kolone (i dalje start).
 */
.services-icon-grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, max-content);
	column-gap: 126px;
	row-gap: 2rem;
	align-items: start;
	justify-items: start;
	text-align: left;
	width: max-content;
	box-sizing: border-box;
}

.services-icon-grid__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 33px;
	min-width: 0;
	width: max-content;
	max-width: 100%;
	text-align: left;
}

/* Ista horizontalna ravan za dno ikonica (različite širine po koloni) */
.services-icon-grid__icon-slot {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	min-height: 96px;
	width: 100%;
	box-sizing: border-box;
}

.services-icon-grid__img {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	box-sizing: border-box;
}

.services-icon-grid__item:nth-child(1) .services-icon-grid__img,
.services-icon-grid__item:nth-child(2) .services-icon-grid__img {
	width: 83px;
}

.services-icon-grid__item:nth-child(3) .services-icon-grid__img {
	width: 86px;
}

.services-icon-grid__item:nth-child(4) .services-icon-grid__img {
	width: 78px;
}

.services-icon-grid__item:nth-child(5) .services-icon-grid__img {
	width: 86px;
}

.services-icon-grid__label {
	font-family: var(--font-primary);
	font-size: 2.2rem;
	line-height: 1.2;
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
}

.services-expertise__offerings-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	align-items: flex-start;
	margin-top: 2.5rem;
}

.services-expertise__offering {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-width: 0;
}

/* Jedan blok po koloni: bez home-new „last block“ margine pre slike */
.services-expertise__offering .home-new-services__block {
	margin-bottom: 0;
}

.services-expertise__offering .home-new-services__block:first-of-type {
	margin-top: 0;
}

.services-expertise__offering .home-new-services__block:last-of-type {
	margin-bottom: 0;
}

.services-expertise__offering-img {
	display: block;
	width: 525px;
	max-width: 100%;
	height: auto;
	margin-top: 40px;
	align-self: flex-start;
}

@media (min-width: 800px) {
	/* Druga kolona: slika je desno u grid ćeliji — isti „stub“ za blok teksta da leva ivica naslova = leva ivica slike. */
	.services-expertise__offering:nth-child(2) .home-new-services__block {
		width: 525px;
		max-width: 100%;
		box-sizing: border-box;
		align-self: flex-end;
	}

	.services-expertise__offering:nth-child(2) .services-expertise__offering-img {
		align-self: flex-end;
	}
}

@media (max-width: 799px) {
	.services-expertise__inner {
		flex-direction: column;
		gap: 0;
	}

	.services-expertise__col-title {
		width: 100%;
	}

	.services-expertise__col-prose {
		margin-left: 0;
		display: block;
		flex: 1 1 auto;
		max-width: 100%;
	}

	.services-expertise__prose {
		max-width: none;
	}

	.services-expertise__title {
		margin-bottom: 40px;
	}

	.services-expertise__title::after {
		margin-top: 20px;
	}

	.services-expertise__offerings-grid {
		grid-template-columns: 1fr;
		/* Mobilni / uski ekran: 60px od pasusa do naslova „Interior Design“. */
		margin-top: 60px;
	}

	.services-expertise__icon-strip {
		/* Ispod slika: 60px (desktop ostaje 120px iznad 800px). */
		margin-top: 60px;
	}

	.services-workflow__inner {
		grid-template-columns: 1fr;
	}

	.services-workflow__col-title .services-expertise__title {
		white-space: normal;
	}

	.services-workflow__col-body {
		grid-column: 1;
		width: 100%;
		max-width: none;
	}

	.services-how-we-work__inner {
		grid-template-columns: 1fr;
	}

	.services-how-we-work__col-body {
		grid-column: 1;
		width: 100%;
		max-width: none;
	}

	.services-workflow-steps__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 8px;
		column-gap: 8px;
	}

	/* Bez hovera: pasus uvek čitljiv; nema crne pozadine na tap */
	.services-workflow-step__surface {
		height: auto;
		min-height: 0;
	}

	.services-workflow-step__footer {
		margin-top: 1.25rem;
	}

	.services-workflow-step__body {
		opacity: 1;
		max-height: none;
		overflow: visible;
		pointer-events: auto;
		margin-top: 0.65rem;
		color: var(--color-primary);
		transition: none;
	}

	.services-workflow-step:hover .services-workflow-step__surface,
	.services-workflow-step:focus-within .services-workflow-step__surface {
		background-color: transparent;
		color: var(--color-primary);
	}

	.services-workflow-step:hover .services-workflow-step__number,
	.services-workflow-step:focus-within .services-workflow-step__number {
		color: var(--color-primary);
	}

	.services-workflow-step:hover .services-workflow-step__title,
	.services-workflow-step:focus-within .services-workflow-step__title {
		color: var(--color-primary);
		transform: none;
	}

	.services-workflow-step:hover .services-workflow-step__body,
	.services-workflow-step:focus-within .services-workflow-step__body {
		opacity: 1;
		max-height: none;
		color: var(--color-primary);
	}
}

@media (max-width: 991px) {
	.services-page-hero .home-new-hero__title {
		font-size: 5rem;
	}
}

/* ≤1024px: prelom u dva reda (3 + 2), iste veličine ikonica i teksta kao na širokom desktopu */
@media (max-width: 1024px) {
	.services-icon-grid {
		grid-template-columns: repeat(3, max-content);
		justify-content: center;
		width: 100%;
		max-width: 100%;
		column-gap: 126px;
		row-gap: 2rem;
	}
}

@media (max-width: 767px) {
	.services-page-section {
		padding-bottom: 70px;
	}

	.services-page-section .home-new-container {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.services-page-hero__stage {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.services-page-hero .home-new-hero__title {
		font-size: 4rem;
	}

	.services-page-hero .home-new-hero__text {
		font-size: 1.7rem;
		line-height: 1.45;
	}

	.services-expertise__prose {
		font-size: 1.7rem;
		line-height: 1.45;
	}

	.services-icon-grid {
		grid-template-columns: repeat(2, max-content);
		column-gap: 40px;
		row-gap: 2.5rem;
	}
}

/* tablet/mobil: fleksibilna visina heroa */
@media (max-width: 575px) {
	.services-page-hero__stage {
		min-height: 0;
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}

	.services-page-hero .home-new-hero__title {
		font-size: 3.6rem;
	}
}

/* ≤600px: H1 kao na mobilnom (line-height 34px), manje mesta header–hero i hero–Our Expertise */
@media (max-width: 600px) {
	.services-page-sticky-nav .home-new-header {
		padding: 0.5rem 1rem;
	}

	.services-page-hero .home-new-hero__title {
		font-size: 3.4rem;
		line-height: 34px;
		margin: 0 0 16px;
	}

	.services-page-hero__stage {
		min-height: 0;
		align-items: flex-start;
		padding-top: 0.75rem;
		padding-bottom: 1.25rem;
	}

	/* Fiksni razmak hero → H2 (Our Expertise) */
	.services-page-section.services-expertise {
		padding-top: 70px;
	}
}

/* uski mobilni (isto što i home-new @ 440px): čitljiv naslov i pasus */
@media (max-width: 440px) {
	.services-page-hero__stage {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	.services-page-hero__inner {
		max-width: none;
	}

	.services-page-hero .home-new-hero__title {
		font-size: 3.4rem; /* kao home-new hero na mobilnom */
		margin: 0 0 20px;
	}

	.services-page-hero .home-new-hero__text {
		max-width: none;
		font-size: 1.6rem;
		line-height: 1.5;
	}

	.services-expertise__prose {
		font-size: 1.6rem;
		line-height: 1.5;
	}
}

/* Pun širina, tagline (Red Hat Display) */
.services-page-tagline {
	padding-left: 0;
	padding-right: 0;
}

.services-page-tagline__band {
	width: 100%;
	box-sizing: border-box;
	background-color: #eeede5;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 115px 1.5rem;
}

.services-page-tagline__text {
	font-family: var(--font-primary);
	font-size: 32px;
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
	color: var(--color-primary);
	text-align: center;
	margin: 0;
	max-width: 100%;
}

@media (max-width: 767px) {
	.services-page-tagline__band {
		padding-top: 71px;
		padding-bottom: 71px;
	}

	.services-page-tagline__text {
		max-width: 231px;
		font-size: 24px;
		line-height: 1.25;
	}
}

/* Naslovi pored ikonica (Services stranica): 700, ne home-new black (900) */
.services-expertise__offering .home-new-services__block-title,
.services-page-strengths .home-new-services__block-title {
	font-weight: var(--font-weight-bold);
}

/* Our Strengths: fade-in stagger pri skrolu (200ms između stavki) */
.services-page-strengths .home-new-services__col2 .home-new-services__block,
.services-page-strengths .home-new-services__col2 .home-new-services__line--between {
	opacity: 0;
	transition: opacity 1s ease;
}

.services-page-strengths .home-new-services__col2 .home-new-services__block.is-visible,
.services-page-strengths .home-new-services__col2 .home-new-services__line--between.is-visible {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.services-page-strengths .home-new-services__col2 .home-new-services__block,
	.services-page-strengths .home-new-services__col2 .home-new-services__line--between {
		opacity: 1;
		transition: none;
	}
}

/* Our Strengths: home-new-services layout + slika u levoj koloni (grid desktop) */
.services-page-strengths .services-page-strengths__intro {
	font-size: 16px;
	line-height: var(--line-height-paragraph);
	max-width: 377px;
	width: 100%;
	box-sizing: border-box;
}

/* Ista širina kao pasus ispod naslova (377px desktop) */
.services-page-strengths .services-page-strengths__figure-wrap {
	width: 100%;
	max-width: 377px;
	box-sizing: border-box;
}

.services-page-strengths .services-page-strengths__side-img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 800px) {
	.services-page-strengths .home-new-services__inner {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		gap: 2.5rem;
	}

	.services-page-strengths .home-new-services__col1 {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.services-page-strengths .home-new-services__col2 {
		width: 612px;
		max-width: 100%;
		flex-shrink: 0;
	}

	/* Donja ivica slike u liniji sa poslednjim redom poslednjeg pasusa (bez 45px margine sa home-new). */
	.services-page-strengths .home-new-services__col2 > .home-new-services__block:last-of-type {
		margin-bottom: 0;
	}

	.services-page-strengths .services-page-strengths__figure-wrap {
		margin-top: auto;
	}
}

@media (max-width: 799px) {
	.services-page-strengths .home-new-services__inner {
		display: flex;
		flex-direction: column;
	}

	.services-page-strengths .home-new-services__col1 {
		display: contents !important;
	}

	.services-page-strengths .home-new-services__title {
		order: 1;
	}

	.services-page-strengths .services-page-strengths__intro {
		order: 2;
		max-width: none;
		width: 100%;
	}

	.services-page-strengths .home-new-services__col2 {
		display: flex !important;
		flex-direction: column;
		width: 100% !important;
		max-width: 100%;
		order: 3;
	}

	.services-page-strengths .services-page-strengths__figure-wrap {
		order: 4;
		margin-top: 1.5rem;
		max-width: 100%;
	}
}