/* ============ Tabs ============ */
.hr-filter-tabs{margin-bottom:40px;display:flex;justify-content:center;}
.hr-tabs .nav .nav-item{margin-right:15px;position:relative}
.hr-tabs .nav .nav-item:last-child{margin-right:0}
.hr-tabs .nav .nav-item .nav-link{display:block;padding:.8rem .875rem;font-size:.875rem;font-weight:var(--weight-600);background:#6b72801a;color:#000;border:2px solid #6b72804d;border-radius:0rem;text-transform:capitalize}
.hr-tabs .nav .nav-item .active{background:var(--accent-orange-dark)!important;color:var(--white);border:2px solid var(--accent-orange-dark)!important;}
@media (max-width:767.98px){.hr-tabs .nav .nav-item{padding-bottom:10px}}

/* ============ Masonry grid ============ */
.hr-masonry-gallery{margin-right:calc(-0.5 * 1.5rem);margin-left:calc(-0.5 * 1.5rem)}

/* FIX #2: sizer + items ALWAYS share an explicit % width per breakpoint.
   NEVER use width:auto here - Masonry measures .grid-sizer to compute columns. */
.hr-four-grid .grid-sizer,
.hr-four-grid .grid-item{width:25%}
@media (max-width:991.98px){
  .hr-four-grid .grid-sizer,.hr-four-grid .grid-item{width:33.3333%}
}
@media (max-width:767.98px){
  .hr-four-grid .grid-sizer,.hr-four-grid .grid-item{width:50%}
}
@media (max-width:479.98px){
  .hr-four-grid .grid-sizer,.hr-four-grid .grid-item{width:100%}
}

.hr-masonry-gallery .grid-sizer{padding-right:calc(1.5rem * 0.5);padding-left:calc(1.5rem * 0.5)}
.hr-masonry-gallery .grid-item{padding-right:calc(1.5rem * 0.5);padding-left:calc(1.5rem * 0.5);margin-bottom:calc(1.5rem * 1)}

/* ============ Cards / images ============ */
.hr-gallery-card{border:none}
.hr-gallery{position:relative;overflow:hidden;background:#f2f2f2;}
.hr-pop-images,.hr-pop-Video{cursor:zoom-in}
.hr-gallery-card .hr-gallery:hover{cursor:zoom-in}

/* FIX #1: height:auto (NOT fit-content) + no object-fit cover.
   fit-content on <img> makes iOS Safari use the intrinsic pixel height,
   producing 3000px-tall boxes that cover-crop into vertical slivers. */
.hr-gallery-card .hr-gallery img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;               /* <- the critical Safari fix */
  object-fit:initial;
}

/* Belt-and-braces: iOS-Safari-only override in case old CSS is cached */
@supports (-webkit-touch-callout: none){
  .hr-gallery-card .hr-gallery img{height:auto !important;object-fit:initial !important;}
}

.hr-gallery-card .hr-gallery .hr-hover-plus{background:#00000080;width:100%;height:100%;position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;opacity:0}
.hr-gallery-card .hr-gallery:hover .hr-hover-plus{opacity:1}
.hr-gallery-card .hr-gallery .hr-hover-plus span{font-size:30px;color:#fff}