/* ============================================================
   Treantly brand component CSS — SUBSET copy of
   design-studio/templates/components/components.css, scoped for
   use inside WordPress content. Consumes the token custom
   properties declared in style.css (:root). theme.json owns the
   block Global Styles; this file styles the className-based
   components the html-to-blocks-converter preserves on blocks.
   ============================================================ */

/* ---- Typography helpers ---- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--t-mid-green);
  margin: 0 0 12px;
}
.lead    { font-size: 18px; color: var(--t-mid-green); }
.muted   { color: var(--t-text-muted); }
.subtext { font-weight: 300; color: var(--t-mid-green); }

/* Key-word highlight (used sparingly per brand) */
.hl      { background: linear-gradient(transparent 60%, var(--t-yellow) 60%); }
.hl-lime { background: linear-gradient(transparent 60%, var(--t-lime) 60%); }

/* ---- Layout ---- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--container-pad); }
.section   { padding: var(--space-9) 0; }
.stack > * + * { margin-top: var(--space-4); }

/* ---- Surfaces ---- */
.surface-cream  { background: var(--t-bg-warm); }
.surface-green  { background: var(--t-bg-green); }
.surface-forest { background: var(--t-forest); color: var(--t-bg-warm); }
.surface-forest h1, .surface-forest h2, .surface-forest h3 { color: var(--t-white); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 13px 28px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  letter-spacing: 0.01em; border: none; border-radius: var(--r-lg);
  cursor: pointer; transition: all var(--transition); text-decoration: none;
}
.btn-lg { font-size: 16px; padding: 16px 40px; }
.btn-primary { background: var(--t-lime); color: var(--t-forest); }
.btn-primary:hover { background: #d8f07a; transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(227,245,153,0.4); }
.btn-dark { background: var(--t-forest); color: var(--t-white); }
.btn-dark:hover { background: var(--t-forest-mid); }
.btn-ghost { background: transparent; color: var(--t-white);
  border: 1.5px solid rgba(255,255,255,0.4); }
.btn-ghost:hover { border-color: var(--t-white); }

/* ---- Cards ---- */
.card {
  display: flex; flex-direction: column;
  background: var(--t-white); border: 1px solid var(--t-border-light);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden;
}
.card-top    { padding: 24px 24px 20px; flex: 1; }
.card-bottom { background: var(--t-bg-warm); border-top: 1px solid var(--t-border-light);
  padding: 16px 24px; }

/* ---- Pills / tags ---- */
.tag {
  display: inline-block; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--t-bg-green); color: var(--t-forest);
  font-size: 12.5px; font-weight: 500;
}

/* ---- Icon tile (common hero/why pattern) ---- */
.icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--r-md);
  background: var(--t-bg-green); color: var(--t-forest);
}

/* ---- Grid helpers ---- */
.grid   { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .section { padding: var(--space-8) 0; }
}