/* Global public shell — navigation lives in components.css */

.page-section {
  position: relative;
  padding-block: var(--space-section);
}

.page-section--tight {
  padding-block: clamp(3rem, 8vw, 5.5rem);
}

.page-section__inner {
  width: min(100% - 2rem, var(--container-default));
  margin-inline: auto;
}

.page-section__inner--wide {
  width: min(100% - 2rem, var(--container-wide));
}

.surface-basalt {
  background:
    linear-gradient(180deg, rgba(17, 17, 17, 0.92), rgba(8, 8, 8, 0.98)),
    var(--color-basalt);
  border-block: var(--border-subtle);
}

.surface-obsidian {
  background: var(--surface-obsidian, var(--color-obsidian));
}

.surface-breath {
  background: var(--surface-breath, #0a0a0a);
}

.surface-live {
  background:
    radial-gradient(ellipse 70% 60% at 70% 40%, rgba(94, 9, 12, 0.16), transparent 55%),
    linear-gradient(180deg, #0b0b0d 0%, #070708 100%);
  border-block: var(--border-subtle);
}

.media-placeholder {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, #161616 0%, #0a0a0a 55%, #121212 100%);
  border: var(--border-subtle);
}

.media-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 43, 43, 0.08), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.04), transparent 35%);
  pointer-events: none;
}

.media-placeholder__label {
  position: absolute;
  inset: auto 1rem 1rem auto;
  z-index: 1;
  color: var(--color-smoke);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.media-focal {
  object-fit: cover;
  object-position: var(--media-object-position, center center);
}

@media (max-width: 767px) {
  .media-focal {
    object-position: var(
      --media-object-position-mobile,
      var(--media-object-position, center center)
    );
  }
}