/*
 * VastSea hub pages (Cell Types / Battery Solutions)
 * New section styles layered on top of style.css + cell-type.css.
 * Seed tokens mirror the brand palette so future theme variants can retune from one place.
 */

:root {
  --vs-seed-primary: #0093dd;
  --vs-seed-primary-dark: #0079b7;
  --vs-seed-secondary: #97d4f2;
  --vs-seed-deep: #0b3f7a;
  --vs-seed-bg: #ffffff;
  --vs-seed-fg: #2d2d2d;
  --vs-seed-muted: #666666;
  --vs-seed-dark: #22252a;
  --vs-seed-radius: 8px;
  --vs-on-color: #ffffff;
  --vs-band-text: #cfd6dd;
  --vs-band-muted: #b9c2cb;
  --vs-line-soft: color-mix(in srgb, var(--vs-seed-fg) 10%, var(--vs-seed-bg));
}

/* ============ Banner subtitle ============ */
.page-header-banner .banner-sub {
  margin: 14px auto 0;
  max-width: 720px;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .92);
}

/* ============ Stat cards finishing (underscore variant) ============ */
.cell-type-raw-content .custom_gl_stat_card,
.battery-solution-raw-content .custom_gl_stat_card {
  padding: 26px 20px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .08), 0 8px 10px -6px rgba(0, 0, 0, .05);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.cell-type-raw-content .custom_gl_stat_card:hover,
.battery-solution-raw-content .custom_gl_stat_card:hover {
  transform: translateY(-8px);
  border-color: var(--vs-seed-primary);
  box-shadow: 0 20px 25px -5px color-mix(in srgb, var(--vs-seed-primary) 18%, transparent);
}

.cell-type-raw-content .custom_gl_stat_number,
.battery-solution-raw-content .custom_gl_stat_number {
  font-size: 2.1rem;
  font-weight: 800;
  margin-bottom: 8px;
  background: linear-gradient(90deg, var(--vs-seed-primary), var(--vs-seed-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--vs-seed-primary);
}

.cell-type-raw-content .custom_gl_stat_label,
.battery-solution-raw-content .custom_gl_stat_label {
  font-size: .92rem;
  font-weight: 600;
  color: var(--vs-seed-fg);
}

/* ============ Shared card bits ============ */
.vs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.vs-chip {
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  background: color-mix(in srgb, var(--vs-seed-primary) 10%, var(--vs-seed-bg));
  color: var(--vs-seed-primary-dark);
  border: 1px solid color-mix(in srgb, var(--vs-seed-primary) 22%, transparent);
}

.vs-card-link {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--vs-seed-primary);
}

.vs-card-link svg { width: 16px; height: 16px; fill: currentColor; transition: transform .25s ease; }
.vs-card-link:hover svg { transform: translateX(4px); }

/* ============ Chemistry cards (Cell Types) ============ */
.vs-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }

.vs-type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--vs-seed-bg);
  border-radius: var(--vs-seed-radius);
  overflow: hidden;
  border: 1px solid var(--vs-line-soft);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .07);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.vs-type-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--vs-seed-primary) 16%, transparent);
  border-color: color-mix(in srgb, var(--vs-seed-primary) 35%, var(--vs-line-soft));
}

.vs-type-card .vs-media { position: relative; overflow: hidden; }
.vs-type-card .vs-media img { width: 100%; height: 210px; object-fit: cover; transition: transform .4s ease; }
.vs-type-card:hover .vs-media img { transform: scale(1.06); }

.vs-type-card .vs-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--vs-seed-deep) 45%, transparent));
  opacity: .55;
}

.vs-type-card .vs-body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.vs-type-card .vs-title { font-size: 19px; font-weight: 700; color: var(--vs-seed-fg); transition: color .2s ease; }
.vs-type-card:hover .vs-title { color: var(--vs-seed-primary); }
.vs-type-card .vs-tag { margin-top: 8px; font-size: 13.5px; line-height: 1.7; color: var(--vs-seed-muted); }

.vs-type-card.vs-cta-card {
  background: linear-gradient(150deg, var(--vs-seed-deep), var(--vs-seed-primary) 78%, color-mix(in srgb, var(--vs-seed-primary) 70%, var(--vs-seed-secondary)));
  border: none;
  color: var(--vs-on-color);
  justify-content: center;
  align-items: flex-start;
  padding: 34px 30px;
}

