/* General reset */
body {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  background: white;
  color: black;
  font-size: 11.5px;
  line-height: 1.4em;
}

/* Layout container */
.container {
  display: grid;
  grid-template-columns: 0.8fr 2.4fr 0.8fr;
  min-height: 100vh;
}

/* Sidebars */
.sidebar {
  background: #f2f2f2;
  padding: 15px;
  border-left: 2px solid #696969;
  border-right: 2px solid #696969;
}

.sidebar.left {
   border-right: 2px solid #696969;   /* thick line */
  border-left: none;
  position: relative;
}


.sidebar.left::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -6px;              /* space between thick and thin line */
  width: 1px;               /* thin line thickness */
  background: #696969;
}

.sidebar.right {
  border-left: 2px solid #696969;    /* thick line */
  border-right: none;
  position: relative;
}

.sidebar.right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;               /* space between thick and thin line */
  width: 1px;               /* thin line thickness */
  background: #696969;
}

.sidebar ul {
  list-style-type: none;
  padding-left: 15px;
}

.sidebar ul li {
  margin: 4px 0;
}

/* Links always blue + underlined */
.sidebar a, .sidebar.right a {
  color: blue;
  text-decoration: underline;
}

/* Section titles */
.section-title {
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 5px;
  margin-right: 10px;
  text-align: right;
}

/* Main content */
.content {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  text-align: center;
}

.content img {
  max-width: 500px;
  height: auto;
  margin-bottom: 10px;
}

.content p {
  font-size: 13px;
}

/* Image + description container */
.image-block {
  display: flex;
  align-items: flex-start;   /* keeps top edges aligned */
  justify-content: flex-start;
  margin: 10px 20px;
}

/* Smaller gallery box aligned left */
.image-gallery {
  max-width: 60%;        /* make it narrower */
  margin: 0;             /* remove centering */
  border: 2px solid black;
}

/* Description box on the right */
.imgdesc {
  margin-left: 20px;
  margin-right: 20px;
  flex: 1;               /* take remaining space */
  text-align: left;
}


/* Images inside */
.image-gallery img {
  display: block;        /* removes inline spacing issues */
  max-width: 100%;       /* scales within container */
  height: auto;
  margin: 0;             /* no margin */
  padding: 0;            /* no padding */
  border: none;          /* no default border */
}

.image-block.centered {
  justify-content: center;
}

.image-block.centered .image-gallery {
  max-width: 60%;   /* or whatever size looks best */
  margin: 0 auto;   /* keep it centered */
}

.quote-block {
  text-align: center;        /* center the text */
  margin: 20px auto 10px;      
  max-width: 80%;            /* keep it from stretching too wide */
}

.quote-block p {
  font-size: 16px;           /* larger than body (11.5px / 13px) */
  font-weight: bold;         /* bold for emphasis */
  line-height: 1.6em;
}

/* Row of images */
.image-row {
  display: flex;
  justify-content: center;  /* center the whole row */
  gap: 15px;                /* space between images */
  margin: 20px auto;
  max-width: 90%;
}

/* Each image in its own mini-box */
.image-item {
  flex: 1;
  max-width: 30%;           /* keep them from stretching too wide */
  text-align: center;
  border: 2px solid black;  /* same as .image-gallery */
  padding: auto;
  background: white;        /* keep consistent */
}

/* Image inside */
.image-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Caption under each image */
.img-caption {
  margin-top: 6px;
  font-size: 11.5px;
}

/* Dark Mode Styles */
body.dark-mode {
  background: #1e1e1e;
  color: #e6e6e6;
}

body.dark-mode .sidebar {
  background: #2a2a2a;
  border-color: #555;
}

body.dark-mode .sidebar.left::after,
body.dark-mode .sidebar.right::after {
  background: #555;
}

body.dark-mode .content {
  color: #e6e6e6;
}

body.dark-mode .image-gallery {
  border: 2px solid #e6e6e6;
}

body.dark-mode a {
  color: #87cefa; /* light blue links */
}

body.dark-mode .quote-block p {
  color: #e6e6e6;
}

body.dark-mode .image-item {
  background: #2a2a2a;
  border: 2px solid #e6e6e6;
}

body.dark-mode .img-caption {
  color: #e6e6e6;
}



/* Review Table Container */
.review-table {
  display: grid;
  grid-template-columns: 180px 1fr; /* cover on left, content on right */
  border: 2px solid black;
  margin: 20px auto;
  width: 900px;                     /* or whatever width you want */
  background: white;
  color: black;
  font-family: "Courier New", Courier, monospace;
}

/* Cover on left */
.review-cover {
  grid-row: 1 / span 7; /* spans the full height of the table */
  border-right: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: stretch;   /* stretch vertically */
  background: white;
}

.review-cover img {
  width: 100%;     /* fill horizontally */
  height: 100%;    /* fill vertically */
  object-fit: cover; /* crops if necessary */
  display: block;
}

/* Title at top */
.review-title {
  grid-column: 2;
  background: black;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 12px;   /* bigger padding for breathing space */
  border-bottom: 2px solid black;
}

/* Metadata row */
.review-meta {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.review-meta-label {
  background: #f2f2f2; /* same as sidebar */
  padding: 10px;       /* more padding */
  font-weight: bold;
  text-align: left;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

.review-meta-label:last-child {
  border-right: none;
}

.review-meta-values {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.review-meta-value {
  background: white; /* page background */
  padding: 10px;     /* more padding */
  text-align: left;
  border-bottom: 2px solid black;
  border-right: 1px solid black;
}

.review-meta-value:last-child {
  border-right: none;
}

/* Review label row */
.review-label {
  grid-column: 2;
  background: #f2f2f2; /* same as sidebar */
  padding: 10px;       /* more padding */
  font-weight: bold;
  text-align: left;
  border-bottom: 1px solid black;
}

/* Review text row */
.review-text {
  grid-column: 2;
  background: white;
  padding: 12px;          /* more padding */
  text-align: left;
  display: flex;          /* force top alignment */
  align-items: flex-start;
}

.review-text p {
  margin-top: 0;   /* removes extra top gap */
  margin-bottom: 0.6em; /* keep a little spacing between paragraphs */
}


/* -------- DARK MODE -------- */
body.dark-mode .review-table {
  border: 2px solid #e6e6e6;
  background: #1e1e1e;
  color: #e6e6e6;
}

body.dark-mode .review-cover {
  background: #1e1e1e;
  border-right: 2px solid #e6e6e6;
}

body.dark-mode .review-title {
  background: #e6e6e6;
  color: #1e1e1e;
  border-bottom: 2px solid #e6e6e6;
}

body.dark-mode .review-meta-label {
  background: #2a2a2a;
  border-bottom: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}

body.dark-mode .review-meta-value {
  background: #1e1e1e;
  border-bottom: 2px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}

body.dark-mode .review-label {
  background: #2a2a2a;
  border-bottom: 1px solid #e6e6e6;
}

body.dark-mode .review-text {
  background: #1e1e1e;
}