/* registrirani lastnosti, da se preliv ob spremembi gladko prikaže/skrije (brez podpore se le preklopi) */
@property --faq-fadeTop {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}

@property --faq-fadeBottom {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}

/* registrirana, da frontend.js dobi višino preliva v px */
@property --faq-fade {
	syntax: '<length>';
	inherits: true;
	initial-value: 72px;
}

@layer blocks {

	.blkCta-faq {
		padding: var(--spacing6);
		border-radius: var(--borderRadius1);
	}


	/* Preliv (maska) je zgoraj in/ali spodaj le, ko je v to smer še kaj vsebine: razreda
	   wFaqCta__list--fadeTop in --fadeBottom nastavlja frontend.js glede na položaj drsnika.
	   Prvi sloj maske je poln pas na desni (--faq-scrollbar), da preliv ne zakrije drsnika. */
	.wFaqCta__list {
		--faq-fadeTop: 0px;
		--faq-fadeBottom: 0px;
		--faq-scrollbar: 20px;

		display: flex;
		flex-direction: column;
		gap: var(--spacing3);

		max-height: var(--faq-h);
		overflow-y: auto;
		padding-right: 0.5em;

		-webkit-mask-image:
			linear-gradient(#000, #000),
			linear-gradient(to bottom, transparent 0, #000 var(--faq-fadeTop), #000 calc(100% - var(--faq-fadeBottom)), transparent 100%);
		mask-image:
			linear-gradient(#000, #000),
			linear-gradient(to bottom, transparent 0, #000 var(--faq-fadeTop), #000 calc(100% - var(--faq-fadeBottom)), transparent 100%);
		-webkit-mask-size: var(--faq-scrollbar) 100%, calc(100% - var(--faq-scrollbar)) 100%;
		mask-size: var(--faq-scrollbar) 100%, calc(100% - var(--faq-scrollbar)) 100%;
		-webkit-mask-position: right top, left top;
		mask-position: right top, left top;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;

		transition:
			--faq-fadeTop 0.3s ease,
			--faq-fadeBottom 0.3s ease;
	}

	.wFaqCta__list--fadeTop {
		--faq-fadeTop: calc(var(--faq-fade) / 2);
	}

	.wFaqCta__list--fadeBottom {
		--faq-fadeBottom: var(--faq-fade);
	}

	.wFaqCta__list::-webkit-scrollbar {
		width: 6px;
		background: transparent;
	}

	.wFaqCta__list::-webkit-scrollbar-track {
		background: transparent;
	}

	.wFaqCta__list::-webkit-scrollbar-thumb {
		background: rgba(0, 0, 0, 0.35);
		border-radius: 999px;
	}

	.wFaqCta__list::-webkit-scrollbar-thumb:hover {
		background: rgba(0, 0, 0, 0.5);
	}

	/* standardni lastnosti samo za brskalnike brez ::-webkit-scrollbar (Firefox); v Chromu in Edgu bi
	   preglasili zgornji videz in drsniku vrnili puščici */
	@supports not selector(::-webkit-scrollbar) {
		.wFaqCta__list {
			scrollbar-width: thin;
			scrollbar-color: rgba(0, 0, 0, 0.35) transparent;
		}
	}


	/* VPRAŠANJA (harmonika): odgovor se odpre v bloku */
	.wFaqCta__item summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--spacing4);

		list-style: none;
		cursor: pointer;
	}

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

	.wFaqCta__item summary::after {
		flex: 0 0 auto;
		width: 0.4em;
		height: 0.4em;
		margin-right: 0.3em;

		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		opacity: 0.4;
		transform: translateY(-0.12em) rotate(45deg);
		transition: transform .3s, opacity .3s;
		content: "";
	}

		.wFaqCta__item summary:hover::after,
		.wFaqCta__item summary:focus-visible::after,
		.wFaqCta__item[open] summary::after {
			opacity: 1;
		}

	.wFaqCta__item[open] summary {
		opacity: 0.6;
	}
	
	.wFaqCta__item[open] summary::after {
		transform: translateY(0.12em) rotate(-135deg);
	}

	.wFaqCta__item summary:focus-visible {
		outline: 3px solid var(--color__white);
		outline-offset: 2px;
	}

	.wFaqCta__answer {
		padding: var(--spacing3) var(--spacing6) 0 0;

		font-size: var(--size__body--small);
	}

	.wFaqCta__answer a:not(.b) {
		color: inherit;
		text-decoration-color: currentColor;
		text-decoration-thickness: 1px;
		text-underline-offset: 3px;
	}

		.wFaqCta__answer a:not(.b):hover {
			text-decoration-color: transparent;
		}

	.wFaqCta__answer figure {
		overflow-x: auto;
	}

	.wFaqCta__answer table {
		width: 100%;
		border-collapse: collapse;
	}

	.wFaqCta__answer th,
	.wFaqCta__answer td {
		padding: var(--spacing2) var(--spacing4) var(--spacing2) 0;
		text-align: left;
		border-bottom: 1px solid hsla(var(--hslColor__white) / 0.3);
	}

	.wFaqCta__answer th {
		font-weight: var(--weight__bold);
	}

	/* Telefoni: zelena podlaga od roba do roba, gumb je pod vprašanji. */
	@media (max-width: 47.99em) {
		.blkCta-faq {
			grid-column: full-start / full-end;
			padding-inline: 0;
			border-radius: 0;
		}

		.blkCta-faq .ws__content {
			display: flex;
			flex-direction: column;
			gap: var(--spacing5);
		}

		.blkCta-faq header {
			display: contents;
		}

		.blkCta-faq header > .bWrap {
			order: 1;
		}
	}

	/* Tablice: ozek stolpec, zato se napis gumba prelomi (sicer ga odreže). */
	@media (min-width: 48em) and (max-width: 64.99em) {
		.blkCta-faq header .b {
			max-width: 100%;
			height: auto;
			min-height: var(--b__height);
			padding: 0.4em var(--spacing3);
			white-space: normal;
		}
	}

	@media (min-width: 48em) {
		/* blok, prikazan prek predloge (ta doda ws--full), je enako širok kot neposredno vstavljen */
		.blkCta-faq.ws--full {
			grid-column: content-start / content-end;
		}

		.blkCta-faq .ws__content {
			display: grid;
			grid-template-columns: subgrid;
		}

		.blkCta-faq header {
			grid-column: 1 / 5;

			display: flex;
			justify-content: space-between;
			flex-direction: column;
			gap: var(--spacing8);

			margin-bottom: 0;
		}

		.wFaqCta__list {
			grid-column: 6 / -1;
		}

		.blkCta-faq {
			min-height: 76vh;
		}
	}

	@media (min-width: 65em) {
		.blkCta-faq {
			--faq-h: 26rem;
			--faq-fade: 8rem;

			padding-block: var(--spacing8);
		}

		.blkCta-faq h2 {
			font-size: var(--size__h1);
		}

		.wFaqCta__list {
			gap: var(--spacing5);
			padding-right: 2em;
		}
	}

}