/* =========================================================
   尚善堂 · 影像页与手机端布局
   ========================================================= */

/* 首页「医馆影像」三联 */
.home-gallery {
  display: grid;
  grid-template-columns: 1.25fr 0.8fr 0.8fr;
  gap: 16px;
}
.hg {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--paper-2);
}
.hg img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}
.hg-wide img { aspect-ratio: 16 / 10; }
.hg:hover img { transform: scale(1.03); }
.hg span {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 18px;
  color: #f2ead9;
  font-family: var(--kai);
  font-size: 15px;
  letter-spacing: 0.12em;
  background: linear-gradient(transparent, rgba(20, 31, 26, 0.72));
}

/* 影像页 */
.gallery-grid {
  display: block;
  column-count: 3;
  column-gap: 16px;
}
.shot-card {
  margin: 0 0 16px;
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.shot-card a { display: block; overflow: hidden; }
.shot-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}
.shot-card.portrait img { aspect-ratio: 3 / 4; }
.shot-card:hover img { transform: scale(1.03); }
.shot-card figcaption {
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.video-card {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
}
.video-card video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: #16241f;
}
.video-card figcaption {
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-2);
}

@media (max-width: 960px) {
  .home-gallery { grid-template-columns: 1fr 1fr; }
  .home-gallery .hg-wide { grid-column: 1 / -1; }
  .home-gallery .hg-wide img { aspect-ratio: 16 / 9; }
  .gallery-grid { column-count: 2; }
  .video-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* 四诊：2×2，不再一条竖排 */
  .diagnosis-grid { grid-template-columns: 1fr 1fr; }
  .diagnosis { padding: 18px 14px 20px; }
  .diagnosis .d-char {
    width: 46px;
    height: 46px;
    font-size: 24px;
    margin-bottom: 10px;
  }
  .diagnosis h3 { font-size: 17px; margin-bottom: 6px; }
  .diagnosis p { font-size: 12px; line-height: 1.72; }
  .diagnosis .d-no { right: 10px; top: 8px; font-size: 10px; }

  /* 科室：2 列紧凑卡片 */
  .dept-grid-4 { grid-template-columns: 1fr 1fr; }
  .dept { padding: 18px 14px 16px; min-height: 0; }
  .dept .code { width: 26px; height: 26px; font-size: 13px; }
  .dept h3 { font-size: 17px; margin: 8px 0 6px; line-height: 1.35; }
  .dept p {
    font-size: 12px;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .dept .go { font-size: 11px; padding-top: 12px; }
  .dept-mark { font-size: 60px; right: 2px; bottom: -6px; }

  /* 医师：首页横向卡组，医师页两列 */
  .doc-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .doc-grid-rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    margin: 0 -20px;
    padding: 2px 20px 10px;
    -webkit-overflow-scrolling: touch;
  }
  .doc-grid-rail .doc {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .doc { padding: 16px 14px; }
  .doc-grid:not(.doc-grid-rail) .doc-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .doc-top { gap: 10px; }
  .doc-avatar { width: 52px; height: 52px; font-size: 22px; }
  .doc h3 { font-size: 18px; }
  .doc .role { font-size: 11.5px; }
  .doc-tags { gap: 5px; margin-top: 12px; }
  .doc-tags .tag { font-size: 10.5px; padding: 3px 6px; }
  .doc-schedule { font-size: 11px; margin-top: 12px; padding-top: 10px; }
  .doc .go { font-size: 11px; }
  .doc-stamp { width: 30px; height: 30px; font-size: 11px; right: -5px; bottom: -2px; }

  /* 影像页：两列照片，视频单列 */
  .gallery-grid { column-count: 2; column-gap: 10px; }
  .shot-card { margin-bottom: 10px; }
  .shot-card figcaption { padding: 9px 10px; font-size: 11.5px; line-height: 1.65; }
  .home-gallery { gap: 10px; }
  .hg span { padding: 12px 12px; font-size: 13px; }
}