/* ==========================================================================
   layout.css — 版心、区块、栅格与通用工具
   主题：WANG TANGHUA（单医生个人品牌站）
   只消费 variables.css 的令牌，不写死数值。
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------- 版心 */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--header {
  max-width: var(--container-header);
}

/* ---------------------------------------------------------------- 区块 */

.section {
  padding-block: var(--section-py);
}

.section--tight {
  padding-block: var(--section-py-sm);
}

/* 紧跟数据条等带状区块时，收紧上间距，避免读成空白 */
.section--tight-top {
  padding-top: var(--space-12);
}

/* 紧跟数据条等带状区块时，收紧上间距，避免读成空白 */
.section--tight-top {
  padding-top: var(--space-12);
}

.section--alt {
  background: var(--color-bg-alt);
}

.section--dark {
  background: var(--color-primary-900);
  color: var(--color-text-inverse);
}

.section--hairline {
  border-top: 1px solid var(--color-border);
}

.section--paper {
  background: var(--color-neutral-50);
}

/* 深色区块内的文字降级 */
.section--dark .section-head__desc,
.section--dark p {
  color: var(--color-text-inverse-dim);
}

/* ---------------------------------------------------------------- 栅格 */

.grid {
  display: grid;
  gap: var(--space-8);
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.grid--gap-lg { gap: var(--space-12); }
.grid--gap-sm { gap: var(--space-5); }

.row {
  display: flex;
  align-items: center;
}

.row-wrap { flex-wrap: wrap; }

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ---------------------------------------------------------------- 工具 */

.text-center { text-align: center; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mb-0 { margin-bottom: 0; }

.muted { color: var(--color-text-secondary); }
.en-serif { font-family: var(--font-serif); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary-900);
  color: var(--color-text-inverse);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus,
.skip-link:focus-visible {
  top: var(--space-4);
}

/* 图片容器：等比 + hover 轻微放大 */
.media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--color-neutral-100);
}

.media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--zoom > img {
  transition: transform var(--duration-slow) var(--ease-out);
}

.media--zoom:hover > img {
  transform: scale(1.03);
}

.ratio-3-4 { aspect-ratio: 3 / 4; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-16-9 { aspect-ratio: 16 / 9; }

/* ---------------------------------------------------------------- 响应式 */

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--gap-lg { gap: var(--space-8); }
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .row--stack { flex-direction: column; align-items: flex-start; }
}