@charset "utf-8";

/* Navbar styling */
.navbar-custom, .navbar-custom .dropdown-menu {
  background-color: #828282;
}
.navbar-custom .navbar-brand, .navbar-custom .navbar-text,
.navbar-custom .navbar-nav .nav-link,
.navbar-custom .dropdown-item {
  color: #ecf0f1;
}
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .dropdown-item:hover, 
.navbar-custom .dropdown-item:focus {
  background-color: #585858;
  color: #fff;
}
.custom-toggler.navbar-toggler {
  border-color: #ecf0f1;
  color: #fff;
}
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(236,240,241, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/* Typography */
h1 {
  color: #585858;
  font-weight: bold;
  font-size: 2rem;
}
h3 a {
  color: #585858;
  font-size: 1.5rem;
}
.col-12 h3 {
  color: #120090;
  font-size: 1.25rem;
  padding-top: 0.5rem;
}
.bb {
  font-weight: bold;
  font-size: larger;
}

/* Gallery container on Bootstrap row; no global .col-12 overrides */
.gallery { margin-top: .5rem; }

.col-12 p, .col-12 h1, .col-12 h3, .col-12 ul {
  margin: 0.25rem 0;
  flex: 0 0 100%;
  width: 100%;
}

/* Figure styling (images and videos) */
.figure {
  
  
  min-
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.image-container { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.image-container img, .image-container video { width: 100%; height: 100%; object-fit: cover; display: block; }
.figure-caption {
  margin-top: 0.25rem;
  text-align: center;
  font-size: 0.9rem;
  width: 100%;
  flex-grow: 0;
}

/* Portrait: taller than wide, narrower */
#portrait {
  flex: 0 0 25%;
  max-width: 25%;
  min-width: 150px;
}
#portrait .image-container { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }

/* Pano: much wider, full width */
.col-12 .figure#pano {
  flex: 0 0 60%;
  max-width: 60%;
  min-width: 300px;
}
#pano .image-container { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
#pano .image-container img, .image-container video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Responsive adjustment for smartphones */
@media (max-width: 480px) {
  .col-12 .figure {
    
    
    min-
  }
  .col-12 #portrait {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 100%;
  }
  .col-12 .figure#pano {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 100%;
  }
}

/* Footer styling (placed last for override) */
footer.row {
  width: 100%;
  background-color: #828282; /* Matches navbar */
  color: #ecf0f1; /* Matches navbar text */
  margin-top: 1rem;
  padding: 0.5rem 0;
}
footer.row 
/* Figure layout */
figure.figure { display: flex; flex-direction: column; align-items: center; }
.figure-caption { margin-top: .25rem; text-align: center; line-height: 1.3; }

/* Variants */
figure.portrait .image-container { aspect-ratio: 3 / 4; }
figure.pano .image-container { aspect-ratio: 2.5 / 1; }


.gallery {
  display: flex;
  flex-wrap: wrap;
  
  
}
.gallery > [class*="col-"] {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  margin-bottom: 0.5rem;
}


/* --- Gallery overrides to ensure thumbnails fill columns and panos span correctly --- */
.gallery .figure {    }
.gallery .image-container { width: 100% !important; }
.gallery .figure-caption { width: 100%; }

/* Keep consistent gaps */
.gallery {   }
.gallery > [class*="col-"] { padding: 0.5rem; }


/* */
.gallery .figure {    }


