
/* Deep blue primary color + teal accents | Maintain original style tone */
.sc-detail{
  --navy:#0b2a4a;
  --navy2:#123a66;
  --cyan:#19c2ff;
  --mint:#2ee6a6;
  --text:#0f172a;
  --muted:#516070;
  --line:#e6edf7;
  --shadow:0 18px 45px rgba(11,42,74,.12);
  font-family:Arial,"Microsoft YaHei",sans-serif;
  line-height:1.7;
  color:var(--text);
}

.sc-section{margin:42px 0;}
.sc-title{
  font-size:20px;margin:0 0 14px;font-weight:900;color:var(--navy);
  position:relative;padding-left:12px;
}
.sc-title:before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:99px;
  background:linear-gradient(180deg,var(--cyan),var(--mint));
}
.sc-subtitle{margin:0 0 10px;font-size:16px;font-weight:900;color:var(--navy);}

.sc-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:900;color:var(--navy);
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(25,194,255,.35);
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(246,249,255,.92));
}
.sc-kicker:before{
  content:"";width:8px;height:8px;border-radius:99px;
  background:linear-gradient(180deg,var(--cyan),var(--mint));
}

/* Hero */
.sc-hero{
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  display:flex;gap:22px;flex-wrap:wrap;
  box-shadow:var(--shadow);
  background:linear-gradient(135deg, rgba(11,42,74,.10), rgba(25,194,255,.10), rgba(46,230,166,.08));
}
.sc-hero__text{flex:1;min-width:280px;}
.sc-hero__text h1{font-size:28px;margin:10px 0;font-weight:900;color:var(--navy);}
.sc-hero__text p{margin:0 0 14px;color:var(--muted);}
.sc-hero__media{flex:1;min-width:280px;}

.sc-badges{display:flex;flex-wrap:wrap;gap:10px;}
.sc-badge{
  font-size:12px;padding:7px 12px;border-radius:999px;
  border:1px solid rgba(46,230,166,.28);
  background:#fff;font-weight:900;color:var(--navy);
}

/* Grid */
.sc-grid{display:grid;gap:14px;}
.sc-grid--3{grid-template-columns:repeat(3,1fr);}
.sc-grid--2{grid-template-columns:repeat(2,1fr);}

.sc-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  background:#fff;
  box-shadow:0 14px 35px rgba(11,42,74,.08);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sc-card__top{display:flex;align-items:center;gap:8px;margin-bottom:0;}
.sc-card__body p{margin:0;color:var(--muted);}

.sc-dot{
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(180deg,var(--cyan),var(--mint));
}
.sc-tag{
  font-size:12px;font-weight:900;color:var(--navy2);
  padding:5px 10px;border-radius:999px;border:1px solid rgba(25,194,255,.2);
}

/* ✅ Two columns: Bottom-aligned (Key modification) */
.sc-split{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  align-items:stretch;
}
.sc-panel{
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  background:#fff;
  box-shadow:0 14px 35px rgba(11,42,74,.08);

  display:flex;              /* Make panel adopt vertical layout */
  flex-direction:column;
}
.sc-panel .sc-media{
  margin-top:auto;           /* Push image area to bottom to achieve bottom alignment of two-column images */
}

/* Text */
.sc-muted{color:var(--muted);margin:0 0 10px;}
.sc-list{padding-left:18px;color:var(--muted);margin:0;}
.sc-list li::marker{color:var(--cyan);}

/* Media area */
.sc-media{display:grid;gap:10px;margin-top:10px;}
.sc-media--1{grid-template-columns:1fr;}

/* ✅ Unified image display: Lock aspect ratio + cover cropping (ensure equal dimensions on both sides) */
.sc-ratio{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 12px 28px rgba(11,42,74,.08);
}
.sc-ratio--16x10{aspect-ratio:16/10;}
.sc-ratio > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Tag pills */
.sc-tags{display:flex;flex-wrap:wrap;gap:10px;}
.sc-tag-pill{
  border:1px solid rgba(46,230,166,.22);
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;font-weight:900;
  color:var(--navy);
  background:#fff;
}

@media(max-width:980px){
  .sc-grid--3{grid-template-columns:1fr;}
  .sc-grid--2{grid-template-columns:1fr;}
  .sc-split{grid-template-columns:1fr;}
}
