/**
 * Surface Component Styles
 *
 * Variants:
 *   white          → pure white (#FFFFFF)
 *   ambience_light → light beige (--ambience, #EBE6E1)
 *   ambience_dark  → medium beige (--ambience-500, #DBD4CE)
 *   trust          → dark maroon (--trust, #550A2D) — white text
 *   attitude       → pink (--attitude, #FFA0FA)
 *   academy        → warm brown (--academy-300, #C0A57B)
 */

/* ── Variable defaults (ambience) ── */
.surface {
  --surface-bg:   var(--ambience, #ebe6e1);
  --surface-text: var(--trust, #550a2d);

  background-color: var(--surface-bg);
  color: var(--surface-text);
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* cover all available space w/ color */

  /* workarounds galore */
  &:not(.container-100):not(.container--fullbleed) {
    padding-inline: var(--spacing-500);
    padding-block: var(--spacing-600);
  }
}

/* ── Variants ── */
.surface--white {
  --surface-bg:   var(--white, #ffffff);
  --surface-text: var(--trust, #550a2d);
}

.surface--ambience_light {
  --surface-bg:   var(--ambience-200);
  --surface-text: var(--trust, #550a2d);
}

.surface--ambience_dark {
  --surface-bg:   var(--ambience);
  --surface-text: var(--trust, #550a2d);
}

.surface--trust {
  --surface-bg:   var(--trust, #550a2d);
  --surface-text: var(--white, #ffffff);
}

.surface--attitude {
  --surface-bg:   var(--attitude, #550a2d);
  --surface-text: var(--trust, #550a2d);
}

.surface--academy {
  --surface-bg:   var(--academy-300, #c0a57b);
  --surface-text: var(--trust, #550a2d);
}

/* ── Background image ── */

.surface--has-bg-image {
  position: relative;
}

.surface__bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.surface__bg-image > *,
.surface__bg-image .media,
.surface__bg-image figure,
.surface__bg-image picture,
.surface__bg-image [class*="field"] {
  display: block;
  width: 100%;
  height: 100%;
}

.surface__bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.surface__bg-image img {
  object-position: var(--bg-x, center) var(--bg-y, center);
}

.surface__bg-image--left   { --bg-x: left; }
.surface__bg-image--center { --bg-x: center; }
.surface__bg-image--right  { --bg-x: right; }

.surface__bg-image--v-top    { --bg-y: top; }
.surface__bg-image--v-center { --bg-y: center; }
.surface__bg-image--v-bottom { --bg-y: bottom; }

.surface--has-bg-image > :not(.surface__bg-image) {
  position: relative;
  z-index: 1;
}