/*
================================================================================
Breakpoints
================================================================================
*/

/*
col    = ≤575px
col-md = Medium ≥576px.
col-lg = Large ≥1024px.
col-xl = Extra Large ≥1560px.
*/

/*
================================================================================
CSS Variables
================================================================================
*/

/* CSS Variables */
:root {
	/* Accent colors in _main.php head section */
	--background-color: white;
	--color-1: #333;
	--sans: "Roboto", sans-serif;
	--slab: "Roboto Slab", sans-serif;
}

/*
================================================================================
Body
================================================================================
*/

body {
	background: var(--background-color);
	color: var(--color-1);
	font-family: var(--sans);
	font-weight: 300;
	line-height: 1.7;
	font-size: min(calc(90% + 0.33vw), 1.225rem);
	margin-top: 3rem;
}

	/* Page top margin: scale with logo left margin on phones, fixed on desktop */
	@media all and (max-width: 1023px) {
		body  {
			margin-top: 6vw;
		}
	}

header,
main,
.footer-wrapper {
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
}

/* CSS to prevent vertical scrolling on the underlying page */
body.menu-open-scroll-lock {
    overflow: hidden; /* This stops the vertical scrollbar */
}

/*
================================================================================
Text resets / styling
================================================================================
*/

/*
======================================
Spacing
*/

/* Remove text bottom margin (and top margin) */
p, li, h1, h2, h3, h4, h5, h6 {
	margin-bottom: 0;
	margin-top: 0;
}

/* For titles that wrap onto two lines */
h1 {
	margin-bottom: 2rem;
}

/* For titles that wrap onto two lines */
h2, h3 {
	margin-bottom: 1.5rem;
}

/* Add it back as top margin */
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p,
h1+ul, h2+ul, h3+ul, h4+ul, h5+ul, h6+ul,
ul+h1, ul+h2, ul+h3, ul+h4, ul+h5, ul+h6,
p+p, p+ul,
p+h1, p+h2, p+h3, p+h4, p+h5, p+h6,
p+figure,
p+table,
ul+ul,
ul+p,
a+h1, a+h2, a+h3, a+h4, a+h5, a+h6,
figure+p,
table+p {
	margin-top: 1rem;
}

/* H3: add space between paragraphs and headings (Wilton Park) */
p + h2,
p + h3 {
	margin-top: 3rem;
}

/* H4: add space between H3 and H4 (Wilton Park) */
h3 + h4 {
	margin-top: 2rem;	
}

/* H4: add space between OL and H4 (Wilton Park) */
ol + h4 {
	margin-top: 2rem;	
}

/*
======================================
Headings
*/

h1, h2, h3, h4, h5, h6 {
	font-weight: 450;
	line-height: 1.2;
	font-family:  var(--slab);
}

h1 {
	letter-spacing: -0.02rem;
}

/*
======================================
Paragraphs
*/

p, .p, ul, ol {
	font-family:  var(--slab);
	font-size: 1em;
}

/*
======================================
Links
*/

a, a:hover, a:active, a:visited {
	color: var(--color-1);
	text-decoration: none;
}

/* Underline: not on links to current page */
.text a:not(.current),
.children a:not(.current) {
	border-bottom: dotted 1px #000;
}

.text a.current {
	color: var(--color-2);
	font-weight: 450;
}

.children a.current {
	font-weight: 450;
}

.text a,
.children a {
	color: var(--color-1);
}

.text a:hover {
	color: var(--color-1);
}

.text a:active {
	color: var(--color-1);
}

.text a:visited {
	color: var(--color-1);
}

.children li {
	font-family: var(--sans);
}

.children li.inline {
	display: inline-block;
	margin-right: 1rem;
}

/*
======================================
Quotes
*/

/*blockquote:has(> p.quote)::before {*/
blockquote::before {
	/*margin-top: .0rem;*/
	content: "\201c";
	font-size: 8rem;
	font-weight: 100;
	line-height: 1;
	display: block;
	margin-bottom: -5rem; /*-6.5*/
	margin-left: -.4rem;
	color: var(--color-2); /*#ddd*/
	font-family: "Roboto Serif", serif;
}

blockquote {
	font-weight: 300;
	background: var(--color-4);
	margin: 0; /* Remove default margin */
	padding: 1rem 2.5rem 2rem 2.5rem;
}

