/*
  This CSS file is for modernizing the main content area of the page.
  It replaces the outdated table-based layout and fixed positioning.
*/
.container {
  display: flex;
  justify-content: center; /* Horizontally centers content */
  align-items: center; /* Vertically centers content */
  height: 100vh; /* Takes up the full height of the viewport */
}

/* Main content wrapper to center and contain the content */
.content-wrapper {
  /* Pushes content down and centers the entire block */
  align-items: center;
  margin: 60px auto 40px auto;
  max-width: 960px;
  padding: 0 20px;
}

/* Headings and text styles */
.main-heading {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.5rem;
  color: #2a2b2b;
  text-align: center;
  margin-bottom: 20px;
}

.author-name {
  font-size: 1.5rem;
  font-weight: bold;
  color: #3300ff;
}

.work-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.8rem;
  color: #666666;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 10px;
}

p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  text-align: center;
}

/* Corrects the layout for the image gallery */
.main-content {
  display: flex;
  flex-direction: row; /* Images on the same row for desktop */
  flex-wrap: wrap;
  justify-content: center; /* Centers the row of images */
  gap: 20px;
  margin-bottom: 40px;
}

.profile-image {
  flex-shrink: 0;
  width: 100%;
  max-width: 290px; /* Limits the image size to allow three in a row */
  text-align: center;
}

/* MODIFIED: The parent container for the two images needs to be a flexbox.
   The HTML should be updated to a wrapper div around the two figures. */
.two-images-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* MODIFIED: The individual figures now act as flex items. */
.two-images-row .single-image-lg {
  flex-basis: 45%; /* Use flex-basis to size the figures */
  margin: 0;
  text-align: center;
}

/* NEW: The images themselves are now given a fixed height and object-fit property.
   This is the key to making them the same height. */
.two-images-row .single-image-lg img {
  display: block;
  width: 100%;
  height: 400px; /* Set a consistent height for both images */
  object-fit: cover; /* This makes the image fill the space without distortion */
}

/* The original single-image-lg class is kept for when only one image is used */
.single-image-lg {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.profile-image img,
/* The original single-image-lg img style is now superseded by the one above */
.single-image-lg img {
  display: block;
  width: 100%;
  height: auto;
}

.bio-text {
  display: flex;
  flex-direction: column;
  gap: 1px; /* Adjust this value to control the space between paragraphs */
}

/* You might still need to remove default margins from the p tags */
.bio-text p {
  margin: 0;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 20px auto;
  max-width: 960px;
}

.video-container .responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Mobile styles for images */
@media (max-width: 650px) {
  .main-content {
    flex-direction: column; /* Images stack on top of each other on mobile */
    align-items: center;
  }

  .profile-image {
    max-width: 100%;
  }

  /* On mobile, the two-images-row should also stack vertically */
  .two-images-row {
    flex-direction: column;
  }

  .two-images-row .single-image-lg {
    flex-basis: 100%; /* Take up full width on mobile */
  }

  .two-images-row .single-image-lg img {
    height: auto; /* Reset height on mobile to prevent cropping */
  }
}
/*
  This CSS file is for modernizing the main content area of the page.
  It replaces the outdated table-based layout and fixed positioning.
*/

/* Main content wrapper to center and contain the content */
.content-wrapper {
  margin: 10px auto 40px auto;
  max-width: 960px;
  padding: 0 20px;
}

.author-name {
  font-size: 1.5rem;
  font-weight: bold;
  color: #3300ff;
}

.work-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.8rem;
  color: #666666;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 10px;
}

p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  text-align: justify;
  margin-top: 0;
  margin-bottom: 1.1rem;
}

/* Corrects the layout for the image gallery */
.main-content {
  display: flex;
  flex-direction: row; /* Images on the same row for desktop */
  flex-wrap: wrap;
  justify-content: center; /* Centers the row of images */
  gap: 20px;
  margin-bottom: 40px;
}

.profile-image {
  flex-shrink: 0;
  width: 100%;
  max-width: 290px;
  text-align: center;
}

/* NEW: Class for a single, larger image */
.single-image-lg {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.profile-image img,
.single-image-lg img {
  display: block;
  width: 100%;
  height: auto;
}

.bio-text {
  text-align: justify;
}

/* Responsive YouTube video container */
.video-container {
  position: relative;
  width: 100%;
  max-width: 960px;
  padding-bottom: 56.25%;
  height: 0;
  /* MODIFIED: Setting display to 'block' explicitly, and using
     `margin: 10px auto;` to center the block element. */
  display: block;
  margin: 10px auto;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* MODIFIED: A new class to specifically add a small vertical gap, equivalent to a few line breaks */
.video-gap {
  margin-top: 10px; /* This creates a very small gap between the video and the text */
}

/* Mobile styles for images */
@media (max-width: 650px) {
  .main-content {
    flex-direction: column;
    align-items: center;
  }

  .profile-image,
  .single-image-lg,
  .bio-text {
    width: 100%;
  }

  .profile-image {
    max-width: none;
  }
}

.image_center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.text-bold {
  font-weight: bold;
}

.rumi-quote-container {
  text-align: center;
  line-height: 1.2;
  /* white-space: pre-line; */
}

.rumi-quote {
  white-space: pre-line;
}

.figcaption {
  margin-top: 13px;
  margin-bottom: 10px;
}

.image-text-container {
  overflow: hidden; /* This is a common method to clear the float */
}