@charset "utf-8";
/* CSS Document */

/* Major Blocks */

body {
background: #444;
background-image: linear-gradient(to bottom, rgba(50, 50, 50, 1), rgba(80, 80, 80, 0));
background-repeat: no-repeat;
background-size: 100% 1000px;
background-attachment: scroll;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
padding: 0;
margin: 0;
}

.content {
height: auto;
padding: 30px 20px;
margin-top: -15px; /* Pull content slightly under nav for effect */
}

.segment {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 10px;
}

.painting {
display: block;
margin: auto;
width: 50%;
box-shadow: 7px 7px 5px black; 	
}

.painting_tall {
  display: block;
  margin: auto;
  width: 60%;
  box-shadow: 7px 7px 5px black;
}

.element {
display: block;
margin: auto;
width: auto;
box-shadow: 7px 7px 5px black; 	
}

.portrait {
max-width: 350px;            /* Adjust as needed */
height: auto;
display: block;
top: 0;
}

.twoup_layout {
display: flex;
justify-content: center;     /* Center the pair horizontally */
align-items: flex-start;
gap: 40px;                   /* Optional: space between image and text */
}

.detail_shots {
display: flex;
flex-direction: row;       /* Ensures horizontal layout */
justify-content: center;   /* Centers the whole row */
align-items: center;       /* Aligns images vertically if needed */
gap: 10px;                 /* Space between images */
flex-wrap: nowrap;         /* Prevent wrapping to new lines */
padding-top: 10px;
}

.detail_shots div img {
max-width: 100px;         /* Optional: control image size */
height: auto;
display: block;
}

.image_grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
gap: 10px;
max-width: 550px;
margin: 0 auto;
}

.grid_item {
aspect-ratio: 1 / 1; /* makes each item a square */
overflow: hidden;
background: #ddd;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}

.grid_item img, .grid_item a {
width: 100%;
height: 100%;
object-fit: cover;
}

.grid_item.empty {
background: transparent;
pointer-events: none;
}

/* Typography */

.em_blue {
color: #57A7B4;
}

h1 {
color: #FFFFFF;
text-align: center;
padding: 0;
margin-top: 2;
margin-bottom: 0;
}

h2 {
margin-top: 0;
color:#57A7B4;
}

h3 {
color: #FFFFFF;
padding: 0;
margin-top: 1;
margin-bottom: 0;
}

h4 {
color: #FFFFFF;
padding: 0;
margin-top: 0;
margin-bottom: 0;
font-style: italic;
}

.feature_copy {
text-align: left;
}

.feature_heading {
color: #57A7B4;
text-align: center;
}

.title {
display: block;   /* Forces each span to be on its own line */
font-weight: bold;
font-size: 1.2em;
text-align: center;
color: #DCDCDC;
}

.subtitle {
display: block;
font-style: italic;
font-size: 1em;
text-align: center;
color:#C6C6C6;
}

.phone_number {
text-decoration: none;
font-size: 1.2em;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
color: #57A7B4;
}

.email_address {
text-decoration: none;
font-size: 1.2em;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
color: #57A7B4;
}

.copy {
max-width: 400px;
text-align: left;
margin-top: 0;
margin-bottom: 1em; /* or adjust as needed */
line-height: 1.2;
color: #CCCCCC
}

.read_more_box {
max-width: 400px;
text-align: left;
margin-top: 0;
margin-bottom: 1em; /* or adjust as needed */
line-height: 1.6;
color: #CCCCCC
}

.more_text {
	display: none;
}

.read_more_button {
  background: none;
  border: none;
  color: #57A7B4;
  cursor: pointer;
  padding: 0;
  font-variant: small-caps;
  font-size: 0.85em;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  margin-top: 0.5em;
}

.button_positioning {
	text-align: right;
	margin-top: 0.5em;
}