/* If page starts with blockquote we don't want space above */
p + blockquote {
	margin-top: 1.5rem;	
}

blockquote + p {
	margin-top: 1.5rem;
}

/* Blockquote: don't add extra vertical space between multiple blockquotes */
blockquote:has(+ blockquote) {
	margin-bottom: 1rem;
}

/*
======================================
Lists
*/

/* Indent: remove */
ul, ol {
	padding-left: 0;
}

/* Nested lists: indent (swiss global) */
.text li ul{
	padding-left: 1rem;
}

/* Ordered lists: add vertical space after (swiss global) */
.text ol > li + li {
	padding-top: 1rem;
}

/*
======================================
Tables
*/

table {
	font-size: 75%;
	letter-spacing: 0.03rem;
}

/* Borders: remove */
table, td {
	border-collapse: collapse;
	border: none;
}

/* Top-align */
td {
	vertical-align: top;
}

/* Empty cells: show */
td:after {
	content: '.';
	color: transparent;
	visibility: hidden;
}

/* Father table: align dates right */
tr > td:first-child {
	text-align: right;
	padding-right: 5rem;
}

/* Grid lines */
tr + tr {
	border-top: solid 1px #eee;
}

/*
======================================
Breadcrumbs / Title
*/

/* Breadcrumbs */
.breadcrumbs {
	font-family: var(--sans);
	font-size: 75%;
	letter-spacing: 0.03rem;
	margin-top: 4.9rem;
}

/* Phones: reduce vertical space under logo */
	@media all and (max-width: 1023px) {
		.breadcrumbs {
			margin-top: 3rem;
		}
	}

/* Breadcrumbs: link underline */
.breadcrumbs a {
	padding-bottom: 0.1rem;
	border-bottom: dotted 1px #777;
}

/* Title: align with logo */
.breadcrumbs + h1 {
	margin-top: .5rem;
}

/*
======================================
40daysbefore40
*/

.page-40daysbefore40 h2 {
	font-size: 80%;
	text-transform: uppercase;
	font-weight: 450;
	letter-spacing: 0.03rem;
	font-family: var(--sans);	
}

/*
======================================
Children/siblings nav
*/

/* First: reset */
.children {
	margin-top: 0;
}

/* Second: add margin-top whenever the UL follows another element */
* + .children {
	margin-top: 3rem;
}

/* Third: reduce margin between consecutive ULs */
.children .children {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

/*
================================================================================
Utilities
================================================================================
*/

/*
======================================
Flex / Alignment
*/

.flex {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.right {
	align-self: flex-end;
}

.text-right {
	text-align: right;
}

/*
======================================
Weight
*/

.weight-100 {
	font-weight: 100;
}

/*
======================================
Color
*/

.color-1 {
	color: var(--color-1);
}

.color-2 {
	color: var(--color-2);
}

.color-3 {
	color: var(--color-3);
}

.color-4 {
	color: var(--color-4);
}

/*
================================================================================
Logo
================================================================================
*/

/* Circle */
#logo-background {
	background-color: var(--color-2);
	display: inline-block;
	clip-path: circle(closest-side);
	padding: 45px;
}

	/* Logo horizontal alignment: move left on phones*/
	@media all and (max-width: 1023px) {
		#logo-background {
			margin-left: -1rem;
		}
	}

/* Text */
#logo {
	font-size: 1.25rem;
	line-height: 1.25;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 450;
	font-family: var(--sans);
}

/* Highlighted letters */
#logo span {
	color: white;
}

/*
================================================================================
Nav
================================================================================
*/

/*
======================================
Container
*/

.nav-container {
	margin-top: 3.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	/*gap: 1.5rem;*/
	/* Horiz space between circles: the difference between the width of the circle
	   and the width of three grid columns. Cap it when viewport wider than 1500px */
	/* gap: min(calc(calc(calc(100vw / 24) * 3) - 8.75vw), 2.72rem); */
	gap: calc(12.5vw - 11vw); /*144*/
	margin-left: auto; /* Center on very big screens */
	margin-right: auto;
}

/* Phones: set gap size */
@media all and (max-width: 1023px) {
	.nav-container {
		gap: 1.0rem;
	}
}

