/*
 * style sheets for the gallery of Maps
 *
 */
 
/* List Container */
.image-list {
  max-width: 1200px; 
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px; /* Spacing between rows */
}

/* Row Item Layout */
.image-item {
  display: grid;
  grid-template-columns: 240px 1fr; /* Thumbnail width, then remaining space */
  gap: 16px; /* Space between thumbnail and content */
  background: #cccccc;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  text-decoration: none;
}

/* Thumbnail */
.thumbnail-wrapper {
  display: flex;
  align-items: flex-start; /* Keeps image pinned to the top */
}

.thumbnail {
  width: 240px;
  height: 240px;
  object-fit: cover; /* Prevents squishing */
  border-radius: 6px;
  background-color: #eee;
}

/* Content Container */
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px; /* Space between name/date row and description */
}

/* Top Row: Name and Date alignment */
.meta-row {
  display: flex;
  justify-content: space-between; /* Pushes name to left, date to right */
  align-items: baseline; /* Aligns text neatly on their baselines */
}

.image-name {
  font-size: 1rem;
  font-weight: 600;
  color: #111; 
}

.image-date {
  font-size: 1.0rem;
  color: #111; 
}

/* Description Text */
.image-description {
  font-size: 1.0rem;
  line-height: 1.4;
  color: #111;
}


  
/* 2. Define a maximum size for the inner container */
#overlay-map-content-container {
  display: flex;
  flex-direction: row; /* Puts image and footer side-by-side */
  align-items: center;
  width: 95vw;        /* Keeps a small gap around the edges of the screen */
  height: 95vh;       /* Prevents the container from going full screen */
  max-width: 1200px;  /* Optional cap so it doesn't get ridiculously wide */
  position: relative;
}

/* 3. Force the image to respect the boundaries of the container */
#overlayImageMap {
  flex: 1;            /* Allows the image to expand/shrink dynamically */
  width: 100%;        /* Forces it to use the flex space */
  height: 100%;
  object-fit: contain;/* Ensures the whole picture is visible without distortion */
  max-width: calc(100% - 120px); /* Creates absolute guaranteed room for the RHS footer */
  
  z-index: 1;
}

/* 4. Lock the 'footer' to the right side as a distinct column */
#overlay-map-footer {
  width: 120px;       /* Fixed width ensures the button never drops out of sight */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers the button vertically on the right */
  align-items: center;     /* Centers the button horizontally in its column */
  flex-shrink: 0;     /* CRITICAL: Prevents the image from squeezing this to 0 width */
  padding: 10px;
  
  position:relative;
  z-index: 10;
  background-color: rgba(21, 21, 21, 0.8);
}

/* ==========================================
   📱 MOBILE OVERRIDES (Screens < 768px)
   ========================================== */
@media (max-width: 767px) {
  .image-item {
    grid-template-columns: 1fr; /* Stacks image and text vertically */
    gap: 12px;
  }

  .thumbnail-wrapper {
    justify-content: center; /* Centres the image on the mobile card */
  }

  .thumbnail {
    width: 100% !important; /* Forces the fixed 240px desktop width to release */
    height: auto !important; /* Allows the height to scale naturally with the width */
    aspect-ratio: 1 / 1; /* Guarantees the image stays perfectly square */
  }

  .meta-row {
    flex-direction: column; /* Prevents text clashing on narrow mobile screens */
    align-items: flex-start;
    gap: 4px;
  }

  /* 1. Change layout from side-by-side to a vertical stack */
  #overlay-map-content-container {
    flex-direction: column;
    width: 98vw;  /* Slightly wider on mobile to maximize map visibility */
    height: 95vh;
  }

  /* 2. Release the right-side restriction so the map takes full mobile width */
  #overlayImageMap {
    max-width: 100% !important; /* Overrides the desktop 120px reduction */
    height: calc(100% - 60px);   /* Makes room for the bottom footer */
  }

  /* 3. Re-lock the footer as a horizontal bar at the bottom */
  #overlay-map-footer {
    width: 100% !important;      /* Spans the full width of the container */
    height: 60px !important;     /* Fixed height at the bottom instead of width */
    flex-direction: row;         /* Horizontally centers elements inside if needed */
    justify-content: center;
    align-items: center;
    padding: 0 10px;
  }
}