/* ---------- container sizing ---------- */
.gallery-c__container{display:block;margin:0 auto;width:1300px}
@media (max-width:1380px){.gallery-c__container{width:1100px}}
@media (max-width:1180px){.gallery-c__container{width:900px}}
@media (max-width:980px){.gallery-c__container{width:760px}}
@media (max-width:808px){.gallery-c__container{width:100%}}

/* ---------- core gallery structure ---------- */
.gallery-c{position:relative}
.gallery-c__row{margin-bottom:20px}
.gallery-c__row:last-child{margin-bottom:0}
.gallery-c__list{position:relative}
.gallery-c__list:after{content:"";display:table;clear:both}
.gallery-c__item{
  background-color:rgba(0,0,0,.05);
  background-position:50%;
  background-size:cover;
  float:left;
  overflow:hidden;
  position:relative;
}
.gallery-c__link{position:absolute;left:0;top:0;width:100%;height:100%}
.gallery-c__image{width:100%;height:100%;object-fit:cover}

/* ---------- LAYOUTS used in your HTML ---------- */
/* Row 1: big left + two stacked right (main-3) */
.gallery-c__item--main-3-1{width:63%;padding-bottom:45%;margin-right:20px}
.gallery-c__item--main-3-2,.gallery-c__item--main-3-3{width:calc(37% - 20px);padding-bottom:21.7%}
.gallery-c__item--main-3-2{margin-bottom:20px}

/* Row 2: 4-up mosaic (main-4) */
.gallery-c__item--main-4-1,.gallery-c__item--main-4-2{
  width:calc(25% - 15px);padding-bottom:23.9%;margin-right:20px
}
.gallery-c__item--main-4-3{
  width:calc(50% - 10px);padding-bottom:23.8%;
  position:absolute;left:0;bottom:0;margin-top:20px
}
.gallery-c__item--main-4-4{
  width:calc(50% - 10px);padding-bottom:49.25%;float:right
}

/* Row 3: two small left + big right (tertiary-3) */
.gallery-c__item--tertiary-3-1,.gallery-c__item--tertiary-3-2{
  width:calc(37% - 20px);padding-bottom:21.7%
}
.gallery-c__item--tertiary-3-1{margin-bottom:20px}
.gallery-c__item--tertiary-3-2{position:absolute;left:0;bottom:0}
.gallery-c__item--tertiary-3-3{
  width:63%;padding-bottom:45%;float:right;margin-left:20px
}

/* (If you also use the 4-up tertiary row anywhere) */
.gallery-c__item--tertiary-4-1{float:left;width:calc(50% - 10px);padding-bottom:49.25%}
.gallery-c__item--tertiary-4-2,.gallery-c__item--tertiary-4-3{
  float:right;width:calc(25% - 15px);padding-bottom:23.9%;margin-right:20px
}
.gallery-c__item--tertiary-4-2{margin-right:0}
.gallery-c__item--tertiary-4-4{
  position:absolute;right:0;bottom:0;width:calc(50% - 10px);padding-bottom:23.8%;margin-top:20px
}

