/* 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 */
    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 */
}
/* Style the forecast button */
.forecast-button {
    position: absolute; /* Position the button inside the image container */
    bottom: .0625rem;  /* Position it at the bottom of the container */
    left: 15%;     /* Center it horizontally */
    transform: translateX(-50%);  /* Center the button by offsetting it */
    background-color: var(--border-color);
    color: white;
    border: none;
    padding: 0 .125rem;
    font-size: .875rem;
    border-radius: .25rem;
    cursor: pointer;
    display: block; /* Ensure the button is displayed */
    z-index: 10;  /* Make sure it's above the image */
}

/* Button Hover Effect */
.forecast-button:hover {
    background-color: var(--border-color);
    text-decoration: underline;
    color: black;
}
/* Specific styles for the page with buttons */
.page-with-buttons .image-grid-container {
    gap: .5rem; /* Increase space between images to make room for buttons */
}

/* Adjust the image-item width and spacing for the page with buttons */
.page-with-buttons .image-item {
    width: 22.5rem; /* my Samsung;Adjusted size for the page with buttons */
    height: 13.75rem; /* Adjusted size */
    margin-bottom: .0625rem; /* Adds space below each image item for the buttons */
}

/* Button Row Styling for this page */
.page-with-buttons .button-row {
    display: flex;
    justify-content: center;
    gap: .125rem;  /* Add some gap between buttons */
    margin-top: .3125rem; /* Space between image grid and button row */
}

/* Button styling */
.page-with-buttons .btn {
    padding: .125rem .375rem;
    background-color: var(--border-color);
    color: black;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: .875rem;
    font-weight: bold;
}

.page-with-buttons .btn:hover {
    background-color: deepskyblue;
}

/* 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: 47rem; /* Optional: Max width for consistency */
}
.map-container {
    width: 59%;
    display: flex;
    flex-direction: column;
}

/* Style for the map div */
#summer_map {
    width: 100%;
    height: 28.75rem;  /* 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: 38%; /* Occupy 35% of the container width */
    max-width: 25rem; /* Optional: Max width to prevent the table from becoming too wide */
    margin-left: 0;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}

table {
  width: 100%; /* Ensure the table takes up the full width of its container */
  height: 100%; /* as above */
  border-collapse: collapse;
  font-size: 1rem;  /* Set the font size */
}

table th, table td {
    padding: .1875rem .25rem;
    border: .0625rem solid var(--border-color);  /* Border for table headers and cells */
    border-radius: var(--border-radius);
    text-align: left;
}

table th {
    background-color: #f4f4f4;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 50rem) {
    .summer_map-container {
        flex-direction: column; /* Stack the map and table vertically on smaller screens */
        align-items: center; /* Center the map and table horizontally */
    }

    .map-container {
    width: 100%;
    max-width: none;
    }

    .table-container {
        width: 100%; /* Take up more space on smaller screens */
        max-width: none; /* Allow table to stretch on smaller screens */
        margin-top: .625rem; /* Add some space above the table when it drops below the map */
    }

     .summer_map-container, .map-container {
        width: 100%;
        max-width: 23.75rem;
        margin: 0 auto;
    }
}