.vs-cta-card .vs-cta-kicker { font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--vs-seed-secondary); }
.vs-cta-card h3 { margin: 12px 0 12px; font-size: 24px; color: var(--vs-on-color); line-height: 1.3; }
.vs-cta-card p { font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, .9); margin-bottom: 24px; }
.vs-cta-card .btn-inquiry { background: var(--vs-on-color); border-color: var(--vs-on-color); color: var(--vs-seed-primary); min-height: 46px; }
.vs-cta-card .btn-inquiry:hover { background: var(--vs-seed-secondary); border-color: var(--vs-seed-secondary); color: var(--vs-seed-deep); }

/* ============ Comparison table (Cell Types) ============ */
.vs-table-wrap {
  width: 100%;
  overflow-x: auto;
  background: var(--vs-seed-bg);
  border-radius: 16px;
  border: 1px solid var(--vs-line-soft);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .04);
}

.vs-table { width: 100%; border-collapse: collapse; text-align: left; min-width: 900px; }

.vs-table th {
  background: color-mix(in srgb, var(--vs-seed-primary) 7%, var(--vs-seed-bg));
  color: var(--vs-seed-fg);
  padding: 18px 24px;
  font-size: .92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 2px solid var(--vs-line-soft);
}

.vs-table td { padding: 16px 24px; border-bottom: 1px solid var(--vs-line-soft); font-size: .93rem; line-height: 1.7; color: var(--vs-seed-muted); }
.vs-table tr:last-child td { border-bottom: none; }
.vs-table tr:hover td { background: color-mix(in srgb, var(--vs-seed-primary) 4%, transparent); }
.vs-table .vs-chem { font-weight: 700; color: var(--vs-seed-fg); white-space: nowrap; }
.vs-table .vs-chem a { color: var(--vs-seed-fg); }
.vs-table .vs-chem a:hover { color: var(--vs-seed-primary); }
.vs-table .vs-strong { color: var(--vs-seed-primary-dark); font-weight: 600; }

/* ============ Application matching (Cell Types) ============ */
.vs-match-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }

.vs-match-card {
  background: var(--vs-seed-bg);
  border-radius: var(--vs-seed-radius);
  padding: 30px 28px;
  border: 1px solid var(--vs-line-soft);
  border-left: 4px solid var(--vs-seed-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
  transition: transform .25s ease, box-shadow .25s ease;
}

.vs-match-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px color-mix(in srgb, var(--vs-seed-primary) 12%, transparent); }

.vs-match-card .vs-match-ico {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--vs-seed-primary) 10%, var(--vs-seed-bg));
  margin-bottom: 16px;
}

.vs-match-card .vs-match-ico svg { width: 24px; height: 24px; fill: var(--vs-seed-primary); }
.vs-match-card h3 { font-size: 19px; margin-bottom: 8px; }
.vs-match-card p { font-size: 14px; line-height: 1.8; color: var(--vs-seed-muted); }
.vs-match-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.vs-match-links a {
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 12.5px;
  font-weight: 600;
  background: color-mix(in srgb, var(--vs-seed-primary) 10%, var(--vs-seed-bg));
  color: var(--vs-seed-primary-dark);
  border: 1px solid color-mix(in srgb, var(--vs-seed-primary) 22%, transparent);
  transition: background .2s ease, color .2s ease;
}

.vs-match-links a:hover { background: var(--vs-seed-primary); color: var(--vs-on-color); }

/* ============ Solution categories (Battery Solutions) ============ */
.vs-cat-head { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; }

.vs-cat-head .vs-cat-ico {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--vs-seed-primary), var(--vs-seed-primary-dark));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--vs-seed-primary) 35%, transparent);
}

.vs-cat-head .vs-cat-ico svg { width: 28px; height: 28px; fill: var(--vs-on-color); }
.vs-cat-head h2 { font-size: 28px; }
.vs-cat-head .vs-cat-desc { margin-top: 6px; font-size: 14.5px; line-height: 1.7; color: var(--vs-seed-muted); max-width: 760px; }

.vs-cat-count {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--vs-seed-primary-dark);
  background: color-mix(in srgb, var(--vs-seed-primary) 10%, var(--vs-seed-bg));
  border: 1px solid color-mix(in srgb, var(--vs-seed-primary) 22%, transparent);
  padding: 6px 14px;
  border-radius: 50px;
}

