/* 
CSS for travel blogs. Main tools in your HTML are 
         <div class="image-container">
              <figure>
                  <img src="path/to-img.jpg" alt="Description">
                  <figcaption>My caption</figcaption>
              </figure>
              <figure>...</figure>
                   ...
         </div>

and one photo on the left with text wrap:
          <figure class="photo-left">
                  <img src="path/to-img.jpg" alt="Description">
                  <figcaption>My caption</figcaption>
          </figure>

and one photo on the right with text wrap:
          <figure class="photo-right">
                  <img src="path/to-img.jpg" alt="Description">
                  <figcaption>My caption</figcaption>
          </figure>

*/


html {
    font-size: 100%; /* Use browser's default size. The 'rem' unit then refers to that */
}
body {
    font-size: 16pt;
    max-width: 80ch;
    margin: 0 auto;
    padding: 0 1ch;
    background-color: LightGray;
}
h1 {
    text-align: center;
    margin-bottom: -1rem;
}
.author {
    font-style: italic;
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: -1.4rem;
}
.date {
    font-style: italic;    
    text-align: center;
    font-size: 1.5rem;
}

/* Base figure styles */
figure {
    margin: 20px 0;
    text-align: center;
}

figure img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
}

figure figcaption {
    font-style: italic;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

/* Photos next to each other, taking the whole width, spread evenly.
   Good for multiple <figure> entries.

   Usage:
    <div class="image-container">
      <figure>
        <img src="imgs/myBlog/luskErikaTypewriter.jpg" alt="Description img1">
        <figcaption>Old Typewriter</figcaption>
      </figure>
      <figure>
        <img src="imgs/myBlog/palette.jpeg" 
             alt="Sending it off." 
             style="height: 200px; width: auto" 
        >
        <figcaption>The bike goes traveling</figcaption>
      </figure>
      <figure>
        <img src="imgs/myBlog/theHarleyArtist.jpg">
      </figure>
    </div>
 */
.image-container {
  display: flex;
  justify-content: space-around; /* Or space-evenly */
  align-items: center;
  max-width: 80ch;
  margin: 0 auto;
  gap: 1ch; /* Adds 1ch of space between the images */
  margin-top: 1rem; /* Adds space between the text and the photos */
  margin-bottom: 1rem;  
}

.image-container img {
  max-width: 100%; /* Prevent images from overflowing their container */
  height: 250px;
  width: auto;
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 1;
}

.image-container figure {
  max-width: 100%;
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 1;
  /* Remove any inherited float behavior in flex context */
  float: none;  
}

.image-container figure img {
  max-width: 100%;
  height: 250px;
  width: auto;
}

/* Photo on the left with text wrap 
   Usage (figcaption is optional):
    <figure class="photo-left">
        <img src="imgs/myBlog/palette.jpeg">
        <figcaption>Sending it off</figcaption>
    </figure>
*/
figure.photo-left {
    float: left;
    max-width: 300px;
    margin: 0 20px 20px 0;
    margin-top: 0.5rem;
    clear: both; /* Start fresh, clearing any previous floats */
}

/* Photo on the right of page, with text wrap 
   Usage (figcaption is optional):
    <figure class="photo-right">
        <img src="imgs/myBlog/palette.jpeg">
        <figcaption>Sending it off</figcaption>
    </figure>
*/
figure.photo-right {
    float: right;
    max-width: 300px;
    margin: 0 0 20px 20px;
    margin-top: 0.5rem;    
    clear: both; /* Start fresh, clearing any previous floats */
}

/* Photo in the center of the line by itself:
   Usage (figcaption is optional):
    <figure class="photo-center">
        <img src="imgs/myBlog/palette.jpeg">
        <figcaption>Sending it off</figcaption>
    </figure>
*/
figure.photo-center {
    display: block;
    margin: 0 auto;
}

figure.photo-center img {
    width: 100%;
    height: 250px;
    width: auto;
    margin: 10px auto;
}

figure.photo-left img,
figure.photo-right img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

figure.photo-left figcaption,
figure.photo-right figcaption {
    text-align: center;
    margin-top: 8px;
}

.note {
    font-style: italic;
    margin-bottom: 15px;
}

/*
Two photos, one on the left, one on the right, with text in 
between. Like a three-column part of the page, with two photos
bookmarking a block of text:
*/

/* Flexbox three-column layout */
.three-column-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin: 1rem 0;
}

.three-column-layout figure {
    flex: 0 0 250px; /* Don't grow/shrink, fixed width */
    margin: 0;
    margin-top: 0.5rem;
}

.three-column-layout .text-column {
    flex: 1; /* Take up remaining space */
    padding: 0 10px;
}

.three-column-layout img {
    width: 100%;
    height: auto;
}

.three-column-layout figcaption {
    font-style: italic;
    font-size: 1rem;
    margin-top: 8px;
    text-align: center;
}



/* New style for enlarged images, after double clicking on them */
.enlarged {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto !important;
    height: auto !important;
    max-width: 90vw !important; /* Prevents image from being wider than the viewport */
    max-height: 90vh !important; /* Prevents image from being taller than the viewport */
    z-index: 1000; /* Ensure the image is on top of other content */
    object-fit: contain !important; /* Ensures the full image is visible */
    cursor: zoom-out; /* Change the cursor to indicate it can be shrunk */
}

/* Optional: Add a backdrop to darken the rest of the page */
.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 999;
}

/* Utility classes */
.clear-float {
    clear: both;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}