/* Carousel Styling */
.carousel {
  width: 100%;
  position: relative;
  overflow-x: hidden;
}

.carousel-inner {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.carousel-inner::-webkit-scrollbar {
  display: none;
}

.carousel-inner a {
  flex: 0 0 360px; /* Default width of 360px per image on large screens */
  scroll-snap-align: center;
  margin-right: 10px;
}

.carousel-inner img {
  width: 100%;
  height: auto;
  max-width: 360px; /* Caps the image at 360px */
  object-fit: cover; /* Or contain, depending on your preference */
}

/* Responsive adjustments for thumbnails */
@media screen and (max-width: 768px) {
  .carousel-inner a {
    flex: 0 0 300px;
  }
}

@media screen and (max-width: 480px) {
  .carousel-inner a {
    flex: 0 0 250px;
  }
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(202, 202, 202, 0.5); /* Transparent gray */
  color: white;
  border: none;
  font-size: 12px; /* Reduced by 50% from 24px */
  padding: 5px 10px; /* Reduced by 50% from 10px 20px */
  cursor: pointer;
  z-index: 1;
}

.carousel-nav.prev {
  left: 10px;
}

.carousel-nav.next {
  right: 10px;
}

/* Responsive adjustments for navigation buttons */
@media screen and (max-width: 768px) {
  .carousel-nav {
    font-size: 10px; /* Reduced by 50% from 20px */
    padding: 4px 8px; /* Reduced by 50% from 8px 16px */
  }
}

@media screen and (max-width: 480px) {
  .carousel-nav {
    font-size: 8px; /* Reduced by 50% from 16px */
    padding: 3px 6px; /* Reduced by 50% from 6px 12px */
  }
}

[data-fancybox] {
  cursor: pointer;
}

/* Mosaic CSS */
.mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Min 150px, max fills available space */
  grid-auto-flow: dense; /* Packs images to fill gaps, reducing white space */
  gap: 10px; /* Consistent spacing */
  padding: 10px;
  max-width: 100%; /* Ensures the grid doesn’t exceed the viewport */
  margin: 0 auto; /* Centers the grid */
}

/* Define aspect ratios for portrait and landscape images */
.mosaic .portrait img {
  aspect-ratio: 2 / 3; /* Typical portrait ratio (e.g., 384x576px or 200x300px) */
}

.mosaic .landscape img {
  aspect-ratio: 4 / 3; /* Typical landscape ratio (e.g., 480x360px or 300x200px) */
}

.mosaic img {
  width: 100%;
  height: 100%; /* Fill the grid cell height */
  object-fit: cover; /* Ensures images fill their grid cell without distortion */
}

/* Cap at 5 columns on very wide screens */
@media screen and (min-width: 1500px) {
  .mosaic {
    grid-template-columns: repeat(5, 1fr); /* Fixed 5 equal-width columns */
    max-width: 1510px; /* 5 columns + 4 * 10px gap */
  }
}

/* Fine-tune for very small screens */
@media screen and (max-width: 480px) {
  .mosaic {
    gap: 5px; /* Reduce gap on tiny screens */
  }
}

/* Centered Images*/

.centered-gallery {
  text-align: center;
  margin: 15px 0;
}

.centered-gallery img {
  max-width: 768px; /* Fallback for desktop */
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Ensure images scale down to viewport width on mobile */
@media screen and (max-width: 768px) {
  .centered-gallery img {
    max-width: 100%; /* Scale to container width */
    width: 100%; /* Ensure it fills the container */
    height: auto; /* Maintain aspect ratio */
  }
}

.centered-gallery p {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

/* Side by Side*/

.side-by-side-gallery {
  margin: 15px 0;
  overflow: hidden;
}

.side-by-side-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Center items if they don’t fill the row */
  gap: 20px; /* Use gap instead of margin for cleaner spacing */
}

.side-by-side-item {
  flex: 0 1 auto; /* Allow container to shrink to content */
  max-width: calc(50% - 20px); /* Maximum width for two columns */
  text-align: center;
}

.side-by-side-item img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

.side-by-side-item p {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
  text-align: center;
}

/* Stack on mobile */
@media screen and (max-width: 768px) {
  .side-by-side-item {
      flex: 0 1 100%;
      max-width: 100%;
  }
}

/* Single Carousel Styling */
.single-carousel {
  width: 100%;
  position: relative;
  overflow-x: hidden;
  max-width: 768px; /* Limit total width to accommodate 768px images */
  margin: 15px auto;
}

.single-carousel-inner {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  justify-content: center; /* Center the <a> elements */
}

.single-carousel-inner::-webkit-scrollbar {
  display: none;
}

.single-carousel-inner a {
  flex: 0 0 auto; /* Adjust to content width */
  scroll-snap-align: center;
  display: none; /* Hidden by default, shown via JS */
}

.single-carousel-inner a img {
  width: auto;
  height: auto;
  max-width: 768px; /* Fallback */
  object-fit: contain;
  display: block; /* Ensure image can be centered */
  margin: 0 auto; /* Center the image within the <a> tag */
}

@media screen and (max-width: 768px) {
  .single-carousel {
      max-width: 100%;
  }
  .single-carousel-inner a {
      flex: 0 0 100%;
  }
  .single-carousel-inner a img {
      width: 100%; /* Scale to container width on mobile */
      max-width: 100%;
      height: auto;
  }
  .single-carousel-nav {
      font-size: 10px;
      padding: 4px 8px;
  }
}

.single-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(202, 202, 202, 0.5);
  color: white;
  border: none;
  font-size: 12px;
  padding: 5px 10px;
  cursor: pointer;
  z-index: 1;
}