/* >1500px wide screens: fix gap size */
@media all and (min-width: 1501px) {
	.nav-container {
		gap: 22.5px;
	}
}

/*
======================================
Nav Background
*/

.nav-background {
	position: relative;
	display: inline-flex; /* Keep as inline-flex to work within .nav-container */
	justify-content: center;
	align-items: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/*width: 8.9rem;
	height: 8.9rem;*/
	box-sizing: border-box;
    /* Important: The line-height property affects the baseline for inline-flex items. */
    /* Resetting it can sometimes help normalize vertical alignment. */
    line-height: normal;
	filter: saturate(0);
}

/*
======================================
Nav Filter
*/

.nav-filter {
	/*width: 7.0rem;
	height: 7.0rem;*/
	display: inline-flex; /* Keep as inline-flex to work within .nav-container */
	justify-content: center;
	align-items: center;
	/*padding: 1rem;*/
	background: hsla(0, 0%, 100%, 0.85);
	width: 11vw; /* Width of circles */
	height: 11vw;
}

/* Circle size: 2 col */
@media all and (max-width: 575px) {
	.nav-filter {
		width: 39vw;
		height: 39vw;
	}
}

/* Circle size: 3 col */
@media all and (min-width: 576px) and (max-width: 799px) {
	.nav-filter {
		width: 26vw;
		height: 26vw;
	}
}

/* Circle size: 4 col */
@media all and (min-width: 800px) and (max-width: 1023px) {
	.nav-filter {
		width: 19.2vw;
		height: 19.2vw;
	}
}

/* Fix size of circles above 1500px, to prevent them getting so big they no-longer left align with text column above */
@media all and (min-width: 1501px) {
	.nav-filter {
		width: 165px;
		height: 165px;
	}
}

/*
======================================
Nav Current
*/

/* Current: add circle */
.current .nav-background {
	clip-path: circle(closest-side);
	background-color: var(--color-2);
	background-image: none !important;
	filter: saturate(1);
}

/* Current: remove overlay*/
.current .nav-filter {
	background: none;
}

/* Hover: darken image */
a:hover .nav-filter {
	background: hsla(0, 0%, 100%, 0.80);
}

/* Current: disable link and cursor */
.current {
	pointer-events: none;
}

/* Current: text color */
.current .nav-text {
	color: white;
}

/*
======================================
Nav Text
*/

.nav-text {
	text-align: center;
	font-weight: 350;
	padding: 0.5rem;
}

/*
================================================================================
Nav Books
================================================================================
*/

/*
======================================
Nav Book Arrows
*/
.book-arrows {
	list-style: none;
	padding-left: 0;
}

.nav-book-arrows-bottom .book-arrows ul {
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
	margin-left: -0.5rem;
}

.book-arrows li {
	display: inline-block;
	font-size: 5rem;
	line-height: 0;
	vertical-align: bottom;
	font-family: "Roboto Serif", sans-serif !important;
	font-weight: 100;
}

.book-arrows li + li {
	margin-left: 1rem;
}

.nav-book-arrows-top {
	text-align: right;
}

/*
================================================================================
Edit icon
================================================================================
*/

.edit a {
	padding: .5rem 1.25rem;
	background: var(--color-1);
	color: white !important;
	position: fixed;
	right: 0;
	bottom: 0;
}

/*
================================================================================
Medium Zoom
================================================================================
*/

/* Horizontal scroll bar: remove */
.medium-zoom-image--opened {
	padding: 0;
}

/* Z-index: put above slider arrows */
.medium-zoom-overlay {
	z-index: 2;
}
.medium-zoom-image {
	z-index: 3;
}

/*
================================================================================
Splide
================================================================================
*/

.splide {
	margin-top: 3rem;
	/*margin-bottom: 3rem;*/
	max-width: calc(1500px - calc());
	/* Negative horiz margins on screens wider than 1500px, otherwise margins of 0px */
	margin-left: min(calc(calc(1500px - 100vw) / 2), 0px);
	margin-right: min(calc(calc(1500px - 100vw) / 2), 0px);
}

.splide + .text {
	margin-top: 2.5rem;
}

