/* ============================================================================
   Sarah Erin Thole CNHP — component layer
   Static-CSS port of the Claude Design system's React components. Every rule
   here mirrors the JSX in _ds_bundle.js one-for-one; the cascade order inside
   each component (base -> size -> variant -> hover -> fullWidth -> disabled)
   reproduces the JS style-object spread order, so class order in the markup
   never changes the result.

   Load AFTER tokens.css.
   ========================================================================= */


/* ---------------------------------------------------------------- Button --
   components/core/Button.jsx                                               */

.btn{
  font-family:var(--font-sans);
  font-weight:var(--fw-regular);
  text-transform:uppercase;
  letter-spacing:var(--ls-button);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-3);
  border:1px solid transparent;
  border-radius:var(--radius-none);
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  line-height:1;
  transition:
    background-color var(--dur-base) var(--ease-brand),
    color var(--dur-base) var(--ease-brand),
    border-color var(--dur-base) var(--ease-brand),
    opacity var(--dur-fast) var(--ease-brand);
}

/* sizes — md is the default */
.btn{font-size:var(--fs-eyebrow);padding:17px 34px}
.btn--sm{font-size:10px;padding:12px 22px}
.btn--lg{font-size:13px;padding:22px 46px}

/* variants — primary is the default */
.btn{
  background:var(--action-primary-bg);
  color:var(--action-primary-fg);
  border-color:var(--action-primary-bg);
}
.btn--accent{
  background:var(--action-accent-bg);
  color:var(--action-accent-fg);
  border-color:var(--action-accent-bg);
}
.btn--outline{
  background:transparent;
  color:var(--action-secondary-fg);
  border-color:var(--border-strong);
}
.btn--ghost{
  background:transparent;
  color:var(--action-secondary-fg);
  border-color:transparent;
  padding:10px 0;
  border-bottom:1px solid var(--border-strong);
}
.btn--inverse{
  background:var(--cream-50);
  color:var(--espresso-900);
  border-color:var(--cream-50);
}

/* hovers */
.btn:hover{
  background:var(--action-primary-bg-hover);
  border-color:var(--action-primary-bg-hover);
  color:var(--action-primary-fg);
}
.btn--accent:hover{background:var(--clay-600);border-color:var(--clay-600)}
.btn--outline:hover{background:var(--espresso-900);color:var(--cream-50);border-color:var(--espresso-900)}
.btn--ghost:hover{
  background:transparent;
  color:var(--clay-600);
  border-color:transparent;
  border-bottom-color:var(--clay-600);
}
.btn--inverse:hover{background:transparent;color:var(--cream-50);border-color:var(--cream-50)}

/* fullWidth */
.btn--full{display:flex;width:100%}

/* disabled */
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed}


/* ------------------------------------------------------------------- Tag --
   components/feedback/Tag.jsx                                              */

.tag{
  display:inline-flex;
  align-items:center;
  padding:7px 14px;
  border:1px solid transparent;
  font-family:var(--font-sans);
  font-size:var(--fs-eyebrow);
  text-transform:uppercase;
  letter-spacing:var(--ls-button);
  line-height:1;
  /* tone: sand (default) */
  background:var(--surface-sand);
  color:var(--espresso-900);
}
.tag--clay{background:var(--clay-200);color:var(--clay-600);border-color:transparent}
.tag--sage{background:var(--sage-200);color:var(--forest-700);border-color:transparent}
.tag--outline{background:transparent;color:var(--text-muted);border-color:var(--border-subtle)}
.tag--inverse{background:rgba(246,240,231,.14);color:var(--cream-50);border-color:transparent}


/* --------------------------------------------------------------- Eyebrow --
   components/core/Eyebrow.jsx                                              */

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--space-4);
  font-family:var(--font-sans);
  font-size:var(--fs-eyebrow);
  font-weight:var(--fw-regular);
  text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);
  color:var(--text-muted);
}
.eyebrow--inverse{color:var(--text-on-deep)}
.eyebrow--accent{color:var(--text-accent)}
.eyebrow--rule::before{
  content:"";
  width:44px;
  height:1px;
  background:currentColor;
  opacity:.5;
  flex:none;
}


/* -------------------------------------------------------- SectionHeading --
   components/core/SectionHeading.jsx                                       */

.section-heading{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  text-align:left;
  align-items:flex-start;
  max-width:var(--measure);
}
.section-heading--center{text-align:center;align-items:center}