.single-carousel-nav.prev {
  left: 10px;
}

.single-carousel-nav.next {
  right: 10px;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  .single-carousel {
      max-width: 100%;
  }
  .single-carousel-inner a {
      flex: 0 0 100%; /* Full width on mobile */
  }
  .single-carousel-nav {
      font-size: 10px;
      padding: 4px 8px;
  }
}

@media screen and (max-width: 480px) {
  .single-carousel-nav {
      font-size: 8px;
      padding: 3px 6px;
  }
}

/* Route Index Thumbnail Gallery */
.route-index-thumbnail-gallery {
  padding: 20px 0; /* Remove horizontal padding to match mock-up */
  max-width: 1200px;
  margin: 0 auto;
}

.route-index-gallery-rows {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.route-index-gallery-item {
  width: 200px; /* Default width for larger screens */
  text-align: center;
  flex: 0 0 auto; /* Allows items to maintain their width */
}

.route-index-gallery-item img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: opacity 0.3s;
}

.route-index-gallery-item img:hover {
  opacity: 0.8;
}

.route-index-gallery-caption p {
  margin: 5px 0;
  font-size: 14px;
}

.route-index-gallery-caption a {
  text-decoration: none;
  color: darkgreen;
}

.route-index-gallery-caption a:hover {
  text-decoration: underline;
}

/* Mobile view (≤414px) - Two columns */
@media screen and (max-width: 414px) {
  .route-index-gallery-rows {
      justify-content: space-between; /* Distributes items evenly */
      margin: 0 -10px; /* Negative margin to offset padding and use full width */
      gap: 10px; /* Reduce gap for mobile */
  }
  .route-index-gallery-item {
      width: calc(50% - 20px); /* Two columns, accounting for gap and padding */
      flex: 0 0 calc(50% - 20px); /* Ensures consistent 50% width per item */
      padding: 0 10px; /* Padding to offset negative margin */
      box-sizing: border-box; /* Includes padding in width calculation */
  }
  .route-index-gallery-item img {
      max-width: 100%; /* Ensures image scales within smaller container */
  }
  .route-index-gallery-caption p {
      font-size: 12px; /* Slightly smaller text on mobile */
  }
}

/* Historical Records Table Styling */
.historical-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 16px;
  line-height: 1.5;
  border: 1px solid #ddd;
}

.historical-table thead {
  background-color: #f4f4f4;
}

.historical-table th,
.historical-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.historical-table th {
  font-weight: bold;
  color: #333;
}

.historical-table tbody tr {
  transition: background-color 0.3s;
}

.historical-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.historical-table tbody tr:hover {
  background-color: #f1f1f1;
}

/* Responsive Table */
@media screen and (max-width: 768px) {
  .historical-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
  }

  .historical-table {
    min-width: 600px; /* Ensure table is wide enough to maintain readability */
  }

  .historical-table th,
  .historical-table td {
    font-size: 14px; /* Slightly smaller text on mobile */
    padding: 8px 10px; /* Reduced padding on mobile */
  }
}

blockquote {
  background-color: #ededed;
  margin: 10px auto;
  padding: 15px;
  border-radius: 5px;
}
/*
     FILE ARCHIVED ON 11:46:26 Jul 08, 2025 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 05:21:11 Oct 02, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  capture_cache.get: 0.379
  captures_list: 0.378
  exclusion.robots: 0.034
  exclusion.robots.policy: 0.026
  esindex: 0.006
  cdx.remote: 9.306
  LoadShardBlock: 99.492 (3)
  PetaboxLoader3.datanode: 60.192 (5)
  load_resource: 125.331
  PetaboxLoader3.resolve: 38.101
  loaddict: 46.989
*/