/* ==========================================================
   Image grids — visibility + Amazon-style tiles
   Loaded after visibility.css. img-focus.css follows and
   supplies per-photo object-position from face detection.
   ========================================================== */

/* ---------- Shared ---------- */
.hm-explorer .card img,
.hm-life .card img,
.hm-gallery .thumb img,
.hm-leaders .card .img,
.hm-blog .card .img,
.gallery-grid .gallery-item img {
  object-fit: cover;
  object-position: center;
}

.hm-explorer .card img,
.hm-life .card img,
.hm-gallery .thumb img {
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Explore: category tiles ---------- */
.hm-explorer .grid { gap: .65rem !important; }
.hm-explorer .card {
  border-radius: 10px !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.hm-explorer .card img { height: 128px !important; }
.hm-explorer .card:hover img { transform: scale(1.05); }
.hm-explorer .card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(15, 40, 25, .12) !important;
  border-color: var(--line-strong) !important;
}
.hm-explorer .card::after {
  content: "\2197";
  position: absolute;
  top: .45rem;
  right: .45rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: #0d2818;
  font-size: .78rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
  z-index: 3;
}
.hm-explorer .card:hover::after { opacity: 1; transform: none; }

/* ---------- Life: taller photo cards, labels always visible ---------- */
.hm-life .card {
  height: 220px !important;
  border-radius: 12px !important;
}
.hm-life .card .ov {
  opacity: 1;
  background: linear-gradient(180deg, transparent 52%, rgba(9, 26, 16, .74) 100%);
  transition: background .3s ease;
}
.hm-life .card:hover .ov {
  background: linear-gradient(180deg, transparent 42%, rgba(9, 26, 16, .85) 100%);
}

/* ---------- Gallery preview strip ---------- */
.hm-gallery .thumb {
  display: block;
  height: 140px !important;
  border-radius: 10px !important;
}
.hm-gallery .thumb:hover img { transform: scale(1.06); }

/* ---------- Leadership portraits ---------- */
.hm-leaders .card .img {
  height: 240px !important;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.hm-leaders .card:hover .img { transform: scale(1.03); }
.hm-leaders .card { overflow: hidden; }

/* ---------- Blog thumbnails ---------- */
.hm-blog .card .img {
  height: 180px !important;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.hm-blog .card:hover .img { transform: scale(1.03); }
.hm-blog .card .blog-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hm-blog .card .blog-thumb-empty i { font-size: 1.8rem; opacity: .55; }

/* ---------- Gallery page: square product-style tiles ---------- */
.gallery-grid .gallery-item {
  position: relative;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: none;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.gallery-grid .gallery-item:hover {
  transform: translateY(-2px);
  border-color: #d9c27a;
  box-shadow: 0 12px 26px rgba(15, 40, 25, .14);
}
.gallery-grid .gallery-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.gallery-grid .gallery-item:hover img { transform: scale(1.06); }
.gallery-grid .gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(9, 26, 16, .62) 100%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.gallery-grid .gallery-item:hover::after { opacity: 1; }

.gallery-grid .gi-view {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .94);
  color: #0d2818;
  font-size: .78rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
.gallery-grid .gallery-item:hover .gi-view { opacity: 1; transform: none; }

.gallery-grid .gi-cap {
  position: absolute;
  left: .65rem;
  right: 2.7rem;
  bottom: .6rem;
  z-index: 2;
  color: #fff;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
.gallery-grid .gallery-item:hover .gi-cap { opacity: .95; transform: none; }

/* ---------- Gallery lightbox ---------- */
/* keep the lightbox above the sticky header (z-index 2000 in visibility.css) */
.photo-modal { z-index: 2100; }
.modal-backdrop { z-index: 2050; }
.photo-modal .modal-content {
  background: #0b1d12;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  overflow: hidden;
}
.photo-modal .modal-body {
  position: relative;
  padding: .75rem .75rem 1rem;
}
.photo-modal #modalPhoto {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  max-height: 76vh;
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
}
.photo-modal .photo-close {
  position: absolute;
  top: .5rem;
  right: .6rem;
  z-index: 3;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}
.photo-modal .photo-close:hover { background: rgba(255, 255, 255, .22); }
.photo-modal .photo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, border-color .2s ease;
}
.photo-modal .photo-nav:hover {
  background: rgba(201, 168, 76, .9);
  border-color: transparent;
  color: #0d2818;
}
.photo-modal .photo-nav.prev { left: .75rem; }
.photo-modal .photo-nav.next { right: .75rem; }
.photo-modal .photo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem .35rem 0;
}
.photo-modal #modalCaption {
  color: rgba(255, 255, 255, .82);
  font-size: .8rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photo-modal #photoCounter {
  color: rgba(255, 255, 255, .55);
  font-size: .74rem;
  letter-spacing: .06em;
  flex: 0 0 auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .hm-explorer .card img { height: 118px !important; }
}
@media (max-width: 991.98px) {
  .hm-life .card { height: 195px !important; }
  .hm-gallery .thumb { height: 120px !important; }
  .hm-leaders .card .img { height: 210px !important; }
}
@media (max-width: 767.98px) {
  .hm-explorer .card img { height: 108px !important; }
  .hm-life .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hm-life .card { height: 170px !important; }
  .hm-gallery .thumb { height: 104px !important; }
  .hm-blog .card .img { height: 165px !important; }
  .hm-leaders .card .img { height: 190px !important; }
  .gallery-grid .gallery-item { border-radius: 10px; }
  .photo-modal .photo-nav { width: 32px; height: 32px; }
}
@media (max-width: 575.98px) {
  .hm-life .card { height: 150px !important; }
  .hm-gallery .thumb { height: 92px !important; }
  .photo-modal #modalPhoto { max-height: 68vh; }
}