/* ==========================================================================
   Stran terapevta — mobilni sloj
   Vir: dizajn/Terapevt.html (Claude Design artboard, 480 px)
   Primerjava: dizajn/current on page/ (posnetek produkcije)

   Glava, izvlečni meni, klicna vrstica in noga so v css/mobile-global.css in
   veljajo povsod; ta datoteka jih predpostavlja kot podlago in od tam podeduje
   spremenljivke --dz-*.

   Markup mobilnih sekcij izpiše inc/mobile-terapevt.php. Namizna dvostolpična
   postavitev ostane nedotaknjena — na ozkem zaslonu jo skrijemo, na širokem pa
   skrijemo mobilne bloke. Tako nobena od obeh ne nosi kompromisov druge.
   ========================================================================== */

/* Mobilni bloki so privzeto skriti; prižge jih medijski pogoj spodaj. */
.fizk-tp {
	display: none;
}


@media only screen and (max-width: 767px) {

	body.single-terapevt {
		background: #ffffff;
		overflow-x: hidden;
	}

	/* --- Namizna postavitev na mobilnem odpade ---
	   Skupno pasico prevzame .fizk-tp-hero, levi stolpec (slika, ime, naziv,
	   kontakti) pa je v celoti prenesen v mobilne bloke. */
	body.single-terapevt #pxl-page-title-elementor,
	body.single-terapevt #pxl-content-main .elementor-col-33 {
		display: none !important;
	}

	/* Bloki morajo teči čez celo širino ne glede na to, koliko roba ima
	   ovoj vsebine v temi. */
	body.single-terapevt .fizk-tp {
		display: block;
		width: 100vw;
		margin-left: calc(50% - 50vw);
	}

	/* Vsebinski stolpec: brez mreže in robov namizja. */
	body.single-terapevt #pxl-content-main > .elementor-container,
	body.single-terapevt #pxl-content-main .row,
	body.single-terapevt #pxl-content-main .pxl-content-area,
	body.single-terapevt #pxl-content-main .elementor-section > .elementor-container,
	body.single-terapevt #pxl-content-main .elementor-col-66,
	body.single-terapevt #pxl-content-main .elementor-col-66 > .elementor-widget-wrap {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	body.single-terapevt #pxl-content-main {
		padding: 0 !important;
	}

	/* Tema doda 20 px zgoraj in 120 px spodaj; pasica se mora dotikati glave,
	   drsnik ekipe pa noge. */
	body.single-terapevt #pxl-main {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}


	/* ======================================================================
	   1. Temna pasica
	   ====================================================================== */

	body.single-terapevt .fizk-tp-hero {
		background: var(--dz-temna);
		color: #ffffff;
		padding: 24px var(--dz-rob) 0;
		/* Brez tega negativni rob slike ne skrajša pasice, ampak se prelije
		   navzven (združevanje robov) — previs bi ostal na temnem. */
		display: flow-root;
		/* Bela sekcija sledi in bi previs slike prekrila s svojim ozadjem. */
		position: relative;
		z-index: 2;
	}

	body.single-terapevt .fizk-tp-hero__pot {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 7px;
		font-size: 11.5px;
		font-weight: 700;
		letter-spacing: 0.8px;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.75);
	}

	body.single-terapevt .fizk-tp-hero__pot a {
		color: var(--dz-zelena-svetla);
		text-decoration: none;
	}

	body.single-terapevt .fizk-tp-hero__pot span[aria-hidden] {
		color: rgba(255, 255, 255, 0.35);
	}

	body.single-terapevt .fizk-tp-hero__ime {
		margin: 14px 0 0;
		font-size: 30px;
		line-height: 1.2;
		font-weight: 800;
		letter-spacing: -0.4px;
		color: #ffffff;
		text-wrap: pretty;
	}

	body.single-terapevt .fizk-tp-hero__naziv {
		display: inline-block;
		margin-top: 10px;
		padding: 6px 14px;
		border: 1px solid rgba(143, 191, 165, 0.4);
		border-radius: 999px;
		background: rgba(143, 191, 165, 0.15);
		color: var(--dz-zelena-svetla);
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 0.5px;
	}

	/* Fotografija sega 80 px čez rob pasice v belo sekcijo. */
	body.single-terapevt .fizk-tp-hero__slika {
		margin: 18px 0 -80px;
		position: relative;
	}

	body.single-terapevt .fizk-tp-hero__slika img {
		display: block;
		width: 100%;
		height: 240px;
		object-fit: cover;
		object-position: top;
		border-radius: 20px;
		background: #dcebe1;
	}


	/* ======================================================================
	   2. Predstavitev
	   ====================================================================== */

	body.single-terapevt .fizk-tp-intro {
		background: #ffffff;
		/* 80 px previsa slike + 28 px do nadnaslova. */
		padding: 108px var(--dz-rob) 44px;
	}

	body.single-terapevt .fizk-tp-nadnaslov {
		margin: 0;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 2.2px;
		line-height: 1.4;
		text-transform: uppercase;
		color: var(--dz-zelena);
	}

	body.single-terapevt .fizk-tp-naslov {
		margin: 10px 0 0;
		font-size: 24px;
		line-height: 1.3;
		font-weight: 700;
		letter-spacing: -0.3px;
		color: var(--dz-tekst);
		text-wrap: pretty;
	}

	body.single-terapevt .fizk-tp-opis {
		margin: 14px 0 0;
		font-size: 14.5px;
		line-height: 1.7;
		color: var(--dz-tekst-mehki);
	}

	/* --- Gumba --- */

	body.single-terapevt .fizk-tp-gumbi {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-top: 20px;
	}

	body.single-terapevt .fizk-tp-gumb {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		border-radius: 999px;
		font-size: 12px;
		font-weight: 800;
		line-height: 1;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		text-decoration: none;
	}

	body.single-terapevt .fizk-tp-gumb--polni {
		padding: 14px 24px;
		background: var(--dz-zelena);
		color: #ffffff;
	}

	body.single-terapevt .fizk-tp-gumb--obroba {
		padding: 13px 22px;
		border: 1px solid var(--dz-obroba-zelena);
		background: #ffffff;
		color: var(--dz-tekst);
	}

	/* --- Kartici s podatki --- */

	body.single-terapevt .fizk-tp-kartice {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-top: 22px;
	}

	body.single-terapevt .fizk-tp-kartica {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 14px 16px;
		border: 1px solid var(--dz-obroba);
		border-radius: 14px;
		background: var(--dz-kartica);
		text-decoration: none;
	}

	body.single-terapevt .fizk-tp-kartica svg {
		flex: none;
	}

	body.single-terapevt .fizk-tp-kartica p {
		margin: 0;
		font-size: 13px;
		line-height: 1.6;
		color: var(--dz-tekst-mehki);
	}

	body.single-terapevt .fizk-tp-kartica:first-child p {
		font-size: 13.5px;
		font-weight: 700;
		color: var(--dz-tekst);
	}

	body.single-terapevt .fizk-tp-kartica strong {
		font-weight: 800;
		color: var(--dz-tekst);
	}


	/* ======================================================================
	   3. Vsebina profila (življenjepis, izkušnje, izobraževanja, znanja)

	   Dizajn teh razdelkov ne prikazuje, a so del strani in se pri izpolnjenem
	   profilu izpišejo. Oblikujemo jih v istem jeziku, namesto da bi jih
	   skrivali. Če je stolpec prazen, ne zavzame prostora.
	   ====================================================================== */

	body.single-terapevt #pxl-content-main .elementor-col-66:not(:has(*)) {
		display: none;
	}

	body.single-terapevt #pxl-content-main .elementor-col-66 .elementor-widget {
		margin: 0 0 18px !important;
		padding: 0 var(--dz-rob) !important;
	}

	body.single-terapevt #pxl-content-main .elementor-col-66 .pxl-item--title,
	body.single-terapevt #pxl-content-main .elementor-col-66 .pxl-heading--text {
		font-size: 20px !important;
		line-height: 1.3 !important;
		font-weight: 800 !important;
		letter-spacing: -0.3px !important;
		color: var(--dz-tekst) !important;
	}

	body.single-terapevt #pxl-content-main .elementor-col-66 p,
	body.single-terapevt #pxl-content-main .elementor-col-66 li {
		font-size: 14.5px !important;
		line-height: 1.7 !important;
		color: var(--dz-tekst-mehki) !important;
	}

	/* Predloga v svojem <style> vsili h2 30 px in h3 26 px — na 390 px je to
	   preveč. */
	body.single-terapevt #pxl-content-main h2 {
		font-size: 22px !important;
	}

	body.single-terapevt #pxl-content-main h3 {
		font-size: 20px !important;
	}


	/* ======================================================================
	   4. Ostali člani ekipe — vodoravni drsnik

	   Kartice so naše, ne Swiperjeve, zato drsnik ne potrebuje razgradnje in
	   ne more obtičati.
	   ====================================================================== */

	body.single-terapevt .fizk-tp-ekipa {
		background: var(--dz-svetla);
		padding: 44px 0 52px;
	}

	body.single-terapevt .fizk-tp-ekipa__glava {
		padding: 0 var(--dz-rob);
	}

	body.single-terapevt .fizk-tp-ekipa .fizk-tp-naslov {
		font-size: 23px;
	}

	body.single-terapevt .fizk-tp-proga {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		scroll-padding-left: var(--dz-rob);
		touch-action: pan-x pinch-zoom;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		padding: 20px var(--dz-rob) 6px;
	}

	body.single-terapevt .fizk-tp-proga::-webkit-scrollbar {
		display: none;
	}

	body.single-terapevt .fizk-tp-clan {
		flex: 0 0 180px;
		width: 180px;
		max-width: 180px;
		scroll-snap-align: start;
		padding: 10px 10px 14px;
		border-radius: 18px;
		background: #ffffff;
		box-shadow: var(--dz-senca);
		text-decoration: none;
		color: var(--dz-tekst);
	}

	body.single-terapevt .fizk-tp-clan img,
	body.single-terapevt .fizk-tp-clan__brez {
		display: block;
		width: 100%;
		height: 180px;
		object-fit: cover;
		object-position: top;
		border-radius: 12px;
		background: #dcebe1;
	}

	body.single-terapevt .fizk-tp-clan__ime {
		margin: 12px 4px 0;
		font-size: 15px;
		font-weight: 800;
		letter-spacing: -0.2px;
		line-height: 1.3;
	}

	body.single-terapevt .fizk-tp-clan__naziv {
		margin: 3px 4px 0;
		font-size: 12px;
		font-weight: 600;
		line-height: 1.4;
		color: var(--dz-zelena);
	}
}