/* */
.gallery { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.gallery .figure { margin: 0; display: flex; flex-direction: column; align-items: center; }

/* Phone: 1 per row */
@media (max-width: 575.98px) {
  .gallery .figure {  }
  .gallery figure.portrait, .gallery figure#portrait { flex-basis: 92%; } /* slight visual tuck */
  .gallery figure.pano, .gallery figure#pano { flex-basis: 100%; }
}

/* Tablet (iPad): 2 per row baseline; portraits a bit narrower, panos full width */
@media (min-width: 576px) and (max-width: 991.98px) {
  .gallery .figure {  }
  .gallery figure.portrait, .gallery figure#portrait { flex-basis: 45%; }
  .gallery figure.pano, .gallery figure#pano { flex-basis: 100%; }
}

/* Desktop: ~1/3 baseline; portraits a bit narrower; panos wider */

  .gallery .figure {  }
  .gallery figure.portrait, .gallery figure#portrait { flex-basis: 28%; }
  .gallery figure.pano, .gallery figure#pano { flex-basis: 66.666%; }
}

/* Maintain even padding around items without fighting Bootstrap gutters */
.gallery {   }
.gallery > * { padding-left: 0.375rem; padding-right: 0.375rem; }

/* Thumbnails fill the figure width */
.image-container { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.gallery figure.portrait .image-container, .gallery figure#portrait .image-container { aspect-ratio: 3 / 4; }
.gallery figure.pano .image-container, .gallery figure#pano .image-container { aspect-ratio: 2.5 / 1; }
.image-container img, .image-container video { width: 100%; height: 100%; object-fit: cover; display: block; }



.gallery { display: flex; flex-wrap: wrap;   }
.gallery > figure.figure { box-sizing: border-box; padding-left: 0.5rem; padding-right: 0.5rem; margin: 0; display: flex; flex-direction: column; align-items: center;  }

/* Phone (default): 1 per row; portraits slightly narrower doesn't matter here */
.image-container { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.gallery figure.portrait .image-container, .gallery figure#portrait .image-container { aspect-ratio: 3 / 4; }
.gallery figure.pano .image-container, .gallery figure#pano .image-container { aspect-ratio: 2.5 / 1; }
.image-container img, .image-container video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Tablet (iPad, ≥768px): 2 per row baseline; portraits a bit narrower; panos full width */

  .gallery > figure.figure {  }
  [% !important; }
  .gallery > figure.figure.pano, .gallery > figure.figure#pano { flex-basis: 100% !important; }
}

/* Desktop (≥992px): 3 per row baseline; portraits smaller; panos wider */

  .gallery > figure.figure {  }
  [% !important; }
  .gallery > figure.figure.pano, .gallery > figure.figure#pano { flex-basis: 66.666% !important; }
}



.gallery {
  display: flex;
  flex-wrap: wrap;
  
  
}
.gallery > figure.figure {
  box-sizing: border-box;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
   /* default: phone 1-up */
}

/* Thumbnail boxes */
.image-container { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.gallery figure.portrait .image-container, .gallery figure#portrait .image-container { aspect-ratio: 3 / 4; }
.gallery figure.pano .image-container, .gallery figure#pano .image-container { aspect-ratio: 2.5 / 1; }
.image-container img, .image-container video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Tablet (iPad, ≥768px and <992px): 2 per row baseline; portraits ~33%; panos full width */

  .gallery > figure.figure {  }
  .gallery > figure.figure.portrait, .gallery > figure.figure#portrait { flex-basis: 33% !important; }
  .gallery > figure.figure.pano, .gallery > figure.figure#pano { flex-basis: 100% !important; }
}

/* Desktop (≥992px): 3 per row baseline; portraits ~20%; panos ~66.666% */

  .gallery > figure.figure {  }
  .gallery > figure.figure.portrait, .gallery > figure.figure#portrait { flex-basis: 20% !important; }
  .gallery > figure.figure.pano, .gallery > figure.figure#pano { flex-basis: 66.666% !important; }
}



/* Tablet (iPad, ≥768px and <992px): 2-up baseline; portraits ~33%; panos full width */
@media (min-width: 768px) and (max-width: 991.98px) {
  .gallery > figure.figure { width: auto !important; max-width: none !important; flex: 0 0 calc(50% - 1rem) !important; }
  .gallery > figure.figure.portrait, .gallery > figure.figure#portrait { flex-basis: calc(33% - 1rem) !important; }
  .gallery > figure.figure.pano, .gallery > figure.figure#pano { flex-basis: 100% !important; }
}

