.modal {
  display: none; /* Hidden by default */
  position: fixed;
  inset: 0; /* Full screen overlay */
  background-color: rgba(0, 0, 0, 0.75); /* Semi-transparent background */
  z-index: 1000; /* High z-index to sit on top of other content */
  justify-content: center;
  align-items: center;
}

/* Modal content */
.modal-content {
  background-color: #fff; /* White background for content */
  padding: 20px; /* Padding inside the modal */
  border: 1px solid #ccc; /* Light border around the modal */
  border-radius: 8px; /* Rounded corners */
  /* width: 80%; */
  position: relative; /* Position relative for the close button */
}

/* Close button */
.close {
  position: absolute;
  top: -8px;
  right: 5px;
  font-size: 30px;
  color: #ff1515;
  cursor: pointer;
}

.close:hover {
  color: #000; /* Change color on hover */
}
/* Image Slider container */
.image-slider {
  position: relative;
  width: clamp(360px, 80vw, 800px); /* Responsive width */
  aspect-ratio: 16 / 9; /* Aspect ratio */
  overflow: hidden; /* Hide overflow */
  background-color: #000; /* Background color for the slider */
  border-radius: 8px; /* Rounded corners */
}

/* Slider content */
.slider__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%; /* Full height */
}

/* Slider control buttons */
.slider-control--button {
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Previous button */
.prev-button {
  right: 1px;
}

/* Next button */
.next-button {
  left: 1px;
}

/* Icon for buttons */
.icon {
  height: 24px;
  width: 24px;
  fill: #fff; /* White color */
}

/* Slider navigation */
.slider-navigation {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  position: absolute;
  bottom: 10px; /* Position at the bottom */
  width: 100%; /* Full width */
}

.slider-navigation .nav-button {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5rem;
  background: #fff;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  max-height: 60px;
    max-width: 100px;
}

.slider-navigation .nav-button:hover {
  background-color: #ddd;
  transform: scale(1.1); /* Slightly enlarge on hover */
}

/* Base styling for post images */
.post .post-image img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

/* Ensure the image is fully visible after lazy loading */
.post .post-image img.lazyloaded {
  opacity: 1 !important;
}

/* Hide skeleton and show actual content when loaded */
.post .not-skeleton,
.post.lazyloaded .skeleton {
  display: none;
}

.post.lazyloaded .not-skeleton {
  display: block;
}

/* Hover effect for the post image */
.post:hover .post-image img {
  filter: brightness(0.9);
}

/* Overlay styling */
.post .image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease-in-out; /* Smooth transition for visibility */
  border-radius: inherit; /* Match the border radius of the image */
}

/* Show overlay and button on hover */
.post:hover .image-overlay {
  opacity: 1;
}

/* Button styling */
.post .image-overlay .show-images-btn {
  background-color: rgba(255, 255, 255, 0.8); /* Light background */
  color: #333; /* Dark text */
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
  opacity: 0; /* Initially hidden */
}

/* Show button on hover */
.post:hover .image-overlay .show-images-btn {
  opacity: 1;
  transform: scale(1.05); /* Slightly enlarge button */
}

/* Optional: Adjust button appearance on hover */
.post .image-overlay .show-images-btn:hover {
  background-color: rgba(255, 255, 255, 1); /* Lighter background on hover */
}

/* ############################ */
.image-slider {
  display: flex;
  flex-flow: column;
  width: clamp(360px, 96vw, 830px);
  /* max-width:600px; */
  aspect-ratio: 16 / 9;
  min-height: 400px;
  overflow: hidden;
  border-radius: 8px;
  container-type: inline-size;
  contain: content;
  background-color: #0006;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px, rgba(0, 0, 0, 0.3) 0px 2px 4px,
    rgba(0, 0, 0, 0.25) 0px 4px 8px, rgba(0, 0, 0, 0.2) 0px 8px 16px,
    rgba(0, 0, 0, 0.15) 0px 16px 32px;
}

.slider__content {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
}

.slider-control--button {
  border: 0;
  background: 0;
  outline: 0;
  cursor: pointer;
  place-content: center;
  padding-inline: 3vw;
  z-index: 1;
  display: grid;
}

.icon {
  height: 2rem;
  width: 2rem;
  fill: var(--icon-default);
  border-radius: 50%;
}

.slider-control--button:where(:hover) {
  background-image: linear-gradient(
    to var(--position),
    #0000 0%,
    #0002,
    80%,
    #0006 100%
  );
  .icon {
    fill: var(--icon-accent);
    background: #0001;
  }
}

.slider-control--button:active {
  outline: 0.2em solid hsl(204 100 53);
  outline-offset: -0.5em;
}

.prev-button {
  --position: right;
}
.next-button {
  --position: left;
}

.image-display {
  position: fixed;
  inset: 0;
}

.slider-navigation {
  z-index: 10;
  /*display: grid;*/
  grid-auto-flow: column;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-columns: 100%;
  gap: 1.25rem;
  padding: 1rem;
  place-content: center;
  background-color: var(--navigation-color);
  backdrop-filter: blur(6px);
}

.nav-button {
  display: grid;
  width: 100%;
  height: 100%;
  border-radius: 0.5em;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  border: 0;
  aspect-ratio: 16 / 9;
  transition: filter 150ms linear, scale 266ms ease;
  max-height: 60px;
    max-width: 100px;
}

.thumbnail {
  display: block;
  max-width: 100%;
  width: 100%;
  object-fit: cover;
  height: 100%;
}

.nav-button[aria-selected="true"] {
  scale: 1.1;
}

.nav-button[aria-selected="true"],
.nav-button:focus-visible {
  outline: 0.2em solid var(--active-color);
  outline-offset: 0.2em;
}

.nav-button[aria-selected="false"] {
  filter: opacity(0.7);
}

.nav-button[aria-selected="false"]:where(:hover, :focus-visible) {
  filter: opacity(1);
}

@container (max-width: 660px) {
  .nav-button:not(:has(img)) {
    background-color: rgb(241, 235, 232);
  }

  .slider-navigation {
    display: flex;
    justify-content: center;
    padding-block: 1.5em;
  }

  .nav-button {
    inline-size: 0.625rem;
    aspect-ratio: 1;
    border-radius: 50%;
  }

  .nav-button > .thumbnail {
    display: none;
  }

  .nav-button[aria-selected="true"] {
    background-color: black;
    scale: 1.5;
  }
}