/* =============================================================================
   BillGrid public site: a close-up of the real app on a tinted stage. One component at a time (a client's
   money, a project's work, a schedule, an invoice), captured at 3x by scripts/site-closeups.mjs and shown at
   least at the app's own size, so its words read at a glance. Always flat: no tilt, no perspective.
   Used by the home page, the features directory, the feature pages and the trade pages; method and rules in
   docs/marketing/FEATURE_SCREENSHOTS.md ("Close-ups").
   ============================================================================= */

.spotlight {
  --spot: var(--stage-gold);
  --spot-pad: clamp(20px, 5vw, 64px);
  margin: 0;
  padding: var(--spot-pad);
  overflow: hidden;
  border-radius: clamp(18px, 2.4vw, 28px);
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, var(--spot), var(--ink) 5%) 0%, transparent 70%),
    var(--spot);
}
.spotlight--sage { --spot: var(--stage-sage); }
.spotlight--sky { --spot: var(--stage-sky); }
.spotlight--clay { --spot: var(--stage-clay); }
.spotlight--sand { --spot: var(--stage-sand); }

/* the screen: as wide as the stage allows, never wider than --shot (its CSS size times the zoom the page wants);
   two classes, so a page's own figure and img rules never undo it */
.spotlight .spotlight__shot {
  display: block;
  width: 100%;
  max-width: var(--shot, 100%);
  height: auto;
  margin-inline: auto;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 50px 100px -48px rgba(40, 32, 16, .55), 0 18px 36px -24px rgba(40, 32, 16, .25), 0 0 0 1px rgba(40, 32, 16, .07);
}
/* a screen that rises out of the bottom of the stage (a long list, a page that goes on); its caption moves above it */
.spotlight--rise { display: flex; flex-direction: column; padding-bottom: 0; }
.spotlight--rise .spotlight__shot, .spotlight--rise .spotlight__pair .spotlight__shot { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* two screens side by side, each at its own size (a rule and the example it makes) */
.spotlight__pair { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: center; }

/* screens one above the other, sharing the stage (a client's money over its project's work) */
.spotlight__stack { display: grid; gap: clamp(14px, 2vw, 24px); }

/* a phone's page, in a quiet bezel */
.spotlight .spotlight__shot--phone { max-width: var(--shot, 360px); border: 6px solid var(--sand-900); border-radius: 30px; }
.spotlight--rise .spotlight__shot--phone { border-bottom: 0; }

.spotlight > figcaption {
  padding: 0;
  background: none;
  margin-top: clamp(16px, 2vw, 24px);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--caption);
  text-align: center;
}
.spotlight--rise > figcaption { order: -1; margin: 0 0 clamp(16px, 2vw, 24px); }

@media (max-width: 720px) {
  .spotlight { --spot-pad: 16px; }
  .spotlight__pair { grid-template-columns: minmax(0, 1fr); }
}