/* Desktop (≥992px): 3-up baseline; portraits ~20%; panos ~66.666% */
@media (min-width: 992px) {
  .gallery > figure.figure { width: auto !important; max-width: none !important; flex: 0 0 calc(33.333% - 1rem) !important; }
  .gallery > figure.figure.portrait, .gallery > figure.figure#portrait { flex-basis: calc(20% - 1rem) !important; }
  .gallery > figure.figure.pano, .gallery > figure.figure#pano { flex-basis: calc(66.666% - 1rem) !important; }
}


/* gallery-margins-balance */
.gallery { margin-left: -0.5rem; margin-right: -0.5rem; }



/* Base: mobile 1-up */
.gallery > figure.figure { flex: 0 0 100% !important; width: auto !important; max-width: none !important; }

/* Tablet (iPad): 2-up landscapes; portraits ~33%; panos full-width */
@media (min-width: 768px) and (max-width: 991.98px) {
  .gallery > figure.figure:not(.portrait):not(#portrait):not(.pano):not(#pano) {
    flex: 0 0 calc(50% - 1rem) !important; width: auto !important; max-width: none !important;
  }
  .gallery > figure.figure.portrait, .gallery > figure.figure#portrait {
    flex-basis: calc(33% - 1rem) !important; width: auto !important; max-width: none !important;
  }
  .gallery > figure.figure.pano, .gallery > figure.figure#pano {
    flex-basis: 100% !important; width: auto !important; max-width: none !important;
  }
}

/* Desktop: 3-up landscapes; portraits ~20%; panos ~66.666% */
@media (min-width: 992px) {
  .gallery > figure.figure:not(.portrait):not(#portrait):not(.pano):not(#pano) {
    flex: 0 0 calc(33.333% - 1rem) !important; width: auto !important; max-width: none !important;
  }
  .gallery > figure.figure.portrait, .gallery > figure.figure#portrait {
    flex-basis: calc(20% - 1rem) !important; width: auto !important; max-width: none !important;
  }
  .gallery > figure.figure.pano, .gallery > figure.figure#pano {
    flex-basis: calc(66.666% - 1rem) !important; width: auto !important; max-width: none !important;
  }
}



/* === Neutralize legacy global figure sizing === */
.figure { flex: initial !important; width: auto !important; max-width: none !important; }


/* ===== Responsive Gallery (definitive) ===== */
.gallery {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}
.gallery > figure.figure {
  box-sizing: border-box;
  padding-left: 8px;
  padding-right: 8px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 100%; /* phone default: 1-up */
}

/* Thumbnail boxes */
.image-container { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.gallery figure.portrait .image-container, .gallery figure#portrait .image-container { aspect-ratio: 3 / 4; }
.gallery figure.pano .image-container, .gallery figure#pano .image-container { aspect-ratio: 2.5 / 1; }
.image-container img, .image-container video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* iPad (≥768px and <992px): 2-up; portraits ~33%; panos full width */
@media (min-width: 768px) and (max-width: 991.98px) {
  .gallery > figure.figure { flex: 0 0 calc(50% - 16px); }
  .gallery > figure.figure.portrait, .gallery > figure.figure#portrait { flex-basis: calc(33% - 16px); }
  .gallery > figure.figure.pano, .gallery > figure.figure#pano { flex-basis: calc(100% - 16px); }
}

/* Desktop (≥992px): 3-up; portraits ~20%; panos ~66.666% */
@media (min-width: 992px) {
  .gallery > figure.figure { flex: 0 0 calc(33.333% - 16px); }
  .gallery > figure.figure.portrait, .gallery > figure.figure#portrait { flex-basis: calc(20% - 16px); }
  .gallery > figure.figure.pano, .gallery > figure.figure#pano { flex-basis: calc(66.666% - 16px); }
}