/* Procedure pages (page-procedure.php): the look of the old ypiresies template. */
.page-wrapper.mm-procedure { padding: 0; }

/* title band: py-4 grey strip, bold uppercase h4 indented ps-4 inside a 1200px container */
.mm-procedure__band { background: #f5f5f5; padding: 24px 0; }
.mm-procedure__wrap { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.mm-procedure__title { margin: 0; padding-left: 24px; font-size: 1.5rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; color: var(--mm-text); }

.mm-procedure__body { padding-top: 3rem; padding-bottom: 3rem; }
.mm-procedure__main::after { content: ""; display: block; clear: both; }
.mm-procedure__main, .mm-procedure__after { padding-left: 1.5rem; padding-right: 1.5rem; }
.mm-procedure__figure { float: right; margin: 0; padding: 1.5rem; max-width: 50%; }
.mm-procedure__figure img { display: block; max-width: 100%; height: auto; }

/* stored Avada markup (rows/columns) must not become Flatsome flex boxes: they would clear the floated image */
.mm-procedure__main .row, .mm-procedure__main [class*="col-"], .mm-procedure__main .col, .mm-procedure__main .col-inner {
	display: block; flex: none; width: auto; max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;
}
/* …nor clear it through Flatsome's clearfix pseudo-elements (the text wraps beside the image, as on the old site) */
.mm-procedure__main :is(.row, [class*="col-"], .col, .col-inner, .columns, .fusion-clearfix)::before,
.mm-procedure__main :is(.row, [class*="col-"], .col, .col-inner, .columns, .fusion-clearfix)::after { content: none; clear: none; }

/* the old .custom__page headings: pink, heavy, 1.563em, whatever the editor styled them as */
.mm-procedure__body h1, .mm-procedure__body h2, .mm-procedure__body h3,
.mm-procedure__body h4, .mm-procedure__body h5, .mm-procedure__body h6 {
	font-size: 1.563em !important; color: var(--mm-pink) !important; font-weight: 900 !important; text-transform: none;
}

/* icon row: grey band, four round icons with the title under each; hover swaps to the second image */
.mm-icons { background: #f5f5f5; padding: 3rem 0; margin: 1.5rem 0; }
.mm-icons__row { display: flex; flex-wrap: wrap; justify-content: center; max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.mm-icons__item { flex: 0 0 25%; max-width: 25%; padding: 0 12px; text-align: center; }
.mm-icons__pic { position: relative; width: 122px; height: 122px; max-width: 100%; margin: 0 auto 1rem; }
.mm-icons__img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mm-icons__img--hover { position: absolute; inset: 0; opacity: 0; transition: opacity .2s; }
.mm-icons__item:hover .mm-icons__img--hover, .mm-icons__item:focus-within .mm-icons__img--hover { opacity: 1; }
.mm-icons__title { margin: 0; padding-top: .5rem; font-weight: 700; font-size: 1rem; line-height: 1.3; }

/* results / cost buttons (hidden when no link) */
.mm-procedure__links { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; padding: 0 15px 3rem; }
.mm-procedure__btn { margin: 0; }

@media (max-width: 767px) {
	.mm-procedure__body { padding-top: 1.5rem; padding-bottom: 1.5rem; }
	.mm-procedure__main, .mm-procedure__after { padding-left: 0; padding-right: 0; }
	.mm-procedure__figure { float: none; max-width: 100%; padding: 0 0 1rem; }
	.mm-icons__item { flex-basis: 50%; max-width: 50%; margin-bottom: 1.5rem; }
}

/* ---- utility classes still used in procedure content (old Additional CSS): contact banner per device, centred images ---- */
.mm-procedure__body :is(.desktopcontact, .aligncenter) { text-align: center; margin: 0 auto 20px; display: block; }
.mm-procedure__body .mobilecontact { display: none !important; }
@media (max-width: 992px) { .mm-procedure__body .mobilecontact { display: block !important; margin: 0 auto; text-align: center; } .mm-procedure__body .desktopcontact { display: none !important; } }

/* ---- [services-photos]: «… με μία ματιά» infographic (desktop picture / phone slider) ---- */
.mm-services-photos { margin: 1.5rem 0; }
.mm-services-photos__desktop { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.mm-services-photos__mobile { padding: 3rem 0 1.5rem; }
.mm-services-photos__mobile .img { margin-bottom: 1rem; }