/**
 * SBX base — structural styles for the Experience runtime's core classes.
 * ≤ ~15KB budget for all first-party CSS (§24). Visual design tokens may be
 * themed by greenshift-child; these are layout mechanics only.
 */

.sbx-experience {
  margin: 2rem 0 0;
}

/* ---- Container envelope (§5.3) ---- */

/*
 * Width (0.2.0, review P14): the band (.sbx-container, carrying the theme or
 * background colour) and the content (.sbx-container__inner) are sized
 * together from the theme's layout sizes, with the pre-0.2.0 numbers as the
 * fallbacks for a theme that emits neither. Text column and Page width
 * confine the band; Full bleed and Edge to edge let it fill the region slot
 * (§22.2). The gutter is the theme's root padding; Edge to edge has none.
 * Never a negative margin: the slot's width is the template's to give.
 */

.sbx-container {
  position: relative;
}

.sbx-container--width-contained {
  max-width: var(--wp--style--global--content-size, 720px);
  margin-left: auto;
  margin-right: auto;
}

.sbx-container--width-wide {
  max-width: var(--wp--style--global--wide-size, 1080px);
  margin-left: auto;
  margin-right: auto;
}

.sbx-container__inner {
  margin: 0 auto;
  padding: 0 var(--wp--style--root--padding-left, 1rem);
}

.sbx-container--width-bleed .sbx-container__inner {
  max-width: var(--wp--style--global--wide-size, 1080px);
}

.sbx-container--width-full .sbx-container__inner {
  max-width: none;
  padding: 0;
}

.sbx-container--padding-none {
  padding-top: 0;
  padding-bottom: 0;
}

.sbx-container--padding-normal {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.sbx-container--padding-large {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.sbx-container--theme-dark {
  background-color: #111;
  color: #f5f5f5;
}

.sbx-container--theme-light {
  background-color: #fafafa;
  color: #111;
}

/* ---- Per-device visibility (§13): server-emitted classes ---- */

@media (min-width: 1025px) {
  .sbx-hide--desktop {
    display: none !important;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .sbx-hide--tablet {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .sbx-hide--mobile {
    display: none !important;
  }
}

/* ---- Layouts ---- */

/*
 * A one-column grid rather than a flex column (0.2.5, review P21, N20): the
 * .sbx-gap--* classes below set `gap`, which Safari draws on a grid from 12 but
 * on a flex container only from 14.1. Items still fill the width, a hidden item
 * still takes no gap, and the same classes serve .sbx-two-col.
 */
.sbx-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.sbx-gap--none {
  gap: 0;
}

.sbx-gap--small {
  gap: 0.75rem;
}

.sbx-gap--normal {
  gap: 1.5rem;
}

.sbx-gap--large {
  gap: 3rem;
}

.sbx-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.sbx-two-col--60-40 {
  grid-template-columns: 3fr 2fr;
}

.sbx-two-col--40-60 {
  grid-template-columns: 2fr 3fr;
}

@media (max-width: 640px) {
  .sbx-two-col--stack-mobile {
    grid-template-columns: 1fr;
  }
}

/* ---- Blocks ---- */

.sbx-text--left {
  text-align: left;
}

.sbx-text--center {
  text-align: center;
}

.sbx-text--right {
  text-align: right;
}

.sbx-heading--left {
  text-align: left;
}

.sbx-heading--center {
  text-align: center;
}

.sbx-heading--right {
  text-align: right;
}

.sbx-image {
  margin: 0;
}

.sbx-image__img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* No stored pixel size (an SVG): fill the column at the image's own ratio,
   capped by the inline max-width of the chosen size (P23). */
.sbx-image__img.sbx-img--fluid {
  width: 100%;
}

.sbx-image__caption {
  font-size: 0.85em;
  opacity: 0.75;
  padding-top: 0.5rem;
}

.sbx-quote {
  margin: 0;
  padding: 1rem 1.5rem;
  border-left: 3px solid currentcolor;
  font-size: 1.15em;
  font-style: italic;
}

.sbx-quote__attribution {
  margin-top: 0.5rem;
  font-size: 0.85em;
  font-style: normal;
  opacity: 0.75;
}

.sbx-divider {
  border: none;
  border-top: 1px solid currentcolor;
  opacity: 0.3;
  margin: 0;
}

.sbx-divider--thick {
  border-top-width: 3px;
}

.sbx-divider--dots {
  border-top-style: dotted;
  border-top-width: 3px;
}

.sbx-spacer--small {
  height: 1rem;
}

.sbx-spacer--medium {
  height: 2rem;
}

.sbx-spacer--large {
  height: 4rem;
}

.sbx-spacer--xl {
  height: 6rem;
}

.sbx-button-wrap--left {
  text-align: left;
}

.sbx-button-wrap--center {
  text-align: center;
}

.sbx-button-wrap--right {
  text-align: right;
}

.sbx-button {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  text-decoration: none;
  font-weight: 600;
  border: 2px solid currentcolor;
}

.sbx-button--primary {
  background: #111;
  color: #fff;
  border-color: #111;
}

.sbx-button--secondary {
  background: transparent;
  color: inherit;
}

.sbx-button--ghost {
  background: transparent;
  color: inherit;
  border-color: transparent;
  text-decoration: underline;
}

.sbx-button:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 2px;
}

.sbx-video__player {
  width: 100%;
  height: auto;
  display: block;
}

.sbx-faq__item,
.sbx-accordion__item {
  border-bottom: 1px solid rgb(128 128 128 / 35%);
}

.sbx-faq__question,
.sbx-accordion__title {
  padding: 0.9rem 0;
  cursor: pointer;
  font-weight: 600;
}

.sbx-faq__question:focus-visible,
.sbx-accordion__title:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 2px;
}

.sbx-faq__answer,
.sbx-accordion__body {
  padding: 0 0 1rem;
}

.sbx-comparison {
  overflow-x: auto;
}

.sbx-comparison__table {
  width: 100%;
  border-collapse: collapse;
}

.sbx-comparison__table th,
.sbx-comparison__table td {
  padding: 0.6rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid rgb(128 128 128 / 35%);
}

.sbx-comparison__caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  padding-bottom: 0.5rem;
}

.sbx-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.5rem;
  border-left: 2px solid currentcolor;
}

.sbx-timeline__item {
  position: relative;
  padding: 0 0 1.5rem;
}

.sbx-timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1.5rem - 5px);
  top: 0.4rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentcolor;
}

.sbx-timeline__label {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.sbx-timeline__title {
  margin: 0.15rem 0 0.35rem;
}

.sbx-timeline__text {
  margin: 0;
}

/* Motion discipline: any future animated state must respect this (§15). */
@media (prefers-reduced-motion: reduce) {
  .sbx-experience *,
  .sbx-experience *::before,
  .sbx-experience *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}