/* Restoran Tagliata — ponude za slavlja (/vjencanja/, /proslave/)
 *
 * MOTIV: tiskana menu-kartica sa stola. Uski list toplog papira, dvostruki okvir,
 * verzalni naziv slijeda, tilda „~" med slijedovima (vlasnik ju sam koristi kao
 * razdjelnik u svojim dokumentima).
 *
 * Boje i pisma su tokeni iz projektnog DESIGN.md. Papirnati tonovi su jedina
 * dopuna — zapisani su tamo pod „Ponude za slavlja".
 */

.kd-ponude {
	/* papir — jedina dopuna osnovnoj skali, vidi DESIGN.md */
	--kd-papir: #faf8f3;
	--kd-papir-rub: #e2dbcb;
	--kd-ploha: var(--awb-color2, #d6d6d6);

	--kd-tinta: var(--awb-color8, #000000);
	--kd-tinta-tiha: #6d6456;
	--kd-zlato: var(--awb-color4, #bda16b);

	--kd-list: 46rem;   /* sirina lista — oko 68 znakova */
	--kd-uski: 38rem;   /* sirina uvodnog teksta */

	--kd-r1: .5rem;
	--kd-r2: 1rem;
	--kd-r3: 1.75rem;
	--kd-r4: 3rem;
	--kd-r5: 5rem;

	margin: 0;
	color: var(--kd-tinta);
}

/* Avada stupcu daje padding; ovdje ga gasimo da plohe idu do ruba */
.kd-ponude {
	margin-inline: calc(-1 * var(--awb-content-padding, 0px));
}

/* ---------------------------------------------------------------- uvod */

.kd-ponude .kd-uvod {
	max-width: var(--kd-uski);
	margin-inline: auto;
	padding: var(--kd-r5) var(--kd-r2) var(--kd-r4);
	text-align: center;
}

.kd-ponude .kd-nadnaslov {
	margin: 0 0 var(--kd-r2);
	font-family: "Work Sans", Arial, Helvetica, sans-serif;
	font-size: .8125rem;
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--kd-tinta-tiha);
}

.kd-ponude .kd-uvod__naslov {
	margin: 0 0 var(--kd-r3);
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.05;
}

.kd-ponude .kd-uvod__naslov::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 1px;
	margin: var(--kd-r3) auto 0;
	background: var(--kd-zlato);
}

.kd-ponude .kd-uvod__tekst {
	margin: 0 0 var(--kd-r2);
	font-size: 1.0625rem;
	line-height: 1.75;
}

/* kazalo — redci, ne kartice */

.kd-ponude .kd-sadrzaj {
	margin-top: var(--kd-r4);
	text-align: left;
	border-top: 1px solid var(--kd-papir-rub);
}

.kd-ponude .kd-sadrzaj__stavka {
	display: flex;
	gap: var(--kd-r2);
	align-items: baseline;
	justify-content: space-between;
	padding: .875rem .25rem;
	border-bottom: 1px solid var(--kd-papir-rub);
	color: inherit;
	text-decoration: none;
	transition: padding-left .2s ease, background-color .2s ease;
}

.kd-sadrzaj__stavka:hover,
.kd-ponude .kd-sadrzaj__stavka:focus-visible {
	padding-left: .75rem;
	background: rgba(189, 161, 107, .1);
}

.kd-ponude .kd-sadrzaj__ime {
	flex: 0 0 auto;
	font-family: "Work Sans", Arial, Helvetica, sans-serif;
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.kd-ponude .kd-sadrzaj__opis {
	flex: 1 1 auto;
	font-size: .9375rem;
	line-height: 1.4;
	text-align: right;
	color: var(--kd-tinta-tiha);
}

/* ---------------------------------------------------------------- listovi */

.kd-ponude .kd-listovi {
	padding: var(--kd-r5) var(--kd-r2);
	background: var(--kd-ploha);
}

.kd-ponude .kd-list {
	max-width: var(--kd-list);
	margin-inline: auto;
	background: var(--kd-papir);
	border: 1px solid var(--kd-papir-rub);
}

.kd-ponude .kd-list + .kd-list {
	margin-top: var(--kd-r5);
}

/* unutarnja zlatna vlas — tak izgleda tiskana menu-kartica */
.kd-ponude .kd-list__okvir {
	padding: var(--kd-r5) var(--kd-r4);
	border: 1px solid rgba(189, 161, 107, .6);
	margin: .625rem;
	text-align: center;
}

.kd-ponude .kd-list__glava {
	margin-bottom: var(--kd-r4);
}

.kd-ponude .kd-list__nadpis {
	margin: 0 0 var(--kd-r2);
	font-family: "Work Sans", Arial, Helvetica, sans-serif;
	font-size: .75rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--kd-zlato);
}

.kd-ponude .kd-list__ime {
	margin: 0;
	font-size: clamp(2.25rem, 6vw, 3.25rem);
	line-height: 1;
}

.kd-ponude .kd-list__godina {
	margin: .75rem 0 0;
	font-family: "Work Sans", Arial, Helvetica, sans-serif;
	font-size: .75rem;
	letter-spacing: .2em;
	color: var(--kd-tinta-tiha);
}

.kd-ponude .kd-slijed + .kd-slijed {
	margin-top: var(--kd-r3);
}

.kd-ponude .kd-slijed__ime {
	margin: 0 0 var(--kd-r2);
	font-family: "Work Sans", Arial, Helvetica, sans-serif;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .2em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--kd-tinta-tiha);
}

