/**
 * Cafe Lyon menüükaardid — esiotsa paigutus.
 *
 * Visuaalse identiteedi (osade päisepildid, kirjastiilid, värvid) annab teema
 * style.css. Siin on ainult menüü enda paigutus.
 *
 * Struktuur, mida see fail eeldab (renderdaja: cafelyon-menu.php):
 *
 *   .fdm-menu
 *     .fdm-section.fdm-sectionid-N
 *       .fdm-section-header.{slug}      <- teema taustapilt, täislaiuses
 *       .container > .row > .col-*
 *         .fdm-section.fdm-section-items
 *           .fdm-item[.fdm-item-has-image][.fdm-item-has-price]   <- ISE flex-rida
 *             img.fdm-item-image
 *             .fdm-item-body
 *               p.fdm-item-title
 *               span.fdm-item-price
 *               p (kirjeldus)
 *     .fdm-menu-footer
 */

.fdm-menu,
.fdm-section {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- veeru laius -------------------------------------------------------------
   Asendab Bootstrapi `container > row > col-lg-6.col-lg-offset-3.col-md-8...`
   ahela, mida oli iga osa kohta KAKS (kokku 6 diva). Murdepunktid ja laiused on
   mõõdetud vana paigutuse pealt, et välimus ei muutuks:
       >=1200px  sisu 555px     992-1199  sisu 617px
       768-991   sisu 720px     <768      sisu = ekraan - 30px             */

/* Bänner peab pealkirja marginaali endas hoidma. Ilma selleta "kukub" h2
   ülemine marginaal bännerist välja ja päise kohale jääb 20px valget triipu —
   varem hoidis seda Bootstrapi `.row`. */
.fdm-section-header {
	overflow: hidden;
}

.fdm-section-inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 585px;
	margin: 0 auto;
	padding-left: 15px;
	padding-right: 15px;
}

@media (max-width: 1199px) {
	.fdm-section-inner { max-width: 647px; }
}

@media (max-width: 991px) {
	.fdm-section-inner { max-width: 750px; }
}

@media (max-width: 767px) {
	.fdm-section-inner { max-width: none; }
}

/* --- osade vahed ------------------------------------------------------------
   Üks reegel: hingamisruum tuleb ainult `.fdm-section-items` polstrist, sama
   ülal ja all. Osade endi vahel marginaali ei ole, muidu jääks bänneri alla üks
   vahe ja järgmise bänneri kohale teine. */

.fdm-menu > .fdm-section {
	margin-bottom: 0 !important;
}

.fdm-section-items {
	/* Sisemine ümbris kannab ka klassi `fdm-section`, seega teema
	   `.fdm-menu .fdm-section { margin-bottom: 1em }` lisaks siia 14px. */
	margin-bottom: 0 !important;
	/* Ainult püst-polster; külgpolstri annab .fdm-section-inner. */
	/* SAMA väärtus kui roogade vahel (.fdm-item + .fdm-item). Px, mitte em:
	   teema baaskiri ei ole täisarv, seega 1.5em andis 21,1px ja 2em 28,2px —
	   murdpiksel tegi vahed 21 ja 22 vaheldumisi. */
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}

/* --- roog -------------------------------------------------------------------
   `.fdm-item` ISE on flex-rida: pilt vasakul, tekst kõrval. Eraldi `panel`- ja
   `content`-ümbriseid ega `clearfix`i ei ole vaja — viimane oli ujuva paigutuse
   jäänuk ja ujuvaid elemente siin enam ei ole. */

.fdm-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	/* !important, sest teema style.css:1938 paneb siia 1.5em. Vahe roogade
	   vahele tuleb allpool `+`-reeglist — nii ei jää viimase järele midagi rippu. */
	margin: 0 !important;
}

.fdm-item + .fdm-item {
	margin-top: 20px !important;
}

.fdm-item p {
	margin: 0 0 0.5em;
}

.fdm-item p:last-child {
	margin-bottom: 0;
}

.fdm-item .fdm-item-title {
	font-weight: bold;
}

.fdm-item-image {
	/* 100, mitte 110: 110 ei jaga ühtegi olemasolevat lõiget. 100px pesa =
	   200px lõige 2x-ekraanil, täpselt. */
	width: 100px;
	height: 100px;
	box-sizing: border-box;
	object-fit: cover;
	flex: none;
}

.fdm-item-body {
	flex: 1;
	min-width: 0;
}


/* --- hind ------------------------------------------------------------------- */

.fdm-item-price {
	position: absolute;
	top: 0;
	right: 0;
	width: 20%;
	text-align: right;
	white-space: nowrap;
}

.fdm-item-has-price p {
	padding-right: 22%;
}

/* --- jalus ------------------------------------------------------------------ */

.fdm-menu-footer {
	margin-top: 2.5em;
	padding-top: 1.8em;
	border-top: 1px dashed #c9c2b6;
	font-size: 85%;
	font-style: italic;
}

.fdm-menu-footer p {
	margin: 0 0 2em;
	text-align: center;
}

/* --- kitsad ekraanid --------------------------------------------------------
   Pilt üle rea laiuse, hind teksti kohale. */

@media (max-width: 450px) {

	.fdm-item {
		display: block;
	}

	.fdm-item-image {
		width: 100%;
		height: auto;
		margin-bottom: 1em;
	}

	.fdm-item-has-price p {
		padding-right: 0;
	}

	.fdm-item-price {
		position: static;
		display: block;
		width: auto;
		text-align: left;
		margin-bottom: 0.5em;
		white-space: normal;
	}

}