/**
 * Interaktivna sekcija simptoma raka dojke
 * Shortcode: [simptomi_dojke]
 *
 * .elips-top-pink definiran je globalno u temi.
 */

.bs-symptoms {
	--bs-bg: #f4c0d7;
	--bs-accent: #D51451;
	--bs-text: #171717;
	--bs-control-size: 44px;
	position: relative;
	isolation: isolate;
	background: var(--bs-bg);
	color: var(--bs-text);
	padding-bottom: 55px;

	/*
	 * Reže samo eventualni horizontalni višak slike.
	 * Okomiti overflow ostaje vidljiv, pa žena može izlaziti iznad sekcije,
	 * a .elips-top-pink::before ostaje potpuno vidljiv.
	 */
	overflow-x: clip;
	overflow-y: visible;
}

/*
 * Grid služi za raspored teksta i rezervaciju prostora za sliku.
 * Figura je na desktopu apsolutna, pa gornji padding sadržaja ne utječe na nju.
 */
.bs-symptoms__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(300px, 640px) minmax(430px, 510px);
	grid-template-areas:
		"intro media-space"
		"interactive media-space";
	align-content: center;
	justify-content: center;
	column-gap: clamp(0px, 3vw, 40px);
	row-gap: clamp(0px, 3.2vw, 48px);
	width: min(1181px, calc(100% - 48px));
	min-height: clamp(610px, 48vw, 720px);
	margin-inline: auto;
	padding-block: clamp(72px, 6vw, 100px);
}

.bs-symptoms__intro {
	grid-area: intro;
	align-self: end;
	min-width: 0;
	max-width: 100%;
}

.bs-symptoms__title, .elementor-kit-6 h2.bs-symptoms__title {
	margin: 0 0 clamp(20px, 2vw, 30px);
	font-size: clamp(28px, 3.65vw, 56px);
	font-weight: 400;
	font-style: italic;
	line-height: 60px;
	letter-spacing: -0.035em;
}

.bs-symptoms__content {
	font-size: clamp(17px, 1vw, 21px);
	line-height: 34px;
	letter-spacing: 0;
	max-width: 512px;
}

.bs-symptoms__content > :first-child {
	margin-top: 0;
}

.bs-symptoms__content > :last-child {
	margin-bottom: 0;
}

.bs-symptoms__interactive {
	grid-area: interactive;
	align-self: start;
	min-width: 0;
	max-width: 430px;
}

.bs-symptoms__slides {
	display: grid;
	min-height: 112px;
	overflow: hidden;
}

.bs-symptoms__slide {
	grid-area: 1 / 1;
	min-width: 0;
	visibility: hidden;
	pointer-events: none;
}

.bs-symptoms__slide.is-active {
	visibility: visible;
	pointer-events: auto;
}

/* Naslov: samo fade. */
.bs-symptoms__slide-title {
	margin: 0 0 6px;
	color: var(--bs-accent);
	font-size: clamp(1rem, 1.15vw, 36px) !important;
	font-weight: 700 !important;
	font-style: italic;
	line-height: 1.3;
	opacity: 0;
	transition: opacity 260ms ease;
}

.bs-symptoms__slide.is-active .bs-symptoms__slide-title {
	opacity: 1;
}