/* Images: vertically center */
.splide__slide:has(img) {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Image height (slide height set with js) */
.splide img {
	max-height: 500px;
}

.splide p {
	background: #7d3157;
	color: white;
}

.splide p a {
	color: white;
	border-bottom: dotted 1px white;
}

.splide p a::after {
	content: url('data:image/svg+xml;utf8,<svg width=".5rem" height=".5rem" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M 10 90 L 90 90 L 10 10 Z" fill="white" transform="rotate(180 50 50)"/></svg>');
	display: inline-block;
	margin-left: 0.125rem;
	vertical-align: super;
	width: .5rem;
	height: .5rem;
	/*content: '¬';
	display: inline-block;
	transform: rotate(0deg);
	margin-left: .25rem;
	vertical-align: super;
	font-family: var(--sans);*/
}

.splide p:not(.overlay) {
	height: 100%;
	padding: 2rem;
}

.overlay-container {
	position: relative; /* For overlayed caption */
}

.splide p.overlay {
	position: absolute;
	right: 0px;
	bottom: 0px;
	z-index: 3;
	padding: 1rem;
}

/* Phones */
@media (max-width: 575px) {
	.splide .splide__list li {
		width: 100%;
	}
	.splide p {
		/*width: 10rem;*/
	}
	.splide__slide img {
		max-width: 100%;
		/*max-height: 70vw;*/
		width: auto;
		height: auto;
	}
}

/* Desktop*/
@media (min-width: 576px) {
	.splide p:not(.overlay) {
		width: 20rem;
		margin-top: 0; /* Remove excess */
	}
	/* Taxi & Tate: enlarge slightly too short images */
	.page-london .splide img {
		height: 500px;
	}
}

/* Arrows: hide non-applicable */
.splide:not(.is-overflow) .splide__arrows {
  display: none;
}
.splide__arrow:disabled {
	display: none;
}

.splide__arrow {
	background-color: var(--color-2);
	top: calc(50% - 1.5rem); /* subtract the height of the pagination dot's margin-top */
	z-index:1; /* Put arrows underneath fullscreennav menu */
}

.splide__arrow svg {
	filter: invert(1);
}

/* Slides: center if not enough */
.splide:not( .is-overflow ) .splide__list {
  justify-content: center;
}
.splide:not( .is-overflow ) .splide__slide:last-child {
  margin: 0 !important;
}

/* Pagination dots: move under slider */
.splide__pagination {
	position: relative;
	margin-top: 1.5rem;
	z-index:-1; /* Put arrows underneath fullscreennav menu */
}

/* Pagination other dots: recolor */
.splide__pagination__page {
	opacity: 0.2;
	background: #7d3157;
}

/* Pagination current dot: recolor */
.splide__pagination__page.is-active {
	opacity: 1;
	background: #7d3157;
}

/* Isola: align text right */
.page-isola-dei-pescatori .splide p {
	text-align: right;
}

/*
================================================================================
Layout Grid
================================================================================
*/

/*
======================================
Grid Areas
*/

.logo {
	grid-area: l;
}

.breadcrumbs-title {
	grid-area: b;
}

.nav-book-arrows-top {
	grid-area: a;
}

#main {
	grid-area: m;
}

.footer-wrapper {
	grid-area: f;}

#top-nav {
	grid-area: n;
}

/*
======================================
Phones
*/

@media all and (max-width: 1023px) {

	header {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-areas:
			'. l l l l l . n n n n .'
			/* '. l l l l l . a a a a .' */
			'. b b b b b b b b b b .';
	}
	
			.nav-book-arrows-top {
				display: none;
			}
	
	main {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-areas:
			'm m m m m m m m m m m m';
	}
	
	.footer-wrapper {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-areas:
			'f f f f f f f f f f f f';
	}
	
	#main {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		margin-top: 2rem;
	}
	
	.top-right {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}
	
	.text {
		grid-column: 2 / span 10;
	}
	
	.news {
		grid-column: 2 / span 10;
	}
	
	.slider {
		grid-column: 1 / span 12;
	}
	
	.nav-container {
		grid-column: 2 / span 10;
	}
	
	.children {
		grid-column: 2 / span 10;	
	}
	
	.image {
		grid-column: 2 / span 10;		
	}
	
	footer {
		background: var(--color-4);
		margin-top: 3rem;
		padding-bottom: 5rem;
	}

	.contact {
		grid-column: 2 / span 10;
	}	
	
	.copyright {
		grid-column: 2 / span 10;
	}
	
	.nav-book-arrows-bottom {
		grid-column: 2 / span 10;
	}

}

