/* 關於我們「公司簡介」照片牆 + 燈箱，搭配 js/about-gallery.js */

/* JS 沒載入時的退路：照片不超出版面、比例不變形 (舊內容的 img 有寫死 inline 寬高) */
#sub1 img {
  max-width: 100%;
  height: auto !important;
}

/* --- 照片牆：第一張 (門面直式照) 佔左側兩列，其餘排右側 --- */
.ag-grid {
  display: grid;
  grid-template-columns: 4fr 3fr 3fr;
  gap: 8px;
  margin: 20px 0;
}

.ag-item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  background: #eef2f6;
  border: 0;
  border-radius: 4px;
  cursor: zoom-in;
}

.ag-item-hero {
  grid-row: span 2;
  aspect-ratio: auto;
}

/* 絕對定位：直式照的原始高度才不會把 grid 列高撐大 */
#sub1 .ag-item img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.2s ease;
}

/* 門面照的招牌在上半部，裁切時保留上方 */
#sub1 .ag-item-hero img {
  object-position: 50% 20%;
}

.ag-item:hover img,
.ag-item:focus-visible img {
  transform: scale(1.03);
}

.ag-item:focus-visible {
  outline: 3px solid #2a6ebb;
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .ag-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ag-item-hero {
    grid-column: span 2;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
}

/* --- 證書牆：證書不可裁切，完整顯示並附標題 --- */
#sub3 img {
  max-width: 100%;
}

.ag-certs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px 12px;
  margin: 20px 0;
}

.ag-cert {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 6px;
  background: #f4f6f8;
  border: 1px solid #dde3ea;
  border-radius: 4px;
  cursor: zoom-in;
}

.ag-cert:hover {
  border-color: #2a6ebb;
}

.ag-cert:focus-visible {
  outline: 3px solid #2a6ebb;
  outline-offset: 2px;
}

#sub3 .ag-cert img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ag-cert-caption {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
}

/* --- 燈箱 --- */
html.ag-lock {
  overflow: hidden;
}

.ag-box {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
}

.ag-box.ag-open {
  display: flex;
}

.ag-box-img {
  display: block;
  max-width: calc(100vw - 140px);
  max-height: calc(100vh - 90px);
  object-fit: contain;
}

.ag-counter {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  color: #fff;
  font-size: 15px;
  text-align: center;
  pointer-events: none;
}

.ag-btn {
  position: absolute;
  width: 48px;
  height: 48px;
  padding: 0;
  color: #fff;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  background: rgba(255, 255, 255, 0.14);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.ag-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.ag-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.ag-close {
  top: 14px;
  right: 14px;
}

.ag-prev,
.ag-next {
  top: 50%;
  margin-top: -24px;
}

.ag-prev {
  left: 14px;
}

.ag-next {
  right: 14px;
}

@media (max-width: 600px) {
  .ag-box-img {
    max-width: 100vw;
  }

  .ag-prev {
    left: 6px;
  }

  .ag-next {
    right: 6px;
  }
}