@media (min-width: 768px) {
  section {
    padding: 6.8rem 0;
  }
}

.font-cedarville {
  font-family: 'Cedarville Cursive', cursive;
}


/* Horizontal Scroll Section Styles */
.horizontal-scroll-section .image-card {
  width: 596px;
  /* Default width for desktop */
  height: 400px;
  object-fit: cover;
  display: block;
  /* Make the anchor a block element */
  border-radius: 0.375rem;
  /* Bootstrap's .rounded class equivalent (rounded-2) */
  overflow: hidden;
  /* Ensures content (like the image) respects the border-radius */
}

/* The .img-fluid class on the <img> tag handles its responsiveness (max-width: 100%; height: auto;) */
/* The .rounded class on the <img> tag handles its own border radius */


.horizontal-scroll-section .image-card-overlay h5 {
  /* The .text-white class from Bootstrap is applied in HTML */
  /* .mb-0 class from Bootstrap is applied in HTML to remove bottom margin */
  font-size: 1.1rem;
  /* Custom font size for the title if needed */
}

/* Responsive adjustments for image card width */
@media (max-width: 1199.98px) {

  /* Extra large devices (large desktops, less than 1200px) */
  .horizontal-scroll-section .image-card {
    width: 400px;
  }
}

@media (max-width: 991.98px) {

  /* Large devices (desktops, less than 992px) */
  .horizontal-scroll-section .image-card {
    width: 400px;
  }
}

@media (max-width: 767.98px) {

  /* Medium devices (tablets, less than 768px) */
  .horizontal-scroll-section .image-card {
    width: 320px;
  }
}

@media (max-width: 575.98px) {

  /* Small devices (landscape phones, less than 576px) */
  .horizontal-scroll-section .image-card {
    width: 280px;
    /* Adjust for very small screens, could also use viewport units like 80vw */
  }

  .mb-bold-label {
    font-weight: bold !important;
  }
}

/* Hide scrollbar for the horizontal scroll section */
.horizontal-scroll-section ul.overflow-auto {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.horizontal-scroll-section ul.overflow-auto::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

.masthead {
  height: 75vh;
  /* Consistent hero height */
  margin-bottom: 0;
  overflow: hidden;
  /* Prevent extra space and clip overflowing images */
}

/* Ensure carousel fills the masthead and images cover properly */
.masthead .carousel,
.masthead .carousel-inner,
.masthead .carousel-item {
  height: 100%;
}

.masthead .carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  /* Center focal point on mobile */
  display: block;
}

/* Title sizing and layout tweaks for mobile */
.masthead-title-container h1 {
  line-height: 1.1;
}

@media (max-width: 991.98px) {
  .masthead {
    height: 70vh;
  }

  .masthead-title-container h1 {
    font-size: 2.2rem;
  }
}

@media (max-width: 575.98px) {
  .masthead {
    height: 65vh;
  }

  .masthead-title-container h1 {
    font-size: 1.75rem;
  }
}

.full-viewport-height-image {
  width: 100%;
  height: 90vh;
  object-fit: cover;
  /* Ensures the image covers the area, maintaining aspect ratio */
}

.overlay-text-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Cover the parent section */
  padding: 1rem;
  /* Optional: adds some space from the edges */
}

.approach-image-hero-section {
  margin-top: -280px;
  z-index: 1000;
  position: relative;
}

/* --- Styling for Highlighted Package Cards --- */
.package-highlight-card-img {
  width: 100%;
  height: 100%;
  /* Fill the column height */
  object-fit: cover;
  /* Cover, don't distort, crop if necessary */
}

/* Apply border radius to the image based on its position in the card structure */
/* When image is on the left (side-by-side layout for sm and up) */
@media (min-width: 576px) {
  .package-highlight-card .col-sm-6:first-child .package-highlight-card-img {
    border-top-left-radius: var(--bs-card-border-radius);
    border-bottom-left-radius: var(--bs-card-border-radius);
    border-top-right-radius: 0;
    /* No radius on the side connecting to the text part */
    border-bottom-right-radius: 0;
  }
}

/* When image is on top (stacked layout for xs) */
@media (max-width: 575.98px) {
  .package-highlight-card .col-sm-6:first-child .package-highlight-card-img {
    height: 250px;
    /* Or your preferred height for stacked image */
    border-top-left-radius: var(--bs-card-border-radius);
    border-top-right-radius: var(--bs-card-border-radius);
    border-bottom-left-radius: 0;
    /* Image is on top, so no bottom radius here */
    border-bottom-right-radius: 0;
  }
}

/* Custom styles for fullscreen modal in Bootstrap 4 */
.modal-fullscreen .modal-dialog {
  max-width: none;
  width: 100%;
  height: 100%;
  margin: 0;
}

.modal-fullscreen .modal-content {
  height: 100%;
  border-radius: 0;
  /* Optional: Remove rounded corners for a true fullscreen look */
  border: 0;
  /* Optional: Remove default modal border */
  display: flex;
  /* Enable flex layout for header, body, footer */
  flex-direction: column;
  /* Stack header, body, footer vertically */
}

.modal-fullscreen .modal-body {
  flex-grow: 1;
  /* Allow body to take up available vertical space */
  overflow-y: auto;
  /* Add scroll to body if content overflows */
}

/* Reservation page room image styling */
@media (min-width: 768px) {

  /* md breakpoint and up */
  .package-image {
    /* This class is on the image itself in package.html, so it's fine */
    max-width: 30%;
    object-fit: cover;
    /* Ensures image covers the area without distortion */
    align-self: start;
    /* Aligns the image to the top of the flex container */
  }

  .reservation-room-image-container {
    /* New class for the container div */
    max-width: 20%;
    /* Constrain the container's width */
    align-self: start;
    /* Align the container in the flex parent */
  }

  .reservation-room-image-container img {
    /* Style the image inside the container */
    height: 100%;
    /* Make image fill the container height */
    object-fit: cover;
    /* Ensures image covers the area without distortion */
    cursor: pointer;
  }
}

/* Fix selection contrast for red text in lists (Included Services) */
/* Page-scoped selection override (some browsers ignore complex ancestry with ::selection),
   so target the exact elements used in the lists */
#retreats-app .service-item::selection,
#retreats-app .service-item span::selection,
#retreats-app .service-item a::selection,
#experiences-app .service-item::selection,
#experiences-app .service-item span::selection,
#experiences-app .service-item a::selection {
  background: rgba(212, 42, 17, 0.18) !important;
  color: #212529 !important;
}

#retreats-app .service-item::-moz-selection,
#retreats-app .service-item span::-moz-selection,
#retreats-app .service-item a::-moz-selection,
#experiences-app .service-item::-moz-selection,
#experiences-app .service-item span::-moz-selection,
#experiences-app .service-item a::-moz-selection {
  background: rgba(212, 42, 17, 0.18) !important;
  color: #212529 !important;
}