/* ============================================================
   STEM Apply homepage preview (issue #118). Loaded only by
   home-preview.html, after stemapply.css. Reuses its tokens.
   ============================================================ */

.sah-card-p { color: #b8c8e8; font-size: .98rem; line-height: 1.6; margin: 6px 0 14px; }
.sa-aud-card .btn { align-self: flex-start; }

/* STEM Learn: four disciplines, in order */
.sah-stem { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0; margin: 0; }
.sah-stem-item, .sah-fam-card { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--sa-ease), transform .6s var(--sa-ease), border-color .25s; transition-delay: calc(var(--i, 0) * 70ms); }
.sah-stem-item.sah-in, .sah-fam-card.sah-in { opacity: 1; transform: none; }
.sah-stem-item { border-radius: 22px; border: 1px solid var(--sa-line); background: linear-gradient(170deg, rgba(20, 31, 62, .8), rgba(8, 13, 28, .7)); }
.sah-stem-item:hover { border-color: var(--sa-line-2); }
.sah-stem-item a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 26px 24px 24px; text-decoration: none; border-radius: inherit; }
.sah-stem-item a:focus-visible { outline: 3px solid var(--sa-cyan); outline-offset: 3px; }
.sah-letter { font: 700 3.4rem/1 var(--font-display); letter-spacing: -.04em; background: var(--sa-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sah-stem-item h3 { font-size: 1.35rem; color: #fff; letter-spacing: -.02em; }
.sah-stem-item p { color: #b8c8e8; font-size: .94rem; line-height: 1.55; }
.sah-go { margin-top: auto; padding-top: 8px; font: 600 .9rem var(--font-display); color: var(--sa-cyan); }
.sah-stem-item:hover .sah-go { text-decoration: underline; }

/* practical learning: six families, 3x2 */
.sah-fam { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sah-fam-card { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 28px; border-radius: 22px; border: 1px solid var(--sa-line); background: linear-gradient(170deg, rgba(16, 26, 54, .78), rgba(8, 13, 28, .7)); }
.sah-fam-card:hover { border-color: var(--sa-line-2); }
.sah-fam-card h3 { font-size: 1.2rem; color: #fff; letter-spacing: -.01em; }
.sah-fam-card p { color: #b8c8e8; font-size: .94rem; line-height: 1.55; }
.sah-fam-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--sa-cyan); border: 1px solid var(--sa-line-2); background: rgba(45, 226, 255, .07); margin-bottom: 6px; }

.sah-cta-gap { height: 26px; }

/* Enterprise */
.sah-ent { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; border-radius: 32px; padding: clamp(32px, 5vw, 64px); border: 1px solid var(--sa-line-2); background: radial-gradient(640px 320px at 0% 0%, rgba(255, 178, 62, .12), transparent 70%), linear-gradient(170deg, rgba(20, 31, 62, .8), rgba(8, 13, 28, .75)); }
.sah-ent .btn { margin-top: 28px; }
.sah-ent-list { list-style: none; display: grid; gap: 12px; padding: 0; margin: 0; }
.sah-ent-list li { padding: 16px 20px; border-radius: 16px; border: 1px solid var(--sa-line); background: rgba(10, 16, 34, .6); border-left: 3px solid var(--sa-amber); }
.sah-ent-list b { display: block; color: #fff; font: 700 1.05rem var(--font-display); }
.sah-ent-list span { color: #b8c8e8; font-size: .92rem; }

.sa-cta .sa-hero-cta { gap: 12px; }

@media (max-width: 1100px) {
  .sah-stem { grid-template-columns: repeat(2, 1fr); }
  .sah-ent { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .sah-fam { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .sah-stem, .sah-fam { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sah-stem-item, .sah-fam-card { opacity: 1; transform: none; transition: none; }
}