/* Opis: ulazak s desne strane. */
.bs-symptoms__slide-description {
	margin: 0;
	font-size: clamp(1rem, 1.35vw, 36px);
	font-style: italic;
	line-height: 100%;
	opacity: 0;
	transform: translateX(34px);
	transition:
		opacity 340ms ease,
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bs-symptoms__slide.is-active .bs-symptoms__slide-description {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 60ms;
}

.bs-symptoms__controls {
	display: flex;
	align-items: center;
	gap: 10px;
	
}

.bs-symptoms__button {
	display: inline-grid;
	place-items: center;
	width: var(--bs-control-size);
	height: var(--bs-control-size);
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition:
		background-color 160ms ease,
		transform 160ms ease;
	-webkit-tap-highlight-color: transparent;
}

.bs-symptoms__button-icon {
	display: block;
	width: 18px;
	height: 18px;
	object-fit: contain;
	pointer-events: none;
	transition: filter 160ms ease;
}

.bs-symptoms__button:hover {
	background: var(--bs-text);
}

.bs-symptoms__button:hover .bs-symptoms__button-icon {
	filter: invert(1);
}

.bs-symptoms__button:active {
	transform: scale(0.96);
}

.bs-symptoms__button:focus-visible {
	outline: 3px solid rgba(231, 37, 99, 0.45);
	outline-offset: 3px;
}

/*
 * Desktop: slika je izvan normalnog flowa i sidrena je za dno sekcije.
 * Figura nosi stvarnu širinu slike, pa nema dodatnog prelijevanja slike iz media wrappera.
 */
.bs-symptoms__figure {
	position: absolute;
	right: clamp(-80px, -4vw, -28px);
	bottom: clamp(-50px, -6.5vw, -4px);
	z-index: 3;
	width: min(58vw, 700px);
	margin: 0;
	pointer-events: none;
}

.bs-symptoms__media {
	position: relative;
	width: 100%;
}

img.bs-symptoms__person,
.bs-symptoms__person {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

.bs-symptoms__overlay {
	position: absolute;
	left: var(--bs-overlay-x, 52%);
	top: var(--bs-overlay-y, 34%);
	display: block;
	width: var(--bs-overlay-width, 26%);
	max-width: none;
	height: auto;
	transform:
		translate(-50%, -50%)
		rotate(var(--bs-overlay-rotation, 0deg));
	transform-origin: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 240ms ease,
		visibility 0s linear 240ms;
}

.bs-symptoms__overlay.is-active {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* Pozicije se po potrebi fino podešavaju prema finalnim SVG datotekama. */
.bs-symptoms__overlay--1,
.bs-symptoms__overlay--2,
.bs-symptoms__overlay--3,
.bs-symptoms__overlay--4 {
	--bs-overlay-x: 49%;
	--bs-overlay-y: 51%;
	--bs-overlay-width: 280px;
	--bs-overlay-rotation: 0deg;
}

.bs-symptoms__admin-notice {
	padding: 12px 16px;
	border-left: 4px solid #d63638;
	background: #fff;
	color: #1d2327;
}

/* Manji desktop i tablet landscape. */
@media (max-width: 1100px) {
	.bs-symptoms__inner {
		grid-template-columns: minmax(280px, 46%) minmax(340px, 54%);
		column-gap: clamp(20px, 3vw, 40px);
		width: min(calc(100% - 36px), 980px);
		min-height: clamp(570px, 58vw, 650px);
		padding-block: 68px 144px;
	}

	.bs-symptoms__figure {
		right: clamp(-70px, -5vw, -26px);
		bottom: -18px;
		width: min(62vw, 620px);
	}

	.bs-symptoms__overlay--1,
	.bs-symptoms__overlay--2,
	.bs-symptoms__overlay--3,
	.bs-symptoms__overlay--4 {
		--bs-overlay-width: clamp(210px, 25vw, 260px);
	}
}

/*
 * Portrait tablet i mobitel:
 * slika se vraća u normalan flow kako bi bila cijela i jasno vidljiva pri dnu.
 */
@media (max-width: 820px) {
	.bs-symptoms {
		/* Figura više ne izlazi iznad sekcije, ali horizontalna zaštita ostaje. */
		overflow-x: clip;
		overflow-y: visible;
	}

	.bs-symptoms__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"intro"
			"interactive"
			"figure";
		row-gap: clamp(26px, 5vw, 38px);
		width: min(calc(100% - 32px), 620px);
		min-height: 0;
		padding-block: clamp(88px, 16vw, 118px) 0;
	}

	.bs-symptoms__intro,
	.bs-symptoms__interactive {
		max-width: none;
	}

	.bs-symptoms__title {
		font-size: clamp(2.125rem, 8vw, 3.5rem);
	}

	.bs-symptoms__content {
		max-width: 54ch;
	}

	.bs-symptoms__slides {
		min-height: 104px;
	}

	.bs-symptoms__figure {
		grid-area: figure;
		position: relative;
		right: auto;
		bottom: auto;
		width: min(100%, 520px);
		margin: 0 auto;
		pointer-events: none;
		margin-top: -100px !important;
	}

	img.bs-symptoms__person,
	.bs-symptoms__person {
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	.bs-symptoms__overlay--1,
	.bs-symptoms__overlay--2,
	.bs-symptoms__overlay--3,
	.bs-symptoms__overlay--4 {
		--bs-overlay-x: 50%;
		--bs-overlay-y: 51%;
		--bs-overlay-width: clamp(180px, 43vw, 230px);
		width: 207px;
	}
}
@media (max-width: 820px) and (min-width: 601px){
	.bs-symptoms__figure {
		margin-top: -130px !important;
		height: 700px;
		width: 760px;
		overflow: hidden;
	}
	.bs-symptoms__overlay--1, .bs-symptoms__overlay--2, .bs-symptoms__overlay--3, .bs-symptoms__overlay--4 {
		width: 307px;
	}
}

@media (max-width: 600px) {
	.bs-symptoms__inner {
		width: min(calc(100% - 28px), 540px);
		row-gap: 26px;
	}

	.bs-symptoms__figure {
		/* Malo veća figura, ali bez izlaska iz širine viewporta. */
		width: min(100%, 470px);
	}
	.bs-symptoms__title, .elementor-kit-6 h2.bs-symptoms__title {
		line-height: 1.2;
	}
}

@media (max-width: 480px) {
	.bs-symptoms {
		--bs-control-size: 46px;
	}

	.bs-symptoms__inner {
		row-gap: 64px;
		width: calc(100% - 24px);
		padding-top: clamp(82px, 22vw, 106px);
	}

	.bs-symptoms__title {
		margin-bottom: 18px;
		font-size: 28px;
		line-height: 1;
	}

	.bs-symptoms__content {
		font-size: 17px;
		line-height: 26px;
	}

	.bs-symptoms__slides {
		min-height: 120px;
	}

	.bs-symptoms__slide-title {
		font-size: 21px !important;
	}

	.bs-symptoms__slide-description {
		font-size: 21px !important;
		transform: translateX(24px);
	}

	.bs-symptoms__controls {
		margin-top: 18px;
	}

	.bs-symptoms__figure {
		width: 100%;
		margin-top: -110px !important;
		right: -50px;
	}

	.bs-symptoms__overlay--1,
	.bs-symptoms__overlay--2,
	.bs-symptoms__overlay--3,
	.bs-symptoms__overlay--4 {
		--bs-overlay-width: clamp(165px, 36vw, 220px);
		--bs-overlay-x: 49%;
		--bs-overlay-y: 50%;
		width: 149px;
	}
}

@media (max-width: 360px) {
	.bs-symptoms__inner {
		width: calc(100% - 20px);
	}

	.bs-symptoms__title {
		font-size: 1.9rem;
	}

	.bs-symptoms__slide-description {
		font-size: 1rem;
	}
}

@media (hover: none) {
	.bs-symptoms__button:hover {
		background: transparent;
	}

	.bs-symptoms__button:hover .bs-symptoms__button-icon {
		filter: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bs-symptoms__overlay,
	.bs-symptoms__slide-title,
	.bs-symptoms__slide-description,
	.bs-symptoms__button,
	.bs-symptoms__button-icon {
		transition: none;
	}

	.bs-symptoms__slide-description {
		transform: none;
	}
}