/* Image Grid Container */
.image-grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the items horizontally */
    gap: .3125rem; /* Space between images */
    width: 90%; /* Width of the grid container (adjust as necessary) */
    max-width: 62.5rem; /* Optional: max width for the grid container */
    margin: 0 auto; /* top and bottom margins to 0; left and right margins to auto */
}

/* Image Item Container */
.image-item {
    width: 23.1875rem; /* Fixed width for the image container */
    height: 10.75rem; /* Fixed height for the image container */
    overflow: hidden; /* Hide any overflow of images */
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    position: relative;
    box-sizing: border-box; /* Make sure padding/border is included in the size */
    padding: .0625rem; /* Add 2px padding around each image */
    margin: .125rem; /* No margin to avoid space below the image */
    flex-shrink: 0; /* Prevent the container from shrinking */
}

/* Image inside each container */
.image-item img {
    width: 100%;          /* Make the image fill the width of the container */
    height: 100%;         /* Make the image fill the height of the container */
    object-fit: contain;  /* Make sure the image fits within the container without overflowing */
}

/* Container holding the map and table */
.summer_map-container {
    display: flex;
    justify-content: center;  /* Align map and table next to each other */
    gap: .3125rem;  /* Space between the map and table */
    flex-wrap: nowrap;  /* Allow the layout to wrap in smaller screens */
    margin: .3125rem auto;
    width: 90%; /* Match the width of the image grid */
    max-width: 780px; /* Optional: Max width for consistency */
}
.map-container {
    width: 60%;
    display: flex;
    flex-direction: column;
}

/* Style for the map div */
#summer_map {
    /* width: calc(60% + 40px);  Increase map width by 40px */
    width: 100%;
    height: 37.5rem;  /* Set a fixed height for the map */
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius); /* rounded corners */
    margin-left: 0;  /* Ensure the map is aligned with the left edge of the container */
    flex-shrink: 0;  /* Prevent the map from shrinking */
}

#summer_map_coords {  /* style the coordinates that are beneath the map */
    text-align: center;
    margin-top: 0;
    font-size: 1rem;
}

/* Table container style */
.table-container {
    width: 35%; /* Occupy 35% of the container width */
    max-width: 25rem; /* Optional: Max width to prevent the table from becoming too wide */
    margin-left: 0;
    overflow: hidden;
}

table {
  width: 100%; /* Ensure the table takes up the full width of its container */
  height: 100%; /* as above */
  border-spacing: 0;   
  border-collapse: collapse; 
  font-size: 1rem;  /* Set the font size */
  border-radius: var(--border-radius);
  overflow: hidden;
}

table th, table td {
    padding: .1875rem 0.25rem;
    border: var(--border-width) solid var(--border-color);  /*need for interior ines */
    text-align: left;
    background-clip: padding-box; /* Ensure background color extends to the border */
}

table th {
    background-color: #f4f4f4;
}
/* get the map and table into a column and fill width */
@media (max-width: 52.375rem) {  /* 838px; at this point, charts expand to fill column now */
    .summer_map-container {
        flex-direction: column; /* Stack the map and table vertically on smaller screens */
        align-items: center; /* Center the map and table horizontally */
    }
    .summer_map-container, .map-container {  /* map & table container are snotels too */
        width: 100%;
        max-width: none;
        margin: 0 auto;
    }
    .table-container {
        width: 100%; /* Take up more space on smaller screens */
        max-width: none; /* Allow table to stretch on smaller screens */
        margin-top: 0.625rem; /* Add some space above the table when it drops below the map */
    }
    .image-item {   /* charts expand, fill screen below 768 */
        position: relative;
        width: 100%;  /* Ensure images stretch to fit the container */
        height: auto; /* Maintain aspect ratio */
        margin-bottom: 0.0625rem; /* Add space between image and buttons */
    }
}