.section-heading__script{
  font-family:var(--font-script);
  font-size:var(--fs-script);
  line-height:.9;
  color:var(--text-accent);
}
.section-heading__title{
  font-family:var(--font-display);
  font-size:var(--fs-h1);           /* size md — the default */
  line-height:var(--lh-display);
  letter-spacing:var(--ls-display);
  font-weight:var(--fw-light);
  color:var(--text-primary);
  margin:0;
}
.section-heading--lg .section-heading__title{font-size:var(--fs-display-2)}
.section-heading--sm .section-heading__title{font-size:var(--fs-h2)}

.section-heading__lead{
  font-family:var(--font-sans);
  font-size:var(--fs-lead);
  line-height:var(--lh-loose);
  font-weight:var(--fw-light);
  color:var(--text-body);
  max-width:var(--measure-narrow);
}

/* tone: inverse */
.section-heading--inverse .section-heading__script{color:var(--clay-200)}
.section-heading--inverse .section-heading__title{color:var(--text-inverse)}
.section-heading--inverse .section-heading__lead{color:var(--text-on-deep)}


/* ---------------------------------------------------------- NumberedItem --
   components/content/NumberedItem.jsx                                      */

.numbered-item{
  display:grid;
  grid-template-columns:minmax(72px,auto) 1fr;
  gap:var(--space-5);
  align-items:start;
  padding-top:var(--space-5);
  border-top:1px solid var(--border-hairline);
}
.numbered-item__number{
  font-family:var(--font-display);
  font-size:var(--fs-numeral);
  line-height:var(--lh-tight);
  font-weight:var(--fw-light);
  color:var(--clay-400);
}
.numbered-item__body{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.numbered-item__title{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  font-weight:var(--fw-regular);
  color:var(--text-primary);
  margin:0;
}
.numbered-item__text{
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-loose);
  font-weight:var(--fw-light);
  color:var(--text-body);
  max-width:var(--measure);
}

.numbered-item--inverse{border-top-color:rgba(246,240,231,.28)}
.numbered-item--inverse .numbered-item__number{color:var(--clay-200)}
.numbered-item--inverse .numbered-item__title{color:var(--text-inverse)}
.numbered-item--inverse .numbered-item__text{color:var(--text-on-deep)}


/* ------------------------------------------------------------ PhotoFrame --
   components/core/PhotoFrame.jsx                                           */

.photo-frame{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.photo-frame__media{
  position:relative;
  aspect-ratio:3 / 4;                /* override per instance with --ratio */
  aspect-ratio:var(--ratio,3 / 4);
  border-radius:var(--radius-none);
  overflow:hidden;
  background:var(--surface-sand);
  box-shadow:var(--shadow-photo);
}
.photo-frame--arch .photo-frame__media{border-radius:var(--radius-arch)}
.photo-frame--circle .photo-frame__media{border-radius:var(--radius-circle);aspect-ratio:1 / 1}
.photo-frame__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.photo-frame__scrim{
  position:absolute;
  inset:0;
  background:var(--overlay-scrim);
}
.photo-frame__caption{
  font-family:var(--font-sans);
  font-size:var(--fs-eyebrow);
  text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);
  color:var(--text-muted);
}


/* ------------------------------------------------------- TestimonialCard --
   components/content/TestimonialCard.jsx                                   */

.testimonial{
  margin:0;
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  padding:var(--space-7);
  display:flex;
  flex-direction:column;
  gap:var(--space-5);
  box-shadow:var(--shadow-soft);
}
.testimonial__headline{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  line-height:var(--lh-heading);
  font-style:italic;
  font-weight:var(--fw-light);
  color:var(--text-primary);
}
.testimonial__quote{
  font-family:var(--font-sans);
  font-size:var(--fs-small);
  line-height:var(--lh-loose);
  font-weight:var(--fw-light);
  color:var(--text-body);
}
.testimonial__author{
  font-family:var(--font-sans);
  font-size:var(--fs-eyebrow);
  text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);
  color:var(--text-accent);
}

.testimonial--inverse{background:transparent;border-color:rgba(246,240,231,.28);box-shadow:none}
.testimonial--inverse .testimonial__headline{color:var(--text-inverse)}
.testimonial--inverse .testimonial__quote{color:var(--text-on-deep)}
.testimonial--inverse .testimonial__author{color:var(--clay-200)}


/* ------------------------------------------------------------- CTABanner --
   components/core/CTABanner.jsx                                            */

.cta-banner{
  position:relative;
  overflow:hidden;
  background:var(--surface-deep);
  padding:var(--section-y) var(--gutter);
  display:grid;
  place-items:center;
  text-align:center;
}
.cta-banner--sand{background:var(--surface-sand)}
.cta-banner--clay{background:var(--surface-clay)}
.cta-banner--image{background:transparent}

