/* The approved collection geometry stays in single-portfolio-entry.css. */
body.single-portfolio-item {
	/* Manon's hidden overflow otherwise makes the body an unscrolled sticky container. */
	overflow-x: clip !important;
}

.lfd-single-title,
.lfd-single-facts {
	overflow-wrap: anywhere;
}

.lfd-single-panel {
	position: sticky;
	top: 96px;
	max-height: calc(100svh - 116px);
	overflow-y: auto;
	/* Keep the existing content alignment while leaving room for keyboard focus outlines. */
	margin-left: -6px;
	padding-left: 6px;
}

.admin-bar .lfd-single-panel {
	top: 128px;
	max-height: calc(100svh - 148px);
}

.lfd-single-facts {
	margin: 28px 0;
	font-size: 13px;
	line-height: 1.65;
}

.lfd-single-facts > div {
	padding: 12px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.14);
}

.lfd-single-facts dl,
.lfd-single-facts p {
	margin: 0;
}

.lfd-single-facts dt {
	color: #737373;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.lfd-single-facts dd {
	margin: 4px 0 0;
	overflow-wrap: anywhere;
}

.lfd-single-videos {
	display: grid;
	gap: 24px;
	margin-top: 28px;
}

.lfd-single-video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	background: #050505;
}

.lfd-single-comments {
	margin-top: 42px;
	padding-top: 28px;
	border-top: 1px solid rgba(0, 0, 0, 0.14);
}

.lfd-single-comments label {
	display: block;
}

.lfd-single-comments input:not([type="checkbox"]),
.lfd-single-comments textarea {
	width: 100%;
	max-width: 100%;
}

/* The discussion was built and reviewed inside Manon, whose global form rules drew these fields:
   an underline, no box, 15px type, and a black uppercase Oswald button. Without Manon they fell
   back to the browser's own boxes and grey button, so the same treatment is stated here, for this
   form only (the News form has its own, lfd-news-comment-form). */
.lfd-single-comments input[type="text"],
.lfd-single-comments input[type="email"],
.lfd-single-comments input[type="url"],
.lfd-single-comments textarea {
	margin: 0 0 24px;
	padding: 5px;
	border: 0;
	border-bottom: 1px solid var(--lfd-color-ink, #000);
	border-radius: 0;
	background-color: transparent;
	color: var(--lfd-color-ink, #000);
	font: inherit;
	font-size: 15px;
	line-height: 1.4;
	appearance: none;
}

.lfd-single-comments textarea {
	min-height: 120px;
	resize: vertical;
}

.lfd-single-comments input[type="submit"] {
	min-width: 192px;
	height: 56px;
	padding: 0 30px;
	border: 1px solid transparent;
	border-radius: 0;
	background-color: var(--lfd-color-ink, #000);
	color: var(--lfd-color-paper, #fff);
	font-family: var(--lfd-font-display);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	appearance: none;
}

.lfd-single-comments input[type="submit"]:focus-visible {
	outline: 2px solid var(--lfd-color-focus, #000);
	outline-offset: 3px;
}

.lfd-single-comments .comment-form-cookies-consent label {
	display: inline;
}

.pswp__lfd-caption {
	position: absolute;
	right: 16px;
	bottom: 16px;
	left: 16px;
	width: fit-content;
	max-width: calc(100% - 32px);
	margin: 0 auto;
	padding: 8px 12px;
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
	font-family: "Open Sans", sans-serif;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
	overflow-wrap: anywhere;
	pointer-events: none;
}

.lfd-single-photo:focus-visible,
.lfd-single-facts a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {

	.lfd-single-photo img {
		transition: none !important;
	}
}