/* ==========================================================================
   Space subcategory template
   ========================================================================== */

.sp-hero { position: relative; height: 520px; overflow: hidden; }
.sp-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 12, .1) 40%, rgba(20, 16, 12, .55) 100%);
}
.sp-hero__body {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 48px;
  color: var(--cream);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}
.sp-hero__kicker { font-size: 11px; letter-spacing: .26em; font-weight: 600; opacity: .9; margin-bottom: 14px; }
.sp-hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.08;
}
.sp-hero__lede { margin-top: 14px; font-size: 15.5px; line-height: 1.7; opacity: .92; max-width: 540px; }

.sp-hero__stats { display: flex; gap: 36px; flex-shrink: 0; text-align: right; }
.sp-stat__n { font-family: var(--serif); font-size: 32px; line-height: 1; }
.sp-stat__l { font-size: 10.5px; letter-spacing: .16em; opacity: .8; margin-top: 4px; }

/* ---------- Scenes ---------- */
.sp-scenes { padding-top: 100px; padding-bottom: 60px; }
.sp-scene-grid { gap: 40px 32px; }
.sp-scene__name { display: block; font-family: var(--serif); font-size: 21px; }
.sp-scene__meta {
  display: block;
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 500;
  margin-top: 5px;
}
.sp-none { padding: 40px 0 8px; font-size: 15px; line-height: 1.85; color: var(--muted-dark); max-width: 640px; }
.sp-none a { border-bottom: 1px solid var(--rule-strong); }

/* The mood chips reuse the shared .filter look at a smaller size */
.sp-scenes .filter { font-size: 12px; padding: 9px 16px; }

/* ---------- Category cards ---------- */
.sp-cats { gap: 26px; }
.sp-cat__count { font-size: 10.5px; letter-spacing: .14em; color: var(--muted); white-space: nowrap; }

/* ---------- CTA ---------- */
.sp-cta {
  border: 1px solid rgba(29, 28, 25, .16);
  background: var(--cream-warm);
  padding: 56px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.sp-cta__btn { flex-shrink: 0; padding: 16px 32px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1279px) {
  .sp-hero { height: 440px; }
  .sp-scenes { padding-top: 72px; }
  .sp-cta { padding: 40px 40px; gap: 32px; }
}

@media (max-width: 1023px) {
  .sp-hero { height: 380px; }
  .sp-hero__body { flex-direction: column; align-items: flex-start; gap: 24px; }
  .sp-hero__stats { text-align: left; }
  .sp-cta { flex-direction: column; align-items: flex-start; gap: 24px; }
}

@media (max-width: 767px) {
  .sp-hero { height: 320px; }
  .sp-hero__body { bottom: 26px; }
  .sp-hero__lede { font-size: 14.5px; }
  .sp-stat__n { font-size: 26px; }
  .sp-scenes { padding-top: 48px; padding-bottom: 40px; }
  .sp-scene__name { font-size: 19px; }
  .sp-cta { padding: 28px 22px; }
  .sp-cta__btn { align-self: stretch; }
}