.cta-banner__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.cta-banner__scrim{
  position:absolute;
  inset:0;
  background:var(--surface-overlay);
}
.cta-banner__inner{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-5);
  max-width:720px;
}
.cta-banner__script{
  font-family:var(--font-script);
  font-size:var(--fs-script);
  line-height:.9;
  color:var(--clay-200);
}
.cta-banner__title{
  font-family:var(--font-display);
  font-size:var(--fs-display-2);
  line-height:var(--lh-display);
  font-weight:var(--fw-light);
  color:var(--text-inverse);
  margin:0;
}
.cta-banner__lead{
  font-family:var(--font-sans);
  font-size:var(--fs-lead);
  line-height:var(--lh-loose);
  font-weight:var(--fw-light);
  color:var(--text-on-deep);
}
/* tone="sand" is the one non-inverse tone */
.cta-banner--sand .cta-banner__script{color:var(--clay-600)}
.cta-banner--sand .cta-banner__title{color:var(--text-primary)}
.cta-banner--sand .cta-banner__lead{color:var(--text-body)}


/* --------------------------------------------------- Input / OptInForm ----
   components/forms/Input.jsx + components/forms/OptInForm.jsx              */

.optin{
  display:flex;
  flex-direction:column;
  gap:var(--space-5);
  max-width:420px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.field__label{
  font-family:var(--font-sans);
  font-size:var(--fs-eyebrow);
  text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);
  color:var(--text-muted);
}
.field__input{
  appearance:none;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border-subtle);
  border-radius:0;
  padding:12px 2px;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  font-weight:var(--fw-light);
  color:var(--text-primary);
  outline:none;
  transition:border-color var(--dur-base) var(--ease-brand);
  width:100%;
}
.field__input:focus{border-bottom-color:var(--clay-500)}
.field__input::placeholder{color:var(--text-muted);opacity:.65}
.field__hint{
  font-family:var(--font-sans);
  font-size:var(--fs-small);
  font-weight:var(--fw-light);
  color:var(--text-muted);
}
.field--error .field__input{border-bottom-color:var(--status-error)}
.field--error .field__hint{color:var(--status-error)}

.optin__note{
  font-family:var(--font-sans);
  font-size:var(--fs-small);
  font-weight:var(--fw-light);
  color:var(--text-muted);
}

/* tone: inverse */
.optin--inverse .field__label{color:var(--text-on-deep)}
.optin--inverse .field__input{border-bottom-color:rgba(246,240,231,.42);color:var(--cream-50)}
.optin--inverse .field__input:focus{border-bottom-color:var(--clay-500)}
.optin--inverse .field__hint,
.optin--inverse .optin__note{color:var(--text-on-deep)}


/* ------------------------------------------------------------ SiteFooter --
   components/navigation/SiteFooter.jsx                                     */

.site-footer{
  background:var(--surface-deep);
  color:var(--text-on-deep);
  padding:var(--space-9) var(--gutter) var(--space-6);
  display:flex;
  flex-direction:column;
  gap:var(--space-7);
}
.site-footer__row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-7);
  justify-content:space-between;
  align-items:flex-start;
}
.site-footer__brand{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.site-footer__wordmark{
  font-family:var(--font-display);
  font-size:28px;
  letter-spacing:.16em;
  color:var(--cream-50);
}
.site-footer__cred{
  font-family:var(--font-sans);
  font-size:9px;
  letter-spacing:var(--ls-eyebrow);
  color:var(--clay-200);
}
.site-footer__nav{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.site-footer__nav a{
  font-family:var(--font-sans);
  font-size:var(--fs-eyebrow);
  text-transform:uppercase;
  letter-spacing:var(--ls-button);
  color:var(--cream-100);
  text-decoration:none;
  border:none;
}
.site-footer__nav a:hover{color:var(--clay-200)}
.site-footer__social{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.site-footer__insta-script{
  font-family:var(--font-script);
  font-size:30px;
  line-height:1;
  color:var(--clay-200);
}
.site-footer__handle{
  font-family:var(--font-sans);
  font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-button);
  color:var(--cream-50);
  text-decoration:none;
  border:none;
}
.site-footer__handle:hover{color:var(--clay-200)}
.site-footer__links{
  display:flex;
  gap:var(--space-4);
}
.site-footer__links a{
  font-family:var(--font-sans);
  font-size:var(--fs-small);
  color:var(--cream-100);
  text-decoration:none;
  border-bottom:1px solid rgba(246,240,231,.4);
}
.site-footer__links a:hover{color:var(--cream-50);border-bottom-color:var(--cream-50)}
.site-footer__note{
  font-family:var(--font-sans);
  font-size:var(--fs-small);
  font-weight:var(--fw-light);
  color:rgba(246,240,231,.6);
  border-top:1px solid rgba(246,240,231,.2);
  padding-top:var(--space-5);
}