/* Pictures in Time 3.8.3 – enhetlig varm, analog vykortskänsla i tidslinjer och mosaiker. */
.pit-portfolio,
.pit-journeys,
.pit-single {
	--pit-postcard-paper: #f3eee4;
	--pit-postcard-fiber: rgba(103, 78, 44, .05);
}

body.pit-landing-style-nordic .pit-portfolio { --pit-postcard-paper: #f8f5ee; }
body.pit-landing-style-noir .pit-portfolio { --pit-postcard-paper: #eee6d8; }

.pit-portfolio .pit-card__image,
.pit-portfolio .pit-card:nth-child(even) .pit-card__image,
body.pit-landing-style-nordic .pit-portfolio .pit-card__image,
body.pit-landing-style-nordic .pit-portfolio .pit-card:nth-child(even) .pit-card__image,
body.pit-landing-style-noir .pit-portfolio .pit-card__image,
body.pit-landing-style-noir .pit-portfolio .pit-card:nth-child(even) .pit-card__image {
	--pit-postcard-edge: clamp(10px, 1vw, 16px);
	--pit-postcard-bottom: clamp(25px, 2.2vw, 38px);
	background-color: var(--pit-postcard-paper) !important;
	background-image: radial-gradient(var(--pit-postcard-fiber) .7px, transparent .8px) !important;
	background-size: 7px 7px !important;
	border: 1px solid rgba(80, 62, 39, .2);
	box-shadow: 0 2px 2px rgba(0, 0, 0, .2), 0 24px 48px rgba(0, 0, 0, .43), 0 0 0 1px rgba(255, 255, 255, .36) inset;
	padding: var(--pit-postcard-edge) var(--pit-postcard-edge) var(--pit-postcard-bottom);
	transform-origin: 50% 70%;
}

body.pit-landing-style-nordic .pit-portfolio .pit-card__image {
	box-shadow: 0 2px 2px rgba(50, 42, 31, .12), 0 24px 48px rgba(50, 42, 31, .23), 0 0 0 1px rgba(255, 255, 255, .55) inset;
}

body.pit-landing-style-noir .pit-portfolio .pit-card__image {
	box-shadow: 0 3px 3px rgba(0, 0, 0, .32), 0 34px 72px rgba(0, 0, 0, .68), 0 0 0 1px rgba(255, 255, 255, .32) inset;
}

body.pit-landing-style-noir .pit-portfolio .pit-card:nth-child(even) .pit-card__image {
	border: 1px solid rgba(80, 62, 39, .2);
	padding: var(--pit-postcard-edge) var(--pit-postcard-edge) var(--pit-postcard-bottom);
}

.pit-portfolio .pit-card:nth-child(3n + 1) .pit-card__image { transform: rotate(-1.35deg); }
.pit-portfolio .pit-card:nth-child(3n + 2) .pit-card__image { transform: rotate(1.05deg); }
.pit-portfolio .pit-card:nth-child(3n + 3) .pit-card__image { transform: rotate(-.4deg); }
body.pit-landing-style-nordic .pit-portfolio .pit-card:nth-child(3n + 1) .pit-card__image,
body.pit-landing-style-noir .pit-portfolio .pit-card:nth-child(3n + 1) .pit-card__image { transform: rotate(-1.35deg); }
body.pit-landing-style-nordic .pit-portfolio .pit-card:nth-child(3n + 2) .pit-card__image,
body.pit-landing-style-noir .pit-portfolio .pit-card:nth-child(3n + 2) .pit-card__image { transform: rotate(1.05deg); }
body.pit-landing-style-nordic .pit-portfolio .pit-card:nth-child(3n + 3) .pit-card__image,
body.pit-landing-style-noir .pit-portfolio .pit-card:nth-child(3n + 3) .pit-card__image { transform: rotate(-.4deg); }

.pit-portfolio .pit-card__image::after {
	background: linear-gradient(135deg, rgba(134, 87, 39, .075), transparent 42%, rgba(24, 18, 12, .05));
	box-shadow: inset 0 0 18px rgba(52, 37, 22, .14);
	content: "";
	display: block;
	inset: var(--pit-postcard-edge) var(--pit-postcard-edge) var(--pit-postcard-bottom);
	pointer-events: none;
	position: absolute;
	z-index: 2;
}

.pit-portfolio .pit-card__image::before {
	bottom: clamp(6px, .65vw, 10px);
	color: rgba(79, 62, 41, .56);
	content: var(--pit-postcard-label, "PICTUERS IN TIME");
	font: 600 clamp(7px, .62vw, 10px)/1 "PIT Montserrat", Arial, sans-serif;
	letter-spacing: .18em;
	pointer-events: none;
	position: absolute;
	right: var(--pit-postcard-edge);
	z-index: 3;
}

.pit-portfolio .pit-card:hover .pit-card__image,
.pit-portfolio .pit-card:nth-child(even):hover .pit-card__image,
body.pit-landing-style-nordic .pit-portfolio .pit-card:hover .pit-card__image,
body.pit-landing-style-noir .pit-portfolio .pit-card:hover .pit-card__image {
	box-shadow: 0 3px 3px rgba(0, 0, 0, .18), 0 34px 68px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .4) inset;
	transform: rotate(0) translateY(-6px);
}

@media (max-width: 700px) {
	.pit-portfolio .pit-card__image,
	.pit-portfolio .pit-card:nth-child(even) .pit-card__image,
	body.pit-landing-style-nordic .pit-portfolio .pit-card__image,
	body.pit-landing-style-noir .pit-portfolio .pit-card__image {
		--pit-postcard-edge: 8px;
		--pit-postcard-bottom: 24px;
		transform: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pit-portfolio .pit-card:hover .pit-card__image { transform: none; }
}

/* Resor och platser: samma vykort på den fristående tidslinjen och i dess mosaikläge. */
.pit-journeys .pit-journal-image {
	--pit-postcard-edge: clamp(10px, 1vw, 16px);
	--pit-postcard-bottom: clamp(25px, 2.2vw, 38px);
	background-color: var(--pit-postcard-paper) !important;
	background-image: radial-gradient(var(--pit-postcard-fiber) .7px, transparent .8px) !important;
	background-size: 7px 7px !important;
	border: 1px solid rgba(80, 62, 39, .2);
	box-shadow: 0 2px 2px rgba(0, 0, 0, .2), 0 24px 48px rgba(0, 0, 0, .43), 0 0 0 1px rgba(255, 255, 255, .36) inset;
	box-sizing: border-box;
	display: block;
	overflow: hidden;
	padding: var(--pit-postcard-edge) var(--pit-postcard-edge) var(--pit-postcard-bottom);
	position: relative;
	transform-origin: 50% 70%;
	transition: box-shadow .35s ease, transform .35s ease;
}

.pit-journeys .pit-journal-entry:nth-child(3n + 1) .pit-journal-image { transform: rotate(-1.1deg); }
.pit-journeys .pit-journal-entry:nth-child(3n + 2) .pit-journal-image { transform: rotate(.85deg); }
.pit-journeys .pit-journal-entry:nth-child(3n + 3) .pit-journal-image { transform: rotate(-.3deg); }

.pit-journeys .pit-journal-image::after {
	background: linear-gradient(135deg, rgba(134, 87, 39, .075), transparent 42%, rgba(24, 18, 12, .05));
	box-shadow: inset 0 0 18px rgba(52, 37, 22, .14);
	content: "";
	inset: var(--pit-postcard-edge) var(--pit-postcard-edge) var(--pit-postcard-bottom);
	pointer-events: none;
	position: absolute;
	z-index: 2;
}

.pit-journeys .pit-journal-image::before {
	bottom: clamp(6px, .65vw, 10px);
	color: rgba(79, 62, 41, .56);
	content: var(--pit-postcard-label, "PICTUERS IN TIME");
	font: 600 clamp(7px, .62vw, 10px)/1 "PIT Montserrat", Arial, sans-serif;
	letter-spacing: .18em;
	pointer-events: none;
	position: absolute;
	right: var(--pit-postcard-edge);
	z-index: 3;
}

.pit-journeys .pit-journal-image:hover {
	box-shadow: 0 3px 3px rgba(0, 0, 0, .18), 0 34px 68px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .4) inset;
	transform: rotate(0) translateY(-6px);
}

/* Bildkategorier och resans bildgalleri: en lättare vykortsram som bevarar mosaikrytmen. */
.pit-portfolio .pit-mosaic-item,
.pit-single .pit-story-gallery > a,
.pit30-story-mosaic > div > a {
	--pit-mosaic-postcard-edge: clamp(5px, .55vw, 8px);
	--pit-mosaic-postcard-bottom: clamp(17px, 1.5vw, 24px);
	background-color: #f2ebde;
	background-image: radial-gradient(rgba(103, 78, 44, .045) .65px, transparent .75px), linear-gradient(135deg, #fffaf0, #e7dcc8);
	background-size: 7px 7px, auto;
	border: 1px solid rgba(80, 62, 39, .18);
	box-shadow: 0 2px 2px rgba(0, 0, 0, .16), 0 13px 28px rgba(0, 0, 0, .34);
	box-sizing: border-box;
	padding: var(--pit-mosaic-postcard-edge) var(--pit-mosaic-postcard-edge) var(--pit-mosaic-postcard-bottom);
	position: relative;
}

.pit-portfolio .pit-mosaic-item::before,
.pit-single .pit-story-gallery > a::before,
.pit30-story-mosaic > div > a::before {
	bottom: 5px;
	color: rgba(79, 62, 41, .5);
	content: var(--pit-postcard-label, "PICTUERS IN TIME");
	font: 600 7px/1 "PIT Montserrat", Arial, sans-serif;
	letter-spacing: .16em;
	pointer-events: none;
	position: absolute;
	right: var(--pit-mosaic-postcard-edge);
	z-index: 4;
}

.pit-portfolio .pit-mosaic-item span {
	bottom: var(--pit-mosaic-postcard-bottom);
	left: var(--pit-mosaic-postcard-edge);
	right: var(--pit-mosaic-postcard-edge);
}

.pit-portfolio .pit-mosaic-item.is-visible:nth-child(4n + 1) { transform: rotate(-.35deg); }
.pit-portfolio .pit-mosaic-item.is-visible:nth-child(4n + 2) { transform: rotate(.28deg); }
.pit-portfolio .pit-mosaic-item.is-visible:nth-child(4n + 3) { transform: rotate(-.16deg); }
.pit-portfolio .pit-mosaic-item.is-visible:nth-child(4n + 4) { transform: rotate(.12deg); }

.pit-portfolio .pit-mosaic-item:hover,
.pit-single .pit-story-gallery > a:hover,
.pit30-story-mosaic > div > a:hover {
	box-shadow: 0 3px 3px rgba(0, 0, 0, .17), 0 19px 38px rgba(0, 0, 0, .42);
}

/* Resornas gallerier behåller vykortsramen men visas utan drop shadow. */
.pit-single .pit-story-gallery > a,
.pit-single .pit-story-gallery > a:hover,
.pit-single .pit-story-gallery img,
.pit30-story-mosaic > div > a,
.pit30-story-mosaic > div > a:hover,
.pit30-story-mosaic img {
	box-shadow: none !important;
}

/* 360° delar pseudo-element med vykortsetiketten. Nollställ nederkanten så märket inte sträcks ut. */
.pit-portfolio .pit-mosaic-item:has(img[data-pit-panorama])::before,
.pit-single .pit-story-gallery > a:has(img[data-pit-panorama])::before,
.pit30-story-mosaic > div > a:has(img[data-pit-panorama])::before {
	align-items: center;
	background: rgba(0, 0, 0, .72);
	border: 1px solid rgba(255, 255, 255, .65);
	border-radius: 999px;
	bottom: auto;
	box-sizing: border-box;
	color: #fff;
	content: "360°";
	display: inline-flex;
	font: 600 11px/1 "PIT Montserrat", Arial, sans-serif;
	height: auto;
	letter-spacing: .1em;
	min-height: 0;
	min-width: 0;
	padding: 8px 11px;
	position: absolute;
	right: 14px;
	top: 14px;
	width: auto;
	z-index: 4;
}

@media (max-width: 700px) {
	.pit-journeys .pit-journal-image {
		--pit-postcard-edge: 8px;
		--pit-postcard-bottom: 24px;
		transform: none !important;
	}

	.pit-portfolio .pit-mosaic-item.is-visible { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.pit-journeys .pit-journal-image:hover,
	.pit-portfolio .pit-mosaic-item.is-visible { transform: none; }
}