.vs-sol-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.vs-sol-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.vs-sol-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--vs-seed-bg);
  border-radius: var(--vs-seed-radius);
  overflow: hidden;
  border: 1px solid var(--vs-line-soft);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .07);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.vs-sol-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--vs-seed-primary) 16%, transparent);
  border-color: color-mix(in srgb, var(--vs-seed-primary) 35%, var(--vs-line-soft));
}

.vs-sol-card .vs-media { position: relative; overflow: hidden; }
.vs-sol-card .vs-media img { width: 100%; height: 220px; object-fit: cover; transition: transform .4s ease; }
.vs-sol-card:hover .vs-media img { transform: scale(1.06); }

.vs-sol-card .vs-media .vs-cat-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 50px;
  background: rgba(11, 63, 122, .86);
  color: var(--vs-on-color);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.vs-sol-card .vs-body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.vs-sol-card .vs-title { font-size: 19px; font-weight: 700; color: var(--vs-seed-fg); transition: color .2s ease; }
.vs-sol-card:hover .vs-title { color: var(--vs-seed-primary); }
.vs-sol-card .vs-tag { margin-top: 8px; font-size: 13.5px; line-height: 1.7; color: var(--vs-seed-muted); }

/* ============ Process steps (Battery Solutions) ============ */
.vs-process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }

.vs-step {
  position: relative;
  padding: 34px 26px 30px;
  background: var(--vs-seed-bg);
  border-radius: var(--vs-seed-radius);
  border: 1px solid var(--vs-line-soft);
  box-shadow: 0 8px 26px rgba(0, 147, 221, .08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.vs-step:hover { transform: translateY(-8px); box-shadow: 0 18px 40px color-mix(in srgb, var(--vs-seed-primary) 16%, transparent); }
.vs-step .vs-step-num { position: absolute; top: 20px; right: 22px; font-size: 30px; font-weight: 800; color: color-mix(in srgb, var(--vs-seed-primary) 20%, transparent); }

.vs-step .vs-step-ico {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--vs-seed-primary) 10%, var(--vs-seed-bg));
  margin-bottom: 18px;
}

.vs-step .vs-step-ico svg { width: 26px; height: 26px; fill: var(--vs-seed-primary); }
.vs-step h3 { font-size: 18px; margin-bottom: 10px; }
.vs-step p { font-size: 13.5px; line-height: 1.8; color: var(--vs-seed-muted); }

/* ============ Dark CTA band (both pages) ============ */
.vs-cta-band { background: var(--vs-seed-dark); color: var(--vs-band-text); position: relative; overflow: hidden; }

.vs-cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(720px 320px at 85% 20%, color-mix(in srgb, var(--vs-seed-primary) 26%, transparent), transparent 70%);
}

.vs-cta-band .container { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.vs-cta-band .sub { font-size: 14px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--vs-seed-secondary); }
.vs-cta-band h2 { margin: 12px 0 16px; font-size: 34px; color: var(--vs-on-color); }
.vs-cta-band p { font-size: 15px; line-height: 1.9; color: var(--vs-band-muted); max-width: 640px; }
.vs-cta-band .vs-band-btns { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }

.vs-cta-band .vs-band-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  font-size: 13.5px;
  color: var(--vs-band-text);
}

.vs-cta-band .vs-band-note svg { width: 18px; height: 18px; fill: var(--vs-seed-secondary); flex: 0 0 auto; }

/* ============ Responsive ============ */
@media (max-width: 1024px) {
  .vs-type-grid,
  .vs-sol-grid,
  .vs-sol-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .vs-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-cta-band .container { grid-template-columns: 1fr; }
  .vs-cat-count { display: none; }
}

@media (max-width: 768px) {
  .cell-type-raw-content .custom_gl_stats_grid,
  .battery-solution-raw-content .custom_gl_stats_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-top: -40px !important;
  }

  .cell-type-raw-content .custom_gl_stat_card,
  .battery-solution-raw-content .custom_gl_stat_card {
    padding: 20px 12px !important;
  }

  .cell-type-raw-content .custom_gl_stat_number,
  .battery-solution-raw-content .custom_gl_stat_number {
    font-size: 1.55rem !important;
  }

  .vs-type-grid,
  .vs-sol-grid,
  .vs-sol-grid.cols-2,
  .vs-process-grid,
  .vs-match-grid { grid-template-columns: 1fr; }

  .vs-cta-band h2 { font-size: 26px; }
  .vs-cat-head { flex-wrap: wrap; }
}