/* =======================================================================
   Cromanated.css
   Stylesheet for Cromanated.php.

   The old version centered everything with a fixed body margin-left
   (150px) plus per-element counter-offsets (340px, 400px, and even
   negative percentage margins like -25% in the markup) to shift things
   back into place. That combination is what made the page unreadable on
   a phone: a 150px fixed margin alone eats nearly half of a small phone
   screen. Centering now happens once, responsively, via .container +
   auto margins, so none of those counter-offsets are needed anymore.
   ======================================================================= */

html {
	box-sizing: border-box;
}
html * {
	box-sizing: inherit;
}

body {
	margin: 0;
	padding: 0;
	font-family: Calibri, Arial, sans-serif;
	background-image: url(graphics/pattern003.jpg);
}

a:link {color:#000000; text-decoration:none;}
a:visited {color:#6699cc; text-decoration:none;}
a:hover {color:#9090d3; text-decoration:none;}

a.external {font-weight:normal; text-decoration:none;}
a.external:link {color:#AAAAFF;}
a.external:visited {color:#AAAAFF;}
a.external:hover {color:#FFFFFF;}

img {
	max-width: 100%;
	height: auto;
	display: block;
	border: 2px solid #000;
}

img.center {
	margin: 0 auto;
	border: none;
}

.img2 {
	display: block;
	margin: 0 auto;
}

.txtcenter {
	text-align: center;
}

li {
	display: inline;
	padding-right: 0;
}

ul a {
	text-decoration: none;
}

li:after {
	content: '   |';
	padding: 0 5px;
	color: #999;
}

li:last-child:after {
	content: '';
}

ul {
	font-family: Calibri, Arial, sans-serif;
	font-size: 20px;
}

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

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 4%;
}

/* Legacy fixed-margin helper, kept in case other pages reference it,
   now responsive instead of a hard 400px offset. */
.margLeft {
	max-width: 900px;
	margin: 0 auto;
}

/* Photo grid: a real CSS grid replaces the old inline-block 33.33% math,
   so columns collapse automatically as the screen narrows instead of
   needing a separate breakpoint rule to force width:100%. */
.imageGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 24px;
	padding: 20px 0;
}

.image {
	text-align: center;
}

.image img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	margin: 0 auto;
}

div.desc {
	font-family: Calibri, Arial, sans-serif;
	font-size: clamp(16px, 2.5vw, 25px);
	padding: 12px 5px 0;
	text-align: center;
}

/* =======================================================================
   Headings and callouts (previously duplicated inside Cromanated.php's
   own <style> block, now shared here like the rest of the site's CSS)
   ======================================================================= */

.LargeFont {
	font-family: Calibri, Arial, sans-serif;
	font-size: clamp(28px, 6vw, 50px);
	font-style: normal;
	font-weight: bold;
	font-variant: normal;
	text-align: center;
	line-height: 1.2;
	margin: 0.6em 0;
}

.coined,
.click {
	font-family: Calibri, Arial, sans-serif;
	font-size: clamp(16px, 3vw, 24px);
	font-weight: bold;
	text-align: center;
	margin: 0.4em 0;
}

.click {
	color: #7A7A7A;
}

/* Before/after comparison pairs */
.beforeAfterHeading {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	max-width: 900px;
	margin: 0.6em auto;
}

.beforeAfterHeading span {
	font-family: Calibri, Arial, sans-serif;
	font-size: clamp(24px, 5vw, 40px);
	font-weight: bold;
}

.beforeAfter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 15px;
	margin: 0.5em auto 1.5em;
	max-width: 1200px;
}

.beforeAfter img {
	width: 100%;
	max-width: 420px;
	height: auto;
}

.buildingCaption {
	font-family: Calibri, Arial, sans-serif;
	font-size: clamp(18px, 3vw, 30px);
	font-weight: bold;
	text-align: center;
	margin: 0.6em 0;
}

/* =======================================================================
   Mobile
   ======================================================================= */

@media (max-width: 700px) {
	.imageGrid {
		gap: 14px;
	}

	div.desc {
		font-size: 16px;
		padding: 8px 4px 0;
	}

	ul {
		font-size: 16px;
	}
}