/* Minimal, dependency-free hero cards (no bundlers) */
:root {
  --hero-bg: #f7f8fb;
  --hero-card-bg: #fff;
  --hero-text: #0f172a;
  --hero-muted: #94a3b8;
  --hero-shadow: 0 24px 48px rgba(15, 23, 42, 0.08), 0 8px 16px rgba(15, 23, 42, 0.04);
  --hero-radius: 28px;
}

.hero-canvas {
  background: #e2e2e2;
  background-image:
    radial-gradient(rgba(2,6,23,0.04) 1px, transparent 1px),
    radial-gradient(rgba(2,6,23,0.04) 1px, transparent 1px);
  background-position: 0 0, 24px 24px;
  background-size: 48px 48px;
  padding: 40px 0 8px;
}

.hero-wrap {
  max-width: 1200px;
  /* margin: 0 auto; */
  padding: 0 24px;
}

.hero-grid {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;            /* 避免被第四卡片挤压，允许换行 */
  width: 100%;
}

.hero-card {
  background: #ffffff;
  /* border-radius: var(--hero-radius); */
  /* box-shadow: var(--hero-shadow); */
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: #000000;
  /* transition: transform .2s ease, box-shadow .2s ease; */
}


.hero-card--text .hc-title {font-size: 30px;line-height: 1.05;margin: 8px 0 12px;font-weight: normal;}
.hero-card--text .hc-sub {font-size: 16px;color: #868686;margin: 0 0 18px;}

.hc-badges {display: flex;gap: 12px;justify-content: flex-start;}
.hc-badge { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; box-shadow: 0 6px 12px rgba(2,6,23,.08); }
.hc-badge img { width: 28px; height: 28px; object-fit: contain; display: block; }

.hero-card--image {/* align-items: center; */display: flex;justify-content: center;}
.hc-ill {width: 100%;max-width: 200px;height: auto;display: block;margin: 0 auto;}

.hero-bottom-spacer { height: 8px; }

/* Allow background illustration via CSS var --hc-bg */
.hero-card.has-bg { position: relative; overflow: hidden; }
.hero-card.has-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: var(--hc-bg-pos, center bottom);
  background-size: var(--hc-bg-size, 80% auto);
  background-image: var(--hc-bg);
  pointer-events: none;
}
.hero-card.has-bg > * { position: relative; z-index: 1; }

/* Group wrappers */

/* ===== SKU gallery card (rightmost) ===== */
.hero-card--gallery{
  background: #ffeb7e;
  color:#e5e7eb;
  border-radius:10px;
  overflow:hidden;
  flex: 1 1 340px; /* 在 flex 布局下给一个合理的基础宽 */
  min-height: 180px; /* 两排足够高度 */
}
/* 两排网格：第一排项目图，第二排 SKU 图 */
.gallery-two-rows{ padding: 12px 10px; display: grid; grid-template-rows: repeat(2, 72px); row-gap: 12px; }
.gtr-row{ position: relative; overflow: hidden; }
.gtr-track{ display: inline-flex; width: max-content; gap: 16px; animation: gtr-marquee 30s linear infinite; }
.gtr-track.reverse{ animation-direction: reverse; }
.gtr-track.speed-1{ animation-duration: 28s; }
.gtr-track.speed-2{ animation-duration: 32s; }
.gtr-strip{ display: inline-flex; gap: 10px; align-items: center; }
.hero-card--gallery .gtr-thumb{ width:72px; height:72px; object-fit:cover; border-radius:16px; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.15); }

@keyframes gtr-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 图集下方说明文字 */
.gtr-caption{
  margin-top: 8px;
  padding: 0 10px 6px 10px;
  line-height: 1.2;
  font-size: 14px;
  font-weight: 600;
  color: #dd46ff; /* 保证在浅色背景上有对比 */
  font-size: 30px;
  line-height: 1.05;
  margin: 8px 0 12px;
  font-weight: normal;
}
@media (max-width: 640px){
  .gtr-caption{ font-size: 13px; padding: 0 6px 6px 6px; }
}

/* 分组容器：左右各一组 */
.hero-group{display:flex;/* gap:28px; */flex:1 1 0;/* min-width: 560px; */}
.hero-group--left .hero-card--chatgpt{ flex:1.2 1 360px; }
.hero-group--right .hero-card{ flex:1 1 0; min-width: 260px; }

@media (max-width: 1024px) {
  .hero-card--text .hc-title { font-size: 28px; }
  .hero-grid { flex-direction: column; gap: 20px; }
  .hero-group { min-width: 0; }
  .hero-canvas { padding: 24px 0 4px; }
}

@media (max-width: 750px) {
  .hero-wrap {max-width: 100%;}
}

/* ===== Mobile (<=640px) adaptations ===== */
@media (max-width: 640px) {
  .hero-canvas { padding: 16px 0 4px; }
  .hero-wrap { padding: 0 12px; }
  .hero-grid { gap: 12px; }
  .hero-group { flex-direction: column; gap: 12px; }
  .hero-card { padding: 12px; }
  .hero-card--text .hc-title { font-size: 22px; line-height: 1.15; }
  .hero-card--text .hc-sub { font-size: 13px; }
  .hc-badge { width: 40px; height: 40px; }
  .hc-badge img { width: 22px; height: 22px; }
  .hc-ill { max-width: 140px; }
  .hero-card--gallery { min-height: 140px; }
  .gallery-two-rows { grid-template-rows: repeat(2, 56px); row-gap: 8px; }
  .gtr-track { gap: 12px; }
  .hero-group--right .hero-card { min-width: 0; }

  /* Hide card 2 (laptop) on small screens; keep gallery visible for flow */
  .hero-card--laptop { display: none !important; }

  /* Tune gallery for mobile flow */
  .hero-card--gallery { min-height: 130px; }
  .gallery-two-rows { grid-template-rows: repeat(2, 52px); row-gap: 6px; }
  .gtr-track.speed-1{ animation-duration: 24s; }
  .gtr-track.speed-2{ animation-duration: 28s; }
  .hero-card--gallery .gtr-thumb{ width:56px; height:56px; border-radius:12px; }

  /* Ensure card 1 and 3 have uniform padding and radius */
  .hero-card--chatgpt,
  .hero-card--streaming {
    padding: 10px !important;
    border-radius: 10px !important;
  }
}

.hero-group.hero-group--left {
    display: flex;
    border-radius: 38px;
    /* background-color: aliceblue; */
    border-radius: 18px;
    flex: 1 1 0;
}


a.hero-card.hero-card--text {
    background-color: #ffffff;
    /* border-radius: 10px 0px 0px 10px; */
    border-radius: 10px;
}

h1.hc-title {
    color: beige;
}

.hero-card.hero-card--image.hero-card--laptop {
    border-radius: 0px 10px 10px 0px;
    flex: 1 1 0;
}

a.hero-card.hero-card--text.hero-card--chatgpt {
    background-color: #000000;
    border-radius: 10px 0px 0px 10px;
    flex: 1 1 0;
}


a.hero-card.hero-card--text.hero-card--streaming {
    border-radius: 10px 0px 0px 10px;
}

.hero-card.hero-card--gallery {
    border-radius: 0px 10px 10px 0px;
}