.kd-ponude .kd-jela {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kd-ponude .kd-jela li {
	margin: 0 auto .5rem;
	max-width: 34rem;
	font-size: 1.0625rem;
	line-height: 1.55;
}

.kd-ponude .kd-jela li:last-child {
	margin-bottom: 0;
}

/* razdjelnik slijedova — vlasnikova tilda iz dokumenata */
.kd-ponude .kd-tilda {
	margin: var(--kd-r3) 0;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--kd-zlato);
	letter-spacing: .5em;
	text-indent: .5em;
}

.kd-ponude .kd-list__noga {
	margin-top: var(--kd-r4);
	padding-top: var(--kd-r2);
	border-top: 1px solid var(--kd-papir-rub);
}

.kd-ponude .kd-list__noga p {
	margin: 0;
	font-size: .875rem;
	font-style: italic;
	line-height: 1.6;
	color: var(--kd-tinta-tiha);
}

/* ---------------------------------------------------------------- uključeno */

.kd-ponude .kd-ukljuceno {
	max-width: var(--kd-list);
	margin-inline: auto;
	padding: var(--kd-r5) var(--kd-r2);
}

.kd-ponude .kd-ukljuceno__naslov {
	margin: 0 0 var(--kd-r3);
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	text-align: center;
}

.kd-ponude .kd-ukljuceno__popis {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: var(--kd-r4);
	border-top: 1px solid var(--kd-papir-rub);
}

.kd-ponude .kd-ukljuceno__popis li {
	break-inside: avoid;
	padding: .6875rem 0;
	border-bottom: 1px solid var(--kd-papir-rub);
	font-size: .9375rem;
	line-height: 1.5;
}

.kd-ponude .kd-ukljuceno__napomena {
	margin: var(--kd-r3) 0 0;
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--kd-tinta-tiha);
}

/* ---------------------------------------------------------------- citat */

.kd-ponude .kd-citat {
	max-width: var(--kd-uski);
	margin: 0 auto;
	padding: var(--kd-r5) var(--kd-r2);
	text-align: center;
}

.kd-ponude .kd-citat blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.kd-ponude .kd-citat blockquote p {
	margin: 0;
	font-family: "Bebas Neue", Arial, Helvetica, sans-serif;
	font-size: clamp(1.5rem, 4vw, 2rem);
	line-height: 1.2;
}

.kd-ponude .kd-citat figcaption {
	margin-top: var(--kd-r2);
	font-family: "Work Sans", Arial, Helvetica, sans-serif;
	font-size: .75rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--kd-tinta-tiha);
}

/* ---------------------------------------------------------------- kraj */

.kd-ponude .kd-kraj {
	max-width: var(--kd-uski);
	margin-inline: auto;
	padding: var(--kd-r4) var(--kd-r2) var(--kd-r5);
	text-align: center;
	border-top: 1px solid var(--kd-papir-rub);
}

.kd-ponude .kd-kraj__tekst {
	margin: 0 0 var(--kd-r2);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.kd-ponude .kd-kraj__podaci {
	margin: 0 0 var(--kd-r3);
	font-family: "Work Sans", Arial, Helvetica, sans-serif;
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--kd-tinta-tiha);
}

.kd-ponude .kd-kraj__tocka {
	margin: 0 .5rem;
	color: var(--kd-zlato);
}

.kd-ponude .kd-tel {
	color: var(--kd-tinta);
	text-decoration: none;
	border-bottom: 1px solid var(--kd-zlato);
	padding-bottom: 2px;
	transition: color .2s ease, border-color .2s ease;
}

.kd-tel:hover,
.kd-ponude .kd-tel:focus-visible {
	color: var(--kd-zlato);
}

.kd-ponude .kd-kraj__gumb {
	margin: 0;
}

