/* CEO Spring Break — site component classes.
   Translated from the design-tool export's _ds_bundle.js (Button, Card,
   SectionHeading, Quote, EdgeTreatment). Fidelity to the export is the bar. */

/* ---------- Button ---------- */
.csb-btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: opacity 120ms ease-out, transform 80ms ease-out;
}
.csb-btn:hover { opacity: .9; }
.csb-btn:active { transform: scale(.98); }

.csb-btn--forest { background: var(--csb-forest); color: var(--csb-tan-light); }
.csb-btn--golden { background: var(--csb-golden); color: var(--csb-forest); }
.csb-btn--persimmon { background: var(--csb-persimmon); color: var(--csb-white); }
.csb-btn--teal { background: var(--csb-teal); color: var(--csb-forest); }
.csb-btn--outline {
  background: transparent;
  color: var(--csb-forest);
  box-shadow: inset 0 0 0 3px var(--csb-forest);
}

.csb-btn--sm { font-size: .9rem; padding: 8px 20px; }
.csb-btn--md { font-size: 1.1rem; padding: 12px 28px; }
.csb-btn--lg { font-size: 1.35rem; padding: 16px 40px; }

/* ---------- Card ---------- */
.csb-card {
  color: var(--csb-forest);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: none;
}
.csb-card--shadow { box-shadow: var(--shadow-card); }
.csb-card--white { background: var(--csb-white); }
.csb-card--tan { background: var(--csb-tan); }
.csb-card--light { background: var(--csb-tan-light); }
.csb-card--skyblue { background: var(--csb-sky-blue); }
.csb-card--golden { background: var(--csb-golden); }
.csb-card--teal { background: var(--csb-teal); }

/* ---------- SectionHeading ---------- */
.csb-heading { text-align: left; }
.csb-heading--center { text-align: center; }
.csb-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--size-h3);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--csb-persimmon);
  margin-bottom: var(--space-3);
}
.csb-heading h1,
.csb-heading h2 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--csb-forest);
  margin: 0;
}
.csb-heading h1 { font-size: var(--size-h1); }
.csb-heading h2 { font-size: var(--size-h2); }
.csb-heading p {
  font-family: var(--font-body);
  font-size: var(--size-subhead);
  line-height: var(--leading-body);
  color: var(--csb-forest);
  max-width: 38em;
  margin: var(--space-4) 0 0;
}

/* ---------- Quote ---------- */
.csb-quote { margin: 0; }
.csb-quote .csb-quote-mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 5rem;
  line-height: .6;
  margin-bottom: var(--space-3);
}
.csb-quote blockquote {
  font-family: var(--font-body);
  font-size: var(--size-subhead);
  line-height: var(--leading-body);
  color: var(--csb-forest);
  margin: 0;
}
.csb-quote figcaption {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--size-h3);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--csb-forest);
  margin-top: var(--space-4);
}

/* ---------- Logo ---------- */
.csb-logo { display: block; height: auto; }

/* ---------- Accent (patterns, absolutely positioned) ---------- */
.csb-accent { display: block; height: auto; }

/* ---------- EdgeTreatment (wave/zigzag color-block separators) ---------- */
.csb-edge {
  width: 100%;
  height: 64px;
  overflow: hidden;
  position: relative;
  pointer-events: none;
}
.csb-edge img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 4000px;
  object-fit: cover;
}
.csb-edge--bottom img { transform: translate(-50%, -50%) rotate(-90deg); }
.csb-edge--top img { transform: translate(-50%, -50%) rotate(90deg); }
.csb-edge--left img { transform: translate(-50%, -50%) rotate(180deg); }
.csb-edge--right img { transform: translate(-50%, -50%); }

/* ---------- Image placeholders (Higgsfield images swap in later) ---------- */
.csb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--csb-forest);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px;
}
.csb-placeholder--teal { background: var(--csb-teal); }
.csb-placeholder--golden { background: var(--csb-golden); }
.csb-placeholder--persimmon { background: var(--csb-persimmon); color: var(--csb-white); }
.csb-placeholder--skyblue { background: var(--csb-sky-blue); }

/* ---------- Waitlist form success state toggle ---------- */
.csb-form-success { display: none; }
.csb-form-success--visible { display: flex; }
.csb-form--hidden { display: none; }
.csb-form-error {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--csb-persimmon);
  display: none;
}
.csb-form-error--visible { display: block; }