/* The Gitee case layout distilled into one evidence-led preview per project. */
.mobile-nav-link,
.case-preview { display: none; }

html { scroll-padding-top: 82px; }

.site-header {
  background: rgba(7, 24, 39, .58);
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 12px 36px rgba(5, 22, 34, .12), inset 0 1px rgba(255, 255, 255, .15);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
}
.site-header.is-scrolled {
  color: #123344;
  background: rgba(237, 246, 249, .84);
  border-color: rgba(255, 255, 255, .84);
  box-shadow: 0 12px 36px rgba(19, 49, 65, .1), inset 0 1px #fff;
}
.site-header.is-scrolled .site-nav a { color: #315264; }
.site-header.is-scrolled .site-nav a:hover,
.site-header.is-scrolled .site-nav a.is-active { color: #007c8c; }
.site-header.is-scrolled .wordmark small { color: #607d8d; }

.hero { min-height: min(82svh, 860px); }
.hero-image { opacity: .3; filter: saturate(.65) hue-rotate(145deg) contrast(1.1); }
.hero-shade { background: linear-gradient(90deg, #071827f5 3%, #071827e0 50%, #0922399e 100%), linear-gradient(0deg, #061421 1%, transparent 50%); }
.hero h1 { font-size: clamp(3rem, 7vw, 7.1rem); }
.hero .primary-action {
  color: #eaffff;
  background: rgba(123, 231, 235, .2);
  border: 1px solid rgba(225, 255, 255, .65);
  border-radius: 999px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .46), 0 14px 38px #04152656;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.hero .primary-action:hover { background: rgba(123, 231, 235, .3); }

.project-index { color: #183243; background: #eaf2f5; }
.project-index::before { opacity: .34; }
.project-index .eyebrow { color: #087b8b; }
.project-index h2 { color: #102b3c; }
.index-list { border-color: #bed0d9; }
.index-list a { color: #193849; border-color: #c7d8df; }
.index-list a:hover { color: #087b8b; background: #ffffffa8; }
.index-list span { color: #087b8b; }
.index-list small { color: #577181; }

.case-previews-ready .project > .section-inner { display: none; }
.project {
  padding: clamp(4rem, 7vw, 7.5rem) 0;
  color: #152f40 !important;
  background: #f5f9fb !important;
  border-top: 1px solid #d8e5ea;
  scroll-margin-top: 78px;
}
.project.is-even { background: #eaf2f6 !important; }
.project::before { top: 2rem; color: #789aab3d; }
.case-preview {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  grid-template-areas: "copy visual" "link visual";
  column-gap: clamp(2.5rem, 7vw, 7rem);
  row-gap: 1.6rem;
  align-items: center;
  width: min(1240px, 88vw);
  margin: 0 auto;
}
.case-preview.is-reversed {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-areas: "visual copy" "visual link";
}
.case-preview-copy { grid-area: copy; align-self: end; min-width: 0; }
.case-preview-meta {
  margin: 0 0 1.2rem;
  color: #087d8d;
  font: 700 .73rem/1.4 "Consolas", monospace;
  letter-spacing: .17em;
}
.case-preview h2 {
  margin: 0 0 1.25rem;
  color: #0b283a;
  font-family: "Noto Sans SC", "Microsoft YaHei UI", sans-serif;
  font-size: clamp(2.1rem, 3.8vw, 4.25rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.045em;
}
.case-preview-scenario,
.case-preview-value { margin: 0; }
.case-preview-scenario { padding-top: 1rem; border-top: 1px solid #bfd1d9; }
.case-preview-scenario span,
.case-preview-value span {
  display: block;
  margin-bottom: .35rem;
  color: #537080;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.case-preview-scenario strong { color: #263f50; font-size: 1.05rem; font-weight: 600; line-height: 1.5; }
.case-preview-value { margin-top: 1.4rem; }
.case-preview-value p { margin: 0; color: #435d6d; font-size: .96rem; line-height: 1.7; }
.case-preview-link {
  grid-area: link;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  align-self: start;
  justify-self: start;
  min-height: 48px;
  padding: .7rem 1rem .7rem 1.3rem;
  color: #0b4f5e;
  background: rgba(255, 255, 255, .66);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 999px;
  box-shadow: inset 0 1px #fff, 0 8px 22px #3154651e;
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.case-preview-link::after { content: "↗"; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; color: #eaffff; background: #0b7e8d; border-radius: 50%; }
.case-preview-link:hover { transform: translateY(-2px); background: #fff; box-shadow: inset 0 1px #fff, 0 12px 28px #3154652b; }
.case-preview-link:active { transform: scale(.98); }
.case-preview-visual {
  grid-area: visual;
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: clamp(.65rem, 1.5vw, 1rem);
  background: rgba(255, 255, 255, .72);
  border: 1px solid #fff;
  border-radius: 18px;
  box-shadow: inset 0 1px #fff, 0 22px 70px #173d5130;
}
.case-preview-visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  background: #e5edf1;
  border: 1px solid #cbdbe2;
  border-radius: 10px;
}
.case-preview-visual::after {
  content: "";
  position: absolute;
  inset: clamp(.65rem, 1.5vw, 1rem);
  background: url("./assets/watermark.svg") repeat;
  background-size: 460px 255px;
  opacity: .2;
  pointer-events: none;
}

@media (max-width: 900px) {
  .case-preview,
  .case-preview.is-reversed { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2rem; }
  .case-preview h2 { font-size: clamp(1.9rem, 4.5vw, 3.2rem); }
  .case-preview-visual img { max-height: 430px; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: calc(74px + env(safe-area-inset-top, 0px)); -webkit-tap-highlight-color: transparent; }
  .site-header { min-height: calc(64px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 5vw 0; gap: 1rem; }
  .site-nav { display: none; }
  .mobile-nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
    padding: .52rem .78rem;
    color: #eaffff;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
  }
  .site-header.is-scrolled .mobile-nav-link { color: #174353; background: #ffffffba; border-color: #fff; }
  .hero { min-height: min(75svh, 680px); }
  .hero-content { width: 100%; padding: calc(7.4rem + env(safe-area-inset-top, 0px)) 6vw 5rem; }
  .hero h1 { font-size: clamp(2.55rem, 10vw, 3.55rem); line-height: 1.16; }
  .hero .eyebrow { font-size: .61rem; letter-spacing: .13em; }
  .hero-copy { margin: 1.2rem 0 1.6rem; font-size: .96rem; line-height: 1.7; }
  .hero .primary-action { min-height: 48px; padding: .75rem 1rem; font-size: .88rem; }
  .hero-coordinate, .hero::after { display: none; }
  .hero-orbit { opacity: .35; }
  .project-index { padding: 3.5rem 0 3rem; }
  .project-index .section-inner { width: 88vw; }
  .project-index h2 { margin-bottom: 1.6rem; font-size: 1.72rem; line-height: 1.3; }
  .index-list { gap: 0; border: 0; }
  .index-list a { grid-template-columns: 2rem minmax(0, 1fr); gap: .1rem .75rem; min-height: 70px; padding: .85rem .25rem; border-color: #c7d8df; }
  .index-list a:hover { padding-left: .25rem; }
  .index-list strong { font-size: .87rem; line-height: 1.35; }
  .index-list small { font-size: .7rem; line-height: 1.3; }
  .project { padding: 3.5rem 0 4rem; scroll-margin-top: calc(74px + env(safe-area-inset-top, 0px)); }
  .project::before { display: none; }
  .case-preview,
  .case-preview.is-reversed { width: 88vw; grid-template-columns: 1fr; grid-template-areas: "copy" "visual" "link"; gap: 1.25rem; }
  .case-preview h2 { margin-bottom: 1rem; font-size: clamp(1.85rem, 7vw, 2.65rem); line-height: 1.22; }
  .case-preview-meta { margin-bottom: .85rem; font-size: .68rem; }
  .case-preview-scenario { padding-top: .8rem; }
  .case-preview-scenario strong { font-size: .95rem; }
  .case-preview-value { margin-top: 1rem; }
  .case-preview-value p { font-size: .9rem; line-height: 1.6; }
  .case-preview-visual { padding: .65rem; border-radius: 14px; box-shadow: inset 0 1px #fff, 0 12px 32px #173d5126; }
  .case-preview-visual img { max-height: 360px; border-radius: 8px; }
  .case-preview-visual::after { inset: .65rem; }
  .case-preview-link { justify-self: stretch; min-height: 50px; }
  footer { padding: 1.5rem 6vw calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
  button, a { touch-action: manipulation; }
  button { -webkit-user-select: none; user-select: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header, .site-header.is-scrolled, .hero .primary-action, .case-preview-link { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-header { background: #071827; }
  .site-header.is-scrolled { background: #edf6f9; }
  .case-preview-link { background: #fff; border-color: #b5cbd5; }
}
@media (prefers-contrast: more) {
  .case-preview-link { background: #fff; border-color: #0b4f5e; }
  .site-header { background: #071827; }
  .site-header.is-scrolled { background: #edf6f9; }
}
@media (prefers-reduced-motion: reduce) { .case-preview-link { transition: none; } }