.kd-ponude .kd-gumb {
	display: inline-block;
	padding: .8125rem 1.8125rem;
	border: 1px solid var(--awb-color3, #bebdbd);
	background: var(--awb-color1, #fff);
	color: var(--kd-tinta);
	font-family: "Work Sans", Arial, Helvetica, sans-serif;
	font-size: .9375rem;
	letter-spacing: 1px;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.kd-gumb:hover,
.kd-ponude .kd-gumb:focus-visible {
	background: var(--kd-tinta);
	border-color: var(--kd-tinta);
	color: var(--awb-color1, #fff);
}

.kd-ponude a:focus-visible {
	outline: 2px solid var(--kd-zlato);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------- ulaz pri skrolu
 * Sadrzaj se NIKAD ne skriva iz CSS-a — klasu `kd-skriven` dodaje JS, i to samo
 * onome sto je ispod prvog zaslona. Bez JS-a je sve vidljivo, samo bez animacije.
 */

.kd-ponude .kd-skriven {
	opacity: 0;
	transform: translateY(1.25rem);
}

.kd-ponude [data-ulaz] {
	transition: opacity .6s ease, transform .6s ease;
}

@media (prefers-reduced-motion: reduce) {
	.kd-ponude .kd-skriven {
		opacity: 1;
		transform: none;
	}
	.kd-ponude *,
	.kd-ponude *::before,
	.kd-ponude *::after {
		transition-duration: .01ms !important;
	}
}

/* ---------------------------------------------------------------- uze širine */

@media (max-width: 48rem) {
	.kd-ponude {
		--kd-r5: 3rem;
		--kd-r4: 2rem;
	}

	.kd-ponude .kd-uvod {
		padding-inline: 1rem;
	}

	.kd-ponude .kd-list__okvir {
		padding: var(--kd-r4) 1.25rem;
		margin: .5rem;
	}

	.kd-ponude .kd-listovi {
		padding-inline: 1rem;
	}

	.kd-ponude .kd-sadrzaj__stavka {
		display: block;
	}

	.kd-ponude .kd-sadrzaj__opis {
		display: block;
		margin-top: .25rem;
		text-align: left;
	}

	.kd-ponude .kd-ukljuceno__popis {
		columns: 1;
	}

	/* centriran odlomak preko pet redaka se tesko cita — na uskom ide lijevo,
	   naslovi ostaju centrirani */
	.kd-ponude .kd-uvod__tekst,
	.kd-ponude .kd-kraj__tekst {
		text-align: left;
	}
}

/* ---------------------------------------------------------------- fotografije
 * Fotografija stoji kao otisak polozen uz karticu: ravan rub, bez sjene i bez
 * zaobljenja. Dimenzije su u HTML-u, pa se raspored ne pomice dok se ucitava.
 */

.kd-ponude .kd-foto {
	max-width: var(--kd-list);
	margin: 0 auto;
	padding: var(--kd-r4) var(--kd-r2) 0;
	text-align: center;
}

.kd-ponude .kd-foto--uska {
	max-width: 24rem;
}

.kd-ponude .kd-foto img {
	display: block;
	width: 100%;
	height: auto;
	border: .5rem solid var(--kd-papir);
	outline: 1px solid var(--kd-papir-rub);
	outline-offset: -.5rem;
}

.kd-ponude .kd-foto figcaption {
	margin-top: .875rem;
	font-size: .8125rem;
	font-style: italic;
	line-height: 1.6;
	color: var(--kd-tinta-tiha);
}

/* kad fotografija stoji med listovima, lezi na sivoj plohi */
.kd-ponude .kd-listovi .kd-foto {
	padding-top: var(--kd-r5);
}

/* ---------------------------------------------------------------- jela s cijenom
 * Na a la carte jelovniku jelo i cijena stoje u istom retku, povezani tockicama,
 * kak se tiska u restoranu. Tockice su CSS, ne znakovi — ne citaju se naglas.
 */

.kd-ponude .kd-jela--cijene li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem;
	max-width: none;
	text-align: left;
	margin-bottom: .75rem;
}

.kd-ponude .kd-jela--cijene .kd-jelo__ime {
	flex: 0 1 auto;
}

.kd-ponude .kd-jela--cijene .kd-jelo__crte {
	flex: 1 1 2rem;
	min-width: 1.5rem;
	align-self: center;
	height: 1px;
	background-image: radial-gradient(circle, var(--kd-papir-rub) 1px, transparent 1px);
	background-size: 6px 1px;
	background-repeat: repeat-x;
}

.kd-ponude .kd-jela--cijene .kd-jelo__cijena {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.kd-ponude .kd-jela--cijene .kd-jelo__opis {
	flex: 1 0 100%;
	font-size: .875rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--kd-tinta-tiha);
}

/* ---------------------------------------------------------------- česta pitanja
 * List pitanja, bez harmonike: sve je odmah vidljivo. Hijerarhija iz crta i
 * razmaka, ne iz kutija.
 */

.kd-ponude .kd-pitanja {
	max-width: var(--kd-list);
	margin-inline: auto;
	padding: 0 var(--kd-r2) var(--kd-r4);
	border-top: 1px solid var(--kd-papir-rub);
}

.kd-ponude .kd-pitanje {
	padding: var(--kd-r3) 0;
	border-bottom: 1px solid var(--kd-papir-rub);
}

.kd-ponude .kd-pitanje__naslov {
	margin: 0 0 .5rem;
	font-size: 1.5rem;
	line-height: 1.25;
}

.kd-ponude .kd-pitanje__odgovor {
	margin: 0;
	max-width: 42rem;
	font-size: 1rem;
	line-height: 1.75;
}