/* Author: Jeremiah Buttler */
/* Showcase pages: What I'm Working On, project pages, homepage section.
   Uses the theme tokens from style.css (dark default, light via data-theme),
   so the only fixed colour is the white page behind a running demo. Works at
   375, 768 and 1280 px. */

/* ── Page shell ────────────────────────────────────────────────────────────── */
.sc-page .section-title { margin-bottom: 1rem; }
.sc-intro { color: var(--muted); max-width: 46rem; margin-bottom: 1.5rem; font-size: 1.02rem; line-height: 1.6; }
.sc-empty { color: var(--muted); padding: 2rem 0; }
.sc-h2 {
  font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700;
  color: var(--text); margin: 2.4rem 0 1rem;
}
.sc-h2--first { margin-top: 1.6rem; }
.sc-note { color: var(--muted); font-size: .95rem; margin: -.4rem 0 1.2rem; max-width: 46rem; }
.sc-cta { margin-top: 2.4rem; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.sc-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.sc-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); transition: border-color .2s, box-shadow .2s;
}
.sc-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.sc-card-media {
  aspect-ratio: 16 / 9; overflow: hidden; line-height: 0;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.sc-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-card-fallback {
  display: flex; align-items: center; justify-content: center; height: 100%;
  padding: 1rem; text-align: center; line-height: 1.3;
  font-family: var(--font-heading); font-weight: 700; color: var(--muted);
}
.sc-card-body { display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem 1.2rem 1.2rem; flex: 1; }
.sc-card-title { font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.25; }
.sc-card-title a { color: var(--text); }
.sc-card-title a:hover { color: var(--accent-light); text-decoration: none; }
.sc-card-title a:focus-visible,
.sc-link:focus-visible,
.sc-updates a:focus-visible,
.sc-crumbs a:focus-visible,
.sc-earlier summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.sc-summary { color: var(--text); font-size: .95rem; line-height: 1.55; }
.sc-summary--lead { font-size: 1.08rem; max-width: 46rem; }
.sc-recent { color: var(--muted); font-size: .88rem; line-height: 1.5; }
.sc-recent b { color: var(--text); font-weight: 600; }

.sc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; font-size: .82rem; color: var(--muted); }
.sc-status {
  display: inline-block; padding: .12em .65em; border-radius: 999px;
  border: 1px solid var(--accent); color: var(--accent-light); font-weight: 600;
}
.sc-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.sc-links { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; margin-top: auto; padding-top: .3rem; }
.sc-links--detail { margin-top: 1.2rem; gap: .75rem; }
.sc-link { font-size: .9rem; font-weight: 600; color: var(--accent-light); }
.sc-link:hover { color: var(--accent); }

/* Confidential entries */
.sc-card--confidential .sc-card-body { gap: .8rem; }
.sc-statements { list-style: none; display: grid; gap: .55rem; }
.sc-statements li {
  position: relative; padding-left: 1.1rem; font-size: .95rem; line-height: 1.5;
}
.sc-statements li::before {
  content: ""; position: absolute; left: 0; top: .6em; width: .45em; height: .45em;
  border-radius: 50%; background: var(--accent); opacity: .7;
}

/* ── Updates ───────────────────────────────────────────────────────────────── */
.sc-month-group { margin-bottom: 1.2rem; }
.sc-month {
  font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-light); margin-bottom: .4rem;
}
.sc-updates { list-style: none; display: grid; gap: .5rem; }
.sc-updates li { font-size: .98rem; line-height: 1.5; }
.sc-in { color: var(--muted); }
.sc-earlier { margin-top: 1rem; }
.sc-earlier summary { cursor: pointer; font-weight: 600; color: var(--accent-light); padding: .3rem 0; margin-bottom: .8rem; }
.sc-earlier summary:hover { color: var(--accent); }
.sc-updates--home li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem;
  padding: .7rem 1rem; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.sc-month-tag { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-light); }

/* ── Portfolio carousel additions ──────────────────────────────────────────── */
.sc-slide-links { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1rem; }

/* ── Project page ──────────────────────────────────────────────────────────── */
.sc-crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.sc-features { display: grid; gap: 1.25rem; }
.sc-feature {
  display: grid; gap: 1rem; padding: 1.2rem; align-items: start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.sc-feature-name { font-family: var(--font-heading); font-size: 1.1rem; margin-bottom: .4rem; }
.sc-feature p { line-height: 1.6; }
.sc-points { list-style: disc; margin: .6rem 0 0 1.1rem; display: grid; gap: .25rem; color: var(--muted); font-size: .93rem; }
.sc-feature-pic { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); line-height: 0; }
.sc-feature-pic img { width: 100%; height: auto; display: block; }

/* ── Mockups and demos ─────────────────────────────────────────────────────── */
.sc-mocks { display: grid; gap: 1.25rem; }
.sc-mock { margin: .4rem 0 0; }
.sc-mock figcaption { color: var(--muted); font-size: .85rem; margin-top: .4rem; }
.sc-mock-stage {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.sc-mock-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-mock-stage .sc-demo-btn { position: relative; box-shadow: var(--shadow); }
.sc-mock-stage .sc-demo-btn:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }
.sc-mock-stage--live { background: #fff; }
.sc-demo-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

/* ── Wider screens ─────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .sc-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 1.4rem; }
  .sc-feature:not(:has(.sc-feature-pic)) { grid-template-columns: minmax(0, 1fr); }
  .sc-mocks { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
}
@media (min-width: 1280px) {
  .sc-feature { gap: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-card { transition: none; }
}