/* 18+ age gate (Task 9a). Photos stay blurred until confirmed; html.mm-age-ok is set by the inline script / age-gate.js. */
body.mm-gated .mm-pair__img,
body.mm-gated #content .img-inner { overflow: hidden; }

html:not(.mm-age-ok) body.mm-gated .mm-pair__img img,
html:not(.mm-age-ok) body.mm-gated #content .img-inner img { filter: blur(24px); }

/* The links are taken out of the tab order and out of activation (visibility:hidden), the blurred image stays visible.
   Works without JavaScript, so Tab + Enter cannot reach the full-size photo. */
html:not(.mm-age-ok) body.mm-gated a.mm-pair__img,
html:not(.mm-age-ok) body.mm-gated #content .img > a { visibility: hidden; pointer-events: none; }
html:not(.mm-age-ok) body.mm-gated a.mm-pair__img img,
html:not(.mm-age-ok) body.mm-gated #content .img > a img { visibility: visible; pointer-events: none; }

.mm-age-gate { display: none; }
html:not(.mm-age-ok) body.mm-gated .mm-age-gate {
	display: flex; align-items: center; justify-content: center;
	position: fixed; inset: 0; z-index: 100000; padding: 16px;
	background: rgba(255, 255, 255, .55);
}
.mm-age-gate__dialog {
	box-sizing: border-box; max-width: 520px; width: 100%; padding: 32px 28px; text-align: center;
	background: #fff; border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.mm-age-gate__title { margin: 0 0 12px; font-size: 1.6em; color: var(--mm-pink, #e4357d); }
.mm-age-gate__text { margin: 0 0 24px; }
.mm-age-gate__noscript { margin: 0 0 20px; font-weight: 700; }
.mm-age-gate__buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.mm-age-gate__no, .mm-age-gate__yes {
	box-sizing: border-box; display: inline-block; margin: 0; padding: 12px 22px; border-radius: 99px; cursor: pointer;
	font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; text-transform: none; letter-spacing: 0;
	border: 2px solid var(--mm-pink, #e4357d);
}
.mm-age-gate__yes { background: var(--mm-pink, #e4357d); color: #fff; }
.mm-age-gate__no { background: #fff; color: var(--mm-pink, #e4357d); }
.mm-age-gate__no:focus-visible, .mm-age-gate__yes:focus-visible { outline: 3px solid #222; outline-offset: 2px; }
@media (max-width: 480px) { .mm-age-gate__buttons { flex-direction: column; } }