/* ---------- tiny responsive tweaks from the theme ---------- */
@media (max-width:1380px){
  .gallery-c__item--main-3-2,.gallery-c__item--main-3-3{padding-bottom:21.6%}
  .gallery-c__item--tertiary-3-1,.gallery-c__item--tertiary-3-2{padding-bottom:21.6%}
  .gallery-c__item--tertiary-4-4{padding-bottom:23.6%}
}
@media (max-width:1180px){
  .gallery-c__item--main-4-3{padding-bottom:23.2%}
  .gallery-c__item--tertiary-3-1,.gallery-c__item--tertiary-3-2{padding-bottom:21.39%}
  .gallery-c__item--tertiary-4-4{padding-bottom:23.1%}
}
@media (max-width:980px){.gallery-c__item--tertiary-4-4{padding-bottom:22.8%}}
@media (max-width:808px){
  /* keep floats on small screens like the theme does */
  .gallery-c__item{float:left!important;margin:0 20px 0 0!important;position:relative!important}
}
/* Full-bleed gallery on mobile: beat the global 30px padding */
@media (max-width: 660px) {
  #gallery .gallery-c__container,
  #gallery .gallery-c__row,
  #gallery .gallery-c__list,
  #gallery .gallery-c__item {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* ---- Mobile layout for the existing HTML rows (3 / 4 / 3) ---- */
@media (max-width: 808px) {
  /* make each UL a grid row with gaps */
  .gallery-c__row > .gallery-c__list {
    display: grid !important;
    gap: 12px !important;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* Row 1 and Row 3: 3 across */
  .gallery-c__row:nth-of-type(1) > .gallery-c__list,
  .gallery-c__row:nth-of-type(3) > .gallery-c__list {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Row 2: 4 across */
  .gallery-c__row:nth-of-type(2) > .gallery-c__list {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* neutralize desktop floats/absolutes on li items */
  .gallery-c__row .gallery-c__item {
    float: none !important;
    position: relative !important;
    left: auto !important; right: auto !important;
    top: auto !important;  bottom: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding-bottom: 0 !important;   /* kill desktop aspect hack */
    aspect-ratio: 419 / 230;        /* consistent tile height */
    overflow: hidden;
  }

  /* a few items are absolutely positioned on desktop; reset them */
  .gallery-c__item--main-4-3,
  .gallery-c__item--secondary-3-2,
  .gallery-c__item--secondary-4-4 {
    position: relative !important;
  }

  /* make the image fill each grid tile */
  .gallery-c__link { position: absolute; inset: 0; }
  .gallery-c__image {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
}

/* very narrow phones: slightly tighter gaps */
@media (max-width: 380px) {
  .gallery-c__row > .gallery-c__list { gap: 10px !important; }
}
@media (max-width: 992px) {
  /* Make sure inner lists/rows don’t reintroduce side spacing */
  #gallery .gallery-c__container,
  #gallery .gallery-c__list,
  #gallery .gallery-c__row,
  #gallery .gallery-c__item {
    padding-left: 3px !important;
    padding-right: 3px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

}
/* Smaller, lighter tab buttons on mobile */
@media (max-width: 768px) {
  .gallery-tabs .nav-link {
    padding: .60rem .5rem !important;
    font-weight: 500 !important;
    font-size: 15px;
  }
}

/* ========== Gallery tabs (override Bootstrap pills) ========== */
.gallery-tabs{
  display: flex;
  justify-content: center;        /* center the two buttons */
  gap: .75rem;                    /* space between buttons */
  margin: 0 auto 1.25rem;
}

.gallery-tabs .nav-link{
  background: #f9fafb;            /* light gray */
  color: #465b6b;                 /* muted text */
  border: 1px solid #999;
  border-radius: 1px !important;  /* square-ish corners (override pills) */
  padding: .70rem 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none;
}

.gallery-tabs .nav-link:hover{
  background: #f9f9f9;
  color: #2f4b57;
}

/* Active/selected state (dark blue with white text) */
.gallery-tabs .nav-link.active,
.gallery-tabs .nav-link[aria-selected="true"]{
  background: #405263 !important; /* dark blue like your mock */
  color: #fff !important;
  border-color: #222;
}

/* Small screens: allow wrapping if needed */
@media (max-width: 480px){
  .gallery-tabs{ flex-wrap: wrap; }
}
/* === Bigger gallery tiles on mobile === */
@media (max-width: 808px) {
  /* Make every row 2-up for larger images */
  .gallery-c__row > .gallery-c__list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important; /* a touch more breathing room */
  }

  /* Make tiles taller so images feel larger */
  .gallery-c__row .gallery-c__item {
    aspect-ratio: 4 / 3 !important; /* try 1 / 1 for square tiles */
  }
}

/* super small phones: keep it comfy */
@media (max-width: 380px) {
  .gallery-c__row > .gallery-c__list { gap: 10px !important; }
}
/* When Fancybox is open, hide page chrome that distracts */
html.fancybox-active .gallery-tabs,
html.fancybox-active nav.navbar,
html.fancybox-active #navOverlay,
html.fancybox-active .progress-wrap {
  display: none !important;
}

/* (Optional) make sure Fancybox is on top of any high z-index UI */
.fancybox__container {
  z-index: 10950 !important; /* > your navbar / widgets */
}
/* ===== Mobile: repeat the 3/4/3/4 pattern for ALL rows ===== */
@media (max-width: 808px) {
  /* turn each row's list into a grid */
  .gallery-c__row > .gallery-c__list {
    display: grid !important;
    gap: 12px !important;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* rows 1,3,5,7,... => 3 across */
  .gallery-c__row:nth-of-type(4n+1) > .gallery-c__list,
  .gallery-c__row:nth-of-type(4n+3) > .gallery-c__list {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* rows 2,4,6,8,... => 4 across */
  .gallery-c__row:nth-of-type(4n+2) > .gallery-c__list,
  .gallery-c__row:nth-of-type(4n+4) > .gallery-c__list {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* neutralize desktop floats/absolutes & aspect hacks */
  .gallery-c__row .gallery-c__item {
    float: none !important;
    position: relative !important;
    left: auto !important; right: auto !important;
    top: auto !important;  bottom: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    aspect-ratio: 4 / 3 !important; /* consistent tile height on mobile */
    overflow: hidden;
  }

  .gallery-c__link { position: absolute; inset: 0; }
  .gallery-c__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}
/* ===== Mobile fix: explicit 3-up vs 4-up ===== */
@media (max-width: 808px) {
  /* turn every row into a grid */
  #gallery .gallery .gallery-c__row > .gallery-c__list {
    display: grid !important;
    gap: 12px !important;
    margin: 0; padding: 0;
  }

  /* 4-up rows */
  #gallery .gallery .gallery-c__row--4up > .gallery-c__list {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* 3-up rows */
  #gallery .gallery .gallery-c__row:not(.gallery-c__row--4up) > .gallery-c__list {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* make tiles behave consistently */
  #gallery .gallery .gallery-c__row .gallery-c__item {
    float: none !important;
    width: auto !important;
  }
  #gallery .gallery .gallery-c__image {
    width: 100%; height: auto; display: block;
    object-fit: cover;
  }
}