/*
======================================
Desktop
*/

@media all and (min-width: 1024px) {

	header {
		display: grid;
		grid-template-columns: repeat(24, 1fr); /* 3rem repeat(22, 1fr) 3rem; */
		grid-template-areas:
			'. l l l l . . b b b b b b b b b b b . n n n n .';
			/*'. l l l l . . b b b b b b b b b b b . a a a a .'*/
	}
	
			.nav-book-arrows-top {
				display: none;
			}
	
	main {
		display: grid;
		grid-template-columns: repeat(24, 1fr); /* 3rem repeat(22, 1fr) 3rem; */
		grid-template-areas:			
			'm m m m m m m m m m m m m m m m m m m m m m m m';
	}
	
	.footer-wrapper {
		display: grid;
		grid-template-columns: repeat(24, 1fr); /* 3rem repeat(22, 1fr) 3rem; */
		grid-template-areas:			
			'f f f f f f f f f f f f f f f f f f f f f f f f';
	}
	
	.text {
		grid-column: 8 / span 9;
	}
	
	.news {
		grid-column: 8 / span 9;
	}	
	
	.slider {
		grid-column: 1 / span 24;
	}
	
	.nav-container {
		grid-column: 5 / span 17;
		margin-left: -.5rem;
		
		/*display: grid;
		grid-template-columns: subgrid;*/
	}
	
	/*.nav-container a {
		grid-column: 3 / 24;
	}*/
	
	
	.children {
		grid-column: 8 / span 9;	
	}
	
	.image {
		grid-column: 20 / span 4;
		grid-row: 1/99;
	}
	
	footer {
		background: var(--color-4);
		margin-top: 3rem;
		padding-bottom: 5rem;
	}		
	
	.contact {
		grid-column: 8 / span 9;
	}	
	
	.copyright {
		grid-column: 8 / span 9;
	}
	
	.nav-book-arrows-bottom {
		grid-column: 8 / span 9;
	}

}

/*
================================================================================
Footer
================================================================================
*/

/*
======================================
Contact
*/

.contact h3 {
	margin-top: 3rem;
	margin-bottom: 0;
	font-family: var(--sans);
	font-size: 100%;
	line-height: 1.8;
}

.contact p {
	font-family: var(--sans);
	letter-spacing: 0.01rem;
	margin-top: 0;
}

/*
======================================
Copyright
*/
.copyright p {
	font-size: 75%;
	font-family: var(--sans);
	margin-top: 1rem;
	letter-spacing: 0.03rem;
}

/*
================================================================================
Images (sidebar)
================================================================================
*/

.image {
	display: flex;
	flex-direction: column;
	/*align-items: flex-end;*/
}

.image img {
	align-self: flex-start;
	max-width: 100%;
}

/* Phones */
@media all and (max-width: 1023px) {
	.image  {
		margin-top: 3rem;
	}
}

/* Desktop*/
@media all and (min-width: 1024px) {
	.image p {
		max-width: 16rem;
	}
	.image img {
		align-self: flex-end;
		max-width: 100%;
	}
}

/* Phones */
@media all and (max-width: 1023px) {
	.page-40daysbefore40 .image {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.page-40daysbefore40 .image img  {
		max-width: 45%;
		margin-bottom: 1rem;
	}
}

/* 40daysbefore40: make images less purple */
.page-40daysbefore40 .image img:last-child {
	filter: hue-rotate(320deg);
}

/*
======================================
Captions
*/

.image p {
	font-family: var(--sans);
	font-size: 75%;
	letter-spacing: 0.03rem;
}

/* Caption: add space above caption */
.image p {
	margin-top: 1rem;
}

/* Caption: add vertical space between lines */
.image p + p {
	margin-top: .5rem;
}

.image p + img {
	margin-top: 2rem;
}

/*
========================================
Navbar
========================================
*/

/* Put above rest of page content  */
nav#top-nav {
	z-index: 5;
}

/* Flex */
nav#top-nav .menu-container {
	/*position: relative;*/
	/* Make container display flex, so we can align hamburger and arrows */
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

nav#top-nav .toggle svg {
	cursor: pointer;
	padding: 0.5rem;
	margin-top: 0rem;
	margin-right: -0.5rem;
}

/* Checkbox: hide */
[id^=drop] {
	display: none;
}

/* Dropdown: hide by default */
nav#top-nav .toggle + a,
.menu {
	display: none;
}

/* Dropdown: show when hamburger icon clicked */
[id^=drop]:checked + div {
	display: block;
	display: flex;
}

/* Dropdown: place above page content */
nav#top-nav {
	/*z-index: 1;*/
}

/* Dropdown: stretch background to height of page (as opposed to viewport) */
html {
	/* Requires position: absolute + top: 0px to be set on .menu */
	position: relative;
}

/* Dropdown: container full screen */
nav#top-nav div.menu {
	/*padding: calc(4.16vw *4);*/ /* 1/24th of the viewport width */
/*		padding-left: 29.16%;
		padding-top: 12.1rem;*/
	position: absolute;
	top: 0;	
	left: 0;
	background: white;
		/*background: rgba(255, 255, 255, 0.49);*/
/*	width: calc(100% - 8.32vw *4);
			width: calc(100% - 29.16%);*/
	height: 100vh;
	width: 100%;
	z-index: -1;
	justify-content: center;
	align-items: center;
}

@media (max-width: 575px) {
	/* Dropdown: container full screen */
	nav#top-nav div.menu {
/*			padding-left: calc(4.16vw *4);
			padding-top: calc(4.16vw *4);
			width: calc(100% - calc(4.16vw *4));*/
	}	
}

/* Dropdown: left padding on extra large screens */
@media (min-width: 1500px) {
	nav#top-nav div.menu {
/*		padding-left: calc(calc(calc(100vw - 1500px) / 2) + 437px);*/
	}
}

/* Dropdown: list styling */
nav#top-nav div.menu ul {
	font-family: var(--sans);
	list-style-type: none;
}

/* Dropdown: container full screen
nav#top-nav div.menu ul li {
	min-height: 3rem;
}
 */
/* Dropdown: container full screen */
nav#top-nav div.menu ul li {
	/*padding: 0.25rem 0;
	padding-left: 33%;*/
	padding: 0.125rem 0; /* Vertical space between li */
}

/* Dropdown: container full screen */
nav#top-nav div.menu ul li a.current {
	font-weight: 450;
}

/* Dropdown: list 2nd level styling */
nav#top-nav div.menu ul ul {
	list-style-type: circle;
	font-weight: 300;
}

/* Fixed position: experiment */
nav#top-nav div {
	/*position: fixed !important;
	left: 0;*/
}

/*
================================================================================
Slider feedback lightbox
================================================================================
*/

.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.lightbox-overlay:target {
    visibility: visible;
    opacity: 1;
}

/* ------------------------------------- */
/* Image Container and Image Display */
/* ------------------------------------- */

.lightbox-content {
    /* Centering is no longer necessary, as the image will be positioned 
       via dragging, but we'll use Flexbox to initially center it.
    */
    position: absolute; /* Allows manual positioning within the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start; /* Align image at top */
    overflow: hidden; /* Crucial: Hides parts of the image that exceed the viewport */
}

.lightbox-content.center-image {
    justify-content: center; /* Only center when this class is present */
}

.viewer-image {
    display: block;
    max-width: none; /* 1. Always display at intrinsic width */
    height: auto;
    
    /* Panning Setup */
    position: relative; /* Allows CSS 'top' and 'left' to be set by JS drag logic */
    cursor: grab; /* Indicates the image can be dragged */
    touch-action: none; /* Prevents default mobile scrolling/zooming gestures */
}

.viewer-image.dragging {
    cursor: grabbing;
}

/* ------------------------------------- */
/* Closing Mechanism */
/* ------------------------------------- */
.lightbox-background-close {
    /* This element handles the click-to-close on the background */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

/* Image needs a higher z-index so clicks land on it for the panning logic */
.viewer-image {
    z-index: 10000;
}

/* Prevents the document from scrolling */
.lightbox-open-scroll-lock {